* { box-sizing: border-box; outline: none; }

body, html   { padding: 0; margin: 0; height: 100%; color: #444; }
body         { font-family: verdana; font-size: 18px; }

h1, h2, h3 { margin: 0; padding: 0; font-weight: normal; }
h1 { font-size: 32px; margin-bottom: 10px; }
h2 { font-size: 24px; margin-bottom: 10px; }
        
.center { text-align: center; }

#pleasewait {
    background: white;
    position: absolute;
    z-index: 100;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    font-size: 18px;
}

#logo {
    display: block;
    margin: 15% auto 50px auto;
}

.page-header { margin-bottom: 20px; }

#top-bar {
    background: #dee6cd;
    padding-top: 8px;
    position: fixed;
    width: 100%;
    z-index: 99;
}
        
#top-bar ul { list-style: none; margin: 0; padding: 0; }
#top-bar li { float: left;
                display: block;
                padding: 10px 20px;
                margin-left: 10px;
                cursor: pointer;
                border-radius: 5px 5px 0 0; }
#top-bar li.active { background: white; font-weight: bold; }
#top-bar li a { text-decoration: none; color: #444 }

#user {
    background: #4f8f3b;
    border-radius: 0 0 5px 5px;
    color: white;
    cursor: pointer;
    font-weight: bold;
    padding: 10px;
    position: absolute;
    right: 10px;
    top: 0;
    z-index: 10;
}

#user span { font-weight: bold; }

#main { padding-top: 60px; }

.page { padding: 20px; }
                
.card {
    background: #eee;
    border-radius: 5px;    
    margin-bottom: 20px;
    padding: 15px;
    position: relative;
}
     
.card.dark { background-color: #bbb; }   
.card.red { background-color: #dd9999; }
.card.green { background-color: #89b97a; color: white; }
        
.tag { 
    display: inline-block; 
    background: #555; 
    color: white; 
    border-radius: 20px; 
    padding: 3px 0.8em; 
    text-shadow: 0 -1px 0 #222;
    margin-right: 5px; 
    box-shadow: 0 1px 0 #222;
}
        
button { border: 0; border-radius: 5px; font-size: 18px; font-weight: bold; cursor: pointer; text-decoration: none; display: inline-block; padding: 20px; cursor: pointer; }
       
button.green { background: #4f8f3b; color: white;  }
button.disabled { color: #999; }
.destroy { background: #be483f; color: White; }
.cancel, .minus { background: #ccc; color: #777;  }
.cancel { margin-left: 20px; }        
        
.hidden { display: none; }
        
#forms,
#questions {
    list-style: none;
    margin: 0;
    padding: 0;
}

#forms li, #questions li { position: relative; }

#forms .icon-clock { margin-left: 10px; }        

#forms button, #questions button { position: absolute; right: 15px; top: 15px; xbottom: 15px; }

#form { padding-bottom: 70px; }

#form-buttons {
     position: fixed; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     background: white; 
     padding: 10px; 
     background: #555; 
     text-align: center;
}

#form-buttons button { padding: 10px 20px; }

/*#form-comment {
    text-shadow: 0 1px 0 #ccc;
}*/

#form-comment textarea {
    width: 100%;
    display: block;
}

input[type="text"], 
textarea {
    padding: 10px;
    background: white;
    border: 0;
    border-radius: 5px;
    font-size: 24px;
    font-weight:bold;
    border-radius: 4px;
    margin-top:10px;
    box-shadow: 0 0 2px 1px #46a;
}

input[type="text"]:focus, 
textarea:focus {
    box-shadow: 0 0 8px 2px #248;
    background-color: #ffa;
}

span.radio {
    padding: 10px;
    border: 0;
    border-radius: 5px;
    font-size: 24px;
    font-weight:bold;
    border-radius: 4px;
    margin-top:10px;
}

span.radio:hover {
    box-shadow: 0 0 6px 2px #248;
    background-color: #ffa;
}

.radio { cursor: pointer; }
  
.number { width: 80px; text-align: center; }
        
.boundaries { margin-left: 5px; font-size: 13px; }

.note { color: #666; padding-left: 10px; }
        
.comment, .action { border-radius: 5px; background: #bbb; color: white; padding: 20px; margin-top: 20px; }

.comment .close { float: right; cursor: pointer; }

.green .comment { background: #6f9463; color: white; }
.red .comment, .red .action { background: #b68181; color: white; }
        
.comment textarea { width: 100%; margin: 10px 0 0 0; display: block; text-align: left; resize: none; }

#questions button { background: #bbb; color: white; }
#questions .red button { background: #b68181; }
#questions .green button { background: #6f9463; }
#questions .card { }

button span { display: block; }

.dialog .panel { padding: 20px; position: relative; height: 100%; }
.dialog > .overlay { background: black; position: absolute; top: 0;  right: 0;  left: 0; height: 100%; opacity: 0.5; z-index: 998; }
.dialog > .content { background: white; position: absolute; top: 140px; right: 40px; bottom: 140px; left: 40px; z-index: 999; border-radius: 5px; padding: 20px; }

.dialog button span { display: inline;}

.userlist { list-style: none; padding: 0;  }
.userlist li { float: left; width: 25%; }
.userlist a { display: block; color: #444; text-decoration: none; padding: 20px; }
.userlist a:hover { background: #eee; border-radius: 5px; }
.userlist:after {
  content: "";
  display: table;
  clear: both;
}

.cols:after {
  content: "";
  display: table;
  clear: both;
}

.col-50 {
    float: left;
    width: 50%;
}

.col-50:first-child { padding-right: 10px; }
.col-50:last-child { padding-left: 10px; }

.wide { width: 100%; }