/*===KEYFRAMES===*/
@keyframes delayed-showup{
  0%{
    opacity: 0.0;
  }
  80%{
    opacity: 0.0;
  }
  100%{
    opacity: 1.0;
  }
}
@keyframes showup{
  0%{
    opacity: 0.0;
  }
  100%{
    opacity: 1.0;
  }
}
@keyframes complete-big {
  0% {
    stroke-dashoffset: 200;
    
  }
  50% {
    stroke-dashoffset: 1100;
    
  }
  100% {
    stroke-dashoffset: 200;
    
  }
}
@keyframes rotate-big {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes complete-small {
  0% {
    stroke-dashoffset: 800;
    
  }
  50% {
    stroke-dashoffset: 100;
    
  }
  100% {
    stroke-dashoffset: 800;
    
  }
}
@keyframes rotate-small {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes showup-msg {
  0% {
    opacity: 0.0;
    transform: translateX(0px);
  }
  20%{
    opacity: 1.0;
    transform: translateX(-3px);
  }
  40%{
    opacity: 1.0;
    transform: translateX(3px);
  }
  60%{
    opacity: 1.0;
    transform: translateX(-3px);
  }
  80%{
    opacity: 1.0;
    transform: translateX(3px);
  }
  100%{
    opacity: 1.0;
    transform: translateX(0px);
  }
}
@keyframes de-danger {
  0% {
    border-bottom: solid 1px #d81e1e;
  }
  100%{
    border-bottom: solid 1px black;
  }
}@keyframes ghost-move {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100%{
    transform: translateY(0px);
  }
}

/*===DEFAULT_STYLING===*/
* {
  box-sizing: border-box;
}

body{
  font-family: 'Lato', sans-serif;
  margin: 0;
  font-size: 12px;
  box-sizing: border-box;
}

#root{
  z-index: 9999999;
}

a{
  display: block;
}

div.navigation-wrapper{
  position: fixed;
  top: 0px;
}

/*wrappers*/
div.main-wrapper{
  position: relative;
  width: 1000px;
  margin: 0px auto 0px auto;
  min-height: 400px;
}
div.left-side-wrapper{
  position: relative;
  margin: 20px auto auto 0px;
  width: 700px;
  min-height: 300px;
}
div.right-side-wrapper{
  width: 400px;
  position: absolute;
  right: 0px;
}
div.top-right-side-wrapper{
  width: 400px;
  position: absolute;
  right: 0px;
  top: 40px;
}
div.center-side-wrapper{
  margin: 0 auto;
  text-align: center;
}

.modal{
  background-color: aliceblue;
  border: solid 2px black;
  border-radius: 15px;
}

.light-modal{
  border: solid 1px #c4c4c4;
  border-radius: 15px;
}

a{
  color: black;
  text-decoration: none;
  cursor: pointer;
}

button{
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font-style: inherit;
  font-family: inherit;
  font-weight: inherit;
  cursor: pointer;
  outline: inherit;
  border-radius: 5px;
}

button:disabled{
  cursor: not-allowed;
  opacity: 0.6;
}

textarea:focus, input:focus, a:focus, div:focus{
  outline: none;
}

input[type=text], input[type=date], input[type=password], input[type=number], textarea{
  box-sizing: border-box;
  background-color: transparent;
  border: 0px;
  border-bottom: solid 1px black;
  padding: 3px 5px 3px 5px;
  color: black;
  font-family: inherit;
  transition: border 0.4s;
}
input:invalid {
  background-color: white;
  box-shadow: none;
}
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

.warning{
  animation: danger 0.3s linear forwards;
}
.de-warning{
  animation: de-danger 0.5s linear forwards;
}

.disabled{
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/*generic cards*/
div.generic-card{
  position: relative;
  width: 660px;
  margin: 0px auto 20px 0px;
}
/*side options for cards*/
div.card-options{
  display: none;
  position: absolute;
  top: 7px;
  right: 5px;
  width: 20px;
  z-index: 1;
}
div.generic-card:hover div.card-options {
  display: block;
}
div.generic-card:focus-within div.card-options{
  display: block;
}
div.card-options div.options-list{
  background-color: white;
  border-radius: 3px;
  text-align: center;
  width: 100px;
  cursor: pointer;
  /*transition: 0.3s all;*/
}
div.card-options div.retract-options{
  border: solid 1px #6d6d6d00; 
  font-size: 0px;
}
div.card-options div.expand-options{
  border: solid 1px #6d6d6d; 
  font-size: 12px;
}
div.card-options div.options-list div.option{
  transition: 0.2s all;
}
div.card-options div.options-list div.option:hover{
  background-color: #e0e0e0;
}
div.card-options button svg#options-button{
  height: 20px;
  width: 20px;
}

/*checkboxes*/
input[type=checkbox]{
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
  cursor: pointer;
}
.checkmark {
  display: inline-block;
  margin: 6px;
  height: 20px;
  width: 20px;
  background-color:white;
  border-radius: 3px;
  border: solid 0.5px gray;
}
.checkbox-container{
  cursor: pointer;
}
.checkbox-container:hover span.checkmark {
  background-color: rgb(241, 241, 241);
}
.checkbox-container span.checkmark  svg#select-tick{
  height: 80%;
  width: 80%;
  margin: 10%;
}
label input {
  vertical-align: middle;
}
label.checkbox-container span, label.radiobox-container span{
  vertical-align: middle;
}
/*radiobox*/
input[type=radio]{
  position: absolute;
  opacity: 0;
  height: 0;
  width: 0;
  cursor: pointer;
}
.radiomark {
  display: inline-block;
  margin: 6px;
  height: 20px;
  width: 20px;
  background-color:white;
  border-radius: 50%;
  border: solid 0.5px gray;
}
.radiobox-container{
  cursor: pointer;
}
.radiobox-container:hover span.radiomark {
  background-color: rgb(241, 241, 241);
}
.radiobox-container span.radiomark svg#radio-tick{
  height: 80%;
  width: 80%;
  margin: 10%;
}
/*loading icon*/
svg#loading-icon.small{
  width: 50px;
  height: 50px;
}
svg#loading-icon{
  position: absolute;
  width: 80px;
  height: 80px;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
svg#loading-icon path#loading-circle1{
  fill: transparent;
  stroke: black;
  stroke-width: 3px;
  stroke-dashoffset: 1005;
  stroke-dasharray: 1005; /*1005*/
  transform-origin: 50% 50%;
  animation: complete-small 6s linear infinite, rotate-small 1s linear infinite;
}
svg#loading-icon path#loading-circle2{
  fill: transparent;
  stroke: black;
  stroke-width: 9px;
  stroke-dashoffset: 0;
  stroke-dasharray: 1917;
  transform-origin: 50% 50%;
  animation: complete-big 5s linear infinite, rotate-big 1s linear infinite;
}

.rotate-generic{
  animation: rotate-big 1s linear infinite;
  transform-origin: center;
}

/*horizontal load icon*/
svg#h-load{
  height: 100%;
  margin: 0 auto;
}
svg#h-load g.st0-h-load-wrap{
  animation: showup 0.5s linear ;
}
svg#h-load g.st0-h-load-wrap.delayed{
  animation: delayed-showup 0.5s linear ;
}
svg#h-load circle.st0-h-load{
  fill: #acacac;
}

/*right side description*/
div.top-right-description{
  margin: 25px 0px 5px 0px;
  padding: 5px 5px 5px 5px;
  border-top: solid 1px #acacac;
  border-bottom: solid 1px #acacac;
  font-weight: 300;
  font-size: 14px;
  text-align: center;
}
div.top-right-description p{
  text-align: justify;
  word-wrap: break-word;
  hyphens: auto;
  margin: 0px 0px 5px 0px;
}
div.top-right-description a{
  display: inline-block;
  text-align: center;
  line-height: 20px;
  border-bottom: 1px dotted #696969;
}

/*buttons*/
div.bottom-right-button-holder{
  position: fixed;
  bottom: 20px;
  right: 40px;
  display: flex;
  flex-direction: column;
  text-align: right;
  justify-content: right;
}
button.bottom-right-btn{
  border-radius: 7px;
  display: flex;
  border: solid 1px #c4c4c4;
  height: 50px;
  transition: all 0.3s;
  background-color: #fcfcff;
  border-radius: 25px;
  box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.25);
  max-width: 50px;
  margin: 3px 0px 3px auto;
}
button.bottom-right-btn:hover, button.bottom-right-btn:focus{
  box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.50);
  border-radius: 7px;
  max-width: 360px;
}
button.bottom-right-btn div.btn-title{
  line-height: 50px;
  vertical-align: middle;
  margin: 0 0px 0 0px;
  font-size: 20px;
  font-weight: 300;
  transition: all 0.3s;
  overflow: hidden;
  max-width: 0px;
}
button.bottom-right-btn:hover div.btn-title, button.bottom-right-btn:focus div.btn-title{
  margin: 0 0px 0 8px;
  max-width: 260px;
}
button.bottom-right-btn div.btn-icon{
  border-radius: 50%;
  height: 40px;
  width: 40px;
  margin: 5px 5px 0 5px;
  font-size: 40px;
  line-height: 30px;
  text-align: center;
  vertical-align: center;
  background-color: #fcfcff;
}

/*button with title and icon*/
button.ti-btn{
  display: flex;
  border: solid 1px #c4c4c4;
  height: 50px;
  transition: all 0.3s;
  background-color: #fcfcff;
  border-radius: 7px;
}
button.ti-btn:hover{
  box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.50);
}
button.ti-btn div.btn-title{
  line-height: 50px;
  vertical-align: middle;
  font-size: 20px;
  font-weight: 300;
  overflow: hidden;
  margin: 0 0px 0 8px;
}
button.ti-btn div.btn-icon{
  border-radius: 50%;
  height: 40px;
  width: 40px;
  margin: 5px 5px 0 5px;
  font-size: 40px;
  line-height: 30px;
  text-align: center;
  vertical-align: center;
  background-color: #fcfcff;
}

/*button for file upload*/
input[type=file]{
  display: none;
  width: 0px;
  height: 0px;
  margin: 0;
}
div.file-input-container button.browse-btn{
  position: relative;
  border-radius: 7px;
  height: 55px;
  width: 305px;
  margin: 0px auto 20px auto;
  border: solid 1px #c4c4c4;
}
div.file-input-container button.browse-btn svg#h-load{
  height: 30px;
  margin-top: 3%;
}

/*<select> custom element*/
div.custom-select {
  width: 160px;
  z-index: 1;
  cursor: pointer;
  position: relative;
}
div.custom-select.medium {
  width: 130px;
}

div.custom-select.mini {
  width: 80px;
}
div.custom-select.tiny {
  width: 60px;
}
div.selected{
  display: flex;
  justify-content: space-between;
  border-bottom: solid 1px black;
}
div.options-holder{
  border-top: none;
  border-radius: 0px 0px 5px 5px;
  background-color: white;
  max-height: 100px;
  overflow: auto;
  position: absolute;
  width: 100%;
}
div.options-holder div.option{
  padding: 2px;
  transition: all 0.2s;
}
div.options-holder div.option:last-child{
  border-radius: 0px 0px 5px 5px;
}
div.options-holder div.option:hover{
  background-color: #eaeaea;
}
div.arrow{
  height: 20px;
  width: 20px;
}
div.arrow svg#arrow-select{
  width: 80%;
  margin: 10%;
}
.st-arrow-select{fill:none;stroke:#000000;stroke-width:88;;}

/*floating form*/
form.floating-form{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 10;
  box-shadow: 0px 0px 16px -6px rgba(0, 0, 0, 0.75);
  min-height: 200px;
  transition: height 0.4s;
}
form.floating-form h2{
  margin: 0px auto 5px auto;
  text-align: center;
}
form.floating-form p{
  font-size: 16px;
}
form.floating-form button{
  border: solid 1px grey;
  transition: box-shadow 0.3s;
}
form.floating-form button[type=submit]:hover, form.floating-form button.close-btn:hover{
  box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.50);
}
form.floating-form button.close-btn{
  position: absolute;
  top: 10px;
  right: 10px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
form.floating-form svg#close-button{
  width: 70%;
  height: 70%;
  margin: 15% auto;
}

/*top-right info content + button*/
div.top-right-anchor{
  position: absolute;
  top: 10px;
  right: 25px;
  height: 0px;
  width: 0px;
  z-index: 1000;
}
div.top-right-anchor div.information-holder:hover div.information-content-wrapper{
  width: 200px;
  height: auto;
}
div.top-right-anchor div.information-holder div.info-button-icon{
  height: 15px;
  width: 15px;
  border-radius: 50%;
  border: solid 1px #B3B4B4;
}
div.top-right-anchor div.information-holder div.information-content-wrapper{
  width: 0px;
  height: 0px;
  overflow: hidden;
  padding: 5px 0px 0px 0px;
}
div.top-right-anchor div.information-holder div.information-content-wrapper div.information-content{
  padding: 5px 5px 5px 5px;
  border: solid 1px #B3B4B4;
  border-radius: 4px;
  background-color: white;
}

/*error wrapper*/
div.error-wrapper{
  animation: showup-msg 0.3s linear;
}
svg *{
  stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;
}
/*order arrow element*/
.st-order-arrow{fill:none;stroke:#000000;stroke-width:88;}
.st-order-arrow-head{fill:none;stroke:#000000;stroke-width:55;}

/*image error*/
svg#no-image .st5-image-error{fill:none;stroke:#DD1F2B;stroke-width:11.2947;;}
svg#no-image .st1-image-error{fill:none;stroke:#8C6949;stroke-width:5.6474;;}
svg#no-image .st2-image-error{fill:none;stroke:#2F8F44;stroke-width:8.4711;;}
svg#no-image .st3-image-error{fill:none;stroke:#191919;stroke-width:4.2355;;}
svg#no-image .st4-image-error{fill:none;stroke:#E4E417;stroke-width:5.6474;;}

/*no profile image*/
.st0-npi{fill:none;stroke:#000000;stroke-width:30.318;}

/*edit button svg*/
button.edit-button{
  height: 20px;
  width: 20px;
}
.st-pencil{fill:none;stroke:#000000;stroke-width:40;;}
.st-pencil-border{fill:none;stroke:#000000;stroke-width:29;;}
.st-confirm{fill:none;stroke:#000000;stroke-width:100;;}

/*recycle bin svg*/
.st0-bin{fill:none;stroke:#000000;stroke-width:40;;}
.st1-bin{fill:none;stroke:#000000;stroke-width:30;;}

/*options button*/
.st-options{stroke: #737373;stroke-width: 140;;}

/*tick icon*/
.st-tick{fill:none;stroke:#000000;stroke-width:120;;}
.st-tick.white{fill:none;stroke: #ffffff;;stroke-width:120;;}
.st-circle{fill:#3b3b3b;stroke:#000000;stroke-width:0;;}

/*remove button*/
.rb{stroke:#c31f1f;stroke-width:88;;}

/*remove highlights*/
.st0-hl{fill:none;stroke:#000000;stroke-width:34;;}
.st1-hl{fill:none;stroke:#000000;stroke-width:38;;}
.st2-hl{fill:none;stroke:#000000;stroke-width:24;;}
.st3-hl{fill:none;stroke:#000000;stroke-width:26;;}
.st4-hl{fill:none;stroke:#000000;stroke-width:17;;}
.st5-hl{fill:none;stroke:#D91F26;stroke-width:50;;}
/*plus(add) icon*/
.st0-plus{fill:none;stroke:#1c1c1c;stroke-width:50;;}

/*go button*/
.st0-go{fill:none;stroke:#000000;stroke-width:70;;}
.st1-go{fill:none;stroke:#000000;stroke-width:50;;}

/*similar paper search toggle*/
.st0-sps{fill:none;stroke:#000000;stroke-width:30;;}
.st1-sps{fill:none;stroke:#000000;stroke-width:10;;}
.st2-sps{fill:none;stroke:#000000;stroke-width:7;;}
.st3-sps{fill:#26110A;stroke:#333333;stroke-width:7;;}
.st4-sps{fill:none;stroke:#000000;stroke-width:38;;}

/*no search results*/
.st0-no-results{fill:none;stroke:#000000;stroke-width:37;;}
.st1-no-results{fill:none;stroke:#000000;stroke-width:19;;}
.st2-no-results{fill:none;stroke:#000000;stroke-width:80;;}
.st3-no-results{fill:none;stroke:#000000;stroke-width:40;;}

/*empty folder*/
.st0-empty-folder{fill:#EAEEF1;}
.st1-empty-folder{fill:#F2F2F3;}
.st2-empty-folder{fill:#333333;}
.st3-empty-folder{fill:#E2F5FF;stroke:#000000;stroke-width:14.0887;;}

/*no papers*/
.st0-no-papers{fill:none;stroke:#dadaec;stroke-width:40;;}
.st1-no-papers{fill:none;stroke:#dadaec;stroke-width:40;;stroke-dasharray:62.6688,102.1984;}
.st2-no-papers{fill:none;stroke:#dadaec;stroke-width:40;;stroke-dasharray:74.721,121.8527;}
.st3-no-papers{fill:none;stroke:#dadaec;stroke-width:40;;stroke-dasharray:57.9899,94.5681;}
.st4-no-papers{fill:none;stroke:#dadaec;stroke-width:40;;stroke-dasharray:58.7767,95.8512;}
/*no filters*/
.st0-no-filters{fill:none;stroke:#dadaec;stroke-width:40;;}
.st1-no-filters{fill:none;stroke:#dadaec;stroke-width:40;;stroke-dasharray:70.8404,109.6936;}
.st2-no-filters{fill:none;stroke:#dadaec;stroke-width:40;;stroke-dasharray:64.4726,99.8333;}

/*manual screening icon*/
.st0-msi{fill:#3e3e3f;stroke:none;stroke-width:25.6869;;}

/*auto screening icon*/
.st0-asi{fill:#3e3e3f;stroke:#3e3e3f;stroke-width:1.9029;;}
.st1-asi{fill:#3e3e3f;stroke:#3e3e3f;stroke-width:20.8298;;}

/*crowd screening icon*/
.st0-csi{stroke:#fcfcff;fill: #3e3e3f;stroke-width:17.496;;}

/*ghost*/
.st0-ghost{fill:#f1f7fa;stroke:#000000;stroke-width:8.9609;;}
.st1-ghost{fill:none;stroke:#000000;stroke-width:3;;}
.st2-ghost{font-weight: 300;font-size:101.9298px;}

/*robot*/
.st0-robot{fill:none;stroke:#757575;stroke-width:10;;}
.st1-robot{fill:none;stroke:#828181;stroke-width:5;;}
.st2-robot{fill:none;stroke:#828181;stroke-width:8;;}
.st3-robot{fill:none;stroke:#757575;stroke-width:14;;}
.st4-robot{fill:none;stroke:#828181;stroke-width:6;;}
.st5-robot{fill:none;stroke:#757575;stroke-width:3;;}
.st6-robot{fill:none;stroke:#333333;stroke-width:3;;}
.st7-robot{fill:none;stroke:#757575;stroke-width:4;;}
.st8-robot{fill:#FFFFFF;stroke:#828181;stroke-width:5;;}
.st9-robot{fill:none;stroke:#757575;stroke-width:3.9244;;}
.st10-robot{fill:none;stroke:#757575;stroke-width:3.1395;;}
.st11-robot{fill:none;stroke:#4D4D4E;stroke-width:3.9244;;}
.st12-robot{fill:none;stroke:#4D4D4E;stroke-width:3.1395;;}
.st13-robot{fill:none;stroke:#B3B4B4;stroke-width:2;stroke-miterlimit:10;}

/*forbidden*/
.st0-forbidden{fill:none;stroke:#000000;stroke-width:108;;}
.st1-forbidden{fill:none;stroke:#000000;stroke-width:93;;}

/*info*/
.st0-info{fill:none;stroke:#515151;stroke-width:88;;}
.st1-info{fill:#515151;stroke:none;stroke-width:88;;}

/*undecided icon*/
.st0-und{fill:none;stroke:#3b3b3b;stroke-width:120;}
.st1-und{fill:#3b3b3b};



/*clamp lines*/
button.clamp-lines__button{
  font-size: 14px;
  font-weight: lighter;
  text-decoration: underline;
}

/*code tag*/
code{
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

/*pagination*/
ul.pagination{
  font-weight: 300;
  padding: 0px;
  clear: both;
  font-size: 17px;
  margin: 30px auto 20px auto;
  text-align: center;
  list-style-type: none;
}
ul.pagination *{
  display: inline-block;
}
ul.pagination li{
  margin: 10px;
}
ul.pagination span.current-page{
  font-weight: 700;
}

/*notfound error*/
div.no-results{
  animation: delayed-showup 0.3s linear ;
  margin-left: 10px;
  height: 100px;
  width: 680px;
  margin-top: 80px;
}
div.no-results svg#no-results{
  display: block;
  margin: 0 auto;
  height: 100px;
  width: 100px;
}
div.no-results p.not-found-description{
  display: block;
  text-align: center;
  width: 100%;
  margin: 0px;
  font-size: 30px;
  font-weight: 300;
}

/*empty folder(and project)*/
div.empty-folder-wrapper{
  position: relative;
  width: 800px;
  margin-top: 80px;
}
div.empty-folder-wrapper svg#empty-folder{
  display: block;
  margin: 0 auto;
  height: 200px;
  width: 200px;
}
div.empty-folder-wrapper p.empty-folder-description{
  width: 800px;
  display: block;
  text-align: center;
  font-size: 30px;
  font-weight: 300;
  margin: 0px;
}

div.empty-list-wrapper{
  position: relative;
  width: 650px;
  margin-top: 50px;
}
div.empty-filters{
  margin-top: 80px;
}
div.empty-list-wrapper svg#no-papers, div.empty-list-wrapper svg#no-filters{
  display: block;
  margin: 0 auto;
  height: 180px;
  width: 180px;
}
div.empty-list-wrapper p.empty-list-description{
  width: 500px;
  display: block;
  font-size: 24px;
  font-weight: 300;
  text-align: center;
  margin: 20px auto;
}

/*404 page*/
div.page-not-found-wrapper{
  margin: 50px auto;
  width: 500px
}
div.page-not-found-wrapper svg#ghost{
  height: 400px;
  animation: ghost-move infinite 3s ease-in-out;
}

/*cover the page*/
div.cover{
  opacity: 0.2;
}

div.full-screen{
  min-height: 100vh;
  min-width: 100vw;
  background-color: black;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1;
}
div.full-screen-transparent{
  min-height: 100vh;
  min-width: 100vw;
  background-color: transparent;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 1;
}

/* notification */
div.top-right-notification{
  animation: showup-msg 0.9s ease-in-out forwards;
  position: fixed;
  right: 15px;
  top: 70px;
  border: solid 1px #6d6d6d;
  background-color: #F6FCFF;
  box-shadow: 0px 0px 4px -1px rgba(0, 0, 0, 0.3);
  border-radius: 15px;
  z-index: 1000;
}
div.top-right-notification div.message-content{
  font-size: 15px;
  line-height: 20px;
  margin: 10px 40px 10px 10px;
  max-width: 300px;
}
div.top-right-notification button.close-notification-btn{
  height: 15px;
  width: 15px;
  position: relative;
  position: absolute;
  top: 50%;
  right: 10px;
  transform:translate(0%, -50%);
}

/*APP.css----------------------------------------------------------------------------------------------*/
.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}