@charset "UTF-8";
/* CSS Document */
/* Redesigned September, 2023 */

/************************************ Make Static Headers Responsive ************************************/

/* Break Points: 850px, 670px, 450px */

/** To make pages responsive: 1. Add class "flex" to #Wrapper 2. Attach JS "header_nav_behavior.js"></script> **/
/* .flex will supercede static styles */
/* For more detailed notes refer to text file: Assets_to_Convert_Pages_to_Responsive.rtf */

#Content { overflow: auto; } /* Container for main content. Does not include sidebar nav */
#Content.fullWidth { padding: 0 20px 20px 20px !important; } /* Use when content spans entire width and no sidebar is present */

#Content header.mainHeader { width: 100%;}
#Content header.mainHeader img { display: block; width: 100%; height: auto; margin: 0 auto; }
#Content header.mainHeader h1 { position: absolute; top: 0; left: -9999px; }
#Content header.mainHeader h2 { font-size: 1.8em; color: #039; margin: 0 0 20px 30px; display: block; font-family: "Trebuchet MS", "Lucida Grande", Arial, sans-serif }


#Content h2 {
  font-size: 1.2em;
  line-height: 1.7rem;
  color: #4852b5;
  margin-bottom: 15px;
}
#Content p, #Content ul li, #Content ol li  { font-size: .8rem; line-height: 1.5rem; margin-top: 0; }
#Content a, #Content a:active, #Content a:visited { color: #d4007d; }
#Content ul  { margin-left: 15px; }


/**** Main Rows and Columns ****/
* {
  box-sizing: border-box;
}
.row { display: flex; flex-wrap: wrap; width: 100%; } /* Contains left sidenav and main content */
.row::after { content: ""; clear: both; }

[class*="column-"] {
  padding: 10px;
}
/* Separates left nav bar from main content */


.column-1 { /* contains left sidenav */
	width: 22%;
}
.column-2 { /* contains main content */
	width: 78%;
}
.column-100 {
    width: 100%;
}
@media screen and (max-width:450px) {
    
.column-1, .column-2 { padding: 10px 0; }
    
}

  


/* Rows and Columns within content container */
.row-inner { display: flex; flex-wrap: wrap; clear: both; }
.row-inner::after { content: ""; clear: both; }
.row-inner [class*="column"] { padding: inherit; width: inherit; }

.flow-row { flex-flow: row; column-gap: 10px; }
.flow-column { flex-flow: column; }

.centerContent { justify-content: center; }
.nowWrap { flex-wrap: nowrap !important; }
.wrap {flex-wrap: wrap; }

#Wrapper.flex #ContainerBG { width: 100% !important; min-width: 320px; max-width: 967px !important; }


#Wrapper.flex #Masthead, #hpWrapper.flex #Masthead {
	width: 100% !important;
	min-width: 320px !important;
}
#hpWrapper.flex #Masthead {
    margin-bottom: 0;
}
#Wrapper.flex #Masthead #mainNav #menu, #hpWrapper.flex #Masthead #mainNav #menu {
  margin: 0;
    z-index: 9999;
  }
#Wrapper.flex #Masthead #mainNav #menu .closeMenu, #hpWrapper.flex #Masthead #mainNav #menu .closeMenu {
	display: none;
	box-sizing: border-box;
	text-align: center;
	line-height: 0;
    padding: .7rem;
}
#Wrapper.flex #Masthead #mainNav #button, #hpWrapper.flex #Masthead #mainNav #button {
    display: none;
}

#Wrapper.flex #Footer {
	width: 100% !important;
	min-width: 320px !important; 
}

#Wrapper.flex #Container {
	min-width: 320px !important;
}

#Wrapper.flex .show-when-full { /* Use to swap image before mobile view */
		display: block;
	}
#Wrapper.flex .show-when-mobile {
		display: none;
	}



/* Swap Images and Objects */
.show-when-less-400 { display: none !important; }
.show-when-more-400 { display: block; }

.show-when-mobile { display: block; }
.show-when-desktop { display: none; }

/** Float object in desktop view then shift to center in mobile **/
.flt-rt-shft-center { display: block; float: right; margin-left: 10px; }
.flt-lft-shft-center { display: block; float: left; margin-right: 10px; }


/* Contrain Width for Responsive Image Sizing. Use with percentage widths. */
.mxw-50 { max-width: 50px; height: auto; }
.mxw-75 { max-width: 75px; height: auto; }
.mxw-100 { max-width: 100px; height: auto; }
.mxw-125 { max-width: 125px; height: auto; }
.mxw-150 { max-width: 150px; height: auto; }
.mxw-175 { max-width: 175px; height: auto; }
.mxw-200 { max-width: 200px; height: auto; }
.mxw-225 { max-width: 225px; height: auto; }
.mxw-250 { max-width: 250px; height: auto; }
.mxw-275 { max-width: 275px; height: auto; }
.mxw-300 { max-width: 300px; height: auto; }
.mxw-325 { max-width: 325px; height: auto; }
.mxw-350 { max-width: 350px; height: auto; }
.mxw-375 { max-width: 375px; height: auto; }
.mxw-400 { max-width: 400px; height: auto; }
.mxw-425 { max-width: 425px; height: auto; }
.mxw-450 { max-width: 450px; height: auto; }
.mxw-475 { max-width: 475px; height: auto; }
.mxw-500 { max-width: 500px; height: auto; }
.mxw-550 { max-width: 550px; height: auto; }
.mxw-600 { max-width: 600px; height: auto; }
.mxw-650 { max-width: 650px; height: auto; }

p.center { margin: inherit auto; }


/************************************ SWITCH 850 Pixels or Less BEGIN ************************************/
/** Prevent search box from crashing into header tagline **/

@media screen and (max-width: 850px) {
	
	
/* Main Rows and Columns */

  /* For mobile devices: */
  /* Move sidenav to bottom of the page */
  [class*="column-"] {
    width: 100%;
  }
	.row {
		flex-flow: column-reverse;
	}	
	
#Wrapper.flex #ContainerBG #Masthead h2, #hpWrapper.flex #hpContainerBG #Masthead h2 {
	max-width: 300px;
	height: 34px;
	width: 90%;
	display: block;
	top: 0;
	background-size: 100%;
	background-repeat: no-repeat;
	}
#Wrapper.flex #ContainerBG #Masthead #mainNav ul li:last-of-type ul, #hpWrapper.flex #hpContainerBG #Masthead #mainNav ul li:last-of-type ul {
	right: 0;
	}
	
#Wrapper.flex #Footer #kaganUrlPhone p {
		padding: 0 !important;
	}
	
/* Controls Dropdown in Hamburger Mode < 850 */
#Wrapper.flex .show, #hpWrapper.flex .show  { display: block !important; }
#Wrapper.flex .hide, #hpWrapper.flex .hide { display: none; }
	
#Wrapper.flex .show-when-full, #hpWrapper.flex .show-when-full {
		display: none;
	}
#Wrapper.flex .show-when-mobile, #hpWrapper.flex .show-when-mobile {
		display: block;
	}
	
}
/************************************ SWITCH 850 Pixels or Less END ************************************/




/************************************ SWITCH 670 Pixels or Less BEGIN ************************************/
/* Switch from horizontal nav to hamburger */
/* Switch to One Column format */

@media screen and (max-width: 670px) {

#Wrapper.flex #Masthead h1, #hpWrapper.flex #Masthead h1 {
	display: block;
	margin: 0 auto;
}
#Wrapper.flex #Masthead h2, #hpWrapper.flex #Masthead h2 {
	display: block;
	max-width: 300px;
	width: 90%;
	height: 34px;
	background: url(../images/hm_header_kagan_tagline.png) center no-repeat ;
	text-indent: -9999px;
	margin: 0 auto;
	background-size: 100%;
}
#Wrapper.flex #Masthead #mastheadLowBorder, #hpWrapper.flex #Masthead #mastheadLowBorder  {
	display: none;
}
#Wrapper.flex #Masthead #Header, #hpWrapper.flex #Masthead #Header { 
        text-align: center; 
         }
#Wrapper.flex #Masthead #Header a, #hpWrapper.flex #Masthead #Header a { 
        width: 180px;
    display: inline-block; }
	
/* Search Box - 670 or Less */
	
#Wrapper.flex #fpSearch, #hpWrapper.flex #fpSearch {
    display: inline-block;
    background-color: transparent;
    height: auto;
    width: 180px;
    padding: 4px 8px;
    border-radius: 0;
    float: none;
	margin-bottom: 0;
    top: 0;
    left: 0;
}
#Wrapper.flex #fpSearch form, #hpWrapper.flex #fpSearch form {
  margin: 0;
  top: 4px;
  position: relative;
}
#Wrapper.flex #fpSearchButton, #hpWrapper.flex #fpSearchButton { margin-top: 0; top: -3px; position: relative; }
#Wrapper.flex #fpSearchHint, #hpWrapper.flex #fpSearchHint { padding: 2px 5px; border: 1px solid; border-color: #650d3f #fce5ef #fce5ef #650d3f; color: #CCC; }
#Wrapper.flex .searchBkgColor, #hpWrapper.flex .searchBkgColor { display: flex; justify-content: center; width: 100%; flex-wrap: wrap; background-color: #018992; }	

	

/* View Cart and My Account Links */
	
#Wrapper.flex #accessLinks, #hpWrapper.flex #accessLinks {
	display: flex;
    background-color: #018992;
	width: 180px; 
	float: none;
	top: 29%;
 	right: unset;
 	color: #fff;
    justify-content: center;
    align-items: center;
}
#Wrapper.flex #accessLinks a, #hpWrapper.flex #accessLinks a {
  display: inline-block;
  font-size: .8em;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
    background-color: transparent;
}
#Wrapper.flex #accessLinks a:hover, #hpWrapper.flex #accessLinks a:hover {
  color: #fff799;
}  
  
  
/* Hamburger Menu - 670 or Less*/
	
#Wrapper.flex #Masthead #mainNav #button, #hpWrapper.flex #Masthead #mainNav #button {
	z-index:300;
	display: block;
  	float: left;
	position: absolute;
	top: 20px;
	left: 20px;
	width: 30px;
	min-width: unset;
	height: 30px;
	padding-top: 0;
	background-image: url(../images/menu-icon.png);
	background-repeat: no-repeat;
	background-position: center;
	background-color: transparent;
	border-bottom: none;
    cursor: pointer;
    text-indent: -9999px;
}
#hpWrapper.flex #Masthead #mainNav #button {
      top: 50px;  
    }	
#Wrapper.flex #Masthead #mainNav ul li, #hpWrapper.flex #Masthead #mainNav ul li { font: bold "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif"; font-size: 1.15em; margin: 0 !important; width: 100%; height: auto; border-bottom: 1px solid #343a40; text-align: left;
} 
	
#Wrapper.flex #Masthead #mainNav ul li a, #hpWrapper.flex #Masthead #mainNav ul li a { display: block; width: 100%; font-family: "Noto Sans",Helvetica,Arial,sans-serif; color: #fff; text-decoration: none; height: auto; font-size: 1rem; font-weight: normal; padding: .35rem .5rem; position: relative; z-index: 999; }
	
#Wrapper.flex #Masthead #mainNav ul li a:hover, #hpWrapper.flex #Masthead #mainNav ul li a:hover { color: #fff799; }
		
#Wrapper.flex #Masthead #mainNav ul.reveal, #hpWrapper.flex #Masthead #mainNav ul.reveal { transform: translateX(-320px); width: 320px; overflow: visible; } /* Slide out */
	
#Wrapper.flex #Masthead #mainNav > ul, #hpWrapper.flex #Masthead #mainNav > ul {
	display: block;
	position: absolute!important;
    top: 0;
	right: -320px;
	width: 0;
	padding: 0;
	background: #212529;
	cursor: pointer;
    min-height: 100vh;
    transition-duration: .25s;
    overflow: hidden;
    }

    
/* Drop Down */
	
#Wrapper.flex #Masthead #mainNav ul li ul, #hpWrapper.flex #Masthead #mainNav ul li ul {
  font-size: 1em;
  display: none;
  float: none;
  position: relative;
  width: 100%;
  top: 0;
  padding: 0;
  margin: 0 auto;
  text-align: center;
}
#Wrapper.flex #Masthead #mainNav ul li ul li ul.submenu, #hpWrapper.flex #Masthead #mainNav ul li ul li ul.submenu { display: block; } /* NEW */
#Wrapper.flex #Masthead #mainNav ul li ul li ul.submenu li, #hpWrapper.flex #Masthead #mainNav ul li ul li ul.submenu li { border-bottom: none !important; } /* NEW */       

#Wrapper.flex #Masthead #mainNav ul li ul li, #Wrapper.flex #Masthead #mainNav ul li ul li a, #hpWrapper.flex #Masthead #mainNav ul li ul li, #hpWrapper.flex #Masthead #mainNav ul li ul li a {
	height: auto !important; color: #343a40; }
	
#Wrapper.flex #Masthead #mainNav ul li ul li a:hover, #hpWrapper.flex #Masthead #mainNav ul li ul li a:hover {
		color: #00a1ab !important;
	}	
		
#Wrapper.flex #Masthead #mainNav ul li:hover ul, #hpWrapper.flex #Masthead #mainNav ul li:hover ul { display: none; }
	
#Wrapper.flex #Masthead #mainNav #menu .closeMenu, #hpWrapper.flex #Masthead #mainNav #menu .closeMenu {
	display: block !important;
}   
    

	
/** **/
.flow-row { flex-flow: column; }
.row-inner [class*="column"] { width: 100% !important; padding: 0 !important; margin: 0 !important; }
.column-reverse { flex-flow: column-reverse; display: flex; }	
	
	
/* Footer */
#Wrapper.flex #Footer .inner {
	display: flex;
	flex-flow: column;
	margin: 0 auto;
}
#Wrapper.flex #Footer #SocialMediaLinks {
    display: block !important;
    width: auto !important;
    float: none !important;
	margin: 15px 0 5px 0 !important;
}
#Wrapper.flex #Footer #kaganUrlPhone img.logo {
    float: none !important;
    margin: 5px auto !important;
}	

}
/************************************ SWITCH 670 Pixels or Less END ************************************/


/************************** Universal Sidebar Nav < 850 BEGIN ************************************/	
	
/* Drop Down */
@media only screen and (max-width: 850px) {
#Wrapper.flex #SidebarNav {
		text-align: center;
	}   
#Wrapper.flex #SidebarNav ul li ul {
  display: none;
  font-size: 1em;
  height: auto;
  width: 100% !important;
  top: 0;
  padding: 0;
  margin: 0 auto;
  text-align: center;
  transition: 5s;
  border-radius: 0;
}
#Wrapper.flex #SidebarNav ul li:hover ul { /*Activate slide out menu by changing height*/
  height: auto;
  border: none;
}

#Wrapper.flex #SidebarNav ul li ul { position: relative; width: 100%; border-radius: 0; height: 0; left: 0; transition: 3s; }
	
#Wrapper.flex #SidebarNav ul ul li { height: max-content !important; border-bottom: none !important; position: relative; left: 0; font-weight: normal !important; }

#Wrapper.flex #SidebarNav ul ul li a { height: auto; padding: 6px 10px; border: none; position: relative; color: #fff; font-size: inherit; font-weight: normal; }
	
#Wrapper.flex #SidebarNav ul li ul li a:hover { border-top: 0; border-bottom: 0; margin: 0; }
	
#Wrapper.flex #SidebarNav .slideDown { display: contents; }
    
    
}
/************************** Sidebar Nav < 850 END ************************************/


/************************** Universal SidebarNav Full Width **************************/

#SidebarNav {
	width: 100%;
	min-width: 180px;
  	background-size: 100%;
	padding: 0 0 15px 0;
	margin: 0;
	position: relative;
	border-radius: 15px;
	overflow: visible;
	z-index: 1;
}
#Wrapper #SidebarNav .image2 {
    display: none;
}
#SidebarNav ul {
	list-style: none;
	font-size: .95em;
}
#SidebarNav ul li {
	border-bottom: rgba(255,255,255,.8) 1px dotted;
	position: relative;
}
#SidebarNav ul li:last-of-type {
    border: none !important;
}
#SidebarNav ul li a { /* Give this link dimension to make it clickable. */
	color: #fff;
	display: block;
	height: auto;
	padding: 6px 10px;
	margin: 0;
	overflow: hidden;
	transition: .3s;
}
#SidebarNav ul li a:hover { 
    background-color: #0861a1; border: 0;
}
#SidebarNav li a a { /* Give this link dimension to make it clickable. */
	padding: 6px 10px;
	display: contents;
}

#SidebarNav ul li ul { /* Slide Out Menu */
	position: absolute;
	top: -2px;
	left: 100%;
	width: 0;
	background-color: #207bbd;
  	transition: .1s;
  	z-index: 2;
  	overflow: hidden;
  	border-radius: 0 7px 7px 7px;
}
#SidebarNav ul li:hover ul { /* Activate slide out menu by expanding width */
  width: max-content;
}
#SidebarNav ul li ul li {
	border-bottom: rgba(255,255,255,.8) 1px dotted;
	background-color: #207bbd;
  	white-space: nowrap;
}
#SidebarNav ul li ul li a { /* Give this link dimension to make it clickable, but reduce side padding. */
	color: #fff;
	padding: 6px;
	display: block;
	margin: 0;
	border-top: none;
	border-bottom: none;
    min-width: 200px;
}
#SidebarNav ul li ul li a:hover {
	background-color: #0861a1;
  	transition: .4s;
}
#SidebarNav ul ul a:active {
	color: #ff007a;
}


/* To Swap Image with Mobile Sized Version */

#Wrapper.flex .image1 { display: block; }
#Wrapper.flex .image2 { display: none; }
@media only screen and (max-width: 450px) {
    
	#Wrapper.flex .image1 { display: none !important; }
	#Wrapper.flex .image2 { display: block !important; width: 95%; height: auto; margin: inherit auto !important; }
	.show-when-less-400 { display: block !important; }
	.show-when-more-400 { display: none !important; }
    
    
    .flt-rt-shft-center { float: none; margin: auto; max-width: 300px !important; } /** Float Images then Shift to Center **/
    .flt-lft-shft-center { float: none; margin: auto; max-width: 300px !important; }
	
	img[class*="w-"], #pullquote, #box { display: block; width: 90% !important; margin: inherit auto !important; float: none !important; }
    
    #Wrapper.flex #SidebarNav, #Wrapper.flex #Content { border-radius: 0; }
    #Wrapper #SidebarNav { border-radius: 15px; } /* For non-respsonsive layouts */
    
    
}


/************************************************** Catalog **************************************************/
/* Merge these with catalog.css when ready to convert */

/* Catalog Left SidebarNav Navigation */


/******* CATALOG SidebarNav *******/
#SidebarNav.catalog { background-color: #9ecc3b; }
#SidebarNav.catalog a.home  { display: inline-block; width: 100%; height: 72px; background-image: url(/images/catalog/2024/cat_sidebar_home_2024-header.png); background-size: cover; text-indent: -9999px; background-position: center; }
#SidebarNav.catalog ul { background-color: #207bbd; }

@media only screen and (max-width: 850px) {
	/* Catalog Sidebar Home Link */
	#SidebarNav.catalog a.home {
	display: block;
	width: 100%;
	height: 72px;
	background-size: contain;
	margin: 0 auto;
	background-repeat: no-repeat;
	background-position: center;
}
	
#alsoLike {
	width: 100%;
	border: 1px solid #00689c;
	border-radius: 0;
    margin: 15px auto;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
}	
#alsoLike img { display: block; margin: 5px auto;
}
#Details {
    width: 100% !important;
}
}


/************************************************** Workshop **************************************************/

/* Workshop Left SidebarNav Navigation */
/* #wsNavLeft is the original static nav bar. It has been inluded here to match the appearance of the responsive version, but it doesn't convert #wsNavLeft to responsive. */


/******* Workshop SidebarNav *******/
#SidebarNav.workshop, #wsNavLeft { background-color: #bf74d0; }
#SidebarNav.workshop a.home, #wsNavLeft a.home  { display: inline-block; width: 100%; height: 72px; background-image: url(/images/catalog/2021/cat_sidebar_home_2024-top.png); background-size: cover; text-indent: -9999px; background-position: center; }

#SidebarNav.workshop ul, #wsNavLeft ul { background-color: #9a57b8; }
#SidebarNav.workshop ul li, #wsNavLeft ul li { font-size: .95em; }


#SidebarNav.workshop ul li ul.regInfo-submenu, #SidebarNav.workshop ul li ul.tours-submenu { display: none; } /* New */
#SidebarNav.workshop ul li ul.show { display: block } /* New */

#SidebarNav.workshop ul li ul, #wsNavLeft ul li ul {
    background-color: #9a57b8 !important;
    border-color: #844ea7 !important;
    height: auto;
}
#SidebarNav.workshop ul li ul li, #wsNavLeft ul li ul li {
    background-color: #9a57b8 !important;
	border-bottom: rgba(255,255,255,.8) 1px dotted;
  	white-space: nowrap;
}
#SidebarNav.workshop ul li a:hover, #SidebarNav.workshop ul li ul li a:hover, #wsNavLeft ul li a:hover, #wsNavLeft ul li ul li a:hover {
    background-color: #803f9d;
    color: #fff;
}
#SidebarNav.workshop ul li:hover ul, #wsNavLeft ul li:hover ul, #wsNavLeft ul li:hover ul {
    display: block;
}

@media only screen and (max-width: 850px) {
	/* Catalog Sidebar Home Link */
#SidebarNav.workshop a.home {
  display: block;
  width: 100%;
  height: 72px;
  background-size: contain;
  margin: 0 auto;
  background-repeat: no-repeat;
  background-position: center;
}
#flexBox {
  display: flex;
  flex-wrap: wrap;
}
#SidebarNav.workshop ul li ul, #SidebarNav ul li ul li { /* New */
  position: relative;
  left: 0;
}
#SidebarNav ul li ul li a::before { /* Give this link dimension to make it clickable, but reduce side padding. */ /* NEW */
  content: "• ";
}
#SidebarNav.workshop ul li:hover ul.tours-submenu { /* New */
  display: none;
}
#SidebarNav.workshop ul li:hover ul.regInfo-submenu { /* New */
  display: none;
}
}



.videoContainer { /* For Responsive Embedded Videos */
  position: relative;
  overflow: hidden;
  height: 0;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
}
.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}


/**** Table Layout: Table Headers on top, Row Headers on the left. ****/
/************ For use when data is presented in table format where column and row headers are needed (e.g. Issue #64 Spencer Article tables that display functions and structure names). **************/

/**** Responsive Behavior: In mobile view the colored row headers are hidden. Top headers become row headers and line up with their corresponding table data in a single rows. ****/
/**** Script: Hide  ****/

table#flex-table  tr td, table#flex-table tr td {
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #c9c9c9;
  border-right: 1px solid #eee;
  overflow: auto;
}
#flex-table th {
  background-color: #5c1a56;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}
#flex-table tr:nth-of-type(odd) {
  background-color: #E5E5E5;
}
#flex-table td.purple { /* Serves as row headers in desktop view */
  background-color: #a65a9f !important;
  color: #fff;
  vertical-align: middle;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
#flex-table td.pink { /* Serves as row headers in desktop view */
  background-color: #d4489a !important;
  color: #fff;
  vertical-align: middle;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
}
#flex-table td.purple:before, #flex-table td.pink:before {
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}
#flex-table td, #flex-table p {
    font-size: .9em;
    line-height: 1.8em;
    margin: 0;
}
#flex-table strong {
  color: #ee008c;
}
#flex-table b {
  color: #6a2263;
}
     
/* Mobile script: Hide colored row headers. Group data-title headers with corresponding table data.  */
@media only screen and (max-width: 500px) {
  #flex-table table, #flex-table head, #flex-table tbody, #flex-table th, #flex-table td, #flex-table tr {
    display: block;
  }
  #flex-table thead tr { /* Hide top row headers */
    display: none;
  }
  #flex-table tr {
    border: 1px solid #ccc;
  }
  #flex-table td {
    border: none;
    border-bottom: 1px solid #eee;
    position: relative;
    padding-left: 50%;
    white-space: normal;
    text-align: left;
    min-height: 45px;
    word-break: break-word;
  }
  #flex-table td.purple, #flex-table td.pink, #flex-table td.p {
    text-align: left;
    font-weight: bold;
  }
  #flex-table td:before.purple, #flex-table td.pink:before {
    color: #fff !important;
  }
  #flex-table td:before {
    font-family: Arial, Helvetica, sans-serif;
    content: attr(data-title); /* data-title serves as the row header in mobile view */
    position: absolute;
    top: 6px;
    left: 6px;
    width: 45%; /* Create space for data-title to occupy */
    padding-right: 10px;
    text-align: right;
    font-weight: bold;
    color: #6e6e6e;
  }
  #flex-table td.data-title {
    text-align: right;
  }
}


/**** Table Layout: Colored row headers on the left. No table headers on top ****/
#row-to-column {border-radius: 5px; }
     #row-to-column.purple-2 { border: solid 2px var(--purple-2); }
     #row-to-column .line { display: flex; flex-wrap: wrap; border-bottom: solid #c9c9c9 1px; }
     #row-to-column .line:last-of-type { border-bottom: none; }
     #row-to-column .header, #row-to-column .header p { text-align: right; font-weight: bold; color: #fff !important; }
     #row-to-column .header.purple-2 { background-color: var(--purple-2); }
     
     @media screen and (max-width:700px) {
        #row-to-column .header, #row-to-column .header p { text-align: center; }
     }