@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,300;6..12,400&display=swap');

html {
    font-size: 10px;
    font-family: 'Nunito Sans', sans-serif;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  width:100%;
  float:right;
}

a {
    color: #ff94c4;
}

    a:hover, a:focus {
        color: #ff94c4;
    }

.collapsible {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}
.active, .collapsible:hover {
        background-color: #ccc;
    }

.content {
    padding: 0 18px;
    display: none;
    overflow: hidden;
    background-color: #f1f1f1;
}

.tbllink {
    display: block;
    border: 1px solid black;
    padding: 16px;
}

/* Style the tab */
.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

    /* Style the buttons that are used to open the tab content */
    .tab button {
        background-color: inherit;
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 14px 16px;
        transition: 0.3s;
        color: #e65697
    }

        /* Change background color of buttons on hover */
        .tab button:hover {
            background-color: #e65697;
            color: #f1f1f1;
        }

        /* Create an active/current tablink class */
        .tab button.active {
            background-color: #e65697;
            color: #f1f1f1;
        }

        .tab button.disabled {
            background-color: darkgray;
            color: darkgray;
        }

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}

td a {
    display: block;
}

a{
    text-decoration:none
}

.linkbutton {
    color: #e65697;
    background: none !important;
    border: none;
    padding: 0 !important;
    cursor: pointer;
}
.linkbutton:hover, .linkbutton:focus{
    color: #ff94c4;
}



    .hoverTrigger + .hoverContent {
        display: none;
    }

.hoverTrigger:hover + .hoverContent {
    display: block;
    z-index: 100000;
    height: 50px;
    width: 100px;
    position: relative;
    direction:rtl;
    background-color: white;
}

.hoverContent:hover {
    display: block;
    z-index: 100000;
    height: 50px;
    width: 100px;
    position: relative;
    direction: rtl;
    background-color: white;
}




.logoimg {
    margin:auto;
    transition: transform .7s ease-in-out;
}
/*    .logoimg:hover {
        transform: rotateY(360deg);
        animation: rotateAnimation1 1.5s linear, rotateAnimation2 1.5s linear infinite 1.5s alternate;
    }
@keyframes rotateAnimation1 {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(90deg);
    }
}
@keyframes rotateAnimation2 {
    from {
        transform: rotateY(270deg);
    }

    to {
        transform: rotateY(360deg);
    }
}*/

.rating {
    margin-top: 40px;
    border: none;
    float: left;
}

    .rating > label {
        color: #90A0A3;
        float: right;
    }

        .rating > label:before {
            margin: 5px;
            font-size: 2em;
            font-family: FontAwesome;
            content: "\f005";
            display: inline-block;
        }

    .rating > input {
        display: none;
    }

        .rating > input:checked ~ label,
        .rating:not(:checked) > label:hover,
        .rating:not(:checked) > label:hover ~ label {
            color: #F79426;
        }

            .rating > input:checked + label:hover,
            .rating > input:checked ~ label:hover,
            .rating > label:hover ~ input:checked ~ label,
            .rating > input:checked ~ label:hover ~ label {
                color: #FECE31;
            }

.renderedBody {
    float: right;
    display: block;
    max-width: 95%;
    width: 90%;
    padding-right: 1vw;
    padding-top: 2vh;
    padding-bottom: 10vh;
    overflow: visible;
    -webkit-animation: fadein .5s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein .5s; /* Firefox < 16 */
    -ms-animation: fadein .5s; /* Internet Explorer */
    -o-animation: fadein .5s; /* Opera < 12.1 */
    animation: fadein .5s;
}

@media(max-width:900px){
    .renderedBody {
        width: 100%;
    }
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.collapsibleColumn{
    width:5%;
}

.collapsibleColumn :hover {
    width: 100%;
}

.zebratable>tbody>tr:nth-child(even) {
        background-color: #DBEEFD;
}

audio {
    min-width: 150px; /* Prevents the audio player from becoming too small */
    width: 100%;
    max-width: 250px; /* Ensures it's not too wide */
}