/*
    Theme.css is used to override any showcase styling!
*/

:root {
    /*Theme Color Variables*/
    --color-black: #000000;
    --color-2: #222222;
    --color-3: #333333;
    --color-4: #444444;
    --color-6: #666666;
    --color-76: #767676;
    --color-9: #999999;
    --color-AD: #ADADAD;
    --color-C: #CCCCCC;
    --color-D: #DDDDDD;
    --color-E: #EEEEEE;
    --color-F9: #f9f9f9;
    --color-white: #FFFFFF;
    --color-yellow: #FFFF00;
    --color-help-block: var(--color-C);

    /*Body Color Variables*/
    --body-background-color: var(--color-9);
    --body-normal-text: var(--color-white);
    --body-link-color: var(--color-white);
    --main-link-color: var(--body-link-color);
    --content-panel-background: var(--color-4);
    --loading-background-color:  var(--color-E);
    --loading-bar-color:  var(--color-loading-orange);

    /*Menu  Color Variables*/
    --banner-background-color: var(--color-white);
    --menu-background-color: var(--color-black);
    --menu-highlight-color: var(--color-4);
    --menu-normal-text: var(--color-white);
    --border-color: var(--color-4);
    --dropdown-menu-background-color: var(--color-white);
    --dropdown-menu-normal-text: var(--color-black);
    --dropdown-menu-highlight-color: var(--color-4);
    --dropdown-menu-highlight-text: var(--color-white);

    /*Modal Dialog Color Variabless*/
    --modal-header-background-color: var(--color-2);
    --modal-body-background-color: var(--color-3);
    --modal-footer-background-color: var(--color-2);
    --modal-header-normal-text: var(--color-white);

    /*Home Page Color Variables*/
    --carousel-button-background-color: var(--color-black);
    --carousel-button-text: var(--color-white);
    --browse-all-button-background-color: var(--color-black);
    --browse-all-button-normal-text: var(--color-white);

    /*Thumbnail Color Variables*/
    --thumbnail-background-color: var(--color-3);
    --thumbnail-hightlight-color: var(--color-black);
    --thumbnail-hightlight-text: var(--color-white);
    --thumbnail-image-border-color: var(--color-9);
    --thumbnail-image-background-color: var(--color-black);
    --thumbnail-image-text-color: var(--color-E); 
    --thumbnail-corner-button-color: var(--color-black);
    --thumbnail-corner-button-text: var(--color-white);
    --thumbnail-normal-text: var(--color-white);
    --thumbnail-light-text: var(--color-C);
    --thumbnail-tags-icon: var(--color-C);
    --thumbnail-details-border-color: var(--color-white);
    --thumbnail-details-background-color: var(--color-4);
    --thumbnail-detatils-title-text: var(--color-F9);
    --thumbnail-details-text: var(--color-white);

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

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

    --header-description-icon-color: var(--color-yellow);
    --header-description-background-color: var(--color-3);

    /*Presentation Action Bar*/
    --presentation-action-bar-background-color: var(--color-2);
    --presentation-action-bar-text: var(--color-white);


    --advanced-search-background-color: var(--color-4);
    --advanced-search-text: var(--color-white);
    --advanced-search-datepicker-background-color: var(--color-4);
    --advanced-search-datepicker-text: var(--color-white);
    --advanced-search-datepicker-hover-color: var(--color-9);
    --advanced-search-datepicker-active-color: var(--color-black);
    --advanced-search-range-background-color: var(--color-3);
}