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

body {
    /*background-color: #191919;*/
    /*background-color: rgba(100, 25, 25, 25);*/
    /*color: #cccccc;*/
    /*width: 80%;*/
    /*max-width: 800px;*/
    /*min-width: 600px;*/
    font-size: .9rem;
    line-height: 1.4;
    /*font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;*/
    font-family: 'Carrois Gothic', sans-serif;
}

.container-fluid {
    /* position: relative; */
    /* width: max(90%, 700px) !important; */
    /* width: max(500px); */
    margin: 0 auto;
    /* padding: 0 !important; */
    /* padding: 1rem;  */
    /* font-size: .9rem; */
    /* line-height: 1.5; */
    color: #636263;
    /*background-color: #757575;*/
}

.message {
    position: relative !important;
    width: 90%;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
    height: 2rem;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

img {
    /* padding: 10px 10px 10px 20px;
    display: block;
    margin-left: 0;
    margin-right: 0; */
}

/*.titleUserElement{}*/
.divUserElement {
    position: relative;
    top: 7rem;
    ;
    margin: 0 auto;
    font-size: medium;
    font-weight: bold;
}

/* .divUserElement form .form-group label {
} */

div.form-inline {
    height: 2.5rem;
    display: inline-block;
}

.divUserElement form label {
    display: inline-block !important;
    text-align: right !important;
    color: #777777;
}

.divUserElement form input {
    margin-bottom: 10px;
}

#divUserButton {
    border: 2px solid grey;
    border-radius: 3px;
    width: fit-content;
}

.divUserButton {
    background-color: #e9ecef;
    border: 2px solid #ced4da !important;
    border-radius: 3px;
    width: fit-content;
    color: #495057;
}

.qq {
    margin: 1.5rem 0 0 0;
    background-color: #FDFDFD;
    padding: 1rem .5rem;
    border: #E7E7E7 solid 2px;
    border-radius: 5px;
    /* max-width: 820px; */
    width: 98%;
}

.qq:hover {
    background-color: #e9e9e9;
    border: #969696 solid 2px;
}

.qq>div {
    padding: 5px;
}

.navbar {
    /* display: block;  */
    /* position: relative; */
    /* background-color: #005F83; */
    /* max-height: 2.5rem;  */
    /* margin: 0 auto;  */
}

.navbar ul li {
    /* this is all the first level items */
    /* padding-left: .5rem; */
    /* color: white; */
    /*background-color: #782F40; !*this works for all first level menu item  *!*/
    /*background-color: #007A33; !*this works for all first level menu item  *!*/
}

.nav-item {
    /* background-color: #005F83; */
    /* font-size: .9rem; */
    /*width: 90%;*/
}

.nav-item:hover {
    /*background-color: #CEB888;*/
    /* background-color: #00858A; */
    /* hover over navbar menu items */
    /*border-radius: .15rem;*/
    /* border-top-left-radius: 2px; */
    /* border-top-right-radius: 2px; */
}

.nav-item .nav-link {
    /* padding: .1rem !important; */
}

.navbar-nav li div a {
    /* color: #EEEEEE; */
    /* this works!!!!!!!!!!!!! #CEB888*/
    /*max-height: 40px;*/
    /*padding-left: .5rem;*/
}

.navbar-nav li div a:hover {
    /* background-color: #005F83; */
    /* color: white; */
    /* font-weight: 600; */
}

.navbar-brand {
    /*color: #CEB888 !important;*/
    /* font-size: 1rem !important; */
    /*font-weight: 600 !important;*/
    /* padding: 0 !important; */
    /* modify navbar.scss:43*/
    /*padding-left: .5rem;*/
    /*padding-top: 0.475rem !important;*/
    /*line-height: 1rem;*/
}

.navbar-collapse {
    /* nav bar before collapse ==> .navbar */
    /* opacity: 98%; */
}

.nav-link {
    /* color: white !important; */
    /* menu font color*/
    /*padding: .2rem !important;*/
}

/* .dropdown:hover {
} */
.dropdown:hover>.dropdown-menu {
    /* display: block; */
}

.dropdown>.dropdown-toggle:active {
    /* pointer-events: none; */
}

.dropdown-menu {
    /*background-color: #782F40 !important;*/
    /*background-color: #63666A !important; !* this is dropdown menu items *!*/
    /*color: white;*/
    /*font-size: .8rem !important;*/
    /*padding: 0!important;*/
    /* border-radius: 0 0 3px 3px !important; */
    /* background-color: #00858A !important; */
}

/* .dropdown-menu:hover {
} */
.dropdown-menu a {
    /* color: #FFFFFF; */
    /*background-color: #ACA199;*/
    /* font-size: .9rem;
    padding-top: 0 !important;
    padding-bottom: 0 !important; */
}

.dropdown-item button {
    /* color: #FDFDFD; */
}

.dropdown-item a:hover {
    /* background-color: #005F83 !important; */
    /*background-color: red !important;*/
    /* color: white !important; */
    /*font-size: 1.5rem!important;*/
    /*font-weight: 700!important;*/
    /*color: white;*/
}

h1 {
    color: #191919;
    text-align: left;
    font-family: "Helvetica", Times, serif;
    padding-bottom: 1px;
    margin-bottom: 1px;
}

h3 {
    color: #191919;
    text-align: left;
    font-family: Ubuntu, sans-serif;
    padding-top: 12px;
    padding-bottom: 10px;
    /*font-family: "Helvetica", Times, serif;*/
}

h4 {
    font-family: 'Ubuntu', sans-serif;
    color: royalblue !important;
    font-size: 19px !important;
    font-weight: 900 !important;
    /*font-weight: bold;*/
    text-align: left;
    border-bottom-style: dotted;
    border-width: 1px;
    text-transform: capitalize;
    padding-top: 6px;
    padding-right: 5px;
    padding-bottom: 4px;
    padding-left: 0;
    text-decoration-style: solid;
    /*background-color: #CCCCCC!important;*/
    /*background-color: #7f7f7f;*/
}

code,
c {
    font-family: 'UbuntuMonaco', Monaco, sans-serif !important;
    font-size: 0.85rem;
    background-color: #d7d7d7 !important;
    color: #AD2327 !important;
    padding: 0 3px 1px 3px;
    /*padding-right: 3px;*/
    border-radius: 3px;
    margin: 0;
}

code:hover,
c:hover {
    background-color: #254734 !important;
    color: white !important;
}

pre {
    display: block;
    max-width: 700px;
    width: fit-content !important;
    margin: 0.5rem 0 !important;
    padding: 1px 5px 1px 3px !important;
    border: 1px double #cdcdcd;
    border-radius: 3px;
    font-family: Monaco, sans-serif !important;
    background-color: #e1e1e1;
    /*font-size: 14px !important;;*/
    font-size: 0.8rem;
    line-height: 20px !important;


    white-space: pre-wrap;
    /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;
    /* Mozilla, since 1999 */
    white-space: -pre-wrap;
    /* Opera 4-6 */
    white-space: -o-pre-wrap;
    /* Opera 7 */
    word-wrap: break-word;
    /* Internet Explorer 5.5+ */

}

pre:hover {
    background-color: #2d2d2d;
    color: white;
}

pre.inline {
    display: inline !important;
    /*line-height: 16px !important;*/
    line-height: 20px !important;
}

span.inline {
    font-family: Monaco, sans-serif !important;
    font-size: 14px !important;
    ;
    background-color: #d7d7d7;
    color: #4b4b4b;
    padding: 1px 5px 1px 5px !important;
    margin-bottom: 0 !important;
    /*margin-top: 0px !important;*/
    border: 1px lightgrey;
    border-radius: 3px;
    line-height: 20px !important;
}

span.inline:hover {
    background-color: #171717;
    color: white;
}

#q_heading {
    padding-bottom: 50px;
    margin-top: 100px;
}

/* use .center for home page (index.php) */
.center {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    color: #434343;
    line-height: 24px !important;
    background-color: #fafafa;
    width: 90%;
    max-width: 800px;
    /* WORKS */
    padding-top: 65px;
    padding-bottom: 50px;
    margin: auto;
    margin-bottom: 25px;
}

p {
    /*font-size: 1rem;*/
    /*color: #434343;*/
    /*line-height: 24px !important;*/
    text-align: left;
    /*line-height: 26px !important;*/
    margin: 0 !important;
    border: 3px;
    padding: 5px 3px;
    /*margin-top: 5px;*/
    /*margin-bottom: 5px;*/
    /*margin-right: 5%;*/
    /*margin-left: 5%;*/
}

ol.answer_items {
    list-style-type: upper-alpha !important;
}

ol.lower_case {
    list-style-type: lower-alpha !important;
    /*padding: 5px 3px 5px 25px!important;*/
    line-height: 24px !important;
}

ol.upper_case {
    list-style-type: upper-latin !important;
    line-height: 24px !important;
}

ol.question_items {
    list-style-type: decimal;
    /*padding: 5px 3px 5px 25px;*/
    line-height: 24px !important;
}

ul#none .none {
    list-style-type: none;
}

li#none,
li.none {
    list-style-type: none !important;
}

ul ul#none .none {
    list-style-type: none;
}

ul.none {
    list-style-type: none;
}

ul.check {
    list-style: url("../images/check-mark-8-16.gif");
    /* https://www.iconsdb.com/gray-icons/check-mark-8-icon.html */
}

ul#check {
    list-style: url("../images/check-mark-8-16.gif");
    /* https://www.iconsdb.com/gray-icons/check-mark-8-icon.html */
}

li.check {
    list-style: url("../images/check-mark-8-16.gif");
    /* https://www.iconsdb.com/gray-icons/check-mark-8-icon.html */
    padding-left: 0;
}

li#check {
    list-style: url("../images/check-mark-8-16.gif");
    /* https://www.iconsdb.com/gray-icons/check-mark-8-icon.html */
}

ul.circle {
    list-style-type: circle;
}

ul#circle {
    list-style-type: circle;
}

li#circle {
    list-style-type: circle;
}

ul,
ol {
    line-height: 24px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

hr {
    border: 1px dotted gray !important;
}

li {
    /*line-height: 24px !important;*/
    /*line-height: 1.2rem !important;*/
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    /*font-size: 1rem;*/
    /*font-size: .9rem;*/
}

textarea #q_edit {
    display: block;
    box-sizing: content-box;
    /*padding-box: ;*/
    /*overflow: hidden;*/
    padding: 10px;
    width: 100%;
    font-size: 16px;
    margin: 10px auto;
    border-radius: 6px;
    /*box-shadow: 2px 2px 8px rgba();*/
    /*border: 0px 0px 10px 0px;*/
}

textarea {
    margin-left: 0;
    /*font-family: inherit;*/
    margin-right: 0;
    width: 95%;
    /* does not work */
    /*height: 795px; !* does not work *!*/
    padding: 5px;
    /*box-sizing: border-box;*/
    border: 2px solid #ccc;
    border-radius: 4px;
    /* background-color: #FFFFFF; */
    /*resize: none;*/
    font-size: 16px;
    /*transition:box-shadow 0.5s ease;*/
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.divtext {
    border: ridge 2px;
    padding: 5px;
    width: 20em;
    min-height: 5em;
    overflow: auto;
}

.note {
    /*padding-top: 10px !important;*/
    color: #777777;
}

h1 {
    color: darkgrey;
    margin-left: 20px;
    text-align: center;
}

h2 {
    color: darkgrey;
    margin-left: 20px;
    text-align: center;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.column {
    float: left;
    width: 50%;
}

div.hide {
    display: none;
}

.r {
    color: red;
}

#footer {
    background-color: #782F40;
    /* #333 */
    position: fixed;
    bottom: 0;
    width: 100%;
    display: block;
    transition: top 0.3s;
    text-align: center;
}

#footer a {
    float: left;
    display: block;
    text-align: center;
    padding: 15px;
    text-decoration: none;
    font-size: 17px;
}

#footer a:hover {
    background-color: #777777;
    color: #AAAAAA;
}

.app {
    /* display: none; */
    margin-top: 3rem;
    width: 85% !important;
    background-color: peru;
}

#question_text {
    margin: 5rem auto;
    width: 80%;
}

.grid-container {
    font-size: 0.9rem;
    border-radius: 5px;
    display: grid;
    grid-column-gap: 0;
    grid-row-gap: 1px;
    grid-template-columns: 25% 75%;
    padding: 1.2rem;
}

.small-caps {
    font-variant: small-caps;
}

.green {
    color: green;
}

.red {
    color: red;
}

.blue {
    color: rgb(0, 149, 255);
}

.character {
    font-family: monospace;
    /* background: blue; */
    /*background-image: linear-gradient(to right, white 70%, darkred);*/
    background-color: darkgray;
    padding: 2px;
    font-size: 1rem;
    /*color: #EEEEEE;*/
    color: white;
    text-align: left;
    /* vertical-align: middle; */
    /* border: 1px solid red; */
    align-self: center;
    font-weight: 600;
    border-radius: 2px;
}

.definition {
    align-self: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-weight: 600;
}

.tutorial {
    /* max-width: 95% !important;
    margin: 2.5rem auto auto auto;
    display: inline-block; */
}



table {
    margin-top: 1rem;
    font-size: .85rem;
    /*border: 30px !important;*/
    border-width: 1px;
    /*border-color: #191919!important;*/
    border-radius: 5px;
    /*padding: 45px;*/
    /*background-color: #191919;*/
}

.tbl {
    width: 100%;
    background-color: whitesmoke;
    border-collapse: collapse;
    /*border: 2px solid darkgray;*/
    border: 0;
    padding: 5px;
}

.tbl_question {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    border: 1px solid gray !important;
    border-radius: 5px;
    /*padding: 45px;*/
    width: 80%;
    padding: 5px;
    align-self: center;
}

.tbl_question th,
.tbl_question td {
    border: 1px solid grey;
}

#tbl_regular,
.tbl_regular {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    /*border-collapse: collapse;*/
    /*border: 30px !important;*/
    border-color: #191919;
    border-radius: 5px;
    /*padding: 45px;*/
    width: 100%;
    padding: 5px;
}

#tbl_regular td,
#tbl_regular th,
.tbl_regular td,
.tbl_regular th {
    border: 1px solid #ddd;
    padding: 3px;
    /*height: 20px;*/
}

#tbl_regular tr:nth-child(even),
.tbl_regular tr:nth-child(even) {
    background-color: #f2f2f2;
}

#tbl_regular tr:hover,
.tbl_regular tr:hover {
    background-color: #ddd;
}

#tbl_regular th,
#tbl_regular thead,
.tbl_regular th,
.tbl_regular thead {
    /*padding-top: 10px;*/
    /*padding-bottom: 10px;*/
    text-align: center;
    background-color: lightgrey;
    color: black;
}

tr,
td,
th {
    border: 0;
    padding: 3px 5px 2px 5px;
}

th,
thead {
    /*height: 30px;*/
    vertical-align: middle;
    text-align: center;
}

td {
    height: 30px;
    vertical-align: middle;
    text-align: left;
}

tr {
    padding: 2px 2px 2px 2px;
}

div.dotted {
    border: 1px solid darkgray;
    border-radius: 2px;
}

.wrapper {
    overflow: hidden;
    color: #2c2c2c;
    text-align: left;
}

.center-block {
    max-width: fit-content;
    margin-left: auto;
    margin-right: auto;

}

@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

.icon-blank:before {
    /* content: "\2122"; */
    text-indent: 2rem;
    color: transparent !important;
}