@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');











/*---Media Queries --*/
@media (max-width: 992px) {

}


@media (max-width: 768px) {

}    


@media (max-width: 576px) {

}


/*---Firefox Bug Fix --*/
.carousel-item {
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
}
/*--- Fixed Background Image --*/
figure {
  position: relative;
  width: 100%;
  height: 60%;
  margin: 0!important;
}
.fixed-wrap {
  clip: rect(0, auto, auto, 0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#fixed {
  background-image: url('img/mac.png');
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  will-change: transform;
}
/*--- Bootstrap Padding Fix --*/
[class*="col-"] {
    padding: 1rem;
}





/*
Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
*/

@media (min-width: 576px) {

}

a {
  text-decoration: none;
  display: inline-block;
  width: auto;
  margin-left: 5px;
  border-radius: 5px;
  cursor: pointer;
}

a label {
  cursor: pointer;
}

.col-xs-12.col-sm-12.col-md-9.col-lg-9.col-xl-10.border.border-primary {
  padding:0;
}



.container-fluid {
    width: 100%;
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}


.navbar {
    padding: 0rem .5rem;
}


nav.navbar.navbar-expand-md.navbar-light.bg-light.sticky-top{
    padding: .05em .5em;
}

.container-assignment a {
    width: 24%;
}

.assignment {
    display: inline-block;
    border: 1px solid gray;
    background-color: #ededed;
    color: black;
    margin-bottom: 5px;
    margin-left: 3px;
    margin-right: 3px;
    padding: 5px;
    border-radius: 5px;
    width: 100%;
    float: left;
}

.quiz {
    width: 100%;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
    margin-bottom:0px;
}

.assignment:hover{
    background-color: #00ff00;    
} 

.assignment a {
    width:100%;
}
.assignment p {
    font-size: 15px;
}

.q_btn {
  display: inline-block;
  width: 28px;
  height: 38px;
  background: #ededed;
  margin: 2px;
  color: #000;
  border-radius: 5px;
  /*border: 2px solid #efefef;*/
  border: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}        

.class_btn {
  display: inline-block;
  width: 100px;
  height: 40px;
  background: #ededed;
  margin: 2px;
  color: #000;
  border-radius: 5px;
  /*border: 2px solid #efefef;*/
  border: 0;
  padding: 0;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}  

.q_btn_green {
  background: #00ff00;    
}

.q_btn_blue {
  background: #00fcfc;    
}



container-fluid.row.center {
    float: left;
}

.btn {
    width:100%;
    height:65px;
    margin: 1px 0 1px 0;
    font-size: 1.2rem;
    background-color: #ededd0;
    
}

.btn:hover:enabled{
    /*your styles*/
  background-color:#00ff00;
  border: 0;
}

/*.btn:hover {*/
/*  background-color:#0bf9fc;*/
/*  border: 0;*/
/*}*/

.btn-abc{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    background-color: #ededed;
    font-size: 1.6rem;
    font-weight: 400;
}

.mf-abc{
    display: inline-block;
    width:30%; 
    margin-left: auto;
    margin-right: auto;
    background-color: #ededed;
    font-size: 1.6rem;
    font-weight: 400;
}

.btn-next{
    display: inline-block;
    margin-left: auto;
    margin-right: auto;
    width:48%; 
    background-color: "#ededd0";
}


.btn-stop {
  background: #fc0000;    
}

.btn-submit {
    margin-left: auto;
    margin-right: auto;
    width:98%; 
  background: #00ff00;    
}

.btn-cancel {
  background: #ff0000;    
}

/*@media (max-width: 964px) {*/
/*    .btn-window {*/
/*        width:100%;*/
/*    }    */
/*}*/

.btn-window {
    min-width:313px;
}

/*show 10 in a row*/
@media (min-width: 342px) {
    .btn-window {
        width:342px;
    }    
}

/*show 12 in a row*/
@media (min-width: 390px) {
    .btn-window {
        width:390px;
    }    
}

/*show 15 in a row*/
@media (min-width: 488px) {
    .btn-window {
        width:488px;
    }    
}

/*show 20 in a row*/
@media (min-width: 670px) {
    .btn-window {
        width:670px;
    }    
}

/*show 30 in a row*/
@media (min-width: 985px) {
    .btn-window {
        width:985px;
    }    
}

.center {
    margin:auto;
    text-align: center;    
}

.container-lpad{
    padding: 3px;
}

/*@media (orientation: portrait) { */
@media (max-width: 768px) {
    .btn-abc{
        width:18%; 
        background-color: "#ededed";
    }
}

/*@media (orientation: portrait) {*/
/*    .btn-next{*/
/*        width:40%; */
/*        background-color: "#ededd0";*/
/*    }*/
/*}*/

/*@media (max-width: 964px) {*/
/*    .btn-window {*/
/*        width:100%;*/
/*    }    */
/*}    */

/*@media (max-width: 1285px) {*/
/*    .btn-next {*/
/*        width:100%;*/
/*    }    */
/*}    */


/*-------------------------------------------------------------------*/
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
  background-color: #555;
  color: white;
  padding: 16px 20px;
  border: none;
  cursor: pointer;
  opacity: 0.8;
  position: fixed;
  bottom: 23px;
  right: 28px;
  width: 280px;
}

/* The popup form - hidden by default */

.form-popup {
  display: none;
  position: fixed;
  overflow: auto;
  /*top:50px;*/
  /*margin-left: auto;*/
  /*margin-right: auto;*/
  padding: 0;
  /*border: 3px solid #f1f1f1;*/
  z-index: 1;
}





 /*Add styles to the form container */
.form-container {
  margin-left: auto;
  margin-right: auto;
  top: 50px;
  max-width: 360px;
  padding: 10px;
  background-color: azure;
  border: 9px solid #034efc;

}

.card-body {
    text-align: center;
}

.card-body .btn {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid gray;
  background-color: #ededed;
}



.content-table {
    border-collapse: collapse;
    margin-top: 25px;
    margin-left:auto; 
    margin-right:auto;
    font-size: 0.9em;
    min-width: 280px;
}

.content-table thead th {
    background-color: #d3d3d3;
    font-weight: bold;
}

.content-table th,
.content-table td {
    text-align: left;
}

.content-table th,
.content-table td {
    padding: 5px 10px;
}

.content-table tbody tr {
    border-bottom: 1px solid #d3d3d3;
}

.content-table tbody tr:nth-of-type(even){
    /*background-color: green;*/
    background-color: #ededed;
}

.table-sortable th {
  cursor: pointer;
}

.table-sortable .th-sort-asc::after {
  content: "\25b4";
}

.table-sortable .th-sort-desc::after {
  content: "\25be";
}

.table-sortable .th-sort-asc::after,
.table-sortable .th-sort-desc::after {
  margin-left: 5px;
}

.table-sortable .th-sort-asc,
.table-sortable .th-sort-desc {
  background: rgba(0, 0, 0, 0.1);
}

/*.table-notsortable th {*/
/*  cursor: pointer;*/
/*}*/

/*.table-notsortable .th-sort-asc::after {*/
/*  content: "\25b4";*/
/*}*/

/*.table-notsortable .th-sort-desc::after {*/
/*  content: "\25be";*/
/*}*/

/*.table-notsortable .th-sort-asc::after,*/
/*.table-notsortable .th-sort-desc::after {*/
/*  margin-left: 5px;*/
/*}*/

/*.table-notsortable .th-sort-asc,*/
/*.table-notsortable .th-sort-desc {*/
/*  background: rgba(0, 0, 0, 0.1);*/
/*}*/


.input-text {
    margin-bottom: 3px;
}

hr {
    background-color: #A9A9A9;
}


.row-hide {
    display: none;
}

.sm-text {
    width: 89px;
    font-size: 0.9em;
}

.quiz_text {
    font-size: 7.0em;
}

.form-submit-button {
    background: #0066A2;
    color: white;
    border-style: outset;
    border-color: #0066A2;
    height: 50px;
    width: 100px;
    font: bold 15px arial, sans-serif;
    text-shadow:none;
}

.problems_to_review {
    font: 23px arial, sans-serif;
    text-align: center;
}

.mhk1 {
  text-align: right !important;    
}

.formtextentry {
  text-align: left;    
}

.formtextlabel {
  text-align: right;    
}