/*
https://getbootstrap.com/docs/5.1/content/tables/
MEDIA QUERIES TO CHANGE font-size of .tblDataBody td for smaller screens
*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&family=Open+Sans:wght@300;400;500;600&family=Roboto:wght@100;300;400;500;700;900&display=swap');

:root {
  --data-table-font: Verdana, Arial, Helvetica, sans-serif;
  --data-table-font-size: 12px;
  --data-table-line-height: 1.45;
  
  /*** OVERWRITES ***/
  --bs-body-line-height: 1.45;
  --bs-font-sans-serif: system-ui,-apple-system,"Segoe UI","Noto Sans","Open Sans","Lato","Roboto","Arial","Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

header {display: none;}
footer {display: none;}

.leader {background-color: #fffce7;/*edffed*//*ccf1cc*/}    /*Must come before .selectedCol*/
.won {background-color: #e8ffe7;}    /*Must come before .selectedCol*/


/*****************************************************
                     Defaults
*****************************************************/
  body {font-size: 16px;}
  nav {background-color: #f7f7f7/*#f0f0f0*/;}
  section {
    margin: 0px auto;
    padding: 10px 50px;
  }
  section p {
    margin: 15px;
    line-height: 22px;
  }
  section a, section a:active, section a:link, section a:visited {
    color: var(--bs-primary);  /*blue;*/
    font-weight: bold;
    text-decoration: none;
  }
  section a:hover {text-decoration: underline;}
  section ul {margin-top: 15px; margin-bottom: 15px;}
  section ul li {margin: 5px 0px 5px 10px;}
  #sectionPageTitle {padding-top: 25px;}
  #sectionPageTitle p {text-align: center;}

  h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    text-align: center;
    line-height: 1.3;   /*1.2*/
  }
  .h1, h1 {
    font-family: 'Lato', 'Open Sans','Noto Sans', 'Segoe UI', 'Verdana', 'Arial', 'Helvetica', sans-serif;
    font-weight: 700;   /*500*/
  }
  .h2, h2 {
    font-family: 'Roboto', 'Noto Sans', 'Open Sans', 'Segoe UI', 'Verdana', 'Arial', 'Helvetica', sans-serif;
    font-weight: 500;   /*500*/
  }
  .h3, h3 {
    font-family: 'Lato', 'Noto Sans', 'Open Sans', 'Roboto', 'Segoe UI', 'Verdana', 'Arial', 'Helvetica', sans-serif;
    font-weight: 400;   /*500*/
    font-size: 1.6rem;  /*1.75rem*/
  }
  th {font-weight: normal;}
  img {border-style: none;}
  div.centered {text-align: center;}
  div.centered table {margin: 0px auto; text-align: left;}
  a, a:active, a:link, a:visited {color: #000000; text-decoration: underline;}
  a:hover {color: #8b0000; text-decoration: none;}



/*****************************************************
            Election Details Section
*****************************************************/
  .sectionElectionDetails {max-width: 1200px;}
  .sectionElectionDetails details summary {font-size: 1.2em;}
  .tableElectionDetailsContainer {width: 100%; border: 1px solid black; padding: 5px;}
  .tdElectionDetailsContainer {width: 48%;}
  .tableElectionDetails {width: 100%; border: 0px; font-family: var(--data-table-font); font-weight: 400; font-size: 0.9em; /*font-size: var(--data-table-font-size); line-height: var(--data-table-line-height); background-color: #f0f0f0; padding: 0px; table-layout: fixed; border-collapse: collapse; border-spacing: 0px;*/}
  /*.tableElectionDetails tr {border-bottom: 1px solid red;}*/
  .tdElectionDetailsKeys {width: 30%; padding: 2px 4px; text-align: right; font-weight: bold;}
  .tdElectionDetailsValues {width: 68%; padding: 2px 4px; text-align: left;}



/*****************************************************
      DataTable Header (Data Input, Banners, etc)
*****************************************************/
  .dtOption {
    visibility: hidden;
    display: inline-block;
    margin: 0px 10px;
  }
  .dtOptions {
    font-size: 14px;
    line-height: 14px;
    padding: 25px;
    margin: 0px auto;
    text-align: center;
    border-bottom: 1px solid #333333;
    box-shadow: 1px 2px 2px #999999;
  }
  .dtOptionsSelect {
    padding: 2px 4px;
    min-width: 100px;
    max-width: 175px;
    border-radius: 5px;
  }
  .dtOptionText {
    visibility: visible;
    padding: 6px 8px;
    border: 1px solid #999999;
    border-radius: 5px;
    margin-right: 20px;
  }



/*****************************************************
          DataTables (#sectionDataTable)
*****************************************************/
  /* TABLE AND WRAPPERS */
    .sectionDataTable {margin: 0px auto; text-align: center; /*padding-top: 0px;*/}
    .divDataTableContainer {padding: 0px;}
    .divDataTableWrapper {
      display: block;
      border: 1px solid #888888;
      background-color: #FFFFFF;
      max-width: 98%;
      margin-left: auto; margin-right: auto;
      overflow-y: scroll; /*vertical*/
      overflow-x: scroll; /*horizontal*/
    }
    .tblDataTable {
      font-family: var(--data-table-font);
      font-weight: 400;
      font-size: var(--data-table-font-size);
      line-height: var(--data-table-line-height);
      background-color: #f0f0f0;
      padding: 0px;
      table-layout: fixed;
      border-collapse: collapse;
      border-spacing: 0px;
    }

  /* TABLE HEADER */
    #tblHeadTotal {background-color: #bbbbbb;}
    .tblDataTable thead {position: sticky; top: 0; background-color: #f0f0f0;}
    .tblDataTable thead td, .tblDataTable thead th {border: 0px !important; padding: 0px !important; vertical-align: middle;}
    .tblDataTable thead td div, .tblDataTable thead th div {border-right: 1px solid #888888; border-bottom: 1px solid #888888; padding: 2px 5px; vertical-align: middle;}
    .thHeaderItem {height: 22px;}
    .thHeaderItem div {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}  /* TRUNCATE */
    .thTotalCell {background-color: #bbbbbb;}

  /* ROWS */
    .tblDataBody {background-color: white !important; table-layout: fixed; border-collapse: collapse; border-spacing: 0px;}
    .trDataRow {height: 17px; border-bottom: 1px solid #f7f7f7;}
    .trSelectedRow {color: #FFFFFF; background-color: #316AC5 !important;}
    .trSelectedRow td {background-color: #316AC5;}
    .trHighlightData {color: #000000; background-color: yellow;}

  /* COLUMNS */
    .tblDataBody td {white-space: nowrap; padding: 2px 4px; vertical-align: middle;}
    .tdBodyItem {border: 0px; margin: 0px; cursor: pointer; border-right: 1px solid #f7f7f7;}
    .thSpacer {border-right: 0px !important;} 
    .tdLeft {text-align: left;}
    .tdCenter {text-align: center; border-left: 1px solid black; border-right: 1px solid black;}
    .tdRight {text-align: right;}
    .borderRight {border-right: 1px solid black;}
    .tdTotalCell {background-color: #e5e5e5;}
    .selectedCol {background-color: #d6e4f9;} /*#ffff98*/

  /* PROCESSING IMAGE */
    .tblAjaxProcessingImage {vertical-align: middle; cursor: default;}
    .tblAjaxProcessingImage table {text-align: center; width: 100%;}
    .tblAjaxProcessingImage img {display: inline-block; margin: 10px auto; border: 0px;}

  /* RESULTS MESSAGE */
    #sectionResultsMessage {text-align: center; max-width: 93%;}
    .divIcons {display: block; position: absolute; float: left; margin: 0px;}
    .divIcons img {display: inline-block; height: 20px; margin: 5px;}
    .divIcons img:hover {cursor: pointer; height: 30px; margin: 0px;}
    /*#iconJSON {height: 26px;}*/
    .tblResultsMessage {margin: 10px; vertical-align: top; cursor: default;}
    .tblResultsMessage div {font-size: 14px; text-align: center; margin: 0px auto; padding: 3px;}
    #tblResultsMessage {margin: 0px; display: inline-block;}
    .divHelp {float: right; display: block; position: relative;}
    .divHelp:hover {cursor: pointer; }
    .divHelp img {height: 20px; margin: 2px 5px;}
    .divHelp img:hover {cursor: pointer; height: 30px; margin: 0px;}

  /* ERROR MESSAGE */
    #tdErrorMessage {width: 100%; min-width: 500px; text-align: center; vertical-align: middle; height: 100px; font-weight: bold; font-size: 16px; color: #DE0100;}
		/*text-align: left; padding-left: 50px;*/

  /* FOOTER */
    .tblDataTable tfoot {position: sticky; bottom: 0; background-color: #f0f0f0;}
    .tblDataTable tfoot td {border: 0px !important; padding: 0px !important; vertical-align: middle;}
    .tblDataTable tfoot td div {border-right: 1px solid #888888; border-top: 1px solid #888888; padding: 3px 5px;}



/*****************************************************
         JSON SAMPLE DIV (#jsonFormatterParsed)
*****************************************************/
  #jsonFormatterParsed {font-size: 13px; line-height: 20px; border: 1px solid gray; padding: 20px;}
  #jsonFormatterParsed details {margin-left: 20px; border-left: 1px dotted gray;}
  #jsonFormatterParsed p {margin: 0px 0px 0px 35px;}
  #jsonFormatterParsed .close {}
  #jsonFormatterParsed .hl .k {background-color: yellow;}
  #jsonFormatterParsed .notes {color: gray; font-weight: bold; font-style: italic;}
  #jsonFormatterParsed .notesRed {color: #e50000; font-weight: bold; font-style: italic;}
  #jsonFormatterParsed .ellipses::after {content: '…'; margin: 0px 4px; /*color: #888888; font-weight: bold;*/}

  /*** Data & Data Types ***/
    #jsonFormatterParsed .b {/*font-weight: bold;*/}    /* Brackets { [ */
    #jsonFormatterParsed .k {color: #000000;}    /* KEY */
    #jsonFormatterParsed .s {color: #0b7500; word-wrap: break-word;} /* String */
    #jsonFormatterParsed .s a, #jsonFormatterParsed .s a:active, #jsonFormatterParsed .s a:visited {color: #0b7500; text-decoration: none;}
    #jsonFormatterParsed .s a:hover {text-decoration: underline;}
    #jsonFormatterParsed .bl, #jsonFormatterParsed .nl, #jsonFormatterParsed .n {color: #1a01cc; /*font-weight: bold;*/}  /* Boolean, Null, Number */



/*****************************************************
                     TOOLTIPS
     https://www.w3schools.com/css/css_tooltip.asp
*****************************************************/
  /* Tooltip container */
  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }

  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  }

  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }
  
  
  
/*****************************************************
                   TOGGLE SWITCH
*****************************************************/
  .divSwitch {
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    padding: 2px;
  }
  .switch {
    vertical-align: middle;
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
  }
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
  }
  .slider:before {
    position: absolute;
    content: "";
    height: 17px;
    width: 17px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
  }
  input:checked + .slider {background-color: #316AC5;} /*#2196F3*/
  input:focus + .slider {box-shadow: 0 0 1px #316AC5;} /*#2196F3*/
  input:checked + .slider:before {-webkit-transform: translateX(19px); -ms-transform: translateX(19px); transform: translateX(19px);}
  .slider.round {border-radius: 25px;}
  .slider.round:before {border-radius: 50%;}



/*****************************************************
                    LINE GRAPH 
*****************************************************/
	.divLineGraphWrapper {text-align: center; overflow: hidden;}
	.divLineGraphErrMsg {font-size: 16px; line-height: 20px; display: block; margin: 25px auto; padding: 10px; text-align: center;}
	.frameLineGraph {width: 100%; height: 100%;}



/*****************************************************
                      CUSTOM 
*****************************************************/
  /*.countySpan {text-transform: uppercase;}*/
  #tblHeadSummary {text-transform: uppercase;}

  .truncate {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
  .hide {display: none !important;}

  .timestamp {font-size: 11px !important;}
  .warningEmoji {font-size: 10px !important;}

  #clicktoJson {display: inline-block; margin-left: 200px;}

  .red {color: #de0100;}
  .green {color: #008000;}
  .black {color: black;}

  .lean-dem, .likely-dem, .solid-dem {color: #00AEF3;}
  .lean-rep, .likely-rep, .solid-rep {color: #DE0100;}
  /*.solid-dem, .solid-rep {font-weight: bold;}*/
  .tossup {color: #E79700;}

  .tdIndex {padding-left: 12px !important;}

  .winner:before {
    display: inline-block;
    content: '';
    background-repeat: no-repeat;
    background-image: url('/images/GreenCheckmark.svg');
    background-size: 12px 12px;
    height: 12px;
    width: 12px;
    margin-right: 4px;
  }
  .incumbent {
    font-size: 10px;
  }
  .party {
    font-size: 10px;
    padding: 0px 3px;
    border-radius: 5px;
    border: 1px solid #000000;
  }
  .dem-party {    /* (Democrat Party) - Dark Blue = #232066 / Light Blue (New) = #00AEF3 */
    background-color: #00AEF3;
    color: #FFFFFF;
    border: 0px;
  }
  .gop-party {    /* (Republican Party) - Red = #DE0100 / White (text) = #FFFFFF */
    background-color: #DE0100;
    color: #FFFFFF;
    border: 0px;
  }  
  .lib-party {    /* (Libertarian Party) - Yellow = #FED105 / Gray (text) = #56565B */
    background-color: #FED105;
    color: #56565B;
    padding: 0px 4px;
    border: 0px;
  }
  .grn-party {    /* (Green Party of Michigan) - Dark Green = #19421A / Light Green = #508C1B */
    background-color: #508C1B;
    color: #19421A;
    border: 0px;
  }
  .iap-party {    /* (Independent American Party) - Purple = #800080 */
    background-color: #800080;
    color: #FFFFFF;
    border: 0px;
  }
  .uty-party {    /* (Unity Party) - Cyan = #add8e6 */
    background-color: #add8e6;
    color: #000000;
    border: 0px;
  }
  .swp-party {    /* (Socialist Workers Party) - Cyan = #add8e6 */
    /*background-color: #AA0000;
    color: #FFFFFF;
    border: 0px;*/
  }
  .swp-party {    /* (Socialist Workers Party) - Hammer & Sickle */
    padding: 0px;
    color: #ffffff00;
    border-radius: 0px;
    border: 0px;
    background-color: unset;
    /*display: inline-block; content: '';*/
    background-repeat: no-repeat;
    background-image: url('/images/HammerSickle.png');
    background-size: 12px 12px;
    height: 12px;
    width: 12px;
  }

  /*
  /* (Constitution Party) Purple (de factor) = #A356DE / Blue = #1F5BA7 / Red = #C52334 * /
  .npd-party {} -- None of These Candidates (NV)
  .ind-party {} -- INDEPENDENT

  .nlp-party {} -- Natural Law Party
  .ust-party {} -- U.S.T. Party
  .grp-party {} -- Grassroots Party
  .ina-party {} -- OTHER (Hugh McTavish MN)
  .swp-party {} -- Socialist Workers Party
  .iap-party {} -- 
  */



/*****************************************************
             UPDATED & PAGE-SPECIFIC
*****************************************************/