@import url('bulma.css');

@font-face {
    font-family: graphik;
    src: url(graphik.otf);
}

html{
    background-color: #F4F4F4;
}

p{
    color: #323232;
}

.logo{
    width: 300px;
    margin-bottom: 20px;
}

menu{
    padding: 0;
}

.menu{
    margin: auto;
    border-radius: 5px;
    background-color: #FFF;
    font-size: 2rem;
}

.menu p{
    margin-bottom:-15px;
    padding: 10px;
}

.menu a{
    font-size: 1.5rem;
    margin: 10px;
}

.login{
    max-width: 300px;
    margin: auto;
}

.control.has-icons-left .icon.is-danger{
    color: #ff3860;
}

footer{
    padding-top: 50px;
    text-align: center;
}

.justify{
    text-align: justify;
}

.select,
select{
    width: 100% !important;
}

h1{
    font-family: graphik;
    font-size: 2rem;    
    color: #323232;
}

.filter{
    margin-top: 20px;
    margin-bottom: 20px;
}

td i{
    color: #4A4A4A
}

td i:hover{
    color: #A4A4A4
}

.spaceright{
    padding-right: 6px;
}

.spaceleft{
    padding-left: 6px;
}

.spaceup{
    margin-top: 20px;
}

.spacedown{
    margin-bottom: 20px;
}

.alert{
    width: 100%;
}

.buttgoche{
    margin-right: 40px;
}

.buttdroate{
    margin-left: 40px;
}

.pop{
    background-color: #F4F4F4;
    padding: 20px;
    border-radius: 5px;
}

.persona{
    position: absolute;
    height: 300px;
    top: -55%;
    left: -12%;
}

.modal-content p{
    margin: auto;
    width: 350px;
}

.total{
    margin-bottom: 0px !important;
}

.list-item{
    display: block;
    padding: 20px !important;
    background-color: #FFF;
    border-radius: 5px;
    margin-bottom: 10px;
}

.list-item:hover{
    background-color: #F9F9F9;
}

.list-item.author{
    background-color: hsl(171, 100%, 41%);
}

.list-item.author:hover{
    background-color: #00c5a8;
}

.list-item.author p{
    color: #FFF;
}

.list-item.author .tag:not(body).is-white{
    color: hsl(171, 100%, 41%);
}

.file-cta {
    background-color: #FFF;
}

.spin {
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  /* transform: rotate(3deg); */
   /* transform: rotate(0.3rad);/ */
   /* transform: rotate(3grad); */ 
   /* transform: rotate(.03turn);  */
}

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