/* Calculator */
.material-calculator { box-shadow: 0 2px 5px -2px #000; display: inline-block; position: relative; overflow: hidden; width: 100%; }
.material-calculator * { box-sizing: border-box; line-height: 1; }
.calculator-header,
.calculator-body { padding: 15px; }
/* Header */
.calculator-header { box-shadow: 0 2px 5px -2px #000; }
.calculator-header h3 { margin: 0; font-size: 1.4rem; }
/* Body */
.calculator-form { margin-bottom: 15px; }
.calculator-body .input-wrap:not(:last-of-type) { margin-bottom: 15px; }
.calculator-body .input-wrap.error input { border-color: #e74c3c; }
.calculator-body input { width: 100%; outline: none; border: 1px solid #ccc; padding: 10px; font-size: 1rem; }
.calculator-body input:focus { width: 100%; border-color: #466410; }
.calculator-body p { font-size: 1rem; margin: 0; }
.calculator-body .input-wrap p { margin: 0 0 5px; }
.calculator-body .button-wrap { width: 100%; transition: transform 0.2s, opacity 0.2s; opacity: 1; transform: translateX(0); text-align: right; }
.calculator-body button { background: #466410; font-size: 1rem; color: #fff; border: none; outline: none; padding: 10px 20px; box-shadow: 0 2px 5px -2px #000; float: right; cursor: pointer; transition: background 0.2s; }
.calculator-body button:hover { background: #097225; }
.calculator-body .result-wrap { position: relative; bottom: 0%; left: 100%; width: 100%; padding: 15px; transition: transform 0.2s; transform: translateY(0%); -webkit-transform: translateY(0%); -moz-transform: translateY(0%); transform: translate3d(0, 0%, 0); -webkit-transform: translate3d(0, 0%, 0); -moz-transform: translate3d(0, 0%, 0); }
.calculator-body .result-wrap > p { overflow: hidden; margin-top: 5px; }
.calculator-body .close { font-size: 1rem; font-weight: 700; color: #fff; float: left; background: #e74c3c; padding: 7px 10px; box-shadow: 0 2px 5px -2px #000; cursor: pointer; margin-right: 10px; }
/* Clearfix */
.calculator-body:after { content: ""; display: table; clear: both; }
/* State change */
.material-calculator.calculated .button-wrap { transform: translateX(-100%); opacity: 0; }
.material-calculator.calculated .result-wrap { transform: translateX(-100%); -webkit-transform: translateX(-100%); -moz-transform: translateX(-100%); transform: translate3d(-100%, 0, 0); -webkit-transform: translate3d(-100%, 0, 0); -moz-transform: translate3d(-100%, 0, 0); }
.material-calculator p.error { color: #e74c3c; }
/* SVG */
.calculator-body .svg-wrap { margin: 10px 0 25px; }
.calculator-body svg path { transition: fill 0.5s; }
/* Rectangle */
svg#rectangle .st0{fill:#169146;}
svg#rectangle .st1{fill:none;stroke:#196534;stroke-miterlimit:10;}
svg#rectangle .st2{fill:rgba(204, 204, 203, 0.7);}
svg#rectangle .st3{fill:#196534;}
svg#rectangle .st4{font-family:'Arial';}
svg#rectangle .st5{font-size:16px;}
svg#rectangle.width #width { fill: #97d700 !important; }
svg#rectangle.length #length,
svg#rectangle.length #depth { fill: #97d700 !important; }
svg#rectangle.depth #depth { fill: #97d700 !important; }
.svg-wrap.error-width svg#rectangle #width,
.svg-wrap.error-length svg#rectangle #length,
.svg-wrap.error-depth svg#rectangle #depth { fill: #e74c3c; }
/* Circle */
svg#circle .st0{fill:#0B6132;}
svg#circle .st1{fill:#179146;}
svg#circle .st2{fill:rgba(204, 204, 203, 0.7);}
svg#circle .st3{font-family:'Arial';}
svg#circle .st4{font-size:16px;}
svg#circle .arrows{fill:rgba(204, 204, 203, 0.7);}
svg#circle.depth #depth { fill: #97d700 !important; }
svg#circle.diameter .arrows { fill: #97d700 !important; }
.svg-wrap.error-diameter #circle .arrows,
.svg-wrap.error-depth #depth { fill: #e74c3c; }
/* Triangle */
svg#triangle .st0{fill:#189246;}
svg#triangle .st1{fill:#0C6433;}
svg#triangle .st2{fill:rgba(204, 204, 203, 0.7);}
svg#triangle .st3{fill:none;stroke:#0C6433;stroke-miterlimit:10;}
svg#triangle .st4{font-family:'Arial';}
svg#triangle .st5{font-size:16px;}
svg#triangle.sideOne #side1,
svg#triangle.sideOne #depth { fill: #97d700 !important; }
svg#triangle.sideTwo #side2 { fill: #97d700 !important; }
svg#triangle.sideThree #side3 { fill: #97d700 !important; }
svg#triangle.depth #depth { fill: #97d700 !important; }
.svg-wrap.error-sideOne #side1,
.svg-wrap.error-sideTwo #side2,
.svg-wrap.error-sideThree #side3,
.svg-wrap.error-depth #depth { fill: #e74c3c; }