html{
    background-color: #10161b;
}
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow: hidden;
}

html{
    overflow-y: auto;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

#task-container{
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px);
}

.main {
    flex: 1;
}

.is-invisible{
    visibility: hidden;
}

.is-vcenter{
    align-items: center;
}

.is-absolute{
    position:absolute;
}

.is-fullwidth{
    width:100%;
}

.is-fullheight{
    height:100%;
}

.capitalised{
    text-transform: capitalize;
}


.feedback-incorrect{
    font-weight:600;
    color:#ff0000;
}

.feedback-other{
    font-weight:600;
    color:#b66f12;
}

.feedback-correct{
    font-weight:600;
    color:green;
}

.feedback-subsection{
    text-transform: capitalize;
}

.feedback-total{
    font-weight:600;
}

.limit-width-feedback{
    max-width:300px;
}
.table-row-light{
    background-color: #eeeeee;
}

.table-row-dark{
    background-color: #cccccc;
}
.table-good{
    background-color:#92cf9e
}

.table-bad{
    background-color:#eeb9b9
}

#feedback-navButtons{
    width:100%;
    padding-top: 20px;
    padding-bottom: 20px;
}

#feedback{
    display:none;
}

#feedback table, #feedback th, #feedback td {
    border: 1px solid;
}

#feedback td, #feedback th{
    padding-left:3px;
    padding-right:3px;
}

#feedback th {
    color:white;
    font-weight:600;
    background-color: #398852;
}


.has-grey-border-bottom{
    border-bottom: thin solid grey ;
}

.slid-left{
    left:0%;
    transform:translate(-100%, 0%) ;
    transition: transform 0.5s;
}

.slid-right{
    transform:translate(100%, 0%) ;
    right:0%;
    transition: transform 0.5s;
}

.slid-visible{
    transform:translate(0%, 0%) ;
}
#intro-text{
    z-index:2;
    padding-bottom: 20px;
}

.center-dialog{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#interaction-overlay{
    position: absolute;
    background-color: blue;
    width: 100vw;
    height: 100vh;
    z-index: 5;
    opacity: 0;
    transform: translateY(-60px);
}

#fade-overlay{
    position: absolute;
    display:none;
    background-color: #131313;
    width: 100vw;
    height: 100vh;
    z-index: 5;
}

.tutorial-content{
    border: white solid thick;
    background-color: #43a762;
    color:white !important;
    border-radius:8px;
    z-index:1;
}

.tutorial-content span, p{
    color:white;
}

.tutorial-content .ui-dialog-titlebar {
    background-color:#398852;
    border:none;
}

.tutorial-content .ui-dialog-buttonpane {
    background-color:transparent;
    border:none;
}

.tutorial-content .ui-dialog-titlebar-close {
    display: none;
}

.expand-icon{
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    margin-right: 5px;
    transform: translateY(5px);
    background-image: url(../assets/expand-icon.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;

}

#header{
    background-color:#22262c;
    height:60px;
    z-index:2;
}

#time-bar{
    border-radius:100px !important;
    flex:1 !important;
}

#time-bar.is-paused>#time-bar-progress {
    background-color: #5e5e5e;
}

#time-bar-progress{
    background-color:#47e37b;
}

.prog-bar-container{
    background-color:#555555;
    height:10px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px; 
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px; 
    flex:none;
    overflow:hidden;
}

.prog-bar-container:first-of-type{
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
}

.prog-bar-container:last-of-type{
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}

.prog-bar-container.is-single{
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
}

.prog-bar-container:not(:first-of-type) {
    box-shadow: -3px 0px 0 #000;
}

.prog-bar{
    height:100%;
    width:0%;
}

.prog-bar.task-in-progress{
    background-color:#fcf287;
    width:100%;
}

.prog-bar.task-complete{
    background-color:#47e37b;
    width:100%;
}

#footer{
    background-color: #22262c;
    height: 60px;
    position: relative;
    z-index: 2;
}

.flex-button{
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
}

.footer-button{
    height:100%;
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
    text-indent: 20px;
    
}

.footer-button.is-active{
    background-color:#2181f1 !important;
}

.footer-button:hover{
    background-color:#234162;
}

.footer-button.is-disabled{
    background-color:gray !important;
    color:darkgray !important;
}

.is-demo{
    background-color:gray;
    opacity:0.5;
}

/* Side menu */

#guidebook-pane{
    left:0%;
    z-index:1;
    min-width:450px;
}

#menu-pane-container{
    display:contents;
}

.menu-pane{
    left:0%;
    z-index:2;
    width:30%;
    min-width:450px;
    color:#98b2cf;
    background-color:#10161b;
    
}

.menu-link {
    cursor:pointer;
    user-select: none;
    line-height:1.2;
    display: block;
    padding-left:20px;
    width:100%;
    display:table;
    background-color:#10161b;
    font-size: 14pt;
}

.menu-link:hover{
    background-color:#1b3248;
}

.menu-link span {
    display:table-cell;
     vertical-align:middle;
}

.bg-gradient{
    background: rgb(10,22,40);
background: linear-gradient(180deg, rgba(10,22,40,1) 0%, rgba(58,79,113,1) 100%);
}

.intro-button:hover {
    background-color: #234162;
    color:white;
}

.intro-button {
    background-color: #2181f1;
    color:white;
    border:none;
    border-radius:20px;
    padding-left:20px;
    padding-right:20px;
}

.exit-button{
position: absolute;
right: 10px;
top: 10px;
}


.rounded-button{
    border-radius: 30px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight:600;
    display:flex;
    align-items: center;
}

.blue-button:hover{
    background-color: #7baade;
}

.blue-button{
    background-color: #3771b2 !important;
    color: white !important; 
    border: none;
}

.white-button{
    border:1px solid #3771b2;
    background-color: white;
    color:#3771b2 !important;
}

.white-button:hover{
    background-color: #c4c4c4;
}

.tutorial-button{
    border-radius: 30px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight:600;  
    border: none !important;
}

.ui-dialog button{
    border-radius: 30px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight:500 !important;
    border:none !important;
}




/*--------*/


.ui-widget-overlay{
    background: #000000;
    opacity: 0.5;
    -ms-filter: Alpha(Opacity=.5);
    filter: Alpha(Opacity=.5);
}

.overlay-card{
    background-color: #20242a;
}


.card{
    border-radius:8px;
    width:25%;
    min-width:250px;
}

.no-close .ui-dialog-titlebar-close {
    display: none;
}

.end-modal{
    display:none;
}

#task-end-modal{
    display:none;
}


/* tooltip overrides */
.protip-container{
    background-color: #43a762 !important;
    color:white !important;
    border-radius:8px;
}

.protip-arrow{
    transform: scale(1.1);
}

.protip-skin-default--scheme-pro[data-pt-position="top-left"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="top"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="top-right"] .protip-arrow {
    border-top-color:  #43a762 !important;
}

protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="top-right"] .protip-arrow {
    border-top-color:  #43a762 !important;
}

.protip-skin-default--scheme-pro[data-pt-position="bottom-left"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="bottom"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="bottom-right"] .protip-arrow {
    border-bottom-color:  #43a762 !important;
}

.protip-skin-default--scheme-pro[data-pt-position="left-top"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="left"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="left-bottom"] .protip-arrow {
    border-left-color:  #43a762 !important;
}

.protip-skin-default--scheme-pro[data-pt-position="right-top"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="right"] .protip-arrow,
.protip-skin-default--scheme-pro[data-pt-position="right-bottom"] .protip-arrow {
    border-right-color:  #43a762 !important;
}

.protip-skin-default--scheme-pro[data-pt-position="top-left-corner"] .protip-arrow {
    border-right-color:  #43a762 !important;
}

.protip-skin-default--scheme-pro[data-pt-position="top-right-corner"] .protip-arrow {
    border-top-color:  #43a762 !important;
}

.protip-skin-default--scheme-pro[data-pt-position="bottom-left-corner"] .protip-arrow {
    border-bottom-color:  #43a762 !important;
}

.protip-skin-default--scheme-pro[data-pt-position="bottom-right-corner"] .protip-arrow {
    border-left-color:  #43a762 !important;
}