/*Previous-Next buttons*/
.pre-next {
    text-decoration: none;
    display: flex;
    justify-content: space-between;
}

/*Tooltip*/
.t-tip .t-tiptext {
    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;
}

.t-tip:hover .t-tiptext {
    visibility: visible;
}

/*Quick  alignments for text center left and right*/
.c {
    margin: auto auto;
    text-align: center;
}

.l {
    text-align: left;
}

.r {
    text-align: right;
}

/*Quick  bold*/
.b {
    font-weight: bold;
}

/*Zoom image hover*/
.zoom {
    transition: transform .2s; /* Animation */
    margin: 0 auto;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

    .zoom:hover {
        transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
    }

.menu {
    border: 1px solid #5bc0de;
    border-radius: 6px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    background-color: #d9edf7;
}

    .menu li {
        padding: 8px 16px;
    }

    .menu a {
        display: block;
        color: #000;
        text-decoration: none;
    }

    .menu .active {
        background-color: #5bc0de !important;
        color: #000;
    }

    .menu li:hover:not(.active) {
        background-color: #0983a7;
        color: white;
    }

    /*.menu .bottom li a:hover:not(.active) {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }*/

    .menu li:nth-child(even) {
        background-color: #fff;
    }

    .menu .top {
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
    }

    .menu .bottom {
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }
/*aligning the text of an object to the right with a small right margin and adding bold*/
.right {
    text-align: right;
    margin-right: 5%;
    font-weight: bold;
}

/*For back to the page top button*/
#top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    font-size: 1.15em;
    border: none;
    outline: none;
    background-color: #d9534f;
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 4px;
}

    #top:hover {
        background-color: #c9302c;
    }

/*Testing border*/
div.test {
    border: 1px solid black;
}

/*Styling for bulleted lists*/
ul.bul1 {
    list-style: none;
    margin-left: 3%;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li.bul2:before {
    content: "\27a4";
    color: #d9534f;
    margin-right: .5em;
}

li.bul2 {
    background-clip: content-box;
    padding: .2em;
}

/*Styling for numbered lists*/
ol.num1 {
    list-style: none;
    margin-left: 3%;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li.num2:before {
    content: "\2780";
}

li.num3:before {
    content: "\2781";
}

li.num4:before {
    content: "\2782";
}

li.num5:before {
    content: "\2783";
}

li.num6:before {
    content: "\2784";
}

li.num2:before, .num3:before, .num4:before, .num5:before, .num6:before {
    font-size: x-large;
    font-weight: bold;
    color: #000;
    margin-right: .5em;
}

li.num2, .num3, .num4, .num5, .num6 {
    background-clip: content-box;
    padding: .1em;
    font-weight: bold;
    font-size: larger;
}
/*Sub lists under numbered lists*/
ul.sub1 {
    list-style: none;
    margin-left: 3%;
    padding-left: 1.2em;
    text-indent: -1.2em;
}

li.sub2:before {
    content: "\2714";
    color: #000;
    margin-right: .5em;
}

li.sub2 {
    background-clip: content-box;
    padding: .1em;
    font-size: smaller;
    font-weight: normal;
}

/*For no decoration links*/
a.none {
    text-decoration: none;
}
/*Links with nothing at all*/
a.none-at-all {
    text-decoration: none;
}

    a.none-at-all:visited, a.none-at-all:active, a.none-at-all:hover, a.none:link {
        color: #5a5a5a;
    }


/*Links for glossary terms*/
a.glossary {
    text-decoration: none;
    font-weight: bold;
    color: black;
    background-color: lightblue;
}

/*Flow around image or iframe*/
.float-r {
    float: right;
    margin: 0 0 2em 2em;
}

.float-l {
    float: left;
    margin: 0 2em 2em 0;
}
/*clear the float*/
.float-cl {
    clear: right;
}

/*Copied from Bootstrap 4*/
/*Some container widths*/
.w-25 {
    width: 25% !important;
}

.w-50 {
    width: 50% !important;
}

.w-75 {
    width: 75% !important;
}

details summary::-webkit-details-marker {
    color: forestgreen;
    font-size: large;
}

details {
    padding-bottom: 1em;
}

/*details brown*/
.brown details summary::-webkit-details-marker {
    color: #f0ad4e;
    font-size: large;
}

.brown details {
    padding-bottom: 1em;
}