html, body {
    margin: 0;
    padding: 0;
    right: 0; left: 0;
    background-color: #e5ebef;
}
.appbar {
    padding: 18px 20px;
    background-color: #5682A3;
    color: #fff;
    position: fixed;
    right: 0; left: 0; top: 0;
}

.appbar > * {
    vertical-align: middle;
    display: inline-block;
}

.appbar > .mobilenavigation {
    display: none;
}

.appbar .login {
    display: inline-block;
    position: absolute;
    right: 24px;
    vertical-align: middle;
    padding: 8px 12px;
    margin-top: -10px;
}

.appbar .login:hover {
    cursor: pointer;
    background-color: #4d7592;
    border-radius: 8px;
}

.appbar .login .userprofile > * {
    vertical-align: middle;
}

.appbar .login .profile_picture {
    width: 35px;
    height: 35px;
    display: inline-block;
    border-radius: 99999px;
}

.appbar .login .profile_name {
    display: inline-block;
    margin: 0 14px 0 0;
    font-size: 1.2em;
}

.pages {
    width: 92vw;
    padding: 14px 10px;
}

.mainpage {
    width: 60vw;
}

.sidepage {
    width: 30vw;
    vertical-align: top;
    position: fixed;
}

.mainpage, .sidepage {
    display: inline-block;
}

.card {
    margin: 10px;
    padding: 18px 24px;
    background-color: #fff;
    box-shadow: 0 0 0 1px #dae0e4;
    border-radius: 10px;
}

.card-bottom {
    margin: 10px;
    padding: 8px;
    text-align: right;
    box-shadow: 0 0 0 0px;
    background-color: transparent;
}

.card .navigation {
    display: flex;
    flex-direction: row;
}

.card > .navigation > .left, .card > .navigation > .right, .card > .navigation > .center {
    flex: 1;
    display: flex;
}

.card > .navigation > .center {
    justify-content: center;
}

.card > .navigation > .right {
    justify-content: flex-end;
    cursor: pointer;
}

.card > .navigation > .left {
    cursor: pointer;
}

.description-display{
    margin-bottom: 0rem;
    /*overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4; /* number of lines to show *
    -webkit-box-orient: vertical;*/
}

.questionsdisplay:hover {
    background-color: #edeeef2a;
}

.questionsdisplay .questiontext{
    font-weight: 500;
    font-size: 1.1em;
    line-height: 1.4em;
    color: #202124;
}

.questionsdisplay .text_small {
    color: #535353;
}

.questionsdisplay .questionOptionBox, .questionsdisplay .attachment {
    border: 1px solid #c5c5c5;
    margin: 10px auto;
    padding: 8px 14px;
    cursor: pointer;
}

.questionsdisplay .questionOptionBox:hover, .questionsdisplay .attachment:hover {
    background-color: #dae0e4;
}

.attachment:hover {
    cursor: pointer;
}

.attachment > .filename{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.questionsdisplay .useranswer {
    margin: 18px 0 0 0;
    padding-bottom: 4px;
    border-bottom: 1px solid #cccccc;
    line-height: 1.5em;
}

.answersdisplay {
    margin: 20px 0 10px 0;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 12px;
}

.answersdisplayitem {
    background-color: #f8f9fa;
    color: #202124;
    padding: 6px 10px;
    word-wrap: break-word;
    margin: 8px 0;
}

.answersdisplayitem:hover {
    background-color: #F2F5F7;
}

.answersdisplayitem > div, .useranswer > div {
    margin: 10px 0;
}

.answersdisplayitem > div:last-child, .useranswer > div:last-child {
    margin: 10px 0 0 0;
}

.answersdisplayitem > .attachment {
    padding: 6px 0 6px 16px;
    border: 1px solid #dedede;
}

.answersdisplayitem > .attachment:hover {
    background-color: #f0f5f9;
}

canvas.chartCanvas {
    width: 90vw;
    height: auto;
}

.chartdisplay {
    width: 60%;
    margin: 0 auto;
    padding: 40px 0 20px 0;
}

.sidepage .block {
    margin: 0 0 20px 0;
}

.block:last-child {
    margin: 0;
}

.boxSelect {
    margin: 10px 0;
    display: flex;
    flex-direction: row;
}

.boxSelect:last-child{
    margin: 10px 0 0 0;
}

.boxSelect > * {
    padding: 4px 12px;
    border: 1px solid #dae0e4;
    flex: 1;
    margin: 0 -0.5px;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.boxSelect > .active {
    background-color: #5682A3;
    color: #fff;
    border-color: #5682A3;
}

.boxselectitem:not(.active):hover {
    cursor: pointer;
    background-color:#dae0e4;
}

.appLogos {
    margin: 4px 0 12px 0;
}

.appLogos > img {
    width: 150px;
    height: auto;
    margin: 0 40px;
}

/**
*   Button Styling
*/
.btn {
    color: rgba(0,0,0,.87);
    width: 100%;
    text-align: center;
    line-height: 2.25rem;
    vertical-align: middle;
    white-space: nowrap;
    outline: none;
    border-radius: 2px;
    padding: 0 1.625rem;
    border: none;
    transition: all .2s ease-in-out;
    cursor: pointer;
    font-family: inherit;
}

.flat-btn {
    background: #fff;
}

.flat-btn:hover {
    color:rgba(0,0,0,.87);
    background-color:#f2f2f2;
}

/**
* Telegram Button Styling
*/
.telegram-follow-button {
    display: inline-block;
    max-width: 60%;
    border-radius: 15px;
    background-color: #54a9eb;
    cursor: pointer;
    line-height: 22px;
    color: #FFF;
    text-decoration: none;
}
.telegram-follow-button:hover {
    background: #4B97D1;
    color: #fff;
}
.telegram-follow-button > * {
    display: inline-block;
    margin-top: 18px;
}
.telegram-follow-button img{
    width: 40px;
    vertical-align: middle;
    display: inline-block;
    margin: 0 14px;
}

/*** Mobile View ***/
.mobilenavigation {
    margin-top: 12px;
}