:root{--inputPanelWidth:40%;--arrowWidth:40px;--inputMarginRight:50px}@-webkit-keyframes show{from{opacity:0}to{opacity:1}}@keyframes show{from{opacity:0}to{opacity:1}}@-webkit-keyframes hide{from{opacity:1}to{opacity:0}}@keyframes hide{from{opacity:1}to{opacity:0}}@-webkit-keyframes vibration{0%{left:-1px;top:1px}50%{top:0;left:0}100%{top:0;left:-1px}}@keyframes vibration{0%{left:-1px;top:1px}50%{top:0;left:0}100%{top:0;left:-1px}}@-webkit-keyframes rotation360{100%{transform:rotate(360deg)}}@keyframes rotation360{100%{transform:rotate(360deg)}}@-webkit-keyframes vickers{0%{-webkit-filter:blur(0);filter:blur(0);opacity:0;top:0}10%{-webkit-filter:blur(.5px);filter:blur(.5px);opacity:1;top:0}10%{-webkit-filter:blur(1px);filter:blur(1px)}49%{-webkit-filter:blur(1px);filter:blur(1px)}32%{-webkit-filter:blur(0);filter:blur(0);opacity:1;top:92%}80%{opacity:1;top:92%}95%{opacity:1;top:92%}100%{opacity:0;top:92%}}@keyframes vickers{0%{-webkit-filter:blur(0);filter:blur(0);opacity:0;top:0}10%{-webkit-filter:blur(.5px);filter:blur(.5px);opacity:1;top:0}10%{-webkit-filter:blur(1px);filter:blur(1px)}49%{-webkit-filter:blur(1px);filter:blur(1px)}32%{-webkit-filter:blur(0);filter:blur(0);opacity:1;top:95%}80%{opacity:1;top:95%}95%{opacity:1;top:95%}100%{opacity:0;top:95%}}@-webkit-keyframes rockwell{0%{-webkit-filter:blur(0);filter:blur(0);opacity:0;top:0}10%{-webkit-filter:blur(.5px);filter:blur(.5px);opacity:1;top:0}10%{-webkit-filter:blur(1px);filter:blur(1px)}30%{-webkit-filter:blur(1px);filter:blur(1px)}31%{-webkit-filter:blur(0);filter:blur(0);top:85%}35%{top:85%}52%{top:85%}58%{opacity:1;top:92%}63%{opacity:1;top:92%}70%{opacity:1;top:89%}75%{opacity:1;top:89%}95%{opacity:1;top:89%}100%{opacity:0;top:89%}}@keyframes rockwell{0%{-webkit-filter:blur(0);filter:blur(0);opacity:0;top:0}10%{-webkit-filter:blur(.5px);filter:blur(.5px);opacity:1;top:0}10%{-webkit-filter:blur(1px);filter:blur(1px)}30%{-webkit-filter:blur(1px);filter:blur(1px)}31%{-webkit-filter:blur(0);filter:blur(0);top:92%}35%{top:92%}52%{top:92%}58%{opacity:1;top:95%}63%{opacity:1;top:95%}70%{opacity:1;top:92%}75%{opacity:1;top:92%}95%{opacity:1;top:92%}100%{opacity:0;top:92%}}html{height:100%;padding:0;margin:0}body{font-family:Exo,Arial,sans-serif;font-size:1em;height:100%;padding:0;margin:0;display:flex;flex-direction:column}.app{padding:10px}.app-header{width:100%}.app-title{margin:0;font-size:1.7em;font-weight:400;color:var(--titleColor);margin-bottom:10px;text-align:center}.mainContent .pane{font-family:Exo,sans-serif}.calculatorsMainContent{background-color:transparent;margin:20px 0}.conversionInputContainer{padding:15px;border-radius:8px;margin:0 15px}.input-text{text-align:center;display:flex;flex-direction:column;align-items:center}.input-text input{min-height:40px;width:120px;text-align:center;padding-left:5px;padding-right:5px;font-family:Exo,sans-serif;font-weight:500;font-size:1.2em;border:none;border-radius:6px;-webkit-appearance:none;-moz-appearance:none;display:inline-block;background-color:var(--inputBkg);color:#fff;transition:.2s;outline-color:var(--test)}.input-text input::-webkit-input-placeholder{line-height:calc(1.2em + 10px)!important;padding-left:5px!important;padding-right:5px!important;min-height:40px!important;color:#fff}.input-text input.error{background-color:red!important;color:#fff!important}.input-text input:active,.input-text input:focus{background-color:#5f6c84;border:4px #000}.input-prepend{margin-bottom:5px}.input-append{margin-top:5px}.conversionResult{opacity:.1;border-radius:6px;margin:0 auto;font-size:.9em;text-align:center;width:118px;height:45px;line-height:45px;position:relative;background-color:var(--inputResultBkg);color:#fff}.conversionResult.activate{opacity:1}.conversionResult .big{font-size:130%;font-weight:700}.conversionResult .unitResult{position:absolute;right:-41px}#convertedToLabel{text-align:center;color:var(--winoaDarkGrey);margin-top:20px}.animationContent{display:flex;flex-direction:column;flex-grow:1}.animations{display:flex;flex-grow:1;max-height:400px;min-height:300px;background-color:#15204b;color:#fff;border-radius:8px;position:relative;min-width:300px;max-width:100%;box-sizing:border-box}.animations .left{border-right:1px dashed #fff}.animations .left,.animations .right{flex-basis:50%;position:relative;padding:10px 5px;box-sizing:border-box;display:flex;flex-direction:column;padding:30px;box-sizing:border-box}.animations .left .subtitle,.animations .right .subtitle{font-weight:400;text-align:center;margin-bottom:10px}.animations .subtitle:after{position:relative;content:'';display:block;height:15px;margin-top:10px;background-position:center;background-repeat:no-repeat;background-size:contain}.animations .left .subtitle:after{background-image:url(../../img/calculators/hardnessConversion/squareVickers.svg)}.animations .right .subtitle:after{background-image:url(../../img/calculators/hardnessConversion/roundRockwellC.svg)}.animations .symbol{height:65px;margin-top:15px;background-size:contain;background-repeat:no-repeat;background-position:center}.animations .left .symbol{background-image:url(../../img/calculators/hardnessConversion/vickersSymbol.svg)}.animations .right .symbol{background-image:url(../../img/calculators/hardnessConversion/rockwellCSymbol.svg)}.animations .animArrowContainer{margin-bottom:20px;box-sizing:border-box;flex-grow:1}.animations .animArrowContainer:after{content:'';display:block;position:relative;height:30px;top:calc(100% - 33px);border-radius:0 0 6px 6px;width:100%;background:linear-gradient(to bottom,rgba(0,0,0,.3) 0,rgba(0,0,0,0) 100%);border-top:1px solid #fff}.animations .arrow{position:relative;bottom:0;width:100%;height:30px;background-size:contain;background-position:center;background-repeat:no-repeat;background-image:url(../../img/calculators/hardnessConversion/arrowSymbol.svg)}.animations .left .arrow{-webkit-animation:vickers;animation:vickers;-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}.animations .right .arrow{-webkit-animation:rockwell;animation:rockwell;-webkit-animation-duration:3s;animation-duration:3s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:linear;animation-timing-function:linear}button{transition:0s}button:active{-webkit-filter:brightness(120%);filter:brightness(120%);outline:0;transition:.2s}#unitSwitchLabel{color:var(--winoaDarkBlue);text-transform:uppercase}.btnSwitchUnit{padding:10px;text-align:center;border-radius:8px;background-color:var(--winoaLightGrey);flex-grow:1;width:100%;box-sizing:border-box}.toggle.centered{display:flex;align-items:center;justify-content:center;margin-top:10px}.toggle .label{font-size:.9em;transition:color .2s ease;color:var(--winoaDarkGrey);width:40px}.toggle .label.left{text-align:right}.toggle .label.right{text-align:left}.toggle .label.active{color:var(--winoaDarkBlue);font-weight:700}.switch{position:relative;display:inline-block;width:60px;height:34px;margin:0 10px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--winoaDarkBlue);transition:.4s;border-radius:34px}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider:before{transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}.result{display:flex;flex-direction:column;align-items:center;justify-content:center}@media (min-width:800px){.app-header{width:var(--inputPanelWidth);max-width:500px;margin-right:var(--inputMarginRight)}.animationContent{display:flex;flex-direction:row;flex-grow:0}.animationContent .inputs{flex-basis:var(--inputPanelWidth);display:flex;margin:20px 0;flex-shrink:1;min-width:380px;max-width:500px}.animationContent .inputContent{margin:0 var(--inputMarginRight) 0 0;border-right:1px solid var(--winoaDarkBlue);box-sizing:border-box;flex-grow:1;width:calc(100% - 50px)}.animations:before{content:'';background-color:#15204b;width:var(--arrowWidth);height:40px;position:absolute;top:calc(50% - 25px);left:-39px;-webkit-clip-path:polygon(0 50%,100% 0,100% 100%);clip-path:polygon(0 50%,100% 0,100% 100%)}.btnSwitchUnit{width:calc(100% - 10px)}}