body {
    font-size: .875rem;
}


#login, #demoview{

    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1042;

    overflow: auto;
    position: fixed;
    background: rgba(11,11,11,.5);
    opacity: 1;
    transition: ease-in-out all .5s;

    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.feather {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}
.dropbtn {
 
  cursor: pointer;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  right: 0
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}

.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.block-overflow{
    display: block;
    display: -webkit-box;
    max-width: 100%;
    height: 43px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dot{

}
.dot-online{

}
article {
    background: white;
}

.table-of-contents {
    float: right;
    width: 40%;
    background: #eee;
    font-size: 0.8em;
    padding: 1em 2em;
    margin: 0 0 0.5em 0.5em;
}
.table-of-contents ul {
    padding: 0;
}
.table-of-contents li {
    margin: 0 0 0.25em 0;
}
.table-of-contents a {
    text-decoration: none;
}
.table-of-contents a:hover,
.table-of-contents a:active {
    text-decoration: underline;
}

h3:target {
    animation: highlight 1s ease;
}

@keyframes highlight {
    from { background: yellow; }
    to { background: white; }
}

#chat{

    background: whitesmoke;
    height: 100%;
    position: absolute;
    right: 0;
    top:0;
    box-shadow: inset 2px 0 0 rgba(0, 0, 0, .1);
}
.iframe_sim{
    width:100%;
    height:500px;
}

.question-container {
    width: 100%;
    padding-left: 8px;
    box-sizing: border-box;
}
.question-container {
    display: flex;
    padding: 12px 8px;

    float: none;
    width: 100%;
}
.question-container {
    overflow: hidden;
    padding: 15px 0;
    float: left;
    width: 728px;
    border-bottom: 1px solid #eff0f1;
    text-align: left;
    font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
    font-size: 13px;

    line-height: 1.26666667;
    color: #242729;
}
/*}
.statscontainer {
    margin-right: 16px;
    width: 58px;
    float: none;
    box-sizing: inherit;
}
.statscontainer {
    width: 78px;
    float: left;
    margin-right: 8px;
    margin-left: 8px;
    flex-shrink: 0;
    color: #6a737c;
    font-size: 11px;
    text-align: left;

}
.question-summary .stats, .question-summary .stats + .views {
    margin-left: 0;
}
.stats {
    margin: 0;
    margin-left: 0px;
    width: 58px;
    box-sizing: inherit;
    padding: 0;
    border: 0;
    text-align: left;
    font-size: 100%;
    vertical-align: baseline;
}
.vote {
    text-align: center;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: inherit;
    font-size: 100%;
    vertical-align: baseline;
}
.statscontainer {
    color: #6a737c;

}
.votes {
    padding: 0;
    margin-bottom: 8px;
    text-align: center;
}

.summary, .narrow .summary {
    flex: 1 auto;
    width: auto;
    float: none;
    margin: 0;
    overflow: hidden;
}

.summary a:hover {
    color: #0056b3;
    text-decoration: underline;
}
.statscontainer .status {
    padding: 7px 0 5px;
    border-radius: 3px;
}

.statscontainer .status strong {
    font-size: 20px;
    font-weight: normal;
}
.status strong {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}*/
/*--------------------student styles-------------------------------*/

/*}
#linksimulationModal .list-group-item {
  user-select: none;
}

#linksimulationModal .list-group input[type="checkbox"] {
  display: none;
}

#linksimulationModal .list-group input[type="checkbox"] + .list-group-item {
  cursor: pointer;
}

#linksimulationModal .list-group input[type="checkbox"] + .list-group-item:before {
  content: "\2713";
  color: transparent;
  font-weight: bold;
  margin-right: 1em;
}

#linksimulationModal .list-group input[type="checkbox"]:checked + .list-group-item {
  background-color: #0275D8;
  color: #FFF;
}

#linksimulationModal .list-group input[type="checkbox"]:checked + .list-group-item:before {
  color: inherit;
}

#linksimulationModal .list-group input[type="radio"] {
  display: none;
}

#linksimulationModal .list-group input[type="radio"] + .list-group-item {
  cursor: pointer;
}

#linksimulationModal .list-group input[type="radio"] + .list-group-item:before {
  content: "\2022";
  color: transparent;
  font-weight: bold;
  margin-right: 1em;
}

#linksimulationModal .list-group input[type="radio"]:checked + .list-group-item {
  background-color: #0275D8;
  color: #FFF;
}

#linksimulationModal .list-group input[type="radio"]:checked + .list-group-item:before {
  color: inherit;
}*/

/* ---------------for later -------------------------------

                    #questionname{
                        background: none repeat scroll 0 0 black;
                        position: fixed;
                        display: block;
                        opacity: 0.5;
                        z-index: 1000001; 
                        left: 0;
                        top: 0;
                        height: 100%;
                        width: 100%;
                    }

                    #ajax-loader{
                        display: block;
                        border-radius: 60px;
                        border: 6px solid #414C5C;
                        height: 80px;
                        width: 80px;
                        position: fixed;
                        top: 30%;
                        left: 50%;
                        background-image:none!important;
                        background:#fff;
                        -moz-box-shadow: 0 0 5px #fff;
                        -webkit-box-shadow: 0 0 5px #FFF;
                        box-shadow: 0px 0px 15px #FFF;
                    }

                    #ajax-loader::before{
                        content: "";
                        position: absolute;
                        background-color: #414C5C;
                        top:6px;
                        left: 48%;
                        height: 35px;
                        width: 6px;
                        border-radius: 5px;
                        -webkit-transform-origin: 50% 94%;
                        transform-origin: 50% 94%;
                        -webkit-animation: ptAiguille 12s linear infinite;
                        animation: ptAiguille 12s linear infinite;
                    }

                    #ajax-loader::after{
                        content: "";
                        position: absolute;
                        background-color: #414C5C;
                        top:2px;
                        left: 48%;
                        height: 38px;
                        width: 6px;
                        border-radius: 5px;
                        -webkit-transform-origin: 50% 97%;
                        transform-origin: 50% 97%;
                        -webkit-animation: grdAiguille 2s linear infinite;
                        animation: grdAiguille 2s linear infinite;
                    }

                    @-webkit-keyframes grdAiguille{
                        0%{-webkit-transform:rotate(0deg);}
                        100%{-webkit-transform:rotate(360deg);}
                    }

                    @-webkit-keyframes ptAiguille{
                        0%{-webkit-transform:rotate(0deg);}
                        100%{-webkit-transform:rotate(360deg);}
                    }


                    #page-overlay {
                        background: none repeat scroll 0 0 black;
                        position: fixed;
                        display: block;
                        opacity: 0.5;
                        z-index: 1000001;
                        left: 0;
                        top: 0;
                        height: 100%;
                        width: 100%;
                    }

----------------------------------end for later------------------*/



/* styles for '...' */ 
.block-with-text {
    /* hide text if it more than N lines  */
    overflow: hidden;
    /* for set '...' in absolute position */
    position: relative; 
    /* use this value to count block height */
    line-height: 1.2em;
    /* max-height = line-height (1.2) * lines max number (3) */
    max-height: 3.6em; 
    /* fix problem when last visible word doesn't adjoin right side  */
    text-align: justify;  
    /* place for '...' */
    margin-right: -1em;
    padding-right: 1em;
}
/* create the ... */
.block-with-text:after {
    /* points in the end */
    content: '...';
    /* absolute position */
    position: absolute;
    /* set position to right bottom corner of block */
    right: 0;
    bottom: 0;
}
/* hide ... if we have text, which is less than or equal to max lines */
.block-with-text:after {
    /* points in the end */
    content: '';
    /* absolute position */
    position: absolute;
    /* set position to right bottom corner of text */
    right: 0;
    /* set width and height */
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    /* bg color = bg color under block */
    background: white;
}

.upvote{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column

}
.solv-problem{
    line-height: 1.2em;
    font-size: 18px;
    width: 100%;
    padding-right: 12px;
    width: 100%;
    padding: 0
}
.problem-content,
.answer-content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}
/*.choice{
    width: 80%;
    height: auto;
    text-align: left
}
.choice input{
    height: inherit;
    width: inherit;
    visibility: hidden
}*/
.choice{
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    align-items: center;
    width: 80%;
    height: auto;
}
.choice >label{
    width: 100%;
    height:100%;
}
.choice input{
    height: 24px;
    width: 24px;

}
.choice.active
{
    border-color: #A8FAD4;
    background: #A8FAD4;
}
.choice:hover{
    border-color: #333;
}

.choice.choseanswer{
    border-color: red;
    background: red;
}
.choice.rightanswer{
    border-color: green;
    background: green;
}
#answers-window .choice{
    pointer-events: none;
}
.choice {
    padding: 5px 24px;
    border: 1px solid #C2C4CF;
    border-top-color: rgb(194, 196, 207);
    border-right-color: rgb(194, 196, 207);
    border-bottom-color: rgb(194, 196, 207);
    border-left-color: rgb(194, 196, 207);
    border-radius: 20px;
    font-size: 16px;
    line-height: 1em;
    background: #FFF;

}

.share, .webshare {
    display: none;
  }

  /* URL sharing is enabled */
.social .share {
    display: flex;
    flex-wrap: wrap;
  }
  
  /* Web Share API is supported */
  .webshareapi .webshare {
    display: block;
  }

  /* basic share styling */
.share, .share li {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  .share a {
    display: block;
    text-decoration: none;
    color: #fff;
    background-color: #557;
    border-radius: 1.5em;
  }
  
  .share a:hover, .share a:focus {
    background-color: #779;
  }