body {font-family: verdana, arial, sans serif, Arial Narrow;}


ul.floatLeft {
    float:left;
}

li.floatLeft {
    float:left;
}


.btn {
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  line-height: var(--button-line-height);
  padding: var(--button-padding-y) var(--button-padding-x);
  margin: 0;
  height: auto;
  border: var(--border-width) solid transparent;
  vertical-align: middle;
  -webkit-appearance: none;
  color: inherit;
  background-color: transparent;
}

.btn:hover {
  border: 1px solid black; 
}


div.scrollable {
  width:300px;
  height:610px;
  overflow:auto;
  margin-left:1px;
  background-color:#FFFFFF;
  border-color: #F8F8F8;
  margin-color:#F8F8F8;
}

div.qbox {
  color: #0C1429;
  font-size: 15px;
  background-color:#FED7AD;
  padding:20px;
  padding-bottom:1px;
  border-color:#749F9C;
  border-width:35px 60px 35px 60px;
  border-style:solid;
  margin:0px;
  margin-bottom:10px;
  text-align: left;
}

p.scrollText {
  color: #000000;
  font-size: 15px;
  font-weight: normal;
  background-color:#FFFFFF;
  padding:5px;
  border-color:#DDDDDD;
  border-width:2px;
  border-right: 18px;
  border-left-style: none;
  border-style: solid solid solid none;
  border-left: 0px;
  margin-top:7px;
  margin-left:6px;
  margin-right:10px;
  margin-bottom:0px;
}

p.nextbutton {
margin-top: 7px;
margin-bottom: 0px;
}

ul.qbox {
  color: #FFFFFF;
  font-size: 15px;
  background-color:#C35817;
  padding-left:80px;
  border-color:#C35817;
  border-width:2px;
  border-style:solid;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  margin:20px;
  margin-top:0px;


}

p.video {
  border-color:#F8F8F8;
  border-width:2px;
  border-style:solid;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  margin-top:20px;
  margin-left:35px;
  margin-right:5px;
  margin-bottom:20px;
  margin-color:#FFFFFF;

}

div.modal{
    z-index:3;
    display:none;
    padding-top:100px;
    position:fixed;
    left:0;
    top:-20%;
    width:100%;
    height:100%;
    overflow:auto;
    background-color:rgb(0,0,0);
    background-color:rgba(0,0,0,0.4);
    align: left;
}

div.modal-content{
    margin:10% auto;
    background-color:#FED7AD;
    position:relative;
    padding: 0px 0px 0px 0px;
    border-radius: 10px;
    outline:0;
    width:600px;
}

span.closebtn{
    text-decoration:none;
    float:right;
    font-size:20px;
    color:inherit
}

span.closebtn:hover{
    font-weight:bold;
    cursor:pointer;
}

/* Dropdown Button */
.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 0px;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    right: 1px;
    background-color: #FBEAD8;
    min-width: 150px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #0C1428;
    font-size: 12px;
    padding: 8px 10px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}