#wrapper {
    width:  85%;
    margin: 0px auto 100px;
}


.inner-wrapper {
    margin: 0px auto;
    width:  100%;
    max-width: 700px;
}


body {
    background: #1a1a1a;
    color:      #d9d9d9;
}


::-webkit-scrollbar       { width: 7px; }
::-webkit-scrollbar-track { background: #262626; }
::-webkit-scrollbar-thumb { background: #333333; }


.btn       { opacity: 0.4; }
.btn:hover { opacity: 1;   }


.btn-cancel, .btn-cancel:hover {
    background: #333333;
    color:      #d9d9d9 !important;
}


.text-link       { color: #d9d9d9; }
.text-link:hover { color: #007bff; text-decoration: none; }









#menu-left, #menu-right {
    position: fixed;
    top: 10px;
}


#menu-left  { left:  15px; }
#menu-right { right: 15px; }


.info {
    position: relative;
    top: -1px;
    color: #666666;
    font-size: 14px;
}


.info:hover { color: #b3b3b3;}


#menu-left  .info { right: -10px; }
#menu-right .info { right:  10px; }


#quick-add {
    position: fixed;
    bottom: 10px;
    right: 15px;
    width: 25%;
    min-width: 300px;
}


#quick-add button { visibility: hidden; }

#quick-add input { opacity: 0; }

#quick-add input:hover, #quick-add input:focus { opacity: 1; }


#today {
    position: fixed;
    bottom: 5px;
    left:   10px;
    color: #666666;
    font-size: 14px;
}










#date-range { color: #b3b3b3; }


#item #name {
    position: relative;
    background: #1f1f1f;
    margin-top: 30px;
    padding:    7px 50px;
    text-align: center;
    font-size:  25px;
    border-radius: 3px;
}


#item #name a {
    position: absolute;
    top: 15px;
    font-size: 16px;
    opacity:   0.3;
}


#item #name:hover a { opacity: 1; }


#item #name #back { left: 10px; }
#item #name #edit { right: 10px; }










#details { margin: 30px auto; }


#details td {
    padding: 5px;
    border:  none !important;
}


#details .label {
    text-align: right;
    font-size:  14px;
    color: #666666;
}


#details .secondary { color: #666666; }


#item #desc #text {
    background: #262626;
    color:      #b3b3b3;
    padding: 7px 10px;
    border-radius: 3px;
}










#item #comments { margin: 150px 0px; }


#item #comments #header {
    color: #666666;
    font-size:  20px;
    text-align: center;
}


#item #comments #thread { margin: 15px 0px 0px; }


#item #comments #thread .info {
    font-size: 12px;
    padding:   3px 5px;
}


#item #comments #thread .name {
    font-size: 14px;
    opacity:   0.8;
}


#item #comments #thread .date {
    float: right;
    color: #666666;
}


#item #comments #thread .text {
    background: #262626;
    color:      #b3b3b3;
    font-size: 14px;
    padding:   7px 10px;
    margin-bottom: 40px;
    border-radius: 3px;
}


#item #comments #new {
    max-width: 700px;
    margin: 0px auto;
}


#item #comments #new textarea {
    font-size: 14px;
    resize: none;
}


#item #comments #new button       { opacity: 0.3; }
#item #comments #new button:hover { opacity: 0.9; }










.form {
    max-width: 700px;
    margin: 50px auto;
}


.form-group { margin: 30px auto; }


input, select, textarea {
    background:#1f1f1f !important;
    color:     #d9d9d9 !important;
    border: 1px solid #333333 !important;
}


.input-label {
    margin: 3px 5px;
    font-size: 16px;
    color: #666666;
}

#add-type { font-size: 14px; }








.card {
    margin: 20px auto;
    width: 95%;
    font-size: 14px;
    border: none;
    background: #1a1a1a;
}

.card-header {
    padding: 5px 10px;
    font-size: 14px;
    color: #999999;
    background: #333333;
    border: 1px solid #333333;
}

.card-body {
    padding: 10px;
    padding-bottom: 5px;
    background: #1f1f1f;
    border: 1px solid #333333;
    border-top: none;
    border-radius: 0px 0px 3px 3px;
}

.card-body .item-text { font-size: 14px; }


.card-body .oi       { opacity: 0; }
.card-body:hover .oi { opacity: 0.5; }


.assigned-to {
    color: #666666;
    font-size:   12px;
    font-weight: bold;
}










.status { font-size: 20px; }


.count {
    font-size: 20px;
    margin-right: 5px;
    padding:      5px;
}










#table-wrapper {
    margin: 0px auto 100px;
    width:  100%;
    max-width: 1200px;
}


td, th { border-bottom: 1px solid #333333 !important; }
th     { border-top:    1px solid #333333 !important; }


tr:hover { background: #1f1f1f; }


tr .oi       { visibility: hidden; }
tr:hover .oi { visibility: visible; }


#no-data {
    color: #999999;
    text-align: center;
    font-size:  18px;
}