<style type="text/css">

    /***************
        Base Config-- This section defines the base configuration for your page, the font and font color
    *******************/

    * {
        box-sizing: border-box;
        font-family: 'Fredericka the Great', cursive;
        color: #FFFFFF;
        text-align: center;
    }

    /*******************************
        The body section is for configuring the overall looks of the page such as the background color
        and background image. If you want to use a background image
        delete the comments and it is recommended to set a size to ensure if fits how you intend it.
        If you want the image to tile to fill the whole page then set the background-repeat to repeat.
    *******************************/

    body {
        /**
        background-image: url(yourBackgroundImage.html);
        background-repeat: repeat;
        background-size: 300px 100px;
        **/
        background-color: #BF2C31; /** sets the overall background color **/
        border: none;
        margin: auto;
        width: auto;
    }

    /*******************************
        The div section is for configuring looks of the div sections
    *******************************/

    div{
        font-size: 11px;
        line-height: 1.5;
        text-align: center;
        /** only needed if you want a different text color
        color: #000000;
        **/
    }
    a:link, a:visited {
        color: #FFFFFF;
        font-family: 'Comfortaa', cursive;

    }
    /*******************************
        The #header_Img_Content section is for configuring looks for that section
    *******************************/

    #header_Img_Content{
        /** only needed if you want a different background color for that section
        background-color: #000000;
        **/
        margin: auto;
        width: 100%;
        text-align: center;
    }


    /***************
        the body text is the generic style for your normal text areas
    *****************/

    .body_text{
        /** only needed if you want a different background color for all of the body text sections
        background-color: #000000;
        **/
        margin: auto;
        width: 90%;
        color: #000000;
        text-align: center;
        font-size: 18px;
        font-family: 'Comfortaa', cursive;
    }

    /*************
        The body_text will provide the format for all the text areas, but if you need more control
        of that specific section, then you can configure it in this section
    ****************/

    /*********************
        #instructional-text{
            background-color: #000000;
            margin: auto;
            width: 90%;
            color: #7e8c8d;
            text-align: center;
            font-size: 18px;
        }
    **********************/

    /*****************
        This will format the footer
    **************************/

    #footer{
        background-color: #1A2F4C;
        margin: auto;
        width: 100%;
        color: #ffffff;;
        text-align: center;
        font-size: 12px;
    }


    /*******************************
        The #intro section is for configuring looks for that section
    *******************************/

    #intro{

        /** only needed if you want a different background color for all of the body text sections
        background-color: #BF2C31;
        **/
        margin: auto;
        width: 100%;
        text-align: center;
        font-size: 25px;
    }

    /*******************************
        The #header section is for configuring looks for that section
    *******************************/

    #header{
        /** only needed if you want a different background color for all of the body text sections**/
        background-color: #BF2C31;
        margin: auto;
        width: 100%;
        text-align: center;
    }

    /*******************************
        The #bodyarea section is for configuring looks for that section
    *******************************/

    #bodyarea{
        /** only needed if you want a different background color for all of the body text sections**/
        background-color: #008B6B;
        margin: auto;
        width: 100%;
        text-align: center;
    }

    /*******************************
        The playlists-container is used to configure the section where the
        list of your songs is shown
    *******************************/

    #playlists_container{
        /** only needed if you want a different background color for this section
        background-color: #000000;
        **/
        margin: auto;
        width: 90%;
        color: #FFFFFF;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        font-family: 'Rock Salt', cursive;
    }

    /*******************************
        The rf-titles is used to configure the title above the RF imported data
    *******************************/

    .rf-titles{
        /** only needed if you want a different background color for for this section
        background-color: #000000;
        **/
        margin-top: 10px;
        margin-left: auto;
        margin-right: auto;
        width: 70%;
        color: #FFFFFF;
        text-align: center;
        font-size: 30px;
        font-weight: bold;
    }

    /*******************************
        The playing-now class is used to configure the text that shows what is currently playing
    *******************************/

    .playing-now {
        /*text-align: left; */
        margin-top: 10px;
        color: FFFFF;
        font-size: 20px;
        font-family: 'Rock Salt', cursive;
    }

    /*******************************
        The rtable is used to configure table where the rf lists will show
        You shouldn't modify this
    *******************************/

    .rtable {
        display: flex;
        flex-wrap: wrap;
        margin: auto;
        text-align: center;
        width: 90%;
        padding: 0;
    }

    /*******************************
        The cell-vote-playlist is used to configure the table where the rf lists will show when you are using the voting mode
        You shouldn't modify this with the exception of the font-size, border and cursor properties
    *******************************/

    .cell-vote-playlist {
        flex-grow: 1;
        width: 80%;
        font-weight: bold;
        overflow: hidden;
        list-style: none;
        font-size: 20px;
        font-family: 'Rock Salt', cursive;
        border: solid white;
        border-width: 2px 2px 1px 2px;
        cursor: pointer;
    }

    /*******************************
        The cell-vote is used to configure the table where the rf lists will show when you are using the voting mode
        You shouldn't modify this with the exception of the font-size, border and cursor properties
    *******************************/

    .cell-vote {
        flex-grow: 1;
        width: 20%;
        font-weight: bold;
        overflow: hidden;
        list-style: none;
        font-size: 20px;
        font-family: 'Rock Salt', cursive;
        border: solid white;
        border-width: 2px 2px 1px 0px;

    }

    /*******************************
        The jukebox-list is used to configure the table where the rf lists will show when you are using the jukebox mode
        You shouldn't modify this with the exception of the font-size, border and cursor properties
    *******************************/


    .jukebox-list{
        width: 100%;
        font-size: 24px;
        border: solid white;
        cursor: pointer;
        font-family: 'Rock Salt', cursive;
        font-weight: bold;
        border-width: 2px 2px 1px 2px;
        /**cursor:grabbing ; **/

    }

    /*******************************
        The jukebox-queue is used to configure the list of current jukebox requests
    *******************************/

    .jukebox-queue {
        text-align: center;
        font-family: 'Rock Salt', cursive;
        color: white;
        font-size: 20px;
    }

    /*******************************
        The jukebox-queue container is the wrapper container for the jukebox queue list
    *******************************/

    .jukebox-queue-container {
        overflow: auto;
        height: 150px;
        width: 70%;
        margin: 0 auto;
    }

    /*******************************
        The after-hours class is used to configure a message to be displayed when
        you don't have a scheduled playlist playing
    *******************************/

    .after-hours{
        width: 90%;
        font-size: 30px;
        border: none;
        font-weight: bold;
        margin: auto;
    }

    /*******************************
        The button is used to configure your buttons
    *******************************/

    .button{
        background-color: #D0021B;
        border: none;
        border-radius: 10px;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 24px;
        margin: 4px 2px;
        cursor: pointer;
    }

    #submit {
        background-color: #d60000;
        padding: 1em;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 6px;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
        text-decoration: none;
        border: none;
    }

    #submit:hover {
        border: none;
        background: #e60000;
        box-shadow: 0px 0px 1px #777;
    }

    /*******************************
        The innerRequestSuccessful is used to configure the message for sucessful requests
    *******************************/

    .innerRequestSuccessful {
        position: fixed;
        top: 50%;
        margin-left: 10%;
        background-color: #008B6B;
        width: 80%;
        transform: translateY(-50%);
        color: #FFF;
        text-align: center;
        font-family: 'Comfortaa', cursive;
        font-size: 24px;
        font-weight: bold;
        opacity: .9;
        border-radius: 10px;
    }

    /*******************************
        The failed_Info_Box is used to configure the message for unsucessful requests
    *******************************/
    .failed_Info_Box{
        position: fixed;
        background-color: #BF2C31;
        top: 50%;
        margin-left: 10%;
        width: 80%;
        transform: translateY(-50%);
        color: #FFF;
        text-align: center;
        font-family: 'Comfortaa', cursive;
        font-size: 24px;
        font-weight: bold;
        opacity: .9;
        border-radius: 10px;
    }

    .category-label {
        font-size: 24px;
        font-weight: bold;
        margin: auto;
        width: 80%;
        padding-top: 10px;
        color: white;
    }

    .category-section {
        padding-bottom: 10px;
    }
</style>