:root 
    {
        --main_color: #6D0000; 
        
        --highlight_color: #fD6A02;
        --highlight_color2: #ffd000; 
        --highlight_color3: #fffbad;
        
        --color_shade1: #FFFFFF;
        --color_shade2: #FAFAFA;
        --color_shade3: rgb(239,239,239); 
        --color_shade4: #e3e5e3;
        --color_shade5: #c5c5c5;
        --color_shade6: #7E7E7E;
        --color_shade7: #616161;
        --color_shade8: #464646;
        --color_shade9: #1f1e1e;
        --color_shade10: #202020;
    
        --success_color_shade: #037001; 
        --success_color_shade2: #DCF8C6;
        --notify_success_color : #00ff4c; 

        --color1: #009879;
        --color2: #006598;
        --color3: #cf1b27;
        --color4: #f77e05;
        --color5: #0d4261;
        --color6: #f15710;

    }

    .free_tutorial_nav
    {
        z-index: 90;
        padding-right: 10px;
    }

    .menu_tab_container
    {
        background-color: var(--color_shade2);
        border-bottom: 1px solid var(--color_shade4);
        padding: 80px 0 0 0;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        align-items: stretch;
        overflow-x: auto;
        z-index: 80;
    }

    .menu_tab_container a
    {
        display: flex;
        align-items: stretch;
        text-decoration: none;
    }

    .menu_tab_container .free_course_button
    {
        padding: 10px 16px;
        margin: 0 5px;
        border-left: 1px solid var(--color_shade4);
        border-right: 1px solid var(--color_shade4);
        border-top: 1px solid var(--color_shade4);
        border-bottom: none;
        background-image: linear-gradient(var(--color_shade4), var(--color_shade1));
        cursor: pointer;
        font-size: 16px;
        border-radius: 5px 5px 0 0;

    }

    .menu_tab_container button:active
    {
        transform: scale(1);
    }

    .menu_tab_container .active_button
    {
        background : var(--main_color);
        color : var(--color_shade1);
        border: none;
    
    }

    .tutorial_container
    {
        max-width: 700px;
        margin: 40px auto;
        background-color: var(--color_shade1);
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 5px var(--color_shade5);
    }


    .tutorial_wrapper
    {
        margin: 160px 10px 50px 10px;
    }

    .tutorial_title
    {
        padding: 10px;
        margin: 0;
    
    }

    .next_prev_button:active
    {
        /*border: 2px solid var(--highlight_color);*/
        transform: scale(1);
    }

    .next_prev_button_container
    {
        text-align: center;
    }

    .next_prev_button i.fa-angle-double-right
    {
        margin-left: 5px;
    }

    .next_prev_button i.fa-angle-double-left
    {
        margin-right: 5px;
    }

    .free_ads_container
    {
        background-color: var(--color_shade2);
        border-top: 1px solid var(--color_shade4);
        padding: 30px;
    }

    .free_ads_content
    {
        max-width: 700px;
        margin: auto;
        text-align: center;
    }

    .free_ads_content p
    {
        margin: 0;
        text-align: center;
    }

    .free_ads_content p:not(:last-child)
    {
        margin-bottom: 20px;
    }

    .free_ads_content .register_button
    {
        font-size: 16px;
    }

    .free_ads_content .register_button i
    {
        margin-left: 10px;
    }

    .free_ads_content a
    {
        margin: 0 0 20px 0;
        display: block;
    }

    .welcome_note
    {
        max-width: 700px;
        margin: auto;
        padding: 0 10px;
        
    }
    .welcome_note:not(:last-child)
    {
       margin-bottom: 20px;
    }


    /* RESPONSIVE MEDIA SECTION */

    @media only screen and (max-width: 600px) 
    {
        .menu_tab_container .free_course_button
        {
            font-size: 12px;
        }

        .tutorial_wrapper
        {
            margin: 130px 10px 50px 10px;
        }

        .tutorial_container
        {
            margin: 20px auto;
        }

        .free_ads_container
        {
            padding: 20px;
        }

    }

    @media only screen and (max-width: 476px) 
    {
        .menu_tab_container .free_course_button
        {
            padding: 6px 10px;
            font-size: 12px;
            margin: 0 2px;
        }

        .tutorial_title
        {
            font-size: 14px;
        
        }


    }

    @media only screen and (max-width: 395px) 
    {
        
        .tutorial_wrapper
        {
            margin: 140px 10px 50px 10px;
        }

    }


    .next_prev_button
    {
        padding: 10px 16px;
        margin: 0 5px;
        border: none;
        background: var(--main_color);
        color: var(--color_shade1);
        cursor: pointer;
        font-size: 16px;
        border-radius: 5px;
        margin: auto;
    }