@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    src: url('./fonts/IBMPlexSans-Regular.ttf');
}

@font-face {
    font-family: 'IBM Plex Sans';
    font-style: normal;
    font-weight: bold;
    src: url('./fonts/IBMPlexSans-Bold.ttf');
}

:focus {
    outline: 1px solid #808080;
    /*border: 1px solid #909090;*/
}

body {width: 100%; background: white; color: #000000; margin: 0px; font-family: 'IBM Plex Sans', sans-serif; line-height: 1.1}

.mainWidgetCommon {margin-left: auto; margin-right: auto;}
.myWidget {padding: 20px;} 
#mainWidget { width: 600px; }
#mainResultWidget { width: 100%; }
@media only screen and (max-device-width:599px){ #mainWidget { width: 100%; } }
.larger { font-size: 1.45em; }
.bitLarger { font-size: 1.15em; }
.smaller{ font-size: 0.85em; } 
.tiny{ font-size: 0.65em; } 
.centeredImg { display: block; margin-left: auto; margin-right: auto; }
.largeTopMargin { margin-top: 20px; }
.hugeBottomMargin { margin-bottom: 100px; }
.smallTopMargin {margin-top: 5px; }
.myNumber { width: 150px; }
.hidden { display: none; }
.back {}
.help {}
.myTitle{
    font-size: 1.8em;
}

.mySpecialTitle{
    font-size: 1.8em;
    margin-left: 15px;
    margin-right: 15px;
}

.myOrdering {color: #0000dc;}

.fieldPad{padding-top: 20px; padding-left: 40px; padding-right: 40px; padding-bottom: 20px;}
.myfield{
    /*border: 1px solid black; */
    border-radius: 10px;
    overflow: hidden;
    -webkit-box-shadow: 1px 5px 5px #A0A0a0;
    box-shadow: 1px 5px 5px #A0A0a0;  
}
.myfieldHeader {
    background: #0000dc;
    color: white;
    padding-top: 10px;
    padding-left: 40px;
    padding-right: 20px;
    padding-bottom: 10px;
    font-style: italic;
    font-size: 1.45em;
}

.errorMsg{ color: #e50101;}
.answer{width: 80%; height: 100px; margin-left: auto; margin-right: auto; font-size: 80px; text-align: center; margin-top:10px; margin-bottom: 10px; opacity:1.0; background-color: #72dae7;}
.answerBar{height: 100%; font-size: 80px; text-align: center; background-color: #72dae7; position: absolute; left: 0px; top: 0px;}
.answerFrame{width: 80%; height: 100px; margin-left: auto; margin-right: auto; font-size: 40px; text-align: center; margin-top:10px; margin-bottom: 10px; opacity:1.0; background-color: white; border: 1px solid black; position: relative;}
.answerNumber{position: absolute; left: 20px; top: 20px;}
.answerPercent{position: absolute; right: 20px; top: 20px;} 
.answer:hover { opacity:0.8;}
.question {
    width: 260px;
    min-width: 260px;
    height: 160px;
    display: inline-block;
    margin: 5px;
    background-color: #EBF09C;
    padding: 10px;
    border-radius: 20px;
    overflow: hidden;
    -webkit-box-shadow: 1px 5px 5px #A0A0a0;
    box-shadow: 1px 5px 5px #A0A0a0;
}

.question_wide {
    width: 520px;
    min-width: 260px;
    height: 160px;
    display: inline-block;
    margin: 5px;
    background-color: #EBF09C;
    padding: 10px;
    border-radius: 20px;
    overflow: hidden;
    -webkit-box-shadow: 1px 5px 5px #A0A0a0;
    box-shadow: 1px 5px 5px #A0A0a0;
}

.questionInaktiv {
    width: 260px;
    min-width: 260px;
    height: 160px;
    display: inline-block;
    margin: 5px 5px 10px 5px;
    background-color: #8dcdff;
    padding: 10px;
    border-radius: 20px;
    overflow: hidden;
    -webkit-box-shadow: 1px 5px 5px #A0A0a0;
    box-shadow: 1px 5px 5px #A0A0a0;
}

.question:hover {
    -webkit-box-shadow: 1px 5px 5px #A0A0a0;
    box-shadow: 5px 10px 10px #808080;
    cursor: pointer;
}

.questionSelected {
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    /*border: 1px solid black;*/
}

.outerContainer {
    display: table;
    width: 100%; 
    height:100%; 
    overflow: hidden;
    position: relative;
}

.innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    word-wrap: break-word;
    max-width: 200px;
    margin: 0 auto;
    text-align: center;
}

.toolbar {
    display: inline-block;
}

.toolButton {
    width:24px;
    height:24px;
}

#toolbarAdmin {
    position: absolute;
    top: 20px;
    left: 20px;
}

.questionContainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.upvoteNumber {
    position: absolute;
    top: 0px;
    left: 20px;
}

.upvotedContainter {
    position: absolute;
    top: 0px;
    left: 200px;
}

.answeredContainer {
    position: absolute;
    top: 0px;
    left: 220px;
}

.submittedContainer {
    position: absolute;
    top: 0px;
    left: 180px;
}

.smallerButtonText {
    font-size:0.75em;
}

.menublock{
    display: inline-block;
    margin: 5px 0px 0px 10px;
    text-align: left;
}

.noBottomMargin {
    margin-bottom: 0px;
}

.colorSelect {
    width: 16px;
    height: 16px;
    border: 1px solid black;
    display: inline-block;
}

#newQuestion {
    width: 200px;
    height: 2em;
}

#newQuestionText {
    width: 90%;
}

#newQuestionText {
    display: block;
    margin: 0 auto;
}

#newQuestionLengthDiv {
    display: block;
    margin: 0 auto;
    width: 100px;
    text-align: center;
}

.menuTitleElement {
    margin-bottom: 3px;
}

.colorButtons {
    width: 30px;
    height: 30px;
}

.ui-button .ui-icon.colorButton0Icon {
    width: 16px;
    height: 16px;
    background-image: linear-gradient(#EBF09C, #EBF09C);
    border-radius: 4px;
    border: solid #404040 1px;
}
.ui-button .ui-icon.colorButton1Icon {
    width: 16px;
    height: 16px;
    background-image: linear-gradient(#99F0A1, #99F0A1);
    border-radius: 4px;
    border: solid #404040 1px;
}
.ui-button .ui-icon.colorButton2Icon {
    width: 16px;
    height: 16px;
    background-image: linear-gradient(#A1F0EC, #A1F0EC);
    border-radius: 4px;
    border: solid #404040 1px;
}
.ui-button .ui-icon.colorButton3Icon {
    width: 16px;
    height: 16px;
    background-image: linear-gradient(#869BD9, #869BD9);
    border-radius: 4px;
    border: solid #404040 1px;
}
.ui-button .ui-icon.colorButton4Icon {
    width: 16px;
    height: 16px;
    background-image: linear-gradient(#D6A5FA, #D6A5FA);
    border-radius: 4px;
    border: solid #404040 1px;
}

#feedbackLecturerContent {
    padding: 0px 10px 10px 10px;
}

#studentToolsTitle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 10px;
    background: #0000dc;
    padding: 10px;
}

#studentTools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 10px;
    color: #0000dc;
    padding: 10px;
    border-bottom: 1px solid #0000dc;
}



#studentNew {
    /*-webkit-box-shadow: 1px 5px 5px #A0A0a0;
    box-shadow: 1px 5px 5px #A0A0a0;*/
    margin: 0px 10px 0px 10px;
    width: 7em;
}

#studentSortingSelect-button {
    /*-webkit-box-shadow: 1px 5px 5px #A0A0a0;
   box-shadow: 1px 5px 5px #A0A0a0;   */
    width: 15em;
    margin: 0px 10px 0px 10px;
}

#eventNoHeader {
    display: inline-block;
    background: #0000dc;
    color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
}

#insideAdminTools {
    padding: 0px 10px 10px 10px;
}

#controlgroup4Container{
    display:block;
    text-align: center;
}

#menu {
    margin-top: 10px;
    margin-bottom: 10px;
}

#footer {
    display: block;
    text-align: center;
}

#adminTools {
    text-align: center;
}

.mySubTitle {
    margin-top: 5px;
    display: block;
    /*font-weight: bold;*/
}

#aboutContent {
    line-height: 1.25;
}

header {
    border-top: solid 6px #9100dc;
    padding-top: 1em;
    padding-bottom: 1em;
    padding-left: 1em;
}

footer {
    margin-top: 1em;
    border-top: 1px solid gray;
    font-size: smaller;
    padding-left: 1em;
    padding-top: 1em;
    padding-bottom: 1em;    
}

button.ui-button
{
    background: #0000dc;
    border: 2px solid white;
    color: white;    
}

button.ui-button:hover
{
    background: black;
    border: 2px solid white;
    color: white;        
}