html, body{
  color: #43494f;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}
body{

  padding-bottom: 64px;
  background: #f4f8fa;
  /* background-color: #e5e5f7; */
  /* opacity: 0.1; */
  background-image:  linear-gradient(#E7E8F7 1px, transparent 1px), linear-gradient(to right, #E7E8F7 1px, #f4f8fa 1px);
  background-size: 32px 32px;
  min-width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;

}
input, button{
  padding: 12px;
  font-size: 18px;
  box-shadow: 0px 3px 3px -3px gray;
  box-sizing: border-box;
  border-radius: 2px;
}
footer{
  padding: 12px;
  background: #89a;
  width: 100%;
  border-top: 1px solid #eee;
  border-radius: 3px;
  color:#eee;
}
.app_card, .app_card_small{
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  color:cadetblue;
  /* font-weight: 600; */
}
.nowklogs{
  background: rgb(136, 14, 76);
}
p.spacer{
  width:100%;
}
input{
  border: none;
  width: 100%;
}
button{
  border-radius: 0px;
  border-width: 0px ;
  background: rgb(99, 203, 122);
  color: white;
  cursor: pointer;
}
.btn-default{
  background: white;
  color: #444;
}

#antreu{
  margin-top: 32px;
  max-width: 1200px;
  min-width: 600px;
  min-height: 50vh;
  background: rgb(203, 228, 236) ;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  border-radius: 4px;
  box-shadow: 0 4px 8px 0 rgb(53 105 128 / 30%), 0 6px 20px 0 rgb(165 200 213 / 41%);
  box-sizing: border-box;
}

#heading{
  width:100%;
  border-radius: 4px;
}

#heading{
  background: #a0b8cf;
  box-shadow: 0px 12px 12px -12px gray;
}

#welcome{
  text-align: right;
  padding: 4px;
  border-radius: 4px;
}

#invitation{
  text-align: center;
  font-size: 24px;
}

.block{
  padding: 12px;
  /* box-shadow: 0px 12px 12px -12px gray; */
  box-sizing: border-box;
}

.b-full-w{
  width:100%;
}

.b-half-w{
  width: 50%;
}

.b-col{
  display: flex;
  flex-direction: column;
}
.b-row{
  display: flex;
  flex-direction: row;
}

.pull-right{
  float: right;
}

#app_selector{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  max-width: 75vw;
}

.app_card, .app_card_small{
  background: white;
  padding: 32px;
  width: 128px;
  height: 128px;
  border-radius: 4px;
  margin: 4px;
  text-align: center;
  box-shadow: 0px 2px 2px gray;
  border: 1px solid lightgray;

}

.app_card_small{
  /* padding: 4px; */
  /* width:184px; */

  /* position: relative; */
  color:gray;
}
.app_card_small img{
  /* display: none; */
}

.app_card_small .spacer-p{
  /* display: none; */
}

.app_icon{
  font-size: 48px;
  color:skyblue;
}
@media screen and (max-width: 768px) {
    body{
        padding: 4px;
        box-sizing: border-box;
        margin: auto;
        width: 100%;
        overflow-x: hidden;
    }
    #antreu{
        /* border: 4px solid red; */
        min-width: auto;
        width: 100%;
        max-width: 100%;
        min-height: 100vh;
        border-radius: 0px;
        box-shadow: none;
        margin: auto;
        padding: 8px;
    }
    .app_card, .app_card_small{
        padding: 16px 8px;
        width: 110px;
        height: auto;
        min-height: 120px;
        margin: 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 14px;
    }
    .app_icon {
        font-size: 32px;
        margin-bottom: 8px;
    }
    #app_selector{
        justify-content: space-around;
        align-items: center;
        width: 100%;
        flex-wrap: wrap;
        padding: 0;
    }
    #logout{
        position: absolute;
        top: 0px;
        right: 0px;
        padding: 8px;
        font-size: 14px;
    }
    .b-row {
        flex-wrap: wrap;
    }
    .b-half-w {
        width: 100%;
        margin-bottom: 12px;
    }
    #welcome {
        text-align: center;
        padding: 8px 4px;
        font-size: 14px;
    }
    #invitation {
        font-size: 18px;
    }
    footer {
        font-size: 12px;
        padding: 8px;
    }
}