:root {
    /*Theme Color Variables*/
    --color-blue: #02528A;
    --color-red: #E3263F;
    --color-lightblue: #F5F8FA;
    --color-mediumblue: #0370bc;
    --color-orange: #F28B1F;
    --color-light-orange: #FAD1A5;
    --color-medium-lightblue:#b0d0ef; 
    --color-black: #000000;
    --color-3: #333333;
    --color-76: #767676;
    --color-8C: #8C8C8C;
    --color-AD: #ADADAD;
    --color-C: #CCCCCC;
    --color-C6: #C6C6C6;
    --color-D: #DDDDDD;
    --color-F9: #F9F9F9;
    --color-white: #FFFFFF;


    /*Body Colors*/
    --body-background-color: var(--color-lightblue);
    --body-normal-text: var(--color-black);
    --body-link-color: var(--color-blue);
    --content-panel-background: var(--color-white);
    --loading-background-color:  var(--color-medium-lightblue);
    --loading-bar-color:  var(--color-orange);

    /*Menu Colors*/
    --banner-background-color: var(--color-white);
    --menu-background-color: var(--color-blue);
    --menu-highlight-color: var(--color-mediumblue);
    --menu-normal-text: var(--color-white);
    --border-color: var(--color-mediumblue);
    --dropdown-menu-background-color: var(--color-white);
    --dropdown-menu-normal-text: var(--color-black);
    --dropdown-menu-highlight-color: var(--color-mediumblue);
    --dropdown-menu-highlight-text: var(--color-white);

    /*Modal Dialog Colors*/
    --modal-header-background-color: var(--color-blue);
    --modal-body-background-color: var(--color-white);
    --modal-footer-background-color: var(--color-F9);
    --modal-header-normal-text: var(--color-white);
    
    /*Home Page Colors*/
    --carousel-button-background-color: var(--color-blue);
    --carousel-button-text: var(--color-white);
    --browse-all-button-background-color: var(--color-blue);
    --browse-all-button-normal-text: var(--color-white);

    /*Thumbnail Colors*/
    --thumbnail-background-color: var(--color-F9);
    --thumbnail-hightlight-color: var(--color-blue);
    --thumbnail-hightlight-text: var(--color-white);
    --thumbnail-image-border-color: var(--color-D);
    --thumbnail-image-background-color: var(--color-white);
    --thumbnail-image-text-color: var(--color-76); 
    --thumbnail-corner-button-color: var(--color-black);
    --thumbnail-corner-button-text: var(--color-white);
    --thumbnail-normal-text: var(--color-black);
    --thumbnail-light-text: var(--color-76);
    --thumbnail-tags-icon: var(--color-3);
    --thumbnail-details-border-color: var(--color-F9);
    --thumbnail-details-background-color: var(--color-white);
    --thumbnail-detatils-title-text: var(--color-3);
    --thumbnail-details-text: var(--color-76);


    /*Button and Forms*/
    --showcase-button-background-color: var(--color-white);
    --showcase-button-text-color: var(--color-3);
    --showcase-button-border-color: var(--color-C);
    --showcase-button-background-hover-color: var(--color-C6);
    --showcase-button-text-hover-color: var(--color-3);
    --showcase-button-border-hover-color: var(--color-AD);
    --showcase-control-background-color: var(--color-white);
    --showcase-control-text-color: var(--color-3);
    --showcase-control-border-color: var(--color-C);

    /*Search Filter*/
    --search-filter-background-color: var(--color-F9);

    /*Channel and Playlist Header Colors*/
    --header-description-icon-color: var(--color-orange);
    --header-description-background-color: var(--color-light-orange);
    
    /*Presentation Action Bar*/
    --presentation-action-bar-background-color: var(--color-blue);
    --presentation-action-bar-text: var(--color-white);

    /*Advanced Search*/
    --advanced-search-background-color: var(--color-white);
    --advanced-search-text: var(--color-black);
    --advanced-search-datepicker-background-color: var(--color-white);
    --advanced-search-datepicker-text: var(--color-black);
    --advanced-search-datepicker-hover-color: var(--color-C);
    --advanced-search-datepicker-active-color: var(--color-blue);
    --advanced-search-range-background-color: var(--color-D);

}