app.css

@import url(https://fonts.googleapis.com/css?family=Advent+Pro:300,400,700&display=swap&subset=greek);@import url(https://fonts.googleapis.com/css?family=Dancing+Script:700&display=swap);body,html{background:#fff;display:flex;align-items:center;justify-content:center;margin:0;padding:0;width:100%;height:100%;font-size:100%;font-family:Advent Pro,arial,sans-serif;overflow-x:hidden;overflow-y:visible}*,:after,:before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0}:focus{outline-style:none;box-shadow:none;border-color:transparent}div:empty{width:0;height:0;padding:0!important;margin:0}.spacer,.spacer:empty{height:1rem;width:100%}button,h1,h2,h3,h4,h5,h6,input{font-family:Advent Pro,arial,sans-serif;margin:0;padding:0 0 1.25em}h3{color:#7d7d7d;font-weight:400}p{text-align:center;margin:0;padding:0 0 1em}img{max-width:100%;height:auto}input[type=text]{height:3rem;margin-bottom:1rem;border-radius:3rem;border:0;background:#eee;padding:0 1rem;width:100%;max-width:320px;font-size:1.5rem}input[type=file]{display:none}.upload{display:inline-block;cursor:pointer;border-radius:30px;background:#033450;color:#fff}.upload h4{flex-basis:unset;font-weight:300;padding:6px 0 6px 18px}.upload:hover{background-color:#1b7791}.uploadIcon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'%3E%3Cpath d='M127.951 85.504l-2.108 17.744c-.46 3.871-3.756 6.783-7.626 6.783l-43.882-.038v.038H9.758c-3.871 0-7.128-2.913-7.588-6.783L.062 85.504c-.307-2.376.537-4.714 2.223-6.4l20.312-19.89 10.769-.69-19.392 19.392h25.409l2.376 15.79h44.456l2.414-15.79H114L94.609 58.524l10.769.728 20.312 19.852c1.686 1.686 2.529 4.024 2.261 6.4zM64.984 17.968L32.178 45.753h21.807V75.54h22.037V45.753H97.79L64.984 17.968z' fill='%23fff'/%3E%3C/svg%3E");height:40px!important;width:82px!important;background-repeat:no-repeat;background-position:16px;background-size:20px}input.deactivated{color:#c3c3c3;background:#e2e2e2;pointer-events:none}label{display:flex;align-items:center}label h4{padding-right:10px}.button,button{border:0;margin:0 .5rem;padding:0;width:calc(100% - 1rem);max-width:320px;height:3rem;border-radius:3rem;font-size:1.25rem;display:flex;align-items:center;justify-content:center;background:#033450;color:#fff;position:relative;overflow:hidden;transition:background-color .3s}.button:hover,button:hover{background-color:#1b7791}.button:only-child,button:only-child{margin:0;width:100%}.button:first-child,button:first-child{margin-left:0}.button:last-child,button:last-child{margin-right:0}.button.active,button.active{background:#fb991a;color:#000}.button>*,button>*{position:relative}.button span,button span{display:block}.button:before,button:before{content:"";position:absolute;top:50%;left:50%;display:block;width:0;padding-top:0;border-radius:100%;background-color:rgba(236,240,241,.3);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.button:active:before,button:active:before{width:120%;padding-top:120%;transition:width .2s ease-out,padding-top .2s ease-out}.button.deactivated,button.deactivated{background:#465761;color:#c3c3c3;pointer-events:none}.checkbox{display:flex;align-items:center;max-width:520px;margin:auto;padding:0 10px}.checkbox input{padding:0;height:auto;width:auto;margin-bottom:0;display:none;cursor:pointer}.checkbox label{position:relative;cursor:pointer;height:100%;display:flex;align-items:center}.checkbox label:before{content:"";-webkit-appearance:none;background-color:#033450;border:2px solid #033450;box-shadow:0 1px 2px rgba(0,0,0,.05),inset 0 -15px 10px -12px rgba(0,0,0,.05);display:inline-block;cursor:pointer;margin-right:5px;height:2rem;width:2rem;border-radius:5px}.checkbox input:checked+label:after{content:"";display:block;position:absolute;top:1px;left:9px;width:14px;height:23px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.deactivated{pointer-events:none}.message,.note{font-size:1rem;text-align:left}.message{color:#c10000;text-align:center;padding:1em .5em 0;width:100%}#app{display:flex;align-items:flex-start;justify-content:center;flex-wrap:wrap;font-size:1.25rem}#app,.container{width:100%;height:100%}.home.container{justify-content:flex-start;background:#d4d4d4}.logo{height:100%;padding:5px 10px}.logo img{height:100%;-webkit-transition:all .4s ease 0s;-moz-transition:all .4s ease 0s;-ms-transition:all .4s ease 0s;-o-transition:all .4s ease 0s;transition:all .4s ease 0s}nav{width:100%;height:6rem;justify-content:space-between;font-size:1.25rem}nav,nav ul{display:flex;align-items:center}nav ul{width:60%;text-align:right;justify-content:flex-end;list-style:none;margin:0;padding:0 10px 0 0;height:100%}nav ul li{margin-left:5px}nav ul li a{text-decoration:none;color:#000;border-radius:22px;overflow:hidden;display:block;position:relative;outline:none;background-color:#fff;transition:background-color .3s}nav ul li a:hover{background:#ecaf0a}nav ul li a>*{position:relative}nav ul li a span{display:block;padding:5px 16px;border-radius:22px;overflow:hidden}nav ul li a:before{content:"";position:absolute;top:50%;left:50%;display:block;width:0;padding-top:0;border-radius:100%;background-color:rgba(241,240,236,.3);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}nav ul li a:active:before{width:120%;padding-top:120%;transition:width .2s ease-out,padding-top .2s ease-out}nav ul li a.active{background:#fb991a}@-webkit-keyframes fadein{0%{opacity:0;transform:translateX(-200%)}100.0%{opacity:1;transform:translateX(0)}}@keyframes fadein{0%{opacity:0;transform:translateX(-200%)}100.0%{opacity:1;transform:translateX(0)}}.home .logo{height:auto;padding:0;animation:fadein 1.5s ease-out}.home nav{height:calc(100vh - 70px)}.home nav,.home nav ul{justify-content:center;flex-wrap:wrap}.home nav ul{width:100%;height:unset;font-size:2rem;margin-bottom:8rem}.home nav li{border:1px solid #f3f3f3;margin:.25em;width:240px;height:240px;justify-content:center;align-items:center;display:flex;border-radius:10px;background:#e2e2e2}.home nav ul li a{padding:0;border-radius:9px}.home nav ul li a,.loader{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.loader{padding:0 10px 5rem;text-align:center;font-size:1.5rem;font-family:Dancing Script,arial;position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.6);align-content:center;flex-wrap:wrap;color:#fff;z-index:100}.loader>div{padding-bottom:1rem;width:100%}.main{width:97%;min-height:calc(100% - 6rem - 70px);margin:auto;text-align:center;display:flex;justify-content:center;align-items:flex-start;align-content:flex-start;flex-wrap:wrap;padding-top:2rem;padding-bottom:2rem}.container.home .main{min-height:unset}.toolbox{display:flex;justify-content:center;align-items:center;max-width:520px;margin:auto}.toolbox+div{margin-top:1rem}.items{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.items__arrow{position:relative;margin-right:1rem;margin-bottom:1rem;width:2.5rem;height:2.5rem;background-repeat:no-repeat;background-position:50%;background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiI+PHBhdGggZD0iTTE2IDBDNy4xNzggMCAwIDcuMTc4IDAgMTZzNy4xNzggMTYgMTYgMTYgMTYtNy4xNzggMTYtMTZTMjQuODIyIDAgMTYgMHptMCAzMEM4LjI4IDMwIDIgMjMuNzIgMiAxNlM4LjI4IDIgMTYgMnMxNCA2LjI4IDE0IDE0LTYuMjggMTQtMTQgMTR6Ii8+PHBhdGggZD0iTTI1LjcwOCAxNS4yOTNsLTYtNi0xLjQxNCAxLjQxNEwyMi41ODcgMTVINnYyaDE2LjU4N2wtNC4yOTMgNC4yOTMgMS40MTQgMS40MTQgNi02YS45OTkuOTk5IDAgMDAwLTEuNDE0eiIvPjwvc3ZnPg==")}.items__item{margin:1em}.items__label{color:rgba(0,0,0,.87);text-align:center}.items__item__label{font-size:1rem}.items__item--digit .result-component{height:102px;display:flex;flex-wrap:wrap;width:260px;align-items:center;align-content:center;text-align:center;justify-content:center;border:1px solid #000;padding:10px;margin-bottom:5px;border-radius:5px}@-webkit-keyframes slide{to{right:20px}}@keyframes slide{to{right:20px}}@-webkit-keyframes slideFromLeft{to{left:20px}}@keyframes slideFromLeft{to{left:20px}}.probabilityTbl{position:absolute;right:-100%;-webkit-animation:slide .5s forwards;-webkit-animation-delay:1s;animation:slide .5s forwards;animation-delay:1s}.probabilityTbl:empty{-webkit-animation:unset;-webkit-animation-delay:unset;animation:unset;animation-delay:unset}#accuracy{position:relative;left:-100%;-webkit-animation:slideFromLeft .5s forwards;-webkit-animation-delay:1s;animation:slideFromLeft .5s forwards;animation-delay:1s}#confusion{position:relative;right:-100%;-webkit-animation:slide .5s forwards;-webkit-animation-delay:1s;animation:slide .5s forwards;animation-delay:1s}canvas{border:1px solid #000;border-radius:5px}.prediction{display:flex;flex-wrap:wrap;justify-content:space-evenly;padding-bottom:1rem}.prediction>div{margin:1px;width:84px;font-size:1rem}.prediction>div>div,.prediction img{width:100%}.prediction .toolbox{width:100%;margin-top:1rem;margin-left:auto;margin-right:auto}.correct{color:green;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2048' height='2048' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' image-rendering='optimizeQuality' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cdefs%3E%3Cstyle%3E.fil0{fill:none}%3C/style%3E%3C/defs%3E%3Cg id='Layer_x0020_1'%3E%3Cpath class='fil0' d='M0 0h2048v2048H0z'/%3E%3Cpath class='fil0' d='M256 255.999h1536v1536H256z'/%3E%3Cpath d='M446.625 1217.37c-12.495-12.495-32.755-12.495-45.25 0-12.495 12.495-12.495 32.755 0 45.25l255.999 256.001-.003.003c12.496 12.496 32.76 12.496 45.255 0l.178-.182 943.822-943.821c12.495-12.495 12.495-32.756 0-45.25-12.495-12.495-32.756-12.495-45.25 0l-921.377 921.374-233.374-233.375z' fill='green' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E")}.correct,.false{background-size:contain;background-position:0;background-repeat:no-repeat;padding:4px 0 4px 14px}.false{color:red;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2048' height='2048' shape-rendering='geometricPrecision' text-rendering='geometricPrecision' image-rendering='optimizeQuality' fill-rule='evenodd' clip-rule='evenodd'%3E%3Cdefs%3E%3Cstyle%3E.fil0{fill:none}%3C/style%3E%3C/defs%3E%3Cg id='Layer_x0020_1'%3E%3Cpath class='fil0' d='M0 0h2048v2048H0z'/%3E%3Cpath class='fil0' d='M256 255.999h1536v1536H256z'/%3E%3Cpath d='M1058.96 492.845l690.323 1050.52 42.713 65.002H255.992l42.714-65.002L989.03 492.845l34.963-53.206 34.964 53.206zm577.681 1031.47l-612.645-932.307-612.647 932.307h1225.29z' fill='red' fill-rule='nonzero'/%3E%3Cpath d='M1066.02 894.011v462.229h-84.042V894.011zm0 504.249v84.04h-84.042v-84.04z' fill='red' fill-rule='nonzero'/%3E%3C/g%3E%3C/svg%3E")}.flex{display:flex}.flex--center{justify-content:center}.flex--middle{align-content:center}.flex--wrap{flex-wrap:wrap}.col1{width:100%}.col1,.col2{padding:0 .5rem}.col2{width:calc(50% - 1rem)}.col3{width:calc(33.333% - 1rem);padding:0 .5rem}.col4,.col25perc{width:calc(25% - 1rem);padding:0 .5rem}.col5{width:calc(20% - 1rem)}.col5,.col6{padding:0 .5rem}.col6{width:calc(16.666% - 1rem)}.col75perc{width:calc(75% - 1rem);padding:0 .5rem}.generateCharts{padding-top:2rem}.charts{display:flex;flex-wrap:wrap}.charts>div{width:50%;padding:1rem}.charts>div:first-child{padding-left:0}.charts>div:last-child{padding-right:0}.charts canvas,.charts table{width:100%;border:0}.train1 .charts,.train1 .charts>div{width:100%}.train1 .charts>div:last-child{display:flex}.train1 .charts>div:last-child>div{width:50%}.css-f4h7u8 canvas{height:500px}.css-1xuzhs7,table th{text-align:center;background:#fb991a;font-size:1.25rem;padding:5px}.css-1xuzhs7:first-child,table th:first-child{border-top-left-radius:5px}.css-1xuzhs7:last-child,table th:last-child{border-top-right-radius:5px}table tr:last-child .css-1mbdaqj:first-child,table tr:last-child td:first-child{border-bottom-left-radius:5px}table tr:last-child .css-1mbdaqj:last-child,table tr:last-child td:last-child{border-bottom-right-radius:5px}.subsurface-title{border-bottom:0;padding:0;margin:0;width:100%;text-align:center}.css-f4h7u8{margin:0}#mnist,#original{background-color:#000}td,th{padding:5px;border:1px solid #dadada}.train1,.train2,.train3{width:100%;display:flex;flex-wrap:wrap;padding-bottom:1rem;margin-bottom:1rem;border-bottom:1px solid #666}.train1 h3,.train2 h3,.train3 h3{text-align:center;width:100%}.train1 label h4,.train2 label h4,.train3 label h4{flex-basis:19rem;text-align:left}.train3 .col1{justify-content:center}.vega-embed{width:100%;margin:0}.vega-embed canvas{width:100%;padding:1em}.footer{position:relative;width:100%;left:0;bottom:0;text-align:center;height:60px;padding-bottom:10px}.footerLogo,.footerLogo img{height:100%}@media screen and (max-width:789px){body,html{align-items:flex-start}#app,nav{height:unset}nav{width:100%;flex-wrap:wrap}.logo,nav ul{width:100%;text-align:center}.logo img{height:unset;width:60%}.home .logo{width:90%}.home nav{height:unset}.home nav ul{padding:0;margin-bottom:2rem}.home nav li{width:80%;height:23vh}}