html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
}

body {
    position: relative;
    font-size: 16px;
}

main {
    height: 100%;
    overflow-y: auto;
}

header {
    width: 100%;
    position: relative;
    color: white;
    background-color: #454646;
    align-items: center;
}


p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
}

h1 {
    padding: 10px;
    vertical-align: middle;
    text-align: center;
   font-size:120%;
   
    min-width: 210px;
}

header div {
    width: 100%;
    text-align: center;
}

ul {
    padding: 0;
}

.clearfix {
    display: block;
    clear: both;
    height: 0;
}

.pointerCursor {
    cursor: pointer;
}

.invisible {
    visibility: hidden;
}

.undisplayed {
    display: none;
}

.ms-landing-page {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
}
.ms-landing-page_header table{
   
    margin: 0 auto;
    max-width: 1000px;
    width: 100%;
}
.ms-landing-page_header {
   
    display: -webkit-inline-flex;
    display: inline-flex;
}
.ms-landing-page_header--left {
    margin-right: 20px;
    cursor: pointer;
}

.ms-landing-page_header--right {
    padding: 10px 20px;
    transition: background ease 0.1s, color ease 0.1s;
    cursor: pointer;
}

    .ms-landing-page_header--right:active, .ms-landing-page_header--right:hover {
        background: #c7e0f4;
        color: #000;
        cursor: pointer;
    }

    .ms-landing-page_header--right:active {
        background: #c7e0f4;
        -webkit-transform: scale3d(0.98, 0.98, 1);
        transform: scale3d(0.98, 0.98, 1);
    }

.ms-landing-page_header--right--disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

    .ms-landing-page_header--right--disabled:active, .ms-landing-page_header--right--disabled:hover {
        background: transparent;
    }

    .ms-landing-page_header--right--disabled:active {
        -webkit-transform: none;
        transform: none;
    }

.ms-landing-page_header--center {
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
}

    .ms-landing-page_header--center p {
        padding: 0 10px;
        -webkit-flex: 1 0 0px;
        flex: 1 0 0px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        text-align: left;
        cursor: pointer;
        transition: background ease 0.1s, color ease 0.1s;
        padding: 10px;
    }

        .ms-landing-page_header--center p:active, .ms-landing-page_header--center p:hover {
            background: #c7e0f4;
            color: #000;
            cursor: pointer;
        }

        .ms-landing-page_header--center p:active {
            background: #c7e0f4;
            -webkit-transform: scale3d(0.98, 0.98, 1);
            transform: scale3d(0.98, 0.98, 1);
        }

    .ms-landing-page_header--center p--disabled {
        opacity: 0.6;
        pointer-events: none;
        cursor: not-allowed;
    }

        .ms-landing-page_header--center p--disabled:active, .ms-landing-page_header--center p--disabled:hover {
            background: transparent;
        }

        .ms-landing-page_header--center p--disabled:active {
            -webkit-transform: none;
            transform: none;
        }
.ms-landing-page__main {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
    height: 100%;
}

.ms-landing-page_content {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    height: 100%;
    -webkit-flex: 1 1 0;
    flex: 1 1 0;
   
}

.ms-landing-page_footer {
    min-height:50px;
    width: 100%;
    position: relative;
    bottom: 0;
    text-align: center;
    background-color: #454646;
    color:white!important;
    
}
.ms-landing-page_footer a{
   padding:5px;
    color: white !important;
}
.ms-landing-page_footer--left {
    transition: background ease 0.1s, color ease 0.1s;
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex: 1 0 0px;
    flex: 1 0 0px;
    padding: 20px;
}

    .ms-landing-page_footer--left:active, .ms-landing-page_footer--left:hover {
        background: #005ca4;
        cursor: pointer;
    }

    .ms-landing-page_footer--left:active {
        background: #005ca4;
    }

.ms-landing-page_footer--left--disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

    .ms-landing-page_footer--left--disabled:active, .ms-landing-page_footer--left--disabled:hover {
        background: transparent;
    }

.ms-landing-page_footer--left img {
    width: 40px;
    height: 40px;
}

.ms-landing-page_footer--left h1 {
    -webkit-flex: 1 0 0px;
    flex: 1 0 0px;
    margin-left: 15px;
    text-align: left;
    width: auto;
    max-width: auto;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ms-landing-page_footer--right {
    transition: background ease 0.1s, color ease 0.1s;
    padding: 29px 20px;
}

    .ms-landing-page_footer--right:active, .ms-landing-page_footer--right:hover {
        background: #005ca4;
        cursor: pointer;
    }

    .ms-landing-page_footer--right:active {
        background: #005ca4;
    }

.ms-landing-page_footer--right--disabled {
    opacity: 0.6;
    pointer-events: none;
    cursor: not-allowed;
}

    .ms-landing-page_footer--right--disabled:active, .ms-landing-page_footer--right--disabled:hover {
        background: transparent;
    }


.placeholder {
    margin-bottom: 20px;
    width: 100%;
    text-align:center;
}

.placeholder_img {
    width: 60px;
    height: 60px;
    background-color: #F4F4F4;
    display: block;
    margin-bottom: 10px;
}

.placeholder_text {
    height: 5px;
    background-color: #F4F4F4;
    display: block;
    margin-bottom: 10px;
}

.placeholder_text--half {
    width: 60%;
}

.placeholder_text--para {
    height: 40px;
}

.placeholder_button {
    width: 200px;
    height: 40px;
    margin: 10px;    
}
#qtext {
   /* border: 1px solid black;*/
    padding: 5px;
    text-align:left;
    
}
#qcount{
    margin-bottom:10px;
    width:100%;
    padding:10px 0px;
}
.ms-MessageBanner {
    background-color: white !important;
}

#notification-popup.ms-MessageBanner {
    position: absolute;
    left: 0px;
    bottom: 0px;
    text-align: left;
    height: inherit;
    min-width: inherit;
}
#btnOKp{
    display:none;
    margin:0 auto;
    margin-top:1.5%;
    
}
#btnOK{
    margin:0 auto;
    display:block;
}
.ms-MessageBanner-content {
    text-align: center;
    margin-top: 1% ;
}

#notification-popup .ms-MessageBanner-text {
    margin: 0;
  
    min-width: inherit;
    text-align:center;
    max-width:100%!important;
}
.correct{
    background-color:#8cc63e!important;
    
}

.wrong{
    background-color:#e11b2c!important;
    color:white;
}

.wrong #notification-header{
    color:white;
}
.correct #notification-header{
    color:white;
}

.partial{
    background-color:#f0a800!important;
}


.correct #notification-body, .wrong #notification-body{
    font-size: 230%!important;
    color: white!important;
}
#wait{
    margin: 15px auto;
    position:relative;
    width:110px;
    height:110px;
    /*line-height: 120px;*/
    padding:0px;
    font-size:40px;    
    text-align: center;
    background-image: url("../Images/loading.gif");
    overflow: hidden;
}
#wait #my_span{
    line-height: 100px;
    margin:10px auto;
    font-size:25px; 
    background-color:#0ac0b755;
    text-align: center;
    max-width:100px;
    border-radius: 50px;
    white-space: nowrap;
    text-overflow: clip;
    width:0px;
}
.dz-preview{
    display: none;
}
#qlist{
    overflow:auto;
    max-height:75%;
}
#qlist table{
    width:90%;
    margin:5px auto;
    border:1px solid lightgrey;
    
}
#qlist table th{
    background-color: #454646;
    color:white;

}
#qlist tr{
    border:1px solid lightgrey; 

}
#qlist td{
    padding:3px;
    vertical-align: top;
    flex-wrap: wrap;
    text-align: left;
    border-top:1px solid lightgrey; 
}

.ms-Button{    
    color:#ffffff;
}
 #testbar .ms-Button{
    margin:10px 0px!important;
    max-width:190px;
    width:100%;  
    max-height:50px;
    height:100%;
    min-height:50px;  
}
 #category .ms-Button{
    margin:10px 0px!important;
    max-width:290px;
    width:100%;
    max-height:50px;
    height:100%;
    min-height:50px;
}
#testbar{
   
    padding: 1%;
    margin: 2% auto;
    max-width:95%;
    min-width:80%;
}

.steps{
    padding:10px 0px;
    margin-right:10px;
    text-align:left;
    color:#0078d7;
}
.steps span{
    padding:2px;
}

.ms-landing-page_main{
    max-width:1000px;
    width:100%;
    margin:0 auto;
}

#mc_content{
    text-align:left;
}

#mc_content .pretty{
    display:block;
    margin:10px;
}

.pretty .state label:after,.pretty .state label:before{
    top:3px;
    left:0px;

}
.pretty .state label{
    white-space: normal;
    text-indent: 0;
    margin-left:25px;
    line-height: 22px;
}

.warning {
    background-color:red;
    color:white;
    border:1px solid red;
    -webkit-transition: all 0.9s ease;
    -moz-transition: all 0.9s ease;
    -o-transition: all 0.9s ease;
    transition: all 0.9s ease;
}
#cg_text{
    color:white;
}

#elapsed_time{
    text-align:center;
    margin:0px 10px;
    color:black;
    display:none;
}
@media (min-height: 639px) {
    #qlist{
        max-height:80%;
    }
}

@media (max-height: 641px) {
    footer{
        display:none;
    }
    .ms-MessageBanner-content{
        margin-top:0px;
    }
    .ms-MessageBanner-text{
        padding:0px;
    }
}