html{
     -webkit-text-size-adjust: none;
}

body{

	--f10:10px;
	--f11:11px;
	--f12:12px;
	--f13:13px;
	--f13d5:13.5px;
	--f14:14px;
	--f15:15px;
	--f16:16px;
	--f16d5:16.5px;
	--f17:17px;
	--f18:18px;
	--f19:19px;
	--f20:20px;
	--f21:21px;
	--f22:22px;
	--f23:23px;
	--f24:24px;
	--f25:25px;
	--f26:26px;
	--f27:27px;
	--f28:28px;
	--f29:29px;
	--f30:30px;

	--f32:32px;
	--f40:40px;

	--lh2:2px;
    --lh10:10px;
	--lh11:11px;
	--lh12:12px;
	--lh13:13px;
	--lh14:14px;
	--lh15:15px;
	--lh16:16px;
	--lh17:17px;
	--lh18:18px;
	--lh19:19px;
	--lh20:20px;
	--lh21:21px;
	--lh22:22px;
	--lh23:23px;
	--lh24:24px;
	--lh24d6:24.6px;
	--lh24d65:24.65px;
	--lh25:25px;
	--lh26:26px;
	--lh27:27px;
	--lh28:28px;
	--lh29:29px;
	--lh30:30px;
	--lh31:31px;
	--lh32:32px;
	--lh32d8:32.8px;
	--lh33:33px;
	--lh34:34px;
	--lh35:35px;
	--lh36:36px;
	--lh37:37px;
	--lh38:38px;
	--lh39:39px;
	--lh40:40px;
	--lh41:41px;
	--lh42:42px;
	--lh43:43px;
	--lh44:44px;
	--lh45:45px;
	--lh46:46px;
	--lh47:47px;
	--lh48:48px;
	--lh49:49px;
	--lh50:50px;

	--lh53:53px;
	--lh60:60px;
	--lh80:80px;

}

body.font110{ 
  /* see note for  body#small.font130plus.font130 */
  
  	--f10:11px;
	--f11:12.1px;
	--f12:13.2px;
	--f13:14.3px;
	--f13d5:14.85px;
	--f14:15.4px;
	--f15:16.5px;
	--f16:17.6px;
	--f16d5:18.15px;
	--f17:18.7px;
	--f18:19.8px;
	--f19:20.9px;
	--f20:22px;
	--f21:23.1px;
	--f22:24.2px;
	--f23:25.3px;
	--f24:26.4px;
	--f25:27.5px;
	--f26:28.6px;
	--f27:29.7px;
	--f28:30.8px;
	--f29:31.9px;
	--f30:33px;
	
	--f32:35.2px;
	--f40:44px;
	
		--lh2:2.2px;
	--lh10:11px;
	--lh11:12.1px;
	--lh12:13.2px;
	--lh13:14.3px;
	--lh14:15.4px;
	--lh15:16.5px;
	--lh16:17.6px;
	--lh17:18.7px;
	--lh18:19.8px;
	--lh19:20.9px;
	--lh20:22px;
	--lh21:23.1px;
	--lh22:24.2px;
	--lh23:25.3px;
	--lh24:26.4px;
	--lh24d6:27.1px;
	--lh24d65:27.1px;
	--lh25:27.5px;
	--lh26:28.6px;
	--lh27:29.7px;
	--lh28:30.8px;
	--lh29:31.9px;
	--lh30:33px;
	--lh31:34.1px;
	--lh32:35.2px;
	--lh32d8:36.1px;
	--lh33:36.3px;
	--lh34:37.4px;
	--lh35:38.5px;
	--lh36:39.6px;
	--lh37:40.7px;
	--lh38:41.8px;
	--lh39:42.9px;
	--lh40:44px;
	--lh41:45.1px;
	--lh42:46.2px;
	--lh43:47.3px;
	--lh44:48.4px;
	--lh45:49.5px;
	--lh46:50.6px;
	--lh47:51.7px;
	--lh48:52.8px;
	--lh49:53.9px;
	--lh50:55px;

	--lh53:58.3px;
	--lh60:66px;
	--lh80:88px;

}

body.font120plus.font120{ 
  /* see note for  body#small.font130plus.font130 */
  
  	--f10:12px;
	--f11:13.2px;
	--f12:14.4px;
	--f13:15.6px;
	--f13d5:16.2px;
	--f14:16.8px;
	--f15:18px;
	--f16:19.2px;
	--f16d5:19.8px;
	--f17:20.4px;
	--f18:21.6px;
	--f19:22.8px;
	--f20:24px;
	--f21:25.2px;
	--f22:26.4px;
	--f23:27.6px;
	--f24:28.8px;
	--f25:30px;
	--f26:31.2px;
	--f27:32.4px;
	--f28:33.6px;
	--f29:34.8px;
	--f30:36px;
	
	--f32:38.4px;
	--f40:48px;
	
	 --lh2:2.4px;
	--lh10:12px;
	--lh11:13.2px;
	--lh12:14.4px;
	--lh13:15.6px;
	--lh14:16.8px;
	--lh15:18px;
	--lh16:19.2px;
	--lh17:20.4px;
	--lh18:21.6px;
	--lh19:22.8px;
	--lh20:24px;
	--lh21:25.2px;
	--lh22:26.4px;
	--lh23:27.6px;
	--lh24:28.8px;
	--lh24d6:29.52px;
	--lh24d65:29.58px;
	--lh25:30px;
	--lh26:31.2px;
	--lh27:32.4px;
	--lh28:33.6px;
	--lh29:34.8px;
	--lh30:36px;
	--lh31:37.2px;
	--lh32:38.4px;
	--lh32d8:39.36px;
	--lh33:39.6px;
	--lh34:40.8px;
	--lh35:42px;
	--lh36:43.2px;
	--lh37:44.4px;
	--lh38:45.6px;
	--lh39:46.8px;
	--lh40:48px;
	--lh41:49.2px;
	--lh42:50.4px;
	--lh43:51.6px;
	--lh44:52.8px;
	--lh45:54px;
	--lh46:55.2px;
	--lh47:56.4px;
	--lh48:57.6px;
	--lh49:58.8px;
	--lh50:60px;

	--lh53:63.6px;
	--lh60:72px;
	--lh80:96px;
}

body.font130plus.font130{ 
   /* only iOS font130. Android automatically resizes to device setting. 
   JS adds class font130plus fro Android 
   For iOS, when html/py includes class font130, must also give it font130plus
   /*

	/*
	For the eight Android (Samusung Galaxy) font size settings:
		3rd default
		4: x1.1
		5  x1.3 (called 130 for 130%)
		6 x 1.5
		7	x 1.7
		8 x 2
	*/

	--f10:13px;
	--f11:14.3px;
	--f12:15.6px;
	--f13:16.9px;
	--f13d5:17.55px;
	--f14:18.2px;
	--f15:19.5px;
	--f16:20.8px;
	--f16d5:21.45px;
	--f17:22.1px;
	--f18:23.4px;
	--f19:24.7px;
	--f20:26px;
	--f21:27.3px;
	--f22:28.6px;
	--f23:29.9px;
	--f24:31.2px;
	--f25:32.5px;
	--f26:33.8px;
	--f27:35.1px;
	--f28:36.4px;
	--f29:37.7px;
	--f30:39px;
	
	--f32:41.6px;
	--f40:52px;

	--lh2:2.86px;
	--lh10:13px;
	--lh11:14.3px;
	--lh12:15.6px;
	--lh13:16.9px;
	--lh14:18.2px;
	--lh15:19.5px;
	--lh16:20.8px;
	--lh17:22.1px;
	--lh18:23.4px;
	--lh19:24.7px;
	--lh20:26px;
	--lh21:27.3px;
	--lh22:28.6px;
	--lh23:29.9px;
	--lh24:31.2px;
	--lh24d6:32.98px;
	--lh24d65:32.04px;
	--lh25:32.5px;
	--lh26:33.8px;
	--lh27:35.1px;
	--lh28:36.4px;
	--lh29:37.7px;
	--lh30:39px;
	--lh31:40.3px;
	--lh32:41.6px;
	--lh32d8:42.64px;
	--lh33:42.9px;
	--lh34:44.2px;
	--lh35:45.5px;
	--lh36:46.8px;
	--lh37:48.1px;
	--lh38:49.4px;
	--lh39:50.7px;
	--lh40:52px;
	--lh41:53.3px;
	--lh42:54.6px;
	--lh43:55.9px;
	--lh44:57.2px;
	--lh45:58.5px;
	--lh46:59.8px;
	--lh47:61.1px;
	--lh48:62.4px;
	--lh49:63.7px;
	--lh50:65px;

	--lh53:68.9px;
	--lh60:78px;
	--lh80:104px;
}

body.font130plus.font150plus.font150{ 

   /* only iOS font150. Android automatically resizes to device setting. 
   JS adds class font130plus and font150plus for Android 
   For iOS, when html/py includes class font150, must also give it font130plus and font150plus
   */
 
	--f10:15px;
	--f11:16.5px;
	--f12:18px;
	--f13:19.5px;
	--f13d5:20.25px;
	--f14:21px;
	--f15:22.5px;
	--f16:24px;
	--f16d5:24.75px;
	--f17:25.5px;
	--f18:27px;
	--f19:28.5px;
	--f20:30px;
	--f21:31.5px;
	--f22:33px;
	--f23:34.5px;
	--f24:36px;
	--f25:37.5px;
	--f26:39px;
	--f27:40.5px;
	--f28:42px;
	--f29:43.5px;
	--f30:45px;
	
	--f32:48px;
	--f40:60px;

	--lh2:3px;
	--lh10:15px;
	--lh11:16.5px;
	--lh12:18px;
	--lh13:19.5px;
	--lh14:21px;
	--lh15:22.5px;
	--lh16:24px;
	--lh17:25.5px;
	--lh18:27px;
	--lh19:28.5px;
	--lh20:30px;
	--lh21:31.5px;
	--lh22:33px;
	--lh23:34.5px;
	--lh24:36px;
	--lh24d6:36.9px;
	--lh24d65:37px;
	--lh25:37.5px;
	--lh26:39px;
	--lh27:40.5px;
	--lh28:42px;
	--lh29:43.5px;
	--lh30:45px;
    --lh31:46.5px;
	--lh32:48px;
	--lh32d8:49.2px;
	--lh33:49.5px;
	--lh34:51px;
	--lh35:52.5px;
	--lh36:54px;
	--lh37:55.5px;
	--lh38:57px;
	--lh39:58.5px;
	--lh40:60px;
	--lh41:61.5px;
	--lh42:63px;
	--lh43:64.5px;
	--lh44:66px;
	--lh45:67.5px;
	--lh46:69px;
	--lh47:70.5px;
	--lh48:72px;
	--lh49:73.5px;
	--lh50:75px;

	--lh53:79.5px;
	--lh60:90px;
	--lh80:120px;
}

.f14{
	/* lazy, so I could use it in html */
	font-size:var(--f14);
}

body {
    color: black; 
     -webkit-tap-highlight-color:transparent;
     font-family: 'open sans', verdana, arial;
    /* text selection turned where relevant (recipe text, shopping list )*/
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body#small{
    margin:0;
    padding:0;
}

body #mob,
body #not_mob{
	/* font-size wasn't properly inherited from body with custom property  */
	font-size:var(--f15);
    line-height:var(--lh23);
}

body#small #mob,
body#small #not_mob{
	/* font-size wasn't properly inherited from body with custom property  */
	font-size:var(--f17);
    line-height:var(--lh24d6);
}

img{
    
border:none;
}

.viewport_no_horizontal_scroll{
   overflow: hidden;  /* when sidebar menu is showing in small. Menu scrolls in its own element */
}

input{font-size:var(--f14);}
textarea{font-size:var(--f14);}

#small input{font-size:var(--f16);}
#small textarea{font-size:var(--f17);}

 input[type="search"]::-webkit-search-cancel-button{
     display: none; 
 }
 
/* CSS for textarea that auto-rezies its height with input. Also needs JS*/
.expanding_area {
  position: relative;
  background: white;
  border: solid 2px lightgray;
  border-radius: 2px;
}

.expanding_area.focus,
.expanding_area:hover{
  border-color: #b3c1f7;
}

.expanding_area textarea,
.expanding_area pre {
 /* first reset */
 margin: 0;
  padding: 0;
  outline: 0;
  border: 0;

  box-sizing: border-box;
  white-space: pre-wrap;
  word-wrap: break-word;
  background: transparent;
  
  /* width, padding, line-height, font, font-size must be the same for textarea and pre */
  /* Oerwritten further down */
  width:100%;
  padding: 2px;
  font-family: 'open sans';
}

#not_small #mob .expanding_area textarea,
#not_small #mob .expanding_area pre {
  font-size:var(--f14);
  line-height:var(--lh26); 
}

#not_small #not_mob .expanding_area textarea,
#not_small #not_mob .expanding_area pre {
  font-size:var(--f15);
  line-height:var(--lh26); 
}

#small .expanding_area textarea,
#small .expanding_area pre {
  font-size:var(--f17);
  line-height:var(--lh26); 
}

.expanding_area textarea {
  width: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  resize: none;
}

.expanding_area pre {
  display: block;
  visibility: hidden;
}

.expanding_area span::after{
  content: attr(ta_repl); /* explained in js resize_expanding_ta()  */
}

#not_small .not_small_popup_menu{
    background: white;
    position: fixed;
    top: 50px;
    left: 30%;
    min-height: 100px;
    margin-left: -3px;
    padding-bottom: 15px;
    text-align:left;
    z-index:950;
    box-shadow:2px 2px 10px black
}

#small .small_fullscreen_popup_menu{
     box-sizing:border-box;
    overflow:hidden;
    overflow-y: scroll;
    z-index:950;
    background:white;
    position: fixed;
    padding-bottom:44px; /* required for app because toggle-buttons hide the bottom. must match scroll_menu_inner */
    height:100%;
    width:100%;      
    top:0;
    left:0; 
}

#small .small_fullscreen_popup_menu table{
    border-collapse: collapse;
    width:100%;
}

/*  #small .small_fullscreen_popup_menu#mp_more_options_menu*/

#not_small .not_small_popup_menu .not_small_menu_scroll{
    height:100%;
    overflow-y:auto;
    overflow-x:hidden;
	overscroll-behavior-block: contain;
}

#small .small_fullscreen_popup_menu .menu_top{
	padding:15px 15px 0 15px;
	margin-top:44px; /* height of fixed menu header */
}

#small .small_fullscreen_popup_menu .not_small_menu_scroll{
    padding:15px 15px 15px 15px;
}

#not_small .not_small_popup_menu.dropdown{
	/* for not small appears as a drop-down on the page, not a menu that opens in middle of page */
	padding-bottom:0;
	box-shadow: none;
	 position: absolute;
	 border: 1px solid gray;
	 left:0;
	 top:0;
	 z-index:10;
	 background:white;
	 box-sizing: border-box;
	 font-weight: bold;
	 text-align: left;
	 padding-bottom:0;
	 box-shadow:none;
}

#not_small .not_small_popup_menu.dropdown .not_small_menu_scroll{
	padding: 15px 10px 15px 10px;
}

#not_small .not_small_popup_menu.dropdown .menu_header{
	display:none;
}

#small .small_fullscreen_popup_menu.dropdown .not_small_menu_scroll{
	/* small is full size menu, even if called dropdown, but make less padding */
	padding: 4px 10px 15px 10px;
}

#small #mp_more_options_menu.small_fullscreen_popup_menu .menu_top{
	padding:15px 5px 0 5px;
	margin-top:44px; /* height of fixed menu header */
}

#small #mp_more_options_menu.small_fullscreen_popup_menu .not_small_menu_scroll{
    padding:15px 5px 15px 5px;
}

#not_small .not_small_popup_menu .menu_top{
	padding:15px 20px 0 20px;
}

#not_small .not_small_popup_menu .not_small_menu_scroll{
    padding:15px 20px 15px 20px;
}

#not_small .not_small_popup_menu:not(.menu_add_recipe_to_sl) input[type=text]{
    line-height:var(--lh27);
    padding: 2px 2px;
    border: solid gray 1px;
    border-radius: 2px;
}

#small .not_small_popup_menu:not(.menu_add_recipe_to_sl) input[type=text]{
    line-height:var(--lh38);
    padding: 0 2px;
    border: solid gray 1px;
    border-radius: 2px;
}

.menu_header{
	width:100%;
	background:#CC0C47; /* if change, also change menu_action_wrapper*/
	color:white;
	font-size:var(--f19);
	text-align:left;
    box-sizing:border-box;
    line-height:var(--lh44);
    height:44px;
    overflow: hidden;
}

#small .small_fullscreen_popup_menu .menu_header:not(.not_fixed){
	position:fixed;
	top:0;
	left:0;
	z-index:1; /* sortable sl categories goes on top if don't specify z-index */
}

.menu_label{
    display: inline-block;
    float: left;
    margin-top: 2px;
    height: 40px;
    line-height:0;
    padding: 20px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
    padding-left: 10px;
	max-width:220px;
}

.menu_header.clear{
	background:white;
	color:black;
}

.menu_header.transparent{
	background:transparent;
}

#small .menu_label{
	max-width:260px;
}

@media screen and (min-width : 360px){
   #small .menu_label{
		max-width:290px;
	}
}

@media screen and (min-width : 375px){
   #small .menu_label{
		max-width:305px;
	}
}

.menu_nonheader_submit_button
/*  can grow in height */
{
    border-radius: 3px;
	display: inline-block;
	min-width:150px;
    border: 2px gray solid;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
	font-size:var(--f15);
	min-height: 22px; /* will be this + padding */
    line-height:var(--lh20);
    padding: 10px 10px;	
	overflow: hidden;
    word-wrap: break-word;
}

.menu_nonheader_submit_button.disabled
 {
	color:darkgray;
	cursor: default;
}

#not_mob .menu_nonheader_submit_button:not(.disabled):hover
{
	border-color:black;
}

.menu_nonheader_submit_button.clicked
 {
	background:aliceblue;
}
    

#xnot_small #not_mob .menu_with_mp_quickview .mp_suggestions #submit_mp_suggestions
{
	margin:0px 25px 10px 25px;
}

@media only screen and (min-width : 680px)  {
	#xnot_small .menu_with_mp_quickview .mp_suggestions #submit_mp_suggestions
	{
		margin:0px 25px 10px 25px;
	}
}



.menu_close_x{
	display: inline-block;
    width: 50px;
    float: right;
    cursor: pointer;
    text-align: center;
    margin-top: 2px;
    height: 40px;
    line-height:0;
    padding: 20px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

.menu_done_button
{
    padding: 9px 10px;
    line-height: var(--lh22);
    border: 1px gray solid;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
	margin:10px 0 15px 5px;
    word-wrap: break-word;
    box-sizing: border-box;
	
	display:block;
	float:left;
}

#not_small .menu_done_button
{
    min-width: 110px;
}

#small .menu_done_button
{
	min-width: 110px;
    max-width:250px;
}

#not_mob .menu_done_button:not(.inactive):hover
{
    background:cornsilk;
}

.menu_done_button.inactive
{
  cursor:default;
  color:gray;
}  

.menu_done_button.clicked
{
  background:lightgray;
}   

.menu_action_wrapper{
	float:right;
	position:absolute; /* prevent header label from pushing it off, even if get too big due to large font */
	top:0;
	right:0;
	/* padding and background prevent menu label from touching button */
    padding-left: 5px;
    background: #CC0C47; /* same as menu_header */
}

.menu_action{
    text-align: center;
    font-size:var(--f16);
    font-weight: bold;
    cursor: pointer;
    float: left;
    margin-top: 2px;
    height: 40px;
    line-height:0;
    padding: 20px 5px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
	 color: white;
	 background: transparent;
	 min-width: 80px;
	 max-width:90px;
	 margin-right: 10px;
}

.menu_action.cancel{
	/** replace margin with extra padding so extends all the way */
	margin-right: 0;
    padding-right: 15px;
	max-width:100px;
}

@media screen and (min-width : 360px){
   .menu_action{
		max-width:100px;
	}
	.menu_action.cancel{
		max-width:110px;
	}
}

#shopping_list #master_copyto_edit_menu .menu_action.save,
.menu_add_recipe_to_sl .menu_action.save
{
	max-width:180px; /* longer text copy to list, and only other button is cancel */
}

.menu_action.cancel.xlook{
	width: 50px;
    min-width: 50px;
    font-size: var(--f19);
    font-weight: normal;
    padding-right: 0;
    padding-left: 0;
}

.menu_action.ok,
.menu_action.save
{
	margin-right:12px;
}

.menu_action.save {
    background: white;
    border-radius: 3px;
    color: #505050;
}

.menu_action.save.disabled {
	/* not class=hidden because want voiceover to say it's a disabled button */
    background: transparent;
    color: transparent;
}


.menu_action.save.attention {
    background:yellow;
}

.menu_action.save.clicked,
.menu_action.delete.clicked
 {
    background: aliceblue;
    color: #777777;
}

#not_small #not_mob .not_small_menu_scroll::-webkit-scrollbar{
	width: 12px;
}

#not_small #not_mob .not_small_menu_scroll::-webkit-scrollbar-track{
	background: #f1f1f1; 
}

#not_small #not_mob .not_small_menu_scroll::-webkit-scrollbar-thumb{
	background:  #b7b7b7; 
}

#not_small #not_mob .not_small_menu_scroll::-webkit-scrollbar-thumb:hover{
	background: #949393; 
}

body .cb_div{
	--h22:22px;
}

body.font110plus .cb_div:not(.fixedheight){ 
   /* also Android because height isn't automatically made bigger */
	--h22:24.2px;
}

body.font120plus .cb_div:not(.fixedheight){ 
   /* also Android because height isn't automatically made bigger */
	--h22:26.4px;
}

body.font130plus.cb_div:not(.fixedheight){ 
   /* also Android because height isn't automatically made bigger */
	--h22:28.6px;
}

body.font150plus .cb_div:not(.fixedheight){ 
   /* also Android because height isn't automatically made bigger */
	--h22:33px;
}

body .cb_div{ 
	--h24:24px;
}

body.font110plus.cb_div:not(.fixedheight){ 
   /* also Android because height isn't automatically made bigger */
	--h24:26.4px;
}

body.font120plus .cb_div:not(.fixedheight){ 
   /* also Android because height isn't automatically made bigger */
	--h24:28.8px;
}

body.font130plus .cb_div:not(.fixedheight){ 
   /* also Android because height isn't automatically made bigger */
	--h24:31.2px;
}

body.font150plus .cb_div:not(.fixedheight){ 
   /* also Android because height isn't automatically made bigger */
	--h24:36px;
}

.cb_div{
  --cbsize:20px; /* checkbox size */
}

.cb_div.s24{ /* checkbox size */
  --cbsize:24px;
}


.cb_div{
  /* this makes it 34 px tall*/
  /* less bottom because extra is added to text bottom. Allows space if line-height is a bit too small for gjy, etc,*/
  display:table;
  padding:6px 2px 4px 3px;
  cursor:pointer;
}

.cb_div.s24{
  display:table;
  padding:5px 2px 3px 3px;
  cursor:pointer;
}

.cb_div.nocb{
	cursor:default;
}

.cb_div .cb_parent{
  display:table;
  float:left;
  width:var(--cbsize);
  height:var(--h22); /* match text line-height */
}

.cb_div.nocb .cb_parent{
	visibility:hidden;
}

.cb_div.s24 .cb_parent{
  display:table;
  height:var(--h24);
}

.cb_div .c{
    position: relative;
    width: var(--cbsize);
    height: var(--cbsize);
}

.cb_div .cb_cell{
  display:table-cell;
  vertical-align:middle;
}


.cb_div .cb_border,
.cb_div .cb_check
{
	position: absolute;
	top: 0px;
    left: 0px;
    box-sizing: border-box;
    background: white;
    border: 2px solid #cfcfcf;
    border-radius: 1px;
    height: var(--cbsize);
    width: var(--cbsize);
}
	
.cb_div.hover .cb_border,
.cb_div.hover .cb_check
{
	border-color: #848282; /* checkbox border color hover*/
}

.cb_div .cb_check
{
     background-image: url(https://cdn.copymethat.com/static/checkbox_36_checked_transparent.png) !important; 
     background-position: center center !important;
     background-size: cover!important;
}
  
.cb_div.selected .cb_check{
    background: #7eb348; /* color of checkmark */
 } 
 
.cb_div.selected.cmtredcheck .cb_check
{
    background: #CC0C47; /* color of checkmark */
}

.cb_div.selected.blackcheck .cb_check,
.cb_div.checked.blackcheck .cb_check,
.cb_div.all_checked.blackcheck .cb_check,
.cb_div.has_all.blackcheck .cb_check
 {
      background: #292929; /* color of checkmark */
}
 
.cb_div.selected .cb_check,
.cb_div.checked .cb_check,
.cb_div.all_checked .cb_check,
.cb_div.has_all .cb_check
{
     background-image: url(https://cdn.copymethat.com/static/checkbox_36_checked_transparent.png) !important; 
     background-position: center center !important;
     background-size: cover!important;
  }
  
.cb_div.some_checked .cb_check,
.cb_div.has_some .cb_check
{
        background: #292929; /* color of line */
      /* image also preloaded in html */
       background-image: url(https://cdn.copymethat.com/static/checkbox_36_indeterminate_transparent.png?v-2) !important;
     background-position: center center !important;
     background-size: cover !important;
}

.cb_div .cb_text{
  display:table-cell;
  vertical-align:middle;
  line-height:var(--lh22);
  padding:0 0 2px 6px;
}

.cb_div.fixedheight .cb_text{
    padding:11px 0 13px 6px;
    line-height:0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow:hidden;
    /* must give it width or max-width */
}

.cb_div.oneline .cb_text{
	   display: -webkit-box;
    -webkit-line-clamp: 1; /* how many lines to allow. shows ellipsis */
    -webkit-box-orient: vertical;
    overflow: hidden;
	word-break: break-all;
}

.cb_div.s24 .cb_text{
    line-height:var(--lh24);
}

.cb_div.fixedheight.s24 .cb_text{
    line-height:0;
	padding:12px 0 14px 6px;
}

.cb_div.maxline3 .cb_text{
	 display: -webkit-box;
    -webkit-line-clamp: 3; /* how many lines to allow. shows ellipsis */
    -webkit-box-orient: vertical;
    overflow: hidden;
	word-break: break-word;
	/* not sure this is OK to use on all browsers! 
	and haven't found way to turn off ellipsis if overflow
	*/
	/* can also use max-height. Then need to consider fontplus sizes */
}

/* The checkbox container */
.cb_container {
  display: block;
  position: relative;
  padding-left: 35px; /* shift label text past the box to the right */
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#recipe_u .cb_container{
      margin-top: 4px;
}

#mealplan .mp_more_option_showimage .cb_container {
   padding-left:24px; /* shift text over */
}

#mealplan #copy_move_div .cb_container, 
#mealplan #showimage_div .cb_container {
   width: 60px; /* prevent contents overflowing if device font is bigger */
   overflow: hidden;
   white-space: nowrap;   
   height:0px;
   padding:17px 0;
}

#mealplan #showimage_div .cb_container {
   padding-left:20px; /* shift text over */
}

/* Hide the browser's default checkbox */
.cb_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.cb_container .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px; 
  width: 18px;
  background-color: white;
  border:1px solid lightgray;
}

.cb_container.smaller .checkmark {
  height: 14px;
  width: 14px;
}

.questioncircle{
    cursor: pointer;
    display: inline-block;
    line-height: 0;
    background: gray;
    border-radius: 18px;
    text-align: center;
    color: white;
	width:var(--lh20);
	padding:var(--lh10) 0;
}

.tags_menu .questioncircle{
	overflow: hidden;
	border: 1px solid #cfcfcf;
    background: white;
    color: gray;
}

#mealplan #showimage_div .cb_container .checkmark{
   top:9px;
   margin-left:2px;
}

#mealplan .mp_more_option_showimage .cb_container .checkmark{
   top:11px;
   margin-left:2px;
}

/* When the checkbox is checked, add a colored background */
.cb_container input:checked ~ .checkmark {
  background-color: #8e9396;
}

/* On mouse-over, add indicator */
#not_mob .cb_container:hover input ~ .checkmark {
 border:1px solid black;
}

/* Create the checkmark/indicator (hidden when not checked) */
.cb_container .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.cb_container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.cb_container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border:  solid white; /* color of checkmark */
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.cb_container.smaller .checkmark:after {
  left: 4px;
  top: 0px;
  width: 5px;
  height: 9px;
  border-width: 0 2px 2px 0;
}


/* Create a custom checkbox. Version without input element*/

#recipe_u .cb_cont {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
	height: 22px;
	margin-top:4px;
}

#recipe_u .cb_cont .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 19px;
  width: 18px;
  border:1px solid #5e6163;
  border-radius: 2px;
}

#small.font120plus #recipe_u .cb_cont .checkmark {
  top: 2px;
}

#small.font130plus #recipe_u .cb_cont .checkmark {
  top: 4px;
}

#small.font150plus #recipe_u .cb_cont .checkmark {
  top: 6px;
}

/* checked, is default */
#recipe_u .cb_cont .checkmark
{
  background-color: #8e9396;
}

/* unchecked */
#recipe_u .not_ingred .cb_cont .checkmark,
#recipe_u .not_step .cb_cont .checkmark,
#recipe_u .not_note .cb_cont .checkmark
{
  background-color: white;
}

/* On mouse-over, add indicator */
#not_mob #recipe_u .cb_cont:hover .checkmark {
 border:1px black solid;
   box-shadow:#999999 0px 1px 2px;
}

/* Style the checkmark/indicator */
#recipe_u .cb_cont .checkmark .tick{
 position:absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border:  solid white; /* color of checkmark */
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* The radio button container */
.radio_container {
  display: inline-block;
    float: left;
    position: relative;
    padding: 17px 0px 17px 20px;
        line-height:0;
     white-space: nowrap;
    word-wrap:break-word;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */
.radio_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.radio_container .checkmark{
  position: absolute;
  top: 0;
  left: 0;
  height: 15px;
  width: 15px;
  background-color: white;
  border-radius: 50%;
  border:1px solid #8e9396;
}

#not_small #mealplan .radio_container{
    margin: 0 4px 0 4px;
}

#small #mealplan .radio_container{
    margin: 0 2px 0 2px;
}

#small #mealplan #copy_move_div .radio_container{
    margin: 0; 
	padding:17px 3px 17px 3px;
	float:none;
}

#small #mealplan #copy_move_div .radio_container:has(input[type="radio"]:checked){
    text-decoration:underline;
}

#not_small #mealplan .radio_container .checkmark {
    top: 8px;
}

#small #mealplan .radio_container .checkmark {
    top: 9px;
}

#small #mealplan #copy_move_div .radio_container .checkmark{
    display:none;
}

#small #mealplan #copy_move_div .radio_container input{
    height:1px;
	width:1px;
}

/* On mouse-over, add indicator */
#not_mob .radio_container:hover input ~ .checkmark {
  border:1px solid black;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radio_container .checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio_container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.radio_container .checkmark:after {
 	top: 3px;
	left: 3px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #8e9396;
}

input[type="search"], input[type="text"], input[type="submit"]{
    -webkit-appearance: none;
    border-radius: 0; 
    -webkit-border-radius:0;
}

html.nopagescroll, body.nopagescroll{
    /* added in meal_plan js mobile */
    height:100%;
    overflow:hidden;
}

html.nopage_y_scroll, body.nopage_y_scroll{
    /* added in meal_plan js non mobile */
    height:100%;
    overflow-y:hidden;
    overflow-x:auto; 
}

.selectable {
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.textcopy_div.withcss .trigger_textcopy{
    height:40px;
    line-height:var(--lh40);
    width:150px;
    border:1px gray solid;
    border-radius:4px;
    text-align:center;
    margin-top:5px;
    cursor:pointer;
}
.textcopy_div.withcss .textcopy_inner_div{
    position:relative;height:30px;margin-top:5px;
}
.textcopy_div .textcopy_input{
     display:none;
}
.textcopy_div.withcss .textcopy_input{
	/* not sure why this isn't  just display:none? 
	probably old commandExec required that input textbox be visible */
    height:10px;width:10px;color:white;display:inline-block;
}
 .textcopy_div.withcss .copytext_success,  
 .textcopy_div.withcss .copytext_intitial{
    position:absolute;height:100%;width:100%;top:0;left:0;line-height:var(--lh30);color:#CC003F;
}
 .textcopy_div.withcss .spacer{
    position:absolute;height:100%;width:100%;background:white;top:0;left:0;
}


body, #recipes, #recipes_shared, #recipe, #recipe_u{
    background:#eef2f4;
}

@media screen and (min-width : 1025px){
   body#not_small{margin:0px;padding: 0px 0px;}
}

@media screen  and (max-width : 1024px){
   body#not_small{margin:0px;padding: 0px 0px;min-width:100%;}
}

/* use mobile (instead of using max-width) to prevent font suddenly changing on laptop as screen becomes smaller */
#not_small #mob #info, #not_small #mob #button_mobile{
    font-size:var(--f17);
    line-height:var(--lh24d6);
}

.tap_opacity{ /* added/removed by js when tap to divs with js_button_opacity */
    opacity: 0.6;
}

.hover_opacity{ /* added/removed by js on hover to divs with js_button_opacity */
    opacity: 0.9;
}

#header_navis_wrapper{
    margin:0 0px;
    position: relative;
	height:50px;
	background:#A80739;
   width:100%;
   min-width:580px;
}



@media screen and (min-width : 1025px){
   #header_navis{
     width:980px; margin:0 auto;
    }
}

@media screen and (max-width : 1024px){
   #header_navis{
        width:100%;
    }
}

@media screen and (max-width : 1365px){
   #not_small #mob #header_navis{
     width:100%;
    }
}

@media screen and (min-width : 1366px){
   #not_small #mob #header_navis{
     width:1266px; margin:0 auto;
    }
}

.header_navi_not_logged_in{
    cursor: pointer;
	height:50px;
	line-height:var(--lh50);
	padding:0px;
    font-family: arial;
    width:580px;
    margin:0 auto;
        text-align: center;
}

.header_navi_not_logged_in:hover{
    background:#CC003F;
}


.header_navi_not_logged_in_a{
   display:block;
   color:white;
   text-decoration:none;
   font-size:var(--f16);
   font-weight:bold;
   margin:0px 5px;
}

.header_navi{
    float: left;
    cursor: pointer;
	height:1px; /* small necessary to prevent "new recipe" from falling down on narrow screen when "more" menu opens. */
	padding:0px;
    font-family: arial;
	height:50px;
	 margin: 0px 5px;
	 font-size: var(--f14);
    font-weight: bold;
}

.header_navi_first{
	margin-left:8px;
	}

.header_navi_a{
    display: block;
    color: white;
    text-decoration: none;
    line-height: 0;
    padding: 25px 14px;
}

@media only screen and (max-width : 767px) 
{ 
    #not_small.font110plus #mob .header_navi{
		 font-size: var(--f13);
	}
	 #not_small.font120plus #mob .header_navi{
		 font-size: var(--f12);
	}
	 #not_small.font130plus #mob .header_navi{
		 font-size: var(--f11);
	}
    #not_small.font150plus #mob .header_navi{
		 font-size: var(--f10);
	}
}

 #not_small #mob .header_navi_a{
	 /* make it less sensitive (smaller) to touch. 
	    was too close to back button on recipe (and others)  */
	 /* links tend to take touch precedence over js click */
	 padding-top:10px;
	 padding-bottom:10px;
	 margin-top:18px;
}

@media only screen and (max-width : 767px)
{ 
   .header_navi_a{
        padding-left:10px;
		padding-right:10px;
   }
    #not_small #mob .header_navi_a{
		padding-left:10px;
		padding-right:10px;
	}
}

#not_small.font150plus #mob .header_navi_a{
	padding-left:5px;
	padding-right:5px;
}

.header_navi_chosen, 
#not_mob .header_navi:hover {  
	background: #CC0C47;
-webkit-transition: background 100ms ease-out;
-moz-transition: background 100ms ease-out;
-ms-transition: background 100ms ease-out;
-o-transition: background 100ms ease-out;
transition: background 100ms ease-out;
 }

.header_navi_right{float:right;margin-right:13px;}

#submenu_wrapper_more{
  border: 1px solid gray;
    margin:0;
    padding:2px 3px 5px 3px;
	background:white;
	position:relative;
	z-index:100;
	position:absolute;
	top:50px;
}
.submenu_option{
    list-style:none;
    padding:0px;
}
.submenu_option_first{
    border-top:solid white 2px;
}
.submenu_option li{
    list-style:none;
    padding:0px;
    background:white;
    text-align:left;
    overflow:hidden;
}

.submenu_option_a{
    list-style:none;
	color:rgb(79, 79, 79);
	font-weight:bold;
    text-decoration:none;
    display: block;
    width:100%;
   background:white;
    height: 42px;
    line-height:var(--lh42);
	border-bottom: 1px gray solid;
    font-size:var(--f14);
    font-family: arial;
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    font-size:var(--f14);
}

.submenu_option_a_chosen, .submenu_option a:hover{
   color:#CC003F;
}
.submenu_option a:hover{
   background:lightgray;
}

#small .navi_back_button{
    margin-top:7px;
    margin-right:10px;
    margin-left:3px;
    height:28px;
    padding:14px 0;
    line-height:0;
    display:inline-block;
    float:left;
    background:white;
    font-size:var(--f14);
    width:110px;
    background:#F2F2F2;
    text-align:center;
    box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
}

#small .navi_back_symbol {
  font-size:var(--f28);
  vertical-align: middle;
  position: relative;
  margin-top: -9px;
  display: inline-block;
}

 #small .more_navi_label{  display: table-cell;
        vertical-align: middle;height:32px;cursor:pointer;}

.more_navi_option_wrapper {padding-top:3px;overflow:hidden;clear:both;}

#small #small_main_navi{
    background: white;
    height:44px; 
    /* overflow:hidden hides share menu */
}


#not_small #recipes #content_top, 
#not_small #recipes_shared #content_top{
    margin-top:10px;
}

#outer, #recipes #results_set, #recipes_shared #results_set, #recipes #content_top, #recipes_shared #content_top{
    position:relative;  
    margin-left:auto; 
    margin-right:auto; 
    text-align:left;  
}

#mealplan #outer{
    position:static;  
}

#recipes #results_set, #recipes_shared #results_set, #recipes #content_top, #recipes_shared #content_top{
    text-align:center;/* centers recipes */
}

@media screen and (min-width : 1000px){
   #outer, #recipes #content_top, 
   #recipes_shared #content_top{
        width:980px;
    }
}

@media screen and (min-width : 1366px){
   #not_small #mob #outer, 
   #not_small #mob  #recipes #content_top, 
   #not_small #mob #recipes_shared #content_top{
        width:1266px;
    }
}

#recipe_u #outer{
  max-width:940px;
}

#recipe #outer{
  max-width:940px;
}

@media screen and (max-width : 1000px){
   #outer, #recipes #results_set, #recipes_shared #results_set, #recipes #content_top, #recipes_shared #content_top{
         width:100%;
    }
   #not_small #outer, #not_small #recipes #results_set, #not_small #recipes_shared #results_set, #not_small #recipes #content_top, #not_small #recipes_shared #content_top{
         min-width:580px;
    }
}

@media screen and (max-width : 1000px){
   #recipes #outer.mp_quickview #results_set{
         min-width:300px;  /* not used. was to be for split my recipes view */
    }
}

#small #outer{
    width:100%;
    overflow:hidden;
    box-sizing:border-box;
}

#small #profile #small_main_navi,
#small #button_mobile #small_main_navi,
#small #info #small_main_navi,
#small #tag_mgmt #small_main_navi,
#small #premium #small_main_navi,
#small #download #small_main_navi
{
    position:fixed;
	z-index:2;
	top:0;
	width:100%;
}

#small #profile #outer,
#small #button_mobile #outer,
#small #info #outer,
#small #tag_mgmt #outer,
#small #premium #outer,
#small #download #outer
{
    margin-top:44px; /* match height of small_main_navi */
}

#s_side_menu{
    width:250px; /* must match left_for_side_menu  */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index:300; /* Necessary because of #small #mealplan #navi issue. Also to sit on top of small_navi_menu_overlay */
}

@media screen and (min-width : 360px){  
   #s_side_menu{
	  width:280px;
	}
}

@media screen and (min-width : 375px){  
	#s_side_menu {
	  width:295px;
	}
}

@media screen and (min-width : 411px){  
   #s_side_menu {
	  width:330px;
	}
}

#s_side_menu_inner{
    overflow-y:scroll;
    height:100%;
}

#s_side_menu .button_href{
    text-decoration:none;
}

.s_side_menu_login_signup_button{
    height: 32px;
    line-height:var(--lh32);
    margin-top:6px;
    width:180px;
    margin-left:14px;
    background:#CC0C47;
    border-radius:3px;
    text-align:center;
    border:solid #C1C1C1 1px;
}

.s_side_menu_button{
    border-top:#881539 solid 1px;
    line-height:var(--lh44);
    vertical-align:middle;
    padding-left:4px;
    background: #A80739;
    color: white;
    font-size:var(--f17);
    padding: 12px 0 12px 20px;
    line-height:var(--lh20);
}

.s_side_menu_button.clicked{
    background:#881539;
}

.s_side_menu_button_main{
    font-weight:bold;
}

.s_side_menu_button_inactive{
    color:#C1C1C1; /* when not logged in */
}

#small #home #outer{
  padding: 4px;
}

.footer{
	color:rgb(82, 82, 82);
    font-size:var(--f15);
    margin-top:27px;
    margin-bottom:45px;
    text-align: center;
}

.footer {
        -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

.footer a{
	color:rgb(82, 82, 82);
    text-decoration:None;
}

.footer a:hover{
    text-decoration:underline;
}

#small .footer{
    margin-bottom:10px;
}


#not_small .home_page_content{
    max-width:980px;
    background:white;
    margin:0 auto;
    text-align:center;
    padding-top:25px;
    padding-bottom:52px;
    width:100%;
}

#small .home_page_content{
    max-width: 980px;
    width: 100%;
    background: white;
    margin: 0 auto;
    text-align: center;
    padding-top: 10px;
    padding-bottom:52px;
}

.content{ 
     position:relative;
     background:  white; 
    min-height:500px; 
    overflow:visible; /* was this so tag serach list could extend down and past?? */
    text-align:left;  
    background: transparent;
    padding-top: 5px;
}

#small .content{  padding:0px 0px 30px 0px;  background: white;}

#content_inner{
    background:white;
    overflow:hidden;
    text-align:left;
    padding: 0 50px 30px 50px;
    min-height:450px;
}

@media screen and (max-width : 600px){  
   #content_inner{
       padding: 0 20px 30px 20px;   
    }
}

#small #content_inner{
   padding:0 10px 30px 10px;
}
 
 #full_page_overlay, #all_overlay, #main_content_overlay, #small_navi_menu_overlay{
    display:none; 
     /* tried to just make it height:0 always, but caused issues on different devices  */
 }
 
 #full_page_overlay.transparent_glass, #full_page_overlay.clear_glass,
 #all_overlay.transparent_glass, #all_overlay.clear_glass,
 #main_content_overlay.transparent_glass, #main_content_overlay.clear_glass,
 #main_content_overlay.thick_transparent_glass{
    display:block;
    /* tried to just make it height:0 always, but caused issues on different devices  */
 }
 
 @media print{
   #full_page_overlay, #all_overlay, #main_content_overlay{
       display:none;
    }
 }
 
 #small #small_navi_menu_overlay.showing{
	 position: absolute;
    background-color: gray;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity:.6; 
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    z-index:299; /* less than s_side_menu */
    display:block;
 }
 
.transparent_glass{
    position: absolute;
    background-color: white;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity:.6; 
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    z-index:900;
    display:block;
 }

 .clear_glass{
    position: absolute;
    background-color: transparent;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    z-index:900;
 }
 
 .thick_transparent_glass{
    position: absolute;
    background-color: #e5e5e5;
    opacity:.8; 
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    z-index:900;
    display:block;
 }
 
.ok_button{float:right;}

.hidden{display:None !important}
.clear{clear:both;}
.no_visibility{visibility:hidden}

.generic_popup.type2{
    text-align:left;
    font-size:var(--f16);
}

@media screen and (min-width : 600px){
   .generic_popup.type2{
        width:380px;
    }
}

.type2_popup_button{
    padding: 9px 5px;
    line-height: var(--lh22);
    border: 1px gray solid;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    display: block;
	margin:15px 30px 0 30px;
    word-wrap: break-word;
    box-sizing: border-box;
}

#not_small .type2_popup_button{
    width: 210px;
	margin:15px 0 0 0;
}

#not_mob .type2_popup_button:hover{
    background:cornsilk;
}

.type2_popup_button.clicked{
  background:lightgray;
}        

#view_in_app_popup{
    position:fixed;
    bottom:0;
    width:100%;
    height:100px;
     background:white;
       box-shadow: 0px 0px 10px #333232;
       z-index: 1000;
    }
    
#not_small #view_in_app_popup{
    height:110px;
}
    
#view_in_app_popup #questionmsg{
    text-align:center;
    margin-top:10px;
    color:black;
    font-size:var(--f17);
    font-weight:bold;
    
}
            
 #not_small #view_in_app_popup #questionmsg{
    margin-top:20px;
}
            
#view_in_app_popup #questionbuttonwrapper{
    margin: 10px auto 0 auto;
    width: 280px;
    xbackground: yellow;
    text-align: center;
    overflow: hidden;
}
            
#view_in_app_popup .questionbutton{
    width: 100px;
    margin: 0 20px 0 20px;
    height: 40px;
    padding:20px 0;
    line-height:0;
    background: #a80739;
    color: white;
    float: left;
    border-radius: 5px;
     white-space: nowrap;
    word-wrap: break-word;
    box-sizing: border-box;
    overflow: hidden;
}
            
#view_in_app_popup .questionbutton.no{
    color: #a80739;
    background: white;
}
            
#view_in_app_popup .questionyesrhref{
    text-decoration:none;
}

#recipe_edit .edit_page_button { 
     background:#464646;
	color:white;
	display: inline-block;
    font-family: arial;
    font-size:var(--f15);
    cursor: pointer;
    margin: 2px 5px 0 5px;
    height: 38px;
    padding: 19px 18px;
	border: 1px gray solid;
    line-height:0;
    border-radius: 5px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

#small #recipe_edit .edit_page_button { 
    height: 40px;
    padding: 20px 10px;
	border:none;
   font-weight: bold;
   min-width:100px;
   text-align:center;
}

#small #recipe_edit .edit_page_button.save,
#not_small #recipe_edit .edit_page_button.save { 
     background:green;
}
  
#not_mob #recipe_edit .edit_page_button:hover{ 
 background:#5c5c5c;
 }
  
 #not_mob #recipe_edit .edit_page_button.save:hover{ 
 background:#03a703;
 }
 
#small #recipe_edit .edit_page_button.button_submitted,
#not_small #recipe_edit .edit_page_button.button_submitted{
	background:#a80739;
}

#small #recipe_edit .edit_page_button.attention,
#not_small #recipe_edit .edit_page_button.attention{
    background:yellow;
	color:#393939;
}

  
.button, .next_prev_button {
  color:#000; 
  font-size:var(--f15);
  padding: 5px 18px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background: white;
    margin:2px 5px;
    cursor:pointer;
    outline: none;
  }

.next_prev_button{
    width:80px;
    display:inline-block;
    text-decoration:none;
    /* element has to be div, not button because is surrounded by a href (IE cant handle a around button)*/
}

#not_mob .next_prev_button:hover{
    background: #a70839;  
    color:#fff;
}

#mob .next_prev_button.clicked{
    background: #a70839;  
    color:#fff;
}


#recipe_u .delete_button_on_confirm, 
#recipe_u .confirm_button {
	float: left;
    color: white;
    font-family: arial;
    font-weight: bold;
    font-size:var(--f15);
    cursor: pointer;
    margin: 2px 5px 0 5px;
    height: 40px;
    padding:20px 18px;
    line-height:0; 
    border-radius: 5px;
    box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
    overflow: hidden;
}
#small #recipe_u .delete_button_on_confirm, 
#small #recipe_u .confirm_button {
	max-width: 110px; /* because grows with device font-size */
}

@media screen and (min-width : 360px){
   #small #recipe_u .delete_button_on_confirm, 
	#small #recipe_u .confirm_button {
		max-width: 120px;
	}
}

#recipe_u .delete_button_on_confirm {
	background:#464646;
}
#recipe_u .delete_button_on_confirm.clicked{
	background:black;
}
#recipe_u .confirm_button {
	background:green;
}
#recipe_u .confirm_button.clicked {
	background:#005b00;
}

#not_mob .button:hover{ background:cornsilk;}
.button:active{background:lightgray;}

#mealplan .nextprev_button_wrapper{
     position:relative;
    overflow:hidden;
    background:white;
    float:left;
    margin-right:3px;
    border:solid 1px rgb(160, 160, 160);
    border-radius: 2px;
   vertical-align:middle;
   text-align:center;
    cursor:pointer;
    width:38px;
    height:36px;
    padding-top: 3px;
    box-sizing:border-box;
    cursor: pointer;
}

#mealplan .nextprev_button_wrapper.clicked{
    background:rgb(126, 126, 126);
}

#mealplan .calendar_action_icon{
    /* uses sprite_ic */
    height: 28px;
    width: 28px;
    margin: 0 auto;
    opacity: .7;
}

#not_small .navi_action_icons{
    height: 44px;
    margin-top: 2px;
    margin-bottom: 2px;
}

#not_small #recipe .back_to_results_button, 
#not_small #recipe_u .back_to_results_button{
    background:#b1b8bc;
    font-family:arial;
    float:left;
    width:170px;
    height:42px;
    padding:21px 0;
    line-height:0;
    font-size:var(--f14);
    font-weight:bold;
    cursor:pointer;
    margin: 1px 3px 0px 3px;
    text-align:center;
    box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
}

@media screen and (max-width : 740px){
   #not_small #recipe .back_to_results_button, 
   #not_small #recipe_u .back_to_results_button{
        width:110px;
    }
}

@media screen and (max-width : 670px){
   #not_small #recipe .back_to_results_button, 
   #not_small #recipe_u .back_to_results_button{
        width:78px;
    }
}

@media screen and (max-width : 599px){
   #not_small #recipe .back_to_results_button, 
   #not_small #recipe_u .back_to_results_button{
        width:74px;
    }
}


#small #recipe_u .back_to_results_button{
    float: left;
    width: 60px;
    padding: 18px 0 22px 0;
    line-height:0;
    text-align: center;
    font-size:var(--f40);
    background: #dedddd;
    margin-right: 10px;
    box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
}


#not_small #recipe .back_to_results_button .back_to_results_chevron_wrapper,
#not_small #recipe_u .back_to_results_button .back_to_results_chevron_wrapper{
    float:left;
    padding:11px 8px 0px 12px;
    margin-top:-20px;
}

@media screen and (max-width : 670px){
   #not_small #recipe .back_to_results_button .back_to_results_chevron_wrapper,
   #not_small #recipe_u .back_to_results_button .back_to_results_chevron_wrapper{
        float:left;
        padding:11px 2px 0px 12px;
    }
}


#small #recipe_u .back_to_results_button.clicked{
    background:#848d8e;
}

#not_small #recipe .back_to_results_button.clicked,
#not_small #recipe_u .back_to_results_button.clicked{
    background:#848d8e;
}

#not_small #recipe .back_to_results_button span,
#not_small #recipe_u .back_to_results_button span{
	color:white;
    text-decoration:none;
}


#not_small #page_header{
	background:white;
	overflow:hidden;
    width:100%;
    min-width:580px;
}

#not_small .page_header_inside{
	width: 980px;
    margin: 0 auto;
}

@media screen and (min-width : 1025px){
   #not_small .page_header_inside{
        width: 980px;
        margin: 0 auto;
    }
}

@media screen and (max-width : 1024px){
   #not_small .page_header_inside{
         width: 100%;
         margin: 0 auto;  
    }
}

@media screen and (min-width : 1366px) {
	/* ipad pro */
   #not_small #mob .page_header_inside{
        width: 1266px;
        margin: 0 auto;
    }
}

#small #page_header{
    /* only used when not logged in */
	background:white;
	overflow:hidden;
    width:100%;
}

#small .page_header_inside{
     width: 100%;
     margin: 0;
}
    
#not_small .site_category_navi_div{
    float:left;
    line-height: 0;
    padding: 22.5px 0;
}

#not_small .site_category_navi{
    font-family:arial;
    font-weight:bold;
    font-size:var(--f15);
    color:rgb(61, 61, 61);
    cursor:pointer;
    display:inline-block;
    margin-right:50px;
}



#not_small.font130plus .site_category_navi{
    font-size:var(--f14);
}

#not_small .site_category_navi:hover{
    color:#CC003F;
}
#not_small .site_category_navi_active{
    color:#CC003F;
}


@media screen and (min-width : 1025px){
   #not_small .site_category_navi_div{
        margin-left:120px;
    }
}

@media screen and (max-width : 1024px){
   #not_small .site_category_navi_div{
        margin-left:40px;
    }
}

@media screen and (min-width : 1366px){
   #not_small #mob .site_category_navi_div{
        margin-left:120px;
    }
}

@media screen and (max-width : 880px){
   .profile_links_trigger .username{
        overflow:hidden;
        max-width:150px;
    }
   #not_small .site_category_navi{
        margin-right:25px;
    }
}

@media screen and (max-width : 675px){
   #not_small .site_category_navi{
        margin-right:15px;
    }
}

@media screen and (max-width : 650px){
   #not_small .site_category_navi_div{
        margin-left:20px;
    }
   .profile_links_trigger .username{
        overflow:hidden;
        max-width:140px;
    }
   #not_small .site_category_navi{
        margin-right:20px;
    }
}

@media screen and (max-width : 630px){
   #not_small .site_category_navi_div{
        margin-left:15px;
    }
   .profile_links_trigger .username{
        overflow:hidden;
        max-width:120px;
    }
   #not_small .site_category_navi{
        margin-right:15px;
    }
}



#not_small .profile_image_header{
    border-radius: 200px;
    width: 31px;
    margin-top: 7px;
    margin-right: 4px;
}
            
#not_small .main_section_navi_link{
    display:inline-block;
	height: 45px;
	line-height:var(--lh45);
	font-size:var(--f18);
	color: black;
	margin-left: 100px;
	cursor:pointer;
	text-decoration:none;
}

#not_small .main_section_navi_link:hover{
	color:rgb(82, 82, 82);
}

.username{float:right; }

#not_small .profile_links_trigger{
    font-size:var(--f11);
    font-weight:bold; 
    float:right;
	height:45px;
	line-height:45px;
	cursor:pointer;
	color:rgb(82, 82, 82);
	margin-right:13px;
}



#not_small .profile_links_trigger:hover{
    color:black;
}

#not_small #profile_options{
    border:1px solid gray;
    position:absolute;
    top:-5px;
    right:3px;
    z-index:10;
    background:white;
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    font-weight:bold;
    padding-bottom:5px;
    text-align:left;
}

#not_small .profile_link{
    display: block;
    text-decoration: none;
    padding-left: 5px;
    width: 136px;
    min-height: 42px;
    line-height:var(--lh42);
    margin: 0px 5px;
    border-bottom: 1px solid gray;
    color: rgb(82, 82, 82);
    cursor: pointer;
    font-size:var(--f14);  
}

#not_small .profile_link:hover{
	background:rgb(230, 230, 230);
}

#small .profile_links{
    padding-right:10px;
    font-size:var(--f13);
    font-weight:normal;
    float:right;
}
 
 .public_recipe_header_links{
    font-family: arial;
    float:right;
    font-weight:bold;
    text-align:right;
    position:absolute;
    top:10px;
    right:10px;
}

.public_recipe_header_link{
}
 
.public_recipe_header_link_view_more{
    color:#920732;
    font-size:var(--f17);
    text-decoration:none;
    cursor:pointer;
    float: right;
 }
 
#small .public_recipe_header_link_view_more{
    font-size:var(--f14);
    margin-top:3px;
}

.public_recipe_header_link_home{
    text-decoration:none;
    cursor:pointer;
    color:#920732;
    font-size:var(--f14);
}

#small .public_recipe_header_links{
   top:5px;right:0;
  margin-right:15px;
}

#small .profile_links{
    font-size:var(--f11);
    font-weight:bold; 
    float:right;
}

#small .profile_links{
    padding-right:10px;
    font-size:var(--f13);
    font-weight:normal;
    float:right;
}



#small #recipes .starred, #recipe_u .star{
    /* old sprite sheet. Only star is still used so renamed to star name. */
    /* is the single star, not the rating star */
   background-image: url('https://cdn.copymethat.com/static/sprite_sheet_yellow_star.png?v=1'); 
}

#small .navi_icon{
   /* only still used for the burger menu icon  (#small menu_navi_icon) */
   background-image: url('https://cdn.copymethat.com/static/sprite_navi_32.png?v=12'); 
  border:0;
  height:32px;
  width:32px;
  cursor:pointer;
    float:left;
  margin:6px 14px; 
  margin-right:20px;
}

#small #menu_navi_icon{ 
/* uses sprite_navi_32.png */
background-position:-480px -0px;
}

#info_link{font-family:"Times New Roman"; font-size:var(--f18);}
 
.page_title{text-align:center;
		   color:rgb(82, 82, 82);
			font-weight:bold;
			font-size:var(--f14);
			margin-bottom:5px;
			margin-top:5px;}

.page_title_small{
    text-align:center;
    background:#920732; 
    color:white;
    font-size:var(--f11);
    font-family:ariel;
    white-space:nowrap;
    word-wrap:break-word;
    overflow:hidden; 
}

#link_to_either_shared_or_mine{text-decoration:underline;color:gray;margin-left:3px;font-size:var(--f11);}
 
.light_input{
    color:#aba9a9;
    font-family:arial;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#aba9a9;
    font-family:open sans, arial;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:#aba9a9;
   opacity:  1;
   font-family:open sans, arial;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:#aba9a9;
   font-family:open sans, arial;
}

input:focus {
    outline: none;
}

 input[type="radio"]:focus-visible {
	 /* when receive focus via tab */
    outline-offset: 2px;
	outline: -webkit-focus-ring-color auto 1px;
}
 

#small #home .content{
    padding-top:10px;
	 background: white;
}


#small #home #login_box{
    right:10px;
   padding:10px 10px 10px 10px;
}


#small #home .tag_line{
    font-size:var(--f26);
    margin-bottom:8px;
}

#small #home .tag_line_small{
    font-size:var(--f13);
    line-height:var(--lh15);
    margin-bottom:8px;
}

#small #home .main_illustration{
    margin-top: 20px;
     margin-bottom:30px;
}

#small #home .main_illustration img{
    width:300px;  
}

#small #home .illustration_div {
    overflow:hidden;
    width:230px;
    margin:0 0 20px 0px;
}

#small #home .smaller_illustration {
    margin-top: 0px;
}


/* #newuser : some are with login section */

#not_app #new_user_box{
    z-index:950;
    background:white;
    position:absolute;
    text-align:center;
    top:110px;
    border: #a1a2a3 solid 1px;
    width:260px;
    padding:32px 40px 32px 40px;
    margin:0 auto;
    left: 50%;
    margin-left: -171px;
}

#small #not_app #new_user_box{
    top: 45px;
    width: 260px;
    padding: 40px 25px 40px 25px;
    margin-left: -156px;
}

@media screen and (max-height:480px) {
   #small #not_app #new_user_box{   
    top: 2px;
    }
}
    
#not_app #new_user_box .content{
    border:None;
    background:transparent;
}

#not_app #new_user_box .or_line {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #9d9d9d; 
    line-height:var(--lh2);
   margin: 20px 0 20px 0; 
} 

#not_app #new_user_box .or_line span { 
    background:#fff; 
    padding:0 10px; 
    color: #9d9d9d;
}

#not_app #new_user_box .label_div{
    text-align:left;
     margin-top:10px;
         overflow: hidden;
}

#not_app #new_user_box #user_agreement_agree_div{
    font-size:var(--f14);
     margin-top:15px;
     text-align:center;
}



#not_app #new_user_box .checkbox_div{
    text-align:left;
}

#not_app #new_user_box .checkbox_div_remember_me{
    text-align:left;
    margin-top:5px;
}


#not_app #new_user_box .label{
    font-family:arial, sans-serif;
    font-size:var(--f12); 
    font-weight:bold;
}

#small #not_app #new_user_box .label{font-size:var(--f15);}

#not_app #new_user_box .description{
    font-weight:normal; 
    font-size:var(--f12); 
    font-style:italic; 
}

#small #not_app #new_user_box .description{
    font-size:var(--f14);}

#not_app #new_user_box .error_msg{color:rgb(255, 0, 163); width:100%;padding:6px 3px 0px 3px;text-align:center;} 
#small #not_app #new_user_box .error_msg{font-size:var(--f17);}



#not_app #user_agreement_show{ text-decoration:underline;cursor:pointer}


#not_app #new_user_box .cancel_button{float:right}


#not_app #user_agreement_wrapper{
    width: 96%;
    position: absolute;
    left: 50%;
    top: 55px;
    margin: 0 0 0 -48%;
    z-index: 1000;
}

#not_small #user_agreement{width:570px; margin:30px auto 0px auto;}

#not_app #user_agreement_wrapper .info{
    display: table;
    margin: auto;
    max-width:750px;
      background:white;
      border: #a1a2a3 solid 1px;
      padding:10px 10px 5px 10px;
}

#not_app #login_box{
    z-index:950;
    background:white;
    position:fixed;
    text-align:center;
    top:110px;
    border: #a1a2a3 solid 1px;
    width:260px;
    padding:32px 40px 53px 40px;
    margin:0 auto;
    left: 50%;
    margin-left: -171px;
}

#small #not_app #login_box{
    top: 45px;
    width: 260px;
    padding: 32px 25px 40px 25px;
    margin-left: -156px;
}

@media screen and (max-height:480px) {
   #small #not_app #login_box{   
    top: 2px;
    }
}

#not_app #login_box #login_button, 
#not_app #new_user_box #signup_button{
    background:#a70839;
    width:260px;
    height:36px;
    line-height:var(--lh36);
    border-bottom:solid 5px #7d062b;
    border-top:solid 5px #a70839;
    text-align:center;
    margin:0 auto;
    color:white;
    font-size:var(--f17);  
    cursor:pointer;
    font-family: arial;
}

#not_app #new_user_box #signup_button:hover, 
#not_app #login_box #login_button:hover {
}

#not_app #login_box #login_button.login_button_clicked, 
#not_app #new_user_box #signup_button_clicked{
}

#not_app #login_box #facebook_login,
#not_app #login_box .apple_loginsignup_button,
#not_app #new_user_box #facebook_signup_button{
    width:220px;
    box-sizing: border-box;
    line-height:0;
    padding: 20px 0;
    border-radius: 5px;
    text-align:center;
    margin:0 auto;
    color:white;
    font-size:var(--f17);  
    cursor:pointer;
    font-family: arial;
    margin:0 auto;  
}

#not_app #login_box #facebook_login,
#not_app #new_user_box #facebook_signup_button{
    background:#1877F2;
    margin:0px auto 20px auto;
}

#not_app #login_box .apple_loginsignup_button{
   background:black;
    margin:-5px auto 20px auto;
}

#not_app #login_box .or_line {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #9d9d9d; 
    line-height:var(--lh2);
   margin: 20px 0 20px 0; 
} 

#not_app #login_box .or_line span { 
    background:#fff; 
    padding:0 10px; 
    color: #9d9d9d;
}

 #not_app #login_box #login_box_x, 
 #not_app #new_user_box #signup_box_x{
    float:right;
    top:3px;
    right:3px;
    color:#a1a2a3;
    font-size:var(--f17);
    font-weight:bold;
    cursor:pointer;
    padding:10px;
}

#user_agreement_wrapper .user_agreement_x{
    float:right;
    top:3px;
    right:3px;
    color:#a1a2a3;
    font-size:var(--f17);
    font-weight:bold;
    cursor:pointer;
    padding:10px;
    background: #dedede;
    border-radius: 3px;
}

#not_app #login_box #login_box_x, 
#not_app #new_user_box #signup_box_x{
    position:absolute;
}

#not_app #login_box #login_box_x:hover, 
#user_agreement_wrapper .user_agreement_x:hover,  
#not_app #new_user_box #signup_box_x:hover{
    color:black
}

#not_app #login_box #login_form{
    margin:0px;
    padding:0px;
}

#not_app #login_box .error_msg{
    text-align:left;
    font-family: verdana;
    color:rgb(255, 0, 163);
    font-size:var(--f12);
    margin-bottom:4px;
}

 #not_app #login_box .pw_show_hide, 
 #not_app #new_user_box .pw_show_hide{
    width: 56px;
    position: absolute;
    height: 36px;
    line-height:var(--lh36);
    right: 0;
    top: 0;
    font-size:var(--f13);
    font-weight: bold;
    color: #9c9999;
    text-align: center;
    cursor:pointer;
}

#not_app #login_box .login_input, 
#not_app #new_user_box .newuser_input{
    width:260px;
    box-sizing:border-box;
    height:36px;
    border:#9d9d9d solid 1px;
    font-size:var(--f16);
    color:#5c5c5c;
    padding:0 5px 0 5px;
    margin:0px;
}

#not_app #login_box .login_input.pw_input, 
#not_app #new_user_box .newuser_input.pw_input{
    padding-right:52px;
}

#not_app #login_box #login_input_username{
    margin-bottom:12px;
}

#not_app #login_box #login_input_password{
    margin-bottom:5px;
}


#not_app #new_user_box input[type=checkbox]{margin-left:0px} 

#not_app #login_box .remember_me, 
#not_app #new_user_box .remember_me{ 
    float:left;
    font-size:var(--f12);
     font-family: verdana;
    color: #5c5c5c;
}

#not_app #login_box .forgot_password{
    margin-top:10px;
}

#not_app #login_box .forgot_password a{
    font-size:var(--f14);
     font-family: verdana;
    color: gray;  
    text-decoration:none;
    cursor:pointer;
}

 #not_app #login_box .forgot_password a:hover{
    text-decoration:underline;
}

 #not_app #login_box .signup_link_heading, 
 #not_app #login_box .signup_link,
 #not_app #new_user_box .login_link_heading, 
 #not_app #new_user_box .login_link{
    color:#5c5c5c;
    font-size:var(--f15);
    line-height:var(--lh20);
    height:20px;
     font-family: verdana;
    float:left;
    margin-top:20px;
    
}

 #not_app #login_box .signup_link , 
 #not_app #new_user_box .login_link{
    margin-left:10px;
}

 #not_app #login_box .signup_link a, 
 #not_app #new_user_box .login_link a{
    color:#a70839;
    cursor:pointer;
    text-decoration:none;
}

 #not_app #login_box .signup_link a:hover, 
 #not_app #new_user_box .login_link a:hover{
    text-decoration:underline;
}

 #not_app #login_box .checkbox_fake{
    margin-left:-4px;
    height: 15px;
    display: inline-block;
    line-height:var(--lh15);
    width:15px;
    background-repeat: no-repeat;
    background-position: 0px 0px;
    font-size:var(--f15);
    vertical-align: middle;
    cursor: pointer;
    background-image: url('https://cdn.copymethat.com/static/page_landing/checkbox.png');
}

#not_app #login_box .checkbox_fake_checked{
    background-position: 0px -15px;
}


#app_home #login_box, #app_home #signup_box{
    background:white;
    text-align:center;
    width:290px;
    box-sizing:border-box;
    padding:1px 5px 7px 5px;
    margin:13px auto;
}

@media only screen and (min-height:667px) {
   #app_home #login_box, #app_home #signup_box{
    margin:50px auto;
   }
}

 #app_home #newuserForm .pw_show_hide,  
 #app_home #login_form .pw_show_hide{
    width: 56px;
    position: absolute;
    height: 40px;
    line-height:var(--lh40);
    right: 0;
    top: 0;
    font-size:var(--f13);
    font-weight: bold;
    color: #9c9999;
    text-align: left;
}

#app_home .error_msg{
    text-align:left;
    font-family: verdana;
    color:rgb(255, 0, 163);
    font-size:var(--f14);
    margin-bottom:8px;
}

#app_home .login_input, #app_home .newuser_input{
    width:268px;
   box-sizing: border-box;
    height:40px;
    border:#9d9d9d solid 1px;
    font-size:var(--f16);
    color:#5c5c5c;
    padding:0 0 0 4px;
    margin:0px auto;
    -webkit-appearance: none;
    border-radius: 0;
    -webkit-border-radius: 0;
}

#app_home #login_input_username, #app_home #email, #app_home #password{
    margin-bottom:12px;
}

#app_home #login_input_password{
    margin-bottom:5px;
}


#app_home .forgot_password{
    text-align:center;
      margin-top:14px;
}

#app_home .forgot_password a{
    font-size:var(--f16);
    font-family: verdana;
    color: #5c5c5c;
    text-decoration:none;
    cursor:pointer;
  
}

#app_home #open_signup_form, #app_home #open_login_form{
    text-align:center; 
    color:black;
    font-size:var(--f17);
    line-height:var(--lh26);
    text-decoration:none;
    margin-top:5px;
}

#app_home #open_login_form{
    margin-top:18px;
    margin-bottom:5px;
}

#app_home #open_signup_form .signupline, #app_home #open_login_form .loginline{
    color:#a70839;
}

#app_home #login_button, 
#app_home .signup_button
{
    background:#a70839;
    width:268px;
   box-sizing: border-box;
    min-height:46px;
    line-height:var(--lh20);
    padding: 8px 0;
    border-bottom:solid 5px #7d062b;
    border-top:solid 5px #a70839;
    text-align:center;
    margin:0 auto;
    color:white;
    font-size:var(--f17);  
    cursor:pointer;
    font-family: arial;
    margin:0 auto;  
}

#app_home .show_app_signuplogin{
	background: #a70839;
	width: 210px;
	height: 0px;
	border-radius: 5px;
	line-height: 0;
	padding: 23px 0;
	text-align: center;
	margin: 0 auto;
	color: white;
	font-size: var(--f15);
	cursor: pointer;
   font-family: arial;
 }

#app_home #login_button{
    margin:10px auto 0px auto;
}

#app_home .fb_login_button,
#app_home .fb_signup_button,
#app_home .apple_loginsignup_button
{
    width:220px;
    box-sizing: border-box;
    line-height:0;
    padding: 20px 0;
    border-radius: 5px;
    text-align:center;
    margin:0 auto;
    color:white;
    font-size:var(--f17);  
    cursor:pointer;
    font-family: arial;
    margin:0 auto;  
}


#app_home .fb_login_button, 
#app_home .fb_signup_button{
    background:#1877F2;
    margin:0px auto 20px auto;
}

#app_home .apple_loginsignup_button
{
    background:black;
    margin:-5px auto 20px auto;
}

#app_home .or_line {
   width: 100%; 
   text-align: center; 
   border-bottom: 1px solid #9d9d9d; 
    line-height:var(--lh2);
   margin: 20px 0 20px 0; 
} 

#app_home .or_line span { 
    background:#fff; 
    padding:0 10px; 
    color: #9d9d9d;
}
#app_home #logo{
    height: 30px;
    width: 130px;
    margin: 12px auto 10px auto;
}


#app_home #user_agreement_show{ 
    font-size:var(--f14);
    margin-bottom: 10px;
    cursor:pointer;
    margin-top:5px;
}

#app_home #user_agreement_wrapper{
    width: 96%;
    position: absolute;
    left: 50%;
    top: 55px;
    margin: 0 0 0 -48%;
    z-index: 1000;
}

#not_small #app_home #user_agreement{width:570px; margin:30px auto 0px auto;}

#app_home #user_agreement_wrapper .info{
    margin: auto;
    max-width:750px;
      background:white;
      border: #a1a2a3 solid 1px;
      padding:10px 10px 5px 10px;
}


  

#info_more .what_label{font-weight:normal;font-size:var(--f15);font-weight:bold;color:darkorange;margin-bottom:10px;}
#info_more .sub_label{text-decoration:none;color:darkorange}
#info_more #top_msg{font-weight:bold;color:red;font-size:var(--f14);}




#info #about_founder_link{position:absolute;bottom:20px;right:30px;cursor:pointer;}
#info #about_founder_link_a{text-decoration:none;font-weight:bold;font-size:var(--f11);color:#47008F;font-style:italic;}
#info #about_founder_link_a:hover{text-decoration:underline;}





#info #content_inner{padding-top:5px;} 
#small #info #info_outer{max-width:600px;}


/* **************** ******************************** */

#not_small #ask_login_popup{
      width:320px;
      text-align:center;
}

#small #ask_login_popup{
      text-align:center;
}


/* ************  profile popup form *************** */


#not_small #profile_popup{
      width:320px;
      text-align:center;
}

#small #profile_popup{
      text-align:center;
}

#profile_popup #submit_button{
    background:#a70839;
    width:240px;
    text-align:center;
    border: 1px #b6b6b6 solid;
    margin:10px auto 0 auto;
    color:white;
    font-size:var(--f15);  
    cursor:pointer;
    z-index:950;
    border-radius:5px;
	
	line-height:0;
    padding: 18px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

#profile_popup #submit_button:hover {
}

#profile_popup #submit_button.clicked{
}

#profile_popup #profile_popup:hover{
    color:black
}

#profile_popup #popup_form{
    margin:0px;
    padding:0px;
}

#profile_popup .error_msg{
    text-align:left;
    color:rgb(255, 0, 163);
    font-size:var(--f14);
    margin-bottom:4px;
    margin-top:14px;
}

#profile_popup .display_name_input, 
#profile_popup .textarea_input{
    width:258px;
    border:#9d9d9d solid 1px;
    font-size:var(--f16);
    color:#5c5c5c;
    padding:0px;
    margin:0px;
    padding-left: 1px;
    resize: none;
    
     height:36px;
}

#profile_popup .textarea_input{
    height:110px;
}



/*********   add_button  */


#button_mobile .step_header{margin-bottom:9px;margin-top:20px}
#button_mobile .step_header_first{margin-bottom:9px;margin-top:10px}
#button_mobile .step_detail{margin-left:18px;}
#button_mobile #bm_script{margin:12px 10px 12px 20px; font-size:var(--f12);word-wrap:break-word;line-height:var(--lh10);}
#button_mobile .how_to_copy_paste_link{text-decoration:underline;cursor:pointer}

#button_mobile table{
 border-collapse: collapse;
 width:100%;
}
#button_mobile .bo_info_header{
    font-weight:bold;
    font-size:var(--f18);
    margin:0 0 10px 0px;
    color:#353535;
}

#not_small #button_mobile .bo_info_header{
    margin:30px 0 10px 0;
}

#small #button_mobile .bo_info_header{
    margin-top:15px;
}

#button_mobile .xheader{
	margin-top:15px;
	margin-bottom:5px;
	color:#A80739;
	font-weight:bold;
	font-size:var(--f18);
}

#button_mobile .bo_cb_col{  
    vertical-align:top;
    text-align:left;
    padding:7px 0;
    color: #444444;
    font-weight: bold;
}

#button_mobile .bo_cb_col_sizer{
     width:22px;
}

#button_mobile .bo_option_col{
    width:99%;
    padding:7px 0;
}


#button_mobile .label_for_radio_option{
    display:block;
	line-height:var(--lh22);
	padding:10px 0;
}

#small #button_mobile #bo_button_header{    
    background: #a80739;
    overflow: hidden;
    padding: 0 5px;
}

#small #button_mobile .bo_button{
    width:135px;
    width:50%;
    height:38px;
    line-height:var(--lh38);
    color:white;  
    text-align:center;
    float:left;
}

#small #button_mobile .bo_button.active{
     background:#CC0C47;
}

#not_small #button_mobile .bo_button{
    width:150px;
    height:38px;
    line-height:var(--lh38);
    color:#a80739;
    font-weight:bold;
  
    text-align:center;
    
  
    float:left;
    margin-right:15px;
}

#not_small #button_mobile .bo_button.active{
     background:#efecec;
}

#add_button_directions, #use_button_directions{
    padding-top: 10px;
    border-top: 1px gray dotted;
    margin-top: 1px;
}

#button_mobile .button_open_in_safari, 
#button_mobile .button_open_in_chrome{
    width: 270px;
    height: 40px;
    background: #cc0c47;
    color: white;
    text-align: center;
    font-weight: bold;
    border-radius: 3px;
    margin-top:10px;
	
	height: 40px;
    line-height:0;
    padding: 20px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

#button_mobile .notsafari_header{
    font-weight:bold;
    color:#cc0c47;
    color:#A80739;
}

#button_mobile .whatscmt_header{
    font-weight:bold;
    margin:15px auto 0 auto;
}
#button_mobile .whatscmt_text{
    margin:15px auto 0 auto;
}
#button_mobile .whatscmt_close{
    width:150px;
    background:white;
    border:1px gray solid;
    border-radius:5px;
    margin:25px auto;
    text-align:center;
    font-weight:bold;
	height: 40px;
    line-height:0;
    padding: 20px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

#button_mobile .notsafari_single{
    max-width: 370px; 
    margin: 20px auto 0 auto;
}


#button_mobile .ei_number_col{
   
    vertical-align:top;
    text-align:left;
    padding:7px 0;
    color: #444444;
    font-weight: bold;
}

#button_mobile .ei_number_col_sizer{
    width:22px;
}

#button_mobile .ei_info_col{
    width:99%;
    padding:7px 0;
}

#button_mobile .ei_info_header{
    font-weight:bold;
    font-size:var(--f18);
    margin:10px 0;
}

#button_mobile .ei_info_next_link{
    color: black;
    font-size:var(--f18);
    text-decoration: none;
    margin-top: 10px;
}



#not_small #button_not_mobile .subheader{
   color:#920732;
   font-size:var(--f30);
   line-height:var(--lh36);
   margin-bottom:13px;
}

#not_small #button_not_mobile .info_line{
   font-size:var(--f16);
   line-height:var(--lh24);
   max-width:600px;
   margin:0 auto;
}

#not_small #button_not_mobile .info_line a{
   text-decoration:underline;
   color:#920732;
}

#not_small #button_not_mobile #add_chrome_button, #not_small #button_not_mobile #add_safari_button{
    background:#a70839;
    color:white;
    border:solid 5px #a70839;
    border-bottom:solid 5px #7d062b;
    width:239px;
    height:36px;
    line-height:var(--lh36);
    text-align: center;
    margin: 40px auto 0 auto;
    font-family:arial;
    font-size:var(--f20);
    cursor:pointer;
}
#not_small #button_not_mobile #add_chrome_button:hover, #not_small #button_not_mobile #add_safari_button:hover {
    border-bottom:solid 5px #a70839;
}

#not_small #button_not_mobile .info_have_added_button{
margin-top:38px;
   color:black;
   font-size:var(--f16);
   line-height:var(--lh24);  
}

#not_small #button_not_mobile .help_link{
    color:#920732;
    font-size:var(--f16);
    line-height:var(--lh24);
    text-decoration:underline;
    margin:0px auto;
    cursor:pointer;
}

#not_small #button_not_mobile .help_info{
    width:600px;
    padding:10px;
    border:solid 1px #a1a2a3;
     margin:10px auto;
     line-height:var(--lh22);
	 font-size:var(--f16);
}

#not_small #button_not_mobile .how_to_img{
    margin-top:20px;
    margin-bottom:20px;
}

#not_small #button_not_mobile .button_to_drag{
    background-image: url('https://cdn.copymethat.com/static/page_add_button/button_non_chrome.png');
    height:51px;
    width:185px;
    margin:60px auto 30px auto; 
}

#not_small #button_not_mobile .button_to_drag a{
    display:block;
    height:51px;
    width:185px;
    color:transparent;
}

#not_small #button_not_mobile .button_to_drag .dashed_line{
    position:absolute;
    top:-115px;
    left:-205px;
}

#not_small #button_not_mobile .button_to_drag .dashed_line_note{
    position:absolute;
    top:-24px;
    left:-168px;
        color:#920732;
    font-size:var(--f14);
    line-height:var(--lh16);
}


#info, #cookie_info{
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

#info #what_is_label{float:right;margin-top:-10px}
#small #info #what_is_label{margin-bottom:0px;}
#info #what_is_label_a{text-decoration:underline;color:darkorange;font-weight:bold;font-size:var(--f11);}

#info #get_button_link{text-decoration:underline;color:blue;}
#info .number{color:orange;font-size:var(--f22);font-weight:bold;margin-right:10px;}
#info .activation_msg{margin-top:20px;}
#info .activate_highlight{font-weight:bold;font-size:115%;color:red;}
#info .contact_msg{margin-top:20px;}

#info .divider_border{height:2px;background:#920732;margin:20px 5px 0px 5px;}
#info .space_within_step{height:6px;}


#info .small_space{height:5px;}
#info #show_where_button{text-decoration:underline; cursor:pointer;}



#info .link_as_link{color:blue;text-decoration:underline}
#info .plain_link{color:black;text-decoration:underline}
#info .plain_link:visited{color:black;}

#not_small #info .subsub_header{
font-weight:bold;margin-left:5px;margin-top:12px;margin-bottom:0px;
padding-top: 10px;
color:rgb(50, 50, 50);
border-top: 1px dotted gray;
}
#small #info .subsub_header{font-weight:bold;font-size:var(--f16); color:#3B1E00;margin-left:5px;margin-top:15px;margin-bottom:2px;border-top: 1px solid gray;padding-top: 6px;}

#small #info .subsubsub_header{font-weight:bold;font-size:var(--f16); color:#3B1E00;}
#not_small #info .subsubsub_header{font-weight:bold;color:rgb(50, 50, 50);}

#not_small #info .subsub_header_info_start{font-weight:bold;margin-left:5px;margin-top:12px;margin-bottom:0px;
padding-top: 3px;}
#small #info .subsub_header_info_start{font-weight:bold;font-size:var(--f14); color:#3B1E00;margin-left:5px;margin-top:15px;margin-bottom:2px;}



#info .show_more_link_style{text-decoration:underline;cursor:pointer;}
#not_mob #info .show_more_link_style:hover{font-weight:bold}

#info .text_line, #info .text_line_non_indent{
    list-style-type: none;
  padding-left: 15px;
    padding-top:13px;
}
#info .text_line_non_indent{padding-left: 5px;}

#info .a_href{color:blue;text-decoration:None}
#info .chrome_ext_link_a{color:blue;text-decoration:None;font-size:var(--f14);}

#info .text_line_extra_indent{
 padding-left: 25px;
}

#small #info .text_line{
    padding-left: 15px;
}
 
#info .link_msg, #info .welcome{margin-top:15px;font-size:var(--f18);color:#920732;font-weight:bold;}


#info #recipe_links_div{margin-left:0px;margin-top:10px;}
#info .recipe_link_single{margin-top:7px;}
#info .recipe_link{display:table-cell;width:90px;}
#info .recipe_link_a{text-decoration:none}
#info .recipe_link_description{display:table-cell; /*overwritten by small*/}
#small #info .recipe_link_description{display:block;}

#info .highlight{font-weight:bold;}
#info .contact_hlight{}

#switch_view_button{margin-top:4px;
	border: 1px solid rgb(82, 82, 82);
	color: rgb(82, 82, 82);
}

#recipes #new_recipes_msg, 
#recipes #new_recipes_loading_msg{
    background: #FFE082;
    padding: 5px 0;
    margin-bottom: 5px;
    font-size:var(--f14);
    font-weight: bold;
    text-align:center;
}

#small #small_logo_top{
	   margin:auto;
	   width:130px;
	   height:24px;
	}
	
@media screen and (max-width : 380px){
	#small #small_logo_top{
		margin-left:100px;
	}
}

@media screen and (max-width : 360px){
	#small #small_logo_top{
		margin-left:94px;
	}
}

@media screen and (max-width : 359px){
	#small #small_logo_top{
		margin-left:65px;
	}
}

#recipes .recipes_popup_menu
 {
    padding:5px;
    border:1px solid gray;
    position:absolute;
    top:46px;
    right:5px;
    z-index:10;
    background:white;
    box-sizing: border-box;
    overflow:hidden;
    text-align:left;
}

#small #recipes .recipes_popup_menu{
    right: 5px;
    top: 42px;
}

#not_small #recipes .recipes_popup_menu
{
    max-width:320px;
}

#recipes .recipes_popup_menu .choice{
	border-bottom: 1px solid gray;
    line-height: var(--lh20);
    padding: 10px 10px;
	cursor:pointer;
	min-width:245px;
}

#small #recipes .recipes_popup_menu .choice{
	border-bottom: 1px solid gray;
    line-height: var(--lh20);
    padding: 10px 10px;
	cursor:pointer;
	min-width:278px;
}

#not_mob #recipes .recipes_popup_menu .choice:hover{
	background:rgb(230, 230, 230);
}

#recipes .recipes_popup_menu .icon
 {
     /* uses sprite_ic sheet */
    height: 26px;
    width: 26px;
    margin-top: -3px;
    opacity: .65;
    display: inline-block;
    float: left;
    margin-right: 10px;
 } 
 
#not_small #recipes #recipes_view_trigger,
#not_small #recipes #share_options_trigger{
	 float: right;  
    box-sizing: border-box;
    cursor: pointer;
    z-index: 2;
    background: white;
    border: 1px #D7D7D7 solid;
	white-space: nowrap;
    word-wrap: break-word; 
	position:relative;
    line-height: 0;
    padding: 21.5px 0px;
    text-align:left;
	overflow:hidden;
	font-size:var(--f14);
	color:#6f6f6f;
}

 #not_small #recipes #recipes_view_trigger {
    width: 74px;
	margin-left: 0px;
    margin-right: 0px;
}  

 #not_small #recipes #share_options_trigger{
    width: 42px;
	margin-left: 10px;
    margin-right: 10px;
 }

#small #recipes #share_options_trigger,
#small #recipes #recipes_view_trigger
{
    float: right;
    box-sizing: border-box;
    width: 42px;
    height: 40px;
    padding-top: 8px;
    position: relative;
    cursor: pointer;
 }
 
 #small #recipes #share_options_trigger{
	 margin-right:5px;
 }
 
  #small #recipes #recipes_view_trigger {
	margin-right:12px;
}  

  #recipes #recipes_view_trigger .icon_view_chosen_wrapper,
  #recipes #share_options_trigger .recipes_share_icon_wrapper
 {
    background:white;
	height: 26px;
    width: 26px;
	position:absolute;
	top:8px;
	right: 0px;
 } 
 
#recipes #recipes_view_trigger .icon_view_chosen_wrapper
 {
    padding-right: 4px;
    padding-left: 2px;
 } 
 
#recipes #share_options_trigger .recipes_share_icon_wrapper
 {
    padding-right: 7px;
    padding-left: 7px;
 } 
 
#small #recipes #recipes_view_trigger .icon_view_chosen_wrapper,
#small #recipes #share_options_trigger .recipes_share_icon_wrapper
 {
    padding-right: 8px;
    padding-left: 8px;
 } 
 
#recipes #recipes_view_trigger .icon_view_chosen,
#recipes #share_options_trigger .recipes_share_icon
 {
     /* uses sprite_ic sheet */
    height: 26px;
    width: 26px;
    opacity: .5;
 } 


#recipes #recipes_view_trigger .listview_trigger_text,
#recipes #share_options_trigger .shareoptions_trigger_text{
	margin-left:6px;
	font-weight: bold;
    color: #6f6f6f;
    font-size: var(--f13);
}  
 
#small #recipes #recipes_view_trigger .listview_trigger_text,
#small #recipes #share_options_trigger .shareoptions_trigger_text{
    display:none; 
}  

 #not_small #recipes #list_view_info_popup{
    width:600px;
    left:50%;
    margin-left:-300px
}

#recipes #list_view_info_popup .header{
   font-weight:bold;
   margin:10px 0;
}

#recipes #list_view_info_popup .premiumlink
{
   font-weight:bold;
   margin:5px 0 0 0;
   text-decoration:underline;
   color:blue;
}

#recipes #list_view_info_popup .bullets_wrapper{
   margin-bottom:15px;
   line-height:var(--lh24);
}

#not_small #recipes #list_view_info_popup img{
  width:560px;
}

#small #recipes #list_view_info_popup img{
  width:100%;
}


#not_small #sort_div #sort_select_options {
    text-align: left;
    width: 220px;
    margin:0px 0px 2px 0px; 
    padding: 0 5px;
    border: 1px solid #505050;
     background: #FFFFFF;
    clear: both;
    overflow: hidden;
     position: absolute;
    right: 0px;
    z-index: 100;
    top: 38px;
}

#not_small #not_mob #recipes_view_top #sort_select_options{
    font-size:var(--f13);
    width: 198px;
    margin-top: 3px;
    right:auto;
        left: 0;
     top: 36px;
}

 #not_small #sort_div #sort_trigger{
    height:36px; /* if change height see sort_trigger_wrapper margin-bottom */
    line-height:var(--lh36);
    background:white;
}
#not_small #sort_div .sort_trigger_wrapper{
   border-bottom:1px #D7D7D7 solid;
            border-top:1px #D7D7D7 solid;
    margin-top:2px; 
    margin-bottom:6px; /* margin top + margin bottom + height of sort_trigger = height  recipes_column_top*/
}

#not_small #sort_div #sort_trigger_expand,  #not_small #sort_div #sort_trigger_collapse{
  float:right;
  margin-right:10px;
  color:gray;
}

#not_small #sort_div #sort_label_col, 
#not_small #sort_div #sort_label_col div{
  width: 56px; 
  cursor:pointer;
  overflow:hidden;
  font-weight: bold;
    color: #6f6f6f;
    font-size:var(--f12);
	line-height:0;
    padding: 18px 0 18px 3px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}


#not_small #sort_div .sort_trigger_icon, #not_small #sort_div .sort_trigger_icon div{
  width: 16px;
  cursor:pointer; 
    line-height:0;
    padding: 18px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

#not_small #sort_div #sort_chosen_col, 
#not_small #sort_div #sort_chosen_col #sort_chosen{
  width: 100%;
   overflow:hidden;
   cursor:pointer;
    font-weight: bold;
    color: #6f6f6f;
    font-size:var(--f12);
    background:white;
	
	line-height:0;
    padding: 18px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}
    
#not_small #sort_div #sort_chosen{
  display:block;
   line-height:0;
    padding: 14px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
	
	padding-left:5px;
}

#not_small #sort_trigger{
   font-size:var(--f13);
   text-align:left;
}

#not_small #sort_select_div{float:left;}

#not_small .sort_option{
    border-bottom:1px dotted gray;
    padding-left:5px;
    color:gray;
	
	line-height:0;
    padding: 18px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
	
	 padding-left:5px;
}
#not_small .sort_option.enabled{
    color:black;
    cursor:pointer;
}
#not_small #not_mob .sort_option.enabled:hover{
   background:#f4f4f4;
}
#not_small .sort_option.last{
    border-bottom:none
}

/* not small search called vertical_search_<the menu> (used to be a vertical pane on the left side) */
/* small_search_filter_menu is the small filters search menu (used to be called advanced search) */
/* small_search_tags_menu is the small tags search menu */

#not_small #recipes .vertical_search_trigger{
    width: 100px;
    float: left;
    background: white;
    box-sizing:border-box;
    border: 1px #D7D7D7 solid;
    border-radius: 0px;
    cursor: pointer;
    font-weight: bold;
    color: #6f6f6f;
    font-size:var(--f13);
	line-height:0;
    padding: 21.5px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}
#not_small #recipes .vertical_search_trigger.left{
    margin-left:6px;
}

#not_small #recipes #vertical_search_tags,
#not_small #recipes #vertical_search_filter
{
    text-align:left;
     box-sizing:border-box;
    padding-bottom:0;
    text-align:left;
    left: 50%;
 }
 
 #not_small #recipes #vertical_search_tags{
      width:354px; /*  tagmenu_table + 20 vertical_search_inner padding */
      margin-left: -177px;
}

 #not_small #recipes #vertical_search_filter{
      width:354px; /* same as vertical_search_tags, but doesn't have to be */
      margin-left: -177px;
}
 
 #not_small #recipes #vertical_search_tags .scroll_menu_inner,
#not_small #recipes #vertical_search_filter .scroll_menu_inner,
#not_small #recipes #list_view_info_popup .scroll_menu_inner{
    padding:10px 10px 20px 10px;
    overflow-y: auto;
    max-height:480px; /* changed in js */
    box-sizing:border-box;
}

#not_small #recipes #vertical_search_filter .scroll_menu_inner{
    padding:20px 10px 20px 20px;
}

#small #small_search_filter_menu .scroll_menu_inner,
#small #small_search_tags_menu .scroll_menu_inner,
#small #list_view_info_popup .scroll_menu_inner{
    overflow-y: auto;
    padding-top: 5px;
    box-sizing: border-box;
	padding-bottom:44px; /* must match small_fullscreen_popup_menu */
}

 #not_small #recipes #vertical_search_tags .tagmenu_table{ 
   border-collapse: separate;
   border-spacing: 2px 5px; /* this is space between cells. We add the visible border to cells.*/
   table-layout: fixed; /* all cells will have same width */
   width:334px; /* use same as for two columns.*/
}

#not_small #recipes #vertical_search_tags.two_column_tags .tagmenu_table{
    width:334px;
    /* desired width of column (164) x 2 + border-spacing x 3 */
 }
 
 #not_small #recipes #vertical_search_tags.three_column_tags .tagmenu_table{
    width:500px;
    /* desired width of column (164) x 3 + border-spacing x 4 */
 }

#not_small #recipes #vertical_search_tags.two_column_tags{
    width:354px; 
    /* tagmenu_table + 20 vertical_search_inner padding. Added extra to make room for any/all line  */
    margin-left: -177px;
 }
 
#not_small #recipes #vertical_search_tags.three_column_tags{
    width:540px; 
    /*  tagmenu_table + 20 vertical_search_inner padding + 20px for scrollbar */
    /* only 3 columns will ever have scrollbar. if 1 or 2 don't fite, use more columns  */
    margin-left: -270px;
 }
 
 #not_small #mob #recipes #vertical_search_tags.three_column_tags{
    width:520px; /* no scroll bar width */
    margin-left: -260px;
 }
 

 #not_small #recipes #vertical_search_tags .tag_in_search,
 #small #recipes #small_search_tags_menu .tag_in_search{ 
   /* this is also the td */
    padding:0;
    /* must not have border. Used to and then aria-label was ignored by iOS voiceover screenreader. */
}

#not_small #recipes #vertical_search_tags .tag_in_search.selected .tag_in_search_inner, 
#small #recipes #small_search_tags_menu .tag_in_search.selected .tag_in_search_inner,
#not_small #recipes #vertical_search_tags .tag_in_search.selected_not .tag_in_search_inner, 
#small #recipes #small_search_tags_menu .tag_in_search.selected_not .tag_in_search_inner{
    background: #e0e0e0;
}    

#not_small #recipes #vertical_search_tags .tag_in_search.selected_not, 
#small #recipes #small_search_tags_menu .tag_in_search.selected_not{
    text-decoration-line: line-through;
    text-decoration-thickness: 2px;
    text-decoration-style: solid;
    text-decoration-color: rgb(168, 7, 57);
}    

#not_small #not_mob #recipes #vertical_search_tags .tag_in_search.hover{
      box-shadow: 1px 1px 0px 0 rgba(0,0,0,.25);
}

 #not_small #recipes #vertical_search_tags .tag_in_search_inner, 
 #small #recipes #small_search_tags_menu .tag_in_search_inner{     
    cursor: pointer;
    overflow: hidden;
    box-sizing: border-box;
    word-break: break-word;
    padding: 10px 4px 10px 8px;
    line-height:var(--lh20);
    max-height:80px; /* 3 lines of text + padding */
	border: 1px #cacaca solid;
  }
  
  
#small #recipes #small_search_tags_menu .tagmenu_table{ 
   border-collapse: separate;
   border-spacing: 2px 4px; /* this is space between cells. We add the visible border to cells.*/
   table-layout: fixed; /* all cells will have same width */
   width:100%;
}
  
 #not_small #not_mob #vertical_search_tags .tag_in_search_inner{     
    line-height:var(--lh18);
    max-height:74px; /* 3 lines of text + padding */
  } 
 
#small #small_search_tags_menu .label_for_tags_all_any{
	display:inline-block;
}
	
@media screen and (max-width : 359px){
   #small #small_search_tags_menu .label_for_tags_all_any{
        margin-left:-6px;
    }
}

#small.font120plus #small_search_tags_menu .label_for_tags_all_any{
	display:block;
}

#small_search_tags_menu #search_tag_untagged .cb_text,
#not_small #vertical_search_tags #search_tag_untagged .cb_text
{
	width:270px;
}

@media only screen and (min-width : 360px) { 
	#small_search_tags_menu #search_tag_untagged .cb_text,
	#not_small #vertical_search_tags #search_tag_untagged .cb_text
	{
		width:300px;
	}
}

#small #small_search_tags_menu #search_tag_untagged,
#small #small_search_tags_menu #search_tag_exclude_select
{
    margin-bottom: 10px;
	margin-top:4px;
}

#not_small #vertical_search_tags #search_tag_untagged,
#not_small #vertical_search_tags #search_tag_exclude_select
{
    margin-bottom: 6px;
	margin-top:4px;
}

#shopping_list #listdefault_wrapper.cb_div{
	margin-bottom: 14px;
	margin-top: 14px;
}

#not_small #shopping_list #list_default_info{
	margin-bottom: 12px;
    width: 275px;
    margin-top: -16px;
}

#small #shopping_list #list_default_info{
	margin-bottom: 12px;
    margin-top: -16px;
}

#small #small_search_tags_menu #search_tag_exclude_select_desc{
     margin-left:2px;
     color: gray;
     line-height:var(--lh16); /* moves it closer to checkbox above. */
    margin-bottom: 14px;
}

#small.font130plus #small_search_tags_menu #search_tag_exclude_select_desc{
     line-height:var(--lh20); /* bigger than normal so multi-lines dont' overlap */
}

@media only screen and (max-width : 320px) { 
    #small #small_search_tags_menu #search_tag_exclude_select_desc,
    #small #small_search_tags_menu .label_for_radio_option{
         font-size:var(--f15);
    }
}

#not_small #vertical_search_filter .vertical_search_submit,
#not_small #vertical_search_tags .vertical_search_submit{
    background: white;
    color: #3e3e3e;
    width: 120px;
    text-align: center;
    cursor: pointer;
    font-size:var(--f15);
    line-height:0;
    float: left;
    text-align: center;
    border-radius: 30px;
    margin-top: 2px;
    margin-left: 10px;
    font-weight: bold;
    padding: 19px 8px;
    box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
    overflow: hidden; 
}

#not_small #vertical_search_tags .vertical_search_submit.clicked,
#not_small #vertical_search_filter .vertical_search_submit.clicked{
    background: #EEEEEE;
}

#not_small #vertical_search_tags #clear_search_tags,
#not_small #vertical_search_tags #switch_to_filter_trigger,
#not_small #vertical_search_filter #clear_search_filter,
#not_small #vertical_search_filter #switch_to_tags_trigger{
    text-align: center;
    cursor: pointer;
    float: left;
    font-size:var(--f15);
    margin-left: 14px;
	line-height:0;
    padding: 22px 5px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

#not_small #vertical_search_tags #switch_to_filter_trigger,
#not_small #vertical_search_filter #switch_to_tags_trigger{
    text-decoration: underline;
}

#not_small #vertical_search_tags #switch_to_filter_trigger,
#not_small #vertical_search_filter #switch_to_tags_trigger{
	/* if put back, check font plus sizes */
    display:none;
}

#not_small.font120plus #vertical_search_filter .vertical_search_submit,
#not_small.font120plus #vertical_search_tags .vertical_search_submit{
    width: 160px;
    font-size:var(--f14);
}

#not_small #recipes #search_form_div_new #search_input_double_wrapper{
  width: 443px; /* search_input_double +  search_double_submit and its border */
  margin: 0 auto;
}
#not_small #recipes #search_form_div_new #search_input_double {
   display: inline-block;
  vertical-align: middle;
    font-size:var(--f14);
    line-height:var(--lh18);
    height: 43px;
    padding: 11px 48px 11px 10px; /*padding right leaves room for delete x button*/
    border: 1px solid #D7D7D7;
    box-sizing: border-box;
    width: 391px;
    font-family: open sans;
}

@media screen and (max-width : 900px){
   #not_small #recipes #search_form_div_new #search_input_double {
        width: 371px; 
  }
 #not_small #recipes #search_form_div_new #search_input_double_wrapper{
      width: 423px; /* has to be so big for some reason.. */
    }
   #not_small #recipes .vertical_search_trigger{
        width: 84px;
    }
}


@media screen and (max-width : 799px){
  #not_small #recipes #search_form_div_new #search_input_double {
        width: 301px; 
  }
  #not_small #recipes #search_form_div_new #search_input_double_wrapper{
      width: 353px;
    }
}

@media screen and (max-width : 768px){
    #not_small #recipes #search_form_div_new #search_input_double {
        width: 296px; 
  } 
  #not_small #recipes #search_form_div_new #search_input_double_wrapper{
      width: 348px;
    }
   #not_small #recipes .vertical_search_trigger{
        width: 84px;
    }
}

@media screen and (max-width : 767px){
   #not_small #recipes #search_form_div_new #search_input_double {
        width: 171px; 
  }
 #not_small #recipes #search_form_div_new #search_input_double_wrapper{
      width: 223px;
    }
   #not_small #recipes .vertical_search_trigger{
        width: 80px;
    }
}

 #not_small #recipes #search_form_div_new .delete_x_button{
    top: 0;
    position: absolute;
    height: 43px;
    line-height:var(--lh43);
    width: 44px;
    right: 0px;
    text-align:right;
    padding-right:12px;
    box-sizing:border-box;
    cursor:pointer;
    color:gray;
    font-size:var(--f18);
}

#not_small #recipes #search_form_div_new.no_delete_x .delete_x_button{
    display:none;
}

#small #search_wrapper_small .search_table{
    width:100%;
    box-sizing:border-box;
    border-collapse:collapse;
    background:transparent;
}

#small #search_wrapper_small .search_table td{ 
  padding:0;
}

#small #search_wrapper_small .search_table .extra_margin{ 
  width:6px;
  background:transparent;
}

#small #search_wrapper_small .search_table .extra_border{ 
  width:2px;
   background:rgb(213, 213, 213);
}

#small #search_wrapper_small input[type="search"]{ 
  width:100%;
  height: 40px; /* if change this, look at all  searchbar-height-dependent */
    line-height:var(--lh40); /* searchbar-height-dependent */
    box-sizing: border-box;
    padding: 0 5px;
    margin:0;
    -webkit-border-radius:0px;
   border:none;
   background:white;
   font-size:var(--f16);
}

#small.font130plus #search_wrapper_small input[type="search"]{ 
   font-size:var(--f14);
}

#small #search_wrapper_small .extra_border_top{
    height:2px;
    background:rgb(213, 213, 213);
}



#small #search_wrapper_small .extra_border_top.cancel_show{
    background:transparent;
}


#small #search_wrapper_small .search_table #submit_button_wrapper {
    width:44px;
    padding-left:1px;
    box-sizing:border-box;
}

#small #search_wrapper_small .search_table.not_showing_all_following .onlyifshow_allfollowing{
  display:none;
}

 #small .search_table.no_cancel .cancel_show{
     display:none;
 }
          
#search_wrapper_small .search_button {
	color: white;
background: #A53D53;
border-radius: 5px 5px 5px 5px;
height: 30px;
width: 42px;
font-size:var(--f11);
display: inline-block;
cursor: pointer;
padding: 0;
margin: 0px 0px 0px 0px;
border: solid lightgray 1px;
line-height:var(--lh20);
text-align: center;
float: left;
}
 
 #small #small_search_filter_menu .search_button, 
 #small #small_search_tags_menu .search_button{
    background: white;
    color: #3e3e3e;
	height:40px;
    line-height:0;  
    padding: 20px 0px;
	padding-right:5px;
	padding-left:5px;
    text-align: center;
    font-size:var(--f16);
    float: left;
    border-radius: 10px;
    margin-top: 2px;
    font-weight: bold;
    margin-left: 10px;
    box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
    overflow: hidden;
    max-width:180px;
   }
   
#small #small_search_filter_menu .small_search_clear,
 #small #small_search_tags_menu .small_search_clear{
     height: 40px;
    line-height:0;
    padding: 20px 0px;
    text-align: center;
    font-size:var(--f16);
    float: left;
    margin-top: 2px;
    margin-left: 20px;
    box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
    overflow: hidden;
    max-width:90px;
   }


@media screen and (max-width : 359px){
	#small #small_search_filter_menu .small_search_clear,
	#small #small_search_tags_menu .small_search_clear{
		margin-left: 10px;
		max-width:70px;
	}
	 #small #small_search_filter_menu .search_button, 
	#small #small_search_tags_menu .search_button{
		max-width:170px;
	}
}
 
#small #small_search_filter_menu #search_input{
        float:left;
        width:262px;
        margin:10px;
        height:24px;
        line-height:var(--lh24);
        padding:7px 4px;
       -webkit-appearance: none;  
       border-radius: 0; -webkit-border-radius:0;
        border:#A9A9A9 solid 1px;
   }
#small #small_search_filter_menu #sort_select_options{
    margin:5px 15px 0 15px;
}   
#recipes .search_filter_menu .label_for_sb_radio_option{
    display:block;
	line-height:var(--lh22);
	padding:7px 0;
    border-bottom:1px gray dotted;  
}

 #recipes .search_filter_menu .label_for_sb_radio_option.disabled{
       color:gray;
}
#recipes .search_filter_menu .label_for_sb_radio_option.first{
            border-top:1px gray dotted;
}
#recipes .search_filter_menu .label_for_sb_radio_option.last{
            border-bottom:none;
}
#recipes .search_filter_menu #sort_trigger{
            min-height:40px;
            line-height:var(--lh40);
        }
#recipes .search_filter_menu .sort_trigger_wrapper{
            border-top:dotted 1px gray;
        }
 #recipes .search_filter_menu #sort_trigger_expand, #recipes .search_filter_menu #sort_trigger_collapse{
          float:right;
          margin-right:10px;
          color:gray;
}     

#recipes .search_filter_menu .checkbox_filter, #recipes .search_filter_menu .radio_filter{
    width:125px;
    min-height:40px;
    line-height:var(--lh40);
}
   
#recipes .search_filter_menu .checkbox_filter{
        width:auto;
}
   
#recipes .search_filter_menu .radio_filter_first{
   border-top: gray dotted 1px;
}

#recipes .search_filter_menu .radio_filter{
   border-bottom: gray dotted 1px;
    width:100%;
}
   
#recipes .search_filter_menu .label_for_radio{
    width:105px;
    display: inline-block;
    white-space: nowrap;
}

#small.font120plus #recipes .search_filter_menu .label_for_radio{
    width:110px;
}

#small.font130plus #recipes .search_filter_menu .label_for_radio{
    display: block;
    line-height:var(--lh18); /*otherwise space between label and radio buttons is huge */
	margin-top:4px;
}

#not_small.font120plus #recipes .search_filter_menu .label_for_radio{
    width:110px;
}

#not_small.font130plus #recipes .search_filter_menu .label_for_radio{
    display: block;
    line-height:var(--lh18); /*otherwise space between label and radio buttons is huge */
	margin-top:4px;
}

#recipes .search_filter_menu .label_for_radio_option, 
#small #small_search_tags_menu .label_for_radio_option,
#recipes .search_filter_menu .label_for_checkbox{
	 min-height:38px;
	 display:inline-block;
}
 
#recipes .search_filter_menu .label_for_radio_option,
#small #small_search_tags_menu .label_for_radio_option{
 margin-right:3px;
}

 #recipes .search_filter_menu .label_for_dropdown{
	 font-weight:bold;
}

#recipes .search_filter_menu .meal_plan_search_label{
    text-align:left;
    margin-top:5px;
    margin-bottom:10px;
    color:rgb(50, 50, 50);
}

 #recipes .search_filter_menu .mp_search_date{
    display:inline-block;
    text-align:left;
    width:100px;
    border:rgb(161, 161, 161) 1px solid;
    background:white;
	font-size:var(--f16);
    float:left;
    margin-left:10px;
    margin-bottom:8px;
	height: 36px;
    line-height:0;
    padding: 17px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
    padding-left: 5px
}

@media screen and (max-width : 359px){
	 #recipes .search_filter_menu .mp_search_date{
		width:100px;
	}
}

#not_small #recipes .search_filter_menu .mp_search_date{
   font-size:var(--f15);
   width:90px;
}

#recipes .search_filter_menu .mp_date_hyphen{
     float: left;
    display: inline-block;
    text-align: center;
    height: 36px;
    width: 8px;
	 margin-left: 10px;
    line-height:0;
    padding: 18px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

#recipes .search_filter_menu .mp_dates_clear{
     display:inline-block;
     text-align:center;
     width:80px;
     background:white;
     border:gray 1px solid;
     cursor:pointer;
     float:left;
     margin-left:5px;
     border-radius:5px;
	 height: 36px;
    line-height:0;
    padding: 17px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

#not_small #recipes .search_filter_menu .mp_dates_clear{
   width:60px;
}



#recipes .search_filter_menu .stars .ratings_label{
    width: 45px;
    display: inline-block;
	 height: 40px;
    line-height:0;
    padding: 20px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

#small.font130plus #recipes .search_filter_menu .stars .ratings_label{
    display: block;
	width:auto;
}

#recipes .search_filter_menu .star_wrapper .star_image {
	display: block;
	background: url('https://copymethat.blob.core.windows.net/static/searchform_images/stars.png') no-repeat 0 -12px;
	width: 12px;
	height: 12px;
	display:inline-block;
	margin-top:-6px;
}

#recipes .search_filter_menu .star_wrapper.action .star_image, #recipes .search_filter_menu .star_wrapper.done .star_image {
	background-position: 0 0;
}

#recipes .search_filter_menu .stars .star_wrapper{
    width: 40px;
    display: inline-block;
    text-align: center;
    height: 40px;
    line-height:0;
    padding: 20px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

 
 #small #search_wrapper_small #search_options_all_following{
      /* all/following cancel*/
    width:44px;
    text-align:center;
    font-size:var(--f11);
    font-weight:bold;
    color:gray;
    background:white;
 }
 
#small #recipes_shared #search_wrapper_small .delete_x_button,
#small #recipes #search_wrapper_small .delete_x_button{
    width: 42px;
    font-size:var(--f14);
    font-weight: bold;
    color: #6d5353;
    background: white;
    line-height:var(--lh32);
    height: 100%;
    text-align: center;
    padding-left: 10px;
    box-sizing: border-box;
 }
 
 #small #recipes_shared .search_table.no_delete_x .deletexonly,
 #small #recipes .search_table.no_delete_x .deletexonly {
    display:none;
}
 
 #small #search_wrapper_small #small_tags_menu_trigger,
  #small #search_wrapper_small #small_filter_menu_trigger
 {
    width:52px;  /* if change, look at search_options_cancel */
    /* also look at inline style in recipes_search_small.html */
    text-align:center;
    font-size:var(--f13);
    font-weight:bold;
    color:gray;
    background:white;
 }
 
 #small #search_wrapper_small #search_options_cancel {
     position: absolute;
    right: 0;
    background: white;
    top: 0;
    width: 113px; /* must cover small_filter_menu_trigger and small_tags_menu_trigger */
	line-height:0px;
	padding:22.5px 0; /* searchbar-height-dependent */
    text-align: center;
    color: gray;
 }

 #small #search_wrapper_small #small_filter_menu_trigger.usesfilter, #small #search_wrapper_small #small_tags_menu_trigger.usesfilter{
    color:#A80739;
 }

#recipes .filter_image, #recipes_shared .filter_image{
	background-image:url('https://cdn.copymethat.com/static/searchform_images/search_filter.png');
	width: 13px;
	height: 12px;
	float: left;
}

#recipes_shared #user_search_results{
    padding:5px 5px 5px 5px; 
    z-index:1000; 
    margin:0px; 
    background:white;
    width:300px;
    border:solid black 1px;
    overflow:hidden;
}

#recipes_shared .search_user_result{
    display: block;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-size:var(--f12);
    font-weight:bold;
    height: auto;
    list-style-type: none;
    height:52px;
    padding-left:60px;
    padding-bottom:3px;
    padding-top:3px;
    text-align:left;
}

#recipes_shared .search_user_result:hover{
    background:cornsilk;
    cursor:pointer;
}

#recipes_shared .search_result_display_name{
    padding-top:2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#recipes_shared .search_result_img{height: 50px;width: 50px;position:absolute;left:6px;}



#not_small #recipes .content, #not_small #recipes_shared .content, #not_small #follower_ing .content{
	padding:7px 0px 20px 0px;
	border:none;
	margin-top:0;
    text-align:center; /* centers recipes */
}

#small #recipes .content, #small #recipes_shared .content, #small #follower_ing .content{
    text-align:center; /* centers recipes */
    padding:0;
}

#follower_ing .all_follower_ing{
	margin:20px 0 0 0;
}

#small #recipes #count_msg_div{
     left: 3px; top: -22px;
}
 #not_small #recipes #count_msg_div{
     position: absolute;
     top: 0; 
     left: 60px; 
     top: -28px;
}

 #not_small.font120plus #recipes #count_msg_div{
	 top: -38px;
}

#not_small #recipes .recipe_count_msg{
    color:black;
    margin-left:0px;
    float:left;
    font-size:var(--f13); 
    text-align: left; 
	max-width:124px;
	 white-space:nowrap;
	 overflow:hidden;
 }
 
 @media screen and (min-width : 768px){
   #not_small #recipes .recipe_count_msg{
		max-width:244px;
	 }
 }
 
#not_small #recipes #no_copied_recipes_yet{color:black;margin-top:10px;margin-bottom:25px;font-size:var(--f14);} 
#not_small #recipes #no_copied_recipes_yet a{font-weight:bold;color:#a70839;} 

#not_small #recipes .gallery_view_icon{
	height:8px;width:8px;overflow:hidden;
	padding:0;
	margin:0;
	background:#a70839;
	display:inline-block;
	float:left;
}

#small #ios #search_saved_searches{
    padding-bottom:300px; /* to account for keyboard. Not necessary on Android because height already subtracts keyboard*/
}
#small #ios #small_search_tags_menu{
    padding-bottom:300px; /* to account for keyboard. Not necessary on Android because height already subtracts keyboard*/
}

#small #small_search_tags_menu .tag_option{
    padding:0px 10px;
    height:38px;
    line-height:var(--lh38);
    border-bottom: dotted gray 1px;
 }
 
 #small #small_search_tags_menu .tag_option.first{
    border-top: dotted gray 1px;
 }


#not_small #recipes_shared #search_form_div{
	margin: 0 auto;
    color: #212121;
	text-align: center;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
    font-size:var(--f14);
    line-height:var(--lh18);
     width:755px;
}

#not_small #recipes_shared #search_form_div #search_input, 
#not_small #recipes_shared #search_form_div #search_input_pb { 
	display: inline-block;
    vertical-align:middle;
    font-size:var(--f14);
    line-height:var(--lh18);
    height: 43px;
    padding: 11px 10px 11px 10px;
    border: 1px solid #D7D7D7;
    box-sizing: border-box;
    font-family: open sans;
     width: 380px;
}

@media screen and (max-width : 768px){
   #not_small #recipes_shared #search_form_div{
        width:650px;
    }
 #not_small #recipes_shared #search_form_div #search_input, #not_small #recipes_shared #search_form_div #search_input_pb {
    width: 285px;
   }
    
}

@media screen and (max-width : 660px){
   #not_small #recipes_shared #search_form_div{
        width:580px;
    }

 #not_small #recipes_shared #search_form_div #search_input, #not_small #recipes_shared #search_form_div #search_input_pb  {
    width: 270px;
   }
    
}

 #not_small #recipes_shared #search_form_div .delete_x_button{
    top: 0;
    position: absolute;
    height: 43px;
    line-height:var(--lh43);
    width: 44px;
    right: 0px;
    text-align:right;
    padding-right:12px;
    box-sizing:border-box;
    cursor:pointer;
    color:gray;
    font-size:var(--f18);
}

#not_small #recipes_shared #search_form_div.no_delete_x .delete_x_button{
    display:none;
}

#not_small #recipes_shared #search_form_div .search_button,
#not_small #recipes #search_form_div_new .search_button{
    width: 85px;
    background: white;
    font-weight: bold;
    color: #484848;
    font-size:var(--f12);
    box-sizing: border-box;
    height: 43px;
    line-height:var(--lh17);
    padding-top: 3px;
    text-align: center;
    border: 1px solid #DBDBDB;
    border-left:none;
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    background: #f6f6f6;
}

#not_small #not_mob #recipes_shared #search_form_div .search_button:hover ,
#not_small #not_mob #recipes #search_form_div_new .search_button:hover{
    background: #f1f1f1;
}

#not_small #recipes_shared #search_form_div .search_button.tagoption{
      line-height:var(--lh33);
        border-radius: 0 6px 6px 0;
   }
   
#not_small #recipes_shared #search_form_div .search_button.alloption{
  width:72px;
}

#not_small #recipes_shared #search_form_div .search_button.onlyoption,
#not_small #recipes #search_form_div_new .search_button.onlyoption{
    width:52px;
  border-radius: 0 6px 6px 0;
}

 #not_small #recipes_shared #search_form_div .go_search_icon,
 #not_small #recipes #search_form_div_new .go_search_icon{
    height: 28px;
    width: 28px;
    opacity: .7;
    float: left;
    margin-top: 4px;
    margin-left: 3px;
    margin-right: -10px;
}

#not_small #recipes_shared #search_form_div .search_button.onlyoption .go_search_icon,
#not_small #recipes #search_form_div_new .search_button.onlyoption .go_search_icon{
  margin-left:10px;
}
   
#not_small #recipes_shared #search_form_div #following_div,
#not_small #recipes_shared #search_form_div #madethis_div,
#not_small #recipes_shared #search_form_div #pb_madethis_div{
    background: white;
    font-weight: bold;
    font-size:var(--f12);
    color: #484848;
    box-sizing: border-box;
    height: 43px;
    line-height:var(--lh15); 
    padding: 0 2px;
    text-align: center;
    border: 1px solid #DBDBDB;
    border-left: none;
    border-radius: 2px;
    overflow: hidden;          
    display: inline-block;
    vertical-align: middle;
    position:relative;
    cursor: pointer;
}

#small #recipes_shared #searchtype_wrapper, 
#small #recipes_shared #searchtype_wrapper_pb{
    height:48px; /* match padding-top search_saved_searches and be less than margin-top small #recipes_shared .people */
     width:100%;
     background:white;
     box-sizing:border-box;
     border-bottom: 1px #e0e0e0 solid;
    padding-top:3px;
}

#small #recipes_shared #searchtype_wrapper_pb.doubleheight{
    height:92px; /* match padding-top search_saved_searches  doubleheight */
}

#small #recipes_shared #searchtype_wrapper_pb #search_doubleheight_split{
    display:none;
}

#small #recipes_shared #searchtype_wrapper_pb.doubleheight #search_doubleheight_split{
    display:block;
    clear:both;
}

#small #recipes_shared #search_wrapper_small #pb_madethis_div,
#small #recipes_shared #search_wrapper_small #madethis_div{
    font-weight: bold;
    font-size:var(--f14);
    display: inline-block;
    line-height:0;
    height: 40px;
    padding: 0;
     color:#262626;
     overflow:hidden; /* if not, shifts since buttons are overflow:hidden . also keeps text inside (cuts off) if user makes font huge */
     background: #f0f0f0;
    border-radius: 2px;
    max-width: 90px;
    box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
	
	margin-left:15px;
	float:left;
	padding: 0 4px;
}

#small #recipes_shared #search_wrapper_small .searchtype_button{
    width: 106px;
    padding:19px 0;
    line-height:0;
    text-align: center;
    border-radius: 10px;
    display: inline-block;
    background: #f0f0f0;
	border:1px solid #f0f0f0; 
    font-weight: bold;
    font-size:var(--f14);
    margin-left: 15px;
    margin-top: 0px;
   color:#262626;
    box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
    overflow:hidden;
	
	float:left;
}

@media screen and (max-width : 359px){  
	#small #recipes_shared #search_wrapper_small .searchtype_button{
		width: 105px;
		margin-left:6px;
	}
	#small #recipes_shared #search_wrapper_small #pb_madethis_div,
	#small #recipes_shared #search_wrapper_small #madethis_div{
		margin-left:6px;
	}
   #small.font130plus #recipes_shared #search_wrapper_small #pb_madethis_div,
	#small.font130plus #recipes_shared #search_wrapper_small #madethis_div{
		font-size:var(--f13);
	}
	#small.font130plus #recipes_shared #search_wrapper_small .searchtype_button{
		font-size:var(--f12);
	}
}

@media screen and (min-width : 360px) and (max-width : 374px){  
	#small.font130plus #recipes_shared #search_wrapper_small #pb_madethis_div,
	#small.font130plus #recipes_shared #search_wrapper_small #madethis_div{
		margin-left:8px;
	}
	#small.font130plus #recipes_shared #search_wrapper_small .searchtype_button{
		width: 120px;
		margin-left:8px;
	}
	#small.font150plus #recipes_shared #search_wrapper_small #pb_madethis_div,
	#small.font150plus #recipes_shared #search_wrapper_small #madethis_div{
		font-size:var(--f13);
	}
	#small.font150plus #recipes_shared #search_wrapper_small .searchtype_button{
		font-size:var(--f13);
	}
}

@media screen and (min-width : 375px) and (max-width : 411px){  
	#small.font130plus #recipes_shared #search_wrapper_small #pb_madethis_div,
	#small.font130plus #recipes_shared #search_wrapper_small #madethis_div{
		margin-left:6px;
	}
	#small.font130plus #recipes_shared #search_wrapper_small .searchtype_button{
		width: 130px;
		margin-left:6px;
	}
}

@media screen and (min-width : 412px){  
	#small.font130plus #recipes_shared #search_wrapper_small #pb_madethis_div,
	#small.font130plus #recipes_shared #search_wrapper_small #madethis_div{
	}
	#small.font130plus #recipes_shared #search_wrapper_small .searchtype_button{
		width: 130px;
	}
}


#small #recipes_shared #search_wrapper_small .searchtype_button[searchtype="tag"]{
    min-width: 100px;
    max-width:130px;
    width:auto;
    padding-left:5px;
    padding-right:5px;
}

@media screen and (max-width : 359px){  
   #small #recipes_shared #search_wrapper_small .searchtype_button[searchtype="tag"]{
        min-width: 90px;
         max-width:130px;
          width:auto;
    }
}

#small #recipes_shared #search_wrapper_small .searchtype_button.selected{
    border:1px solid black; /* shows default search(enter) and where is now */
}

#small #recipes_shared #search_wrapper_small .searchtype_button.notselectable{
    color:#b9b9b9;
}

#small #search_saved_searches{
	text-align:left;
}

#small #recipes_shared #search_saved_searches{
	z-index:100; /* less than content top */
    padding-top:48px;  /* match height  searchtype_wrapper */
    background:white;
}

#small #recipes_shared #search_saved_searches.doubleheight{
    padding-top:92px;  /* match height  searchtype_wrapper doubleheight */
}

#not_small #search_saved_searches{
	background: #FFFFFF;
	clear: both;
	overflow: hidden;
	border: 1px solid #DBDBBD;
	margin-top: 3px;
	position: absolute;
	top: 42px;
	left: 0;
	width:300px; /* reset in js */
	z-index:100;
    padding-bottom:5px;
    text-align:left;
    box-sizing: border-box;
	
	 max-height:400px;  /* reset in js */
    overflow-y:auto;
    overflow-x:hidden;
}

#not_small #search_saved_searches .ss_wrapper, #small #search_saved_searches .ss_wrapper{
    border-bottom: dotted 1px gray;
    overflow: hidden;
    display: table;
    table-layout: fixed;
}
#not_small #search_saved_searches .ss_row,  #small #search_saved_searches .ss_row{
  display: table-row;
    width: 100%;
}
#not_small #search_saved_searches .ss_cell,  #small #search_saved_searches .ss_cell{
    display: table-cell;
}

#not_small #search_saved_searches .ss_saved_search_option, #small #search_saved_searches .ss_saved_search_option{
    display: table-cell;
    width: 99%;
    word-break: break-word;
}

#not_small #search_saved_searches .ss_str, #small #search_saved_searches .ss_str{
    line-height:var(--lh22);
    padding:9px 0;
    padding-left:10px;
    cursor:pointer;
}
#not_small #not_mob #search_saved_searches .ss_str:hover{
    background:#f4f4f4;
}

#not_small #search_saved_searches .ss_delete, #small #search_saved_searches .ss_delete{
    width:46px;
    height:36px;
    line-height:var(--lh36);
    text-align:center;
}
#not_small #not_mob #search_saved_searches .ss_delete:hover{
    color:red;
    cursor:pointer;
}

#not_small #recipes .next_prev_bottom_page{
    margin-right: 15px;
    padding-top: 15px;
    padding-bottom: 10px;
    text-align:center;
}


#not_small #recipes .next_prev_top_page{
   margin-left:10px;font-size:var(--f14);float:left;
}

#not_small #recipes .next_prev_top_page .previous_page, #not_small #recipes .next_prev_top_page .next_page{
  color:black;text-decoration:none;
}

#not_small #recipes .next_prev_top_page .previous_page:hover, #not_small #recipes .next_prev_top_page .next_page:hover{
  text-decoration:underline;
}

#small #recipes .content{overflow:hidden}


#small #recipes .recipe_count_msg{margin: 10px 0 4px 6px;color:#1f1f1f;font-size:var(--f14);float:left;}
#small #recipes #no_copied_recipes_yet{font-weight:normal;color:black;margin:10px;} 
#small #recipes #no_copied_recipes_yet a{font-weight:bold;color:#a70839;} 


#small #recipes .next_prev_bottom_page{padding-top:10px;padding-bottom:10px}

   
#small #recipes .single_recipe, #small #recipes_shared .single_recipe{
    overflow:hidden;
   margin:5px 3px 5px 3px;
   width:152px;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25);
    display: inline-block;  
   background:white;    
}

#small #recipes .single_recipe.clicked, #small #recipes_shared .single_recipe.clicked {
    box-shadow: 5px 6px 6px 0px rgba(0, 0, 0, 0.35);
}

#small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image {
    display: block;
    width: 152px;
    height: 122px;
    margin-top:0px;
    background-position: center center;
    background-size: cover;
}

#small #recipes .single_recipe .recipe_title, 
#small #recipes_shared .single_recipe .recipe_title{
    text-align:center;
    font-size:var(--f14);
    line-height:var(--lh21);
    height:42px; /* show two lines */
	/* js set_recipes_title_height() sets height to 3x computed line-height if device font size is above certain size */
    overflow: hidden;
    padding:5px 2px 0px 2px;
    font-weight:bold;
}

#small.font110plus #recipes .single_recipe .recipe_title, 
#small.font110plus #recipes_shared .single_recipe .recipe_title{
    height:46.2px;
	/* see note for 130 below */
}

#small.font120plus #recipes .single_recipe .recipe_title, 
#small.font120plus #recipes_shared .single_recipe .recipe_title{
    height:50.4px;
	/* see note for 130 below */
}

#small.font130plus #recipes .single_recipe .recipe_title, 
#small.font130plus #recipes_shared .single_recipe .recipe_title{
    line-height:var(--lh19); /* converted 21 becomes too much */
    height:74.1px; /* 3 lines of converted lh19 */
	/* js set_recipes_title_height() also sets height. That way works for all sizes...
	*/
	/* can't use calc because won't wrk for android height:calc(var(--lh19)* 3); */
}

#small.font150plus #recipes .single_recipe .recipe_title, 
#small.font150plus #recipes_shared .single_recipe .recipe_title{
    line-height:var(--lh19);
    height:85.5px;
	/* see note for 130 above */
}

#small #recipes .single_recipe .recipe_title_a,
#small #recipes_shared .single_recipe .recipe_title_a{
    display: inline-block;
    text-decoration:none; 
    box-sizing:border-box;
    color:rgb(72, 72, 72);
    width:100%;
 }
 
 /*
4 med: 736-     (736 iphone 6+ L)                       170 margin: 5px 6px 5px  6px; (4 small might be better, then fits 2 in height on 6+)
4 small: 667-   (667 iphone 6 L)                         152 margin: 5px 6px 5px 6px;  (could also fit 3 med/large)
3 med: 568-     (568 iphone 5 L 640 popular android L)   170 margin: 5px 6px 5px 6px;        
3 small: 480-   (480 iphone 4 L)                         152 margin:5px 3px 5px 3px;

2 large: 414-   (414 iphone 6+)                          190 margin: 5px 6px 5px 6px;
2 medium  375-  (375 iphone 6, 384 nexus 4)              170 margin: 5px 6px 5px 6px;
2 medium: 360-  (360 popular android )                   170 margin:5px 3px 5px 3px;
2 small: 320-   (320 iphone 4/5)                         152 margin:5px 3px 5px 3px;
Pixel is 376, Pixel 2 is 411
*/

#small #recipes .single_recipe, #small #recipes_shared .single_recipe{
    width:152px;
    margin:5px 3px 5px 3px;
}
#small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image{
    width: 152px;
    height: 122px;
}
    
@media only screen and (min-width : 360px) 
{ 
   #small #recipes .single_recipe, #small #recipes_shared .single_recipe{
        width:170px;
        margin:5px 3px 5px 3px;
    }
   #small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image{
        width: 170px;
        height: 136px;
    }
}

@media only screen and (min-width : 375px) 
{ 
   #small #recipes .single_recipe, #small #recipes_shared .single_recipe{
        width:170px;
        margin: 5px 6px 5px 6px;
    }
   #small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image{
        width: 170px;
        height: 136px;
    }
}

@media only screen and (min-width : 411px) /* iphone 6+, Google Pixel 2, Nexus 6 */
{ 
   #small #recipes .single_recipe, #small #recipes_shared .single_recipe{
        width:190px;
        margin: 5px 6px 5px 6px;
    }
   #small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image{
        width: 190px;
        height: 155px;
    }
}

@media only screen and (min-width : 480px) 
{ 
   #small #recipes .single_recipe, #small #recipes_shared .single_recipe{
        width:152px;
        margin:5px 3px 5px 3px;
    }
   #small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image{
        width: 152px;
        height: 122px;
    }
}

@media only screen and (min-width : 568px) 
{ 
   #small #recipes .single_recipe, #small #recipes_shared .single_recipe{
        width:170px;
        margin: 5px 6px 5px 6px;
    }
   #small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image{
        width: 170px;
        height: 136px;
    }
}

@media only screen and (min-width : 667px) 
{ 
   #small #recipes .single_recipe, #small #recipes_shared .single_recipe{
        width:152px;
        margin: 5px 6px 5px 6px;
    }
   #small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image{
        width: 152px;
        height: 122px;
    }
}

@media only screen and (min-width : 732px)  /* landscape iphone 6+, Google Pixel?, Nexus 6 */
{ 
   #small #recipes .single_recipe, #small #recipes_shared .single_recipe{
        width:170px;
        margin: 5px 6px 5px 6px;
    }
   #small #recipes .single_recipe .recipe_image, #small #recipes_shared .single_recipe .recipe_image{
        width: 170px;
        height: 136px;
    }
}

#small #recipes .single_recipe .star{float:left; margin-right:3px;height:16px;width:16px; cursor:pointer;
}

#small #recipes .single_recipe .starred{
 /*uses sprite sheet sprite_sheet_for_star_only */
   background-position:-262px -2px;
}

#small #recipes .single_recipe .orig_recipe_link, 
#small #recipes_shared .single_recipe .orig_recipe_link{
    margin-top:5px; margin-bottom:2px;
    font-size:var(--f12);
    text-align:center; 
    line-height:var(--lh15);
    min-height: 15px;
    overflow: hidden;
    white-space: nowrap;
    margin-right:2px;
    margin-left:2px;
    text-decoration:none;
    padding-bottom:1px;
    text-decoration:none;
    
    } 
#small #recipes .single_recipe .orig_recipe_link_a, 
#small #recipes_shared .single_recipe .orig_recipe_link_a{
    text-decoration:none;color:gray;}

#small #recipes .single_recipe .orig_recipe_link_clicked, 
#small #recipes_shared .single_recipe .orig_recipe_link_clicked{
    background:#A80739;
    color:white;
    text-decoration:none;
} 
    
#not_small #recipes .single_recipe .small_menu_items, 
#not_small #recipes_shared .single_recipe .small_menu_items{
  width: 100%;
  height: 25px;
  margin-top: 6px;
  position:relative;
}

#not_small #recipes .single_recipe .additional-ico,  
#not_small #recipes_shared .single_recipe .additional-ico{
float: left;
overflow:auto;
text-align: left;
padding-left: 2%;
}

#not_small #recipes .single_recipe .stars-ico,  
#not_small #recipes_shared .single_recipe .stars-ico{
float: right;
overflow:auto;
text-align: right;
padding-right: 2%;
}

 #not_small #recipes_shared .single_tag {
    display: inline-block;
    cursor: pointer;
    background: #fff;
    width: 182px;
    margin: 0 5px 14px;
    position: relative;
    -webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,.25);
    -moz-box-shadow: 0 1px 6px 0 rgba(0,0,0,.25);
    box-shadow: 0 1px 6px 0 rgba(0,0,0,.25);
    text-align: center;
}

#not_small #not_mob #recipes_shared .single_tag:hover{
    -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:    0px 1px 6px 0px rgba(0, 0, 0, 0.6);
    box-shadow:         0px 1px 6px 0px rgba(0, 0, 0, 0.6);
}

 #not_small #recipes_shared .single_tag .tag_name{
    overflow: hidden;
    font-size:var(--f17);
    font-weight: 400;
    color: #000;
    text-decoration: None;
    text-align: center;
    max-height:42px;
    min-height:42px;
    line-height:var(--lh21);
    box-sizing: border-box;
    width: 100%;
}
 #not_small #recipes_shared .single_tag .tag_count{
    overflow: hidden;
    font-size:var(--f14);
    font-weight: 400;
    color: gray;
    text-decoration: None;
    text-align: center;
    padding:10px 3px;
    line-height:0;
    width: 100%;
     box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow:hidden;
}

 #not_small #recipes_shared .single_tag .tag_images{
    margin-top:6px;
    height:92px;
    text-decoration: none;
    font-size:0; /* font and line-height 0 removes space between inline images*/
     line-height:0;
}

 #not_small #recipes_shared .single_tag .tag_thumbnail{
    display: inline-block;
    background-position: center center;
    background-size: cover;
    margin:2px 1px;
}

#not_small #not_mob #recipes_shared .single_tag {
   width: 180px;
   margin: 0 4px 14px;
}
#not_small #not_mob #recipes_shared .single_tag .tag_thumbnail{
    height: 82px;
    width: 56px;
}  

#not_small #mob #recipes_shared .single_tag {
   width: 180px;
   margin: 0 4px 14px;
}
#not_small #mob #recipes_shared .single_tag .tag_thumbnail{
    height: 82px;
    width: 56px;
}  
    
@media only screen and (max-width : 760px) 
{ 
   #not_small #mob #recipes_shared .single_tag {
       width: 180px;
       margin: 0 4px 14px;
   }
 #not_small #mob #recipes_shared .single_tag .tag_thumbnail{
        height: 82px;
        width: 56px;
    }  
}

@media screen and (min-width : 601px) and (max-width: 602px){
    /* Kindle HD 8 is 601. For some reason needed to say 601, at least in emulator*/
  #not_small #mob #recipes_shared .single_tag{
       width: 186px;
       margin: 0px 6px 14px 6px;
    }
   #not_small #mob #recipes_shared .single_tag .tag_thumbnail{
        height: 82px;
        width: 58px;
    }  
}

@media screen and (min-width: 800px) and (max-width: 849px){
   #not_small #mob #recipes_shared .single_tag {
       width: 186px;
       margin: 0px 6px 14px 6px;
   }
 #not_small #mob #recipes_shared .single_tag .tag_thumbnail{
        height: 82px;
        width: 58px;
    }  
}

@media screen and (min-width : 850px) and (max-width : 1000px) 
{ 
  #not_small #mob #recipes_shared .single_tag{
       width: 194px;
       margin: 0px 6px 14px 6px;
    }
   #not_small #mob #recipes_shared .single_tag .tag_thumbnail{
        height: 82px;
        width: 60px;
    }  
}

@media screen and (min-width : 961px) and (max-width: 963px){
    /* Kindle HD 8 landscape width is 962. For some reason needs 1px bigger, at least in emulator */
  #not_small #mob #recipes_shared .single_tag{
       width: 180px;
       margin: 0px 4px 14px 4px;
    }
   #not_small #mob #recipes_shared .single_tag .tag_thumbnail{
        height: 82px;
        width: 56px;
    }  
}


#small #recipes_shared .single_tag{
    overflow:hidden;
   margin:5px 3px 5px 3px;
   width:152px;
  box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25);
    display: inline-block;  
   background:white;   
 margin:5px 3px 5px 3px;   
}

 #small #recipes_shared .single_tag .tag_name{
    overflow: hidden;
    font-size:var(--f17);
    font-weight: 400;
    color: #000;
    text-decoration: None;
    display: inline-block;
    text-align: center;
      max-height:36px;
    min-height:36px;
    line-height:var(--lh18);
    box-sizing: border-box;
    margin-top:10px;
    width: 100%;
}
 #small #recipes_shared .single_tag .tag_count{
    overflow: hidden;
    font-size:var(--f14);
    font-weight: 400;
    color: gray;
    text-decoration: None;
    display: inline-block;
    text-align: center;
    padding:10px 3px;
    line-height:0;
     width: 100%;
     box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow:hidden;
}

 #small #recipes_shared .single_tag .tag_images{
    margin-top:4px;
    font-size:0; /* font and line-height 0 removes space between inline images*/
     line-height:0;
     height: 71px; /* same as .single_tag .tag_thumbnail in case no images */
}

#small #recipes_shared .single_tag .tag_thumbnail{
    display: inline-block;
    background-position: center center;
    background-size: cover;
    margin:1px 1px;
    height: 71px;
    width: 46px;
}
    
@media only screen and (min-width : 360px) 
{ 
   #small #recipes_shared .single_tag{
        width:170px;
        margin:5px 3px 5px 3px;
    }
  #small #recipes_shared .single_tag .tag_thumbnail{
        height: 81px;
        width: 53px;
    }
    #small #recipes_shared .single_tag .tag_images{
            height: 81px;
    }
}

@media only screen and (min-width : 375px) 
{ 
   #small #recipes_shared .single_tag{
        width:170px; 
        margin: 5px 6px 5px 6px;
    }
   #small #recipes_shared .single_tag .tag_thumbnail{
        height: 81px;
        width: 54px;
    }
    #small #recipes_shared .single_tag .tag_images{
            height: 81px;
    }
}

@media only screen and (min-width : 411px) /* iphone 6+, Google Pixel 2, Nexus 6 */
{ 
   #small #recipes_shared .single_tag{
        width:190px;
        margin: 5px 6px 5px 6px;
    }
  #small #recipes_shared .single_tag .tag_thumbnail{
        height: 91px;
        width: 60px;
    }
    #small #recipes_shared .single_tag .tag_images{
            height: 91px;
    }
}

@media only screen and (min-width : 480px) 
{ 
   #small #recipes_shared .single_tag{
        width:152px;
        margin:5px 3px 5px 3px;
    }
   #small #recipes_shared .single_tag .tag_thumbnail{
        height: 71px;
        width: 48px;
    }
    #small #recipes_shared .single_tag .tag_images{
            height: 71px;
    }
}

@media only screen and (min-width : 568px) 
{ 
  #small #recipes_shared .single_tag{
        width:170px;
        margin: 5px 6px 5px 6px;
    }
  #small #recipes_shared .single_tag .tag_thumbnail{
        height: 81px;
        width: 54px;
    }
    #small #recipes_shared .single_tag .tag_images{
            height: 81px;
    }
}

@media only screen and (min-width : 667px) 
{ 
   #small #recipes_shared .single_tag{
        width:152px;
        margin: 5px 6px 5px 6px;
    }
   #small #recipes_shared .single_tag .tag_thumbnail{
        height: 71px;
        width: 48px;
    }
    #small #recipes_shared .single_tag .tag_images{
            height: 71px;
    }
}

@media only screen and (min-width : 732px)  /* landscape iphone 6+, Google Pixel?, Nexus 6 */
{ 
   #small #recipes_shared .single_tag{
        width:170px;
        margin: 5px 6px 5px 6px;
    }
  #small #recipes_shared .single_tag .tag_thumbnail{
        height: 81px;
        width: 54px;
    }
    #small #recipes_shared .single_tag .tag_images{
            height: 81px;
    }
}

/* RELATED TO MY RECIPES LIST VIEW */

#small #recipes .results_page_set table{
    border-collapse: collapse;
    table-layout: fixed;
    white-space: normal;
    word-wrap: break-word;
    border-spacing: 0;
    width: 100%;
}

#small #recipes .results_page_set td, 
#small #recipes .results_page_set tr {
   padding:0; 
   margin:0;
   vertical-align:top;
}

#not_small #fixed_recipes_header{
    height:30px; /* must match set_menu_multi_options_topfix(), set_recipes_fixed_header_height(), #recipes_column_top.fixed */
    background:#A80739;
    position:fixed;
    top:0;
    left:0;
    z-index:4;
    cursor:pointer;
    /* width set in js.  */
  }

#recipes #recipes_column_top{
    height:46px;
    /* wraps actions related to multi-update*/
   background:#eef2f4;
 }
 
#recipes #recipes_column_top.fixed{
    position: fixed; /**/
    top: 30px; /* height of fixed_recipes_header. */
    z-index: 10000; /* tine set this correctly */
    box-sizing: border-box;
    /* left and width set in js */
    /* padding-left set in js*/
}

.recipes_multiupdate_div #multiupdate_menu{
    float:left;
	text-align:center;
}

#small .recipes_multiupdate_div #multiupdate_menu{
    background:white;
    width:100%;
    padding-top:5px;
	background:#CC0C47;
	border-radius: 4px;
}

#not_small .recipes_multiupdate_div{
}

#small #recipes .recipes_multiupdate_div{
    position:fixed;
	z-index:900;
	top: 54px;
    width:124px;
	right:60px;
}

#small.font120plus #recipes .recipes_multiupdate_div{
    width:130px;
}

#small.font130plus #recipes .recipes_multiupdate_div{
    width:136px;
}

#not_small .recipes_multiupdate_div.fixed{
	position: fixed;
    top: 30px;
    z-index: 10000;
    box-sizing: border-box;
     background: #eef2f4;
}

#not_small .recipes_multiupdate_div #check_all_none_wrapper.cb_div {
    float: left;
    border: 1px solid #D0CFCF;
    padding: 4px;
    border-radius: 2px;
    margin-left: 18px;
    margin-top: 8px;
}

#small .recipes_multiupdate_div #check_all_none_wrapper.cb_div {
    position: fixed;
    right: 11px;
    top: 54px;
	border: 1px solid gray;
    padding: 4px;
    border-radius: 2px;
}

#small .recipes_multiupdate_div #check_all_none_wrapper.cb_div .icon_extender{
    position: absolute;
    height: 46px;
    width: 52px;
    top: -5px;
    right: -15px;
}

#not_small .recipes_multiupdate_div #multiupdate_menu .menu_option{
    float:left;
    height:46px;
    line-height:var(--lh46);
    margin-left:8px;
    font-size:var(--f15);
 }

#small .recipes_multiupdate_div #multiupdate_menu .menu_option{
	 margin-top: 12px;
    font-size:var(--f15);
    width: 104px;
    margin-left: 10px;
 }
 
 #small.font120plus .recipes_multiupdate_div #multiupdate_menu .menu_option{
    width:110px;
 }
 
 #small.font130plus .recipes_multiupdate_div #multiupdate_menu .menu_option{
    width:116px;
	font-size:var(--f13);
 }
 
 #small .recipes_multiupdate_div #multiupdate_menu .menu_option_cancel{
	color: white;
    font-weight: bold;
    text-decoration: underline;
    font-size:var(--f15);
    height: 46px;
    line-height:var(--lh46);
    padding: 22px 0px;
    line-height:0;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
 }
 
#small.font130plus .recipes_multiupdate_div #multiupdate_menu .menu_option_cancel{
	 font-size:var(--f13);
}

 #small .recipes_multiupdate_div #multiupdate_menu .menu_option #multi_delete_recipes_confirm{
     position:absolute;
     height:100%;
     width:100%;
     top:0;
     left:0;
 }
 
 #not_small .recipes_multiupdate_div #multiupdate_menu .menu_option #multi_delete_recipes_confirm{
     position:absolute;
     height:100%;
     width:150px;
     top:0;
     left:0;
 }
 
  
 #not_small .recipes_multiupdate_div #multiupdate_menu .menu_option_inner,
 #not_small .recipes_multiupdate_div #multiupdate_menu #delete_confirm_inner{
    padding:17px 7px;
    line-height:0;
    margin-top: 5px;
    border: solid #d2d2d2 1px;
    border-radius: 4px;
    cursor:pointer;
    background:white;
    min-width: 60px; 
    max-width:106px;
    box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
    overflow: hidden;
 }
 
 #small .recipes_multiupdate_div #multiupdate_menu .menu_option_inner,
 #small .recipes_multiupdate_div #multiupdate_menu #delete_confirm_inner{
    padding:22px 0px;
	 line-height:0;
    border-radius: 4px;
    cursor:pointer;
    background:white;
    box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
    overflow: hidden;
	text-align:center;
 }

 #small .recipes_multiupdate_div #multiupdate_menu #delete_confirm_inner{
    background: #881539;
    color:white;
 }

#not_small .recipes_multiupdate_div #multiupdate_menu #delete_confirm_inner{
    background: #cc0c47;
    color:white;
 }
 
 #not_small .recipes_multiupdate_div #multiupdate_menu #multi_delete_recipes_confirm.clicked #delete_confirm_inner,
 #small .recipes_multiupdate_div #multiupdate_menu #multi_delete_recipes_confirm.clicked #delete_confirm_inner{
    background: gray;
    color:white;
 }

 
#not_small #not_mob .recipes_multiupdate_div #multiupdate_menu .menu_option:not(.inactive):hover .menu_option_inner{
    border: solid black 1px;
 }
 
#not_small .recipes_multiupdate_div #multiupdate_menu .menu_option.clicked .menu_option_inner,
#small .recipes_multiupdate_div #multiupdate_menu .menu_option.clicked .menu_option_inner{
     color:#A80739;
 }
 
 
#not_small .recipes_multiupdate_div #multiupdate_menu .menu_option.inactive .menu_option_inner,
#small .recipes_multiupdate_div #multiupdate_menu .menu_option.inactive .menu_option_inner {
     cursor:default;
     color:gray;
 }

#not_small .recipes_multiupdate_div #multiupdate_menu #multiupdate_more_menu{
    position: absolute;
    background: #eef2f4;
    right: 0;
    width: 110px;
    padding-left: 3px;
    z-index: 2;
    border: #e4dfdf 1px solid;
    border-top: none;
 }

@media screen and (max-width : 700px){
   #not_small #mob .recipes_multiupdate_div #multiupdate_menu #multioption_wide{
        display:none;
    }
   #not_small #mob .recipes_multiupdate_div #multiupdate_menu #multioption_narrow{
        float:left;
    }
    #not_small #mob .recipes_multiupdate_div #multiupdate_menu .menu_option_inner{
        xxpadding: 17px 0px;
     }
}

@media screen and (min-width : 701px){
   #mob .recipes_multiupdate_div #multiupdate_menu #multioption_wide{
        float:left;
    }
   #mob .recipes_multiupdate_div #multiupdate_menu #multioption_narrow{
        display:none;
    }
}

@media screen and (max-width : 660px){
   #not_small #not_mob .recipes_multiupdate_div #multiupdate_menu .menu_option_inner{
        padding: 0 4px;
     }   
   #not_small #not_mob .recipes_multiupdate_div #multiupdate_menu .menu_option{
        margin-left:4px;
     }
}

@media screen and (max-width : 799px){
    /* diffferent split for non_mob than mob because vertical search bar is wider on non_mob*/
   #not_small #not_mob .recipes_multiupdate_div #multiupdate_menu #multioption_wide{
        display:none;
    }
   #not_small #not_mob .recipes_multiupdate_div #multiupdate_menu #multioption_narrow{
        float:left;
    }
}

@media screen and (min-width : 800px){
   #not_mob .recipes_multiupdate_div #multiupdate_menu #multioption_wide{
        float:left;
    }
   #not_mob .recipes_multiupdate_div #multiupdate_menu #multioption_narrow{
        display:none;
    }
}


#not_small .tags_menu.not_small_popup_menu{
    width:382px;   /* same as for 2 column */
    text-align:left;
     box-sizing:border-box;
    padding-bottom:0;
    text-align:left;
    left: 50%;
   margin-left: -178px;
 }
 
#not_small #multiupdate_tag_menu.tags_menu{
    top:75px;
}
 
#not_small .tags_menu.two_column_tags{
    width:362px; /*  (166+margin 10)*2 + 10 tag_menu_inner padding */
    /* never a scrollbar because if has one, will switch to 3 columns */
    margin-left: -181px;
 }
 
 #not_small .tags_menu.three_column_tags{
    width:558px; /*  (166+margin 10)*3 + 10 tag_menu_inner padding + 20px for scrollbar */
    margin-left: -279px;
 }
 
 #not_small #mob .tags_menu.three_column_tags{
    width:538px; /* no scroll bar width on mobile */
    margin-left: -264px;
 }
 
#not_small .tags_menu .tag_menu_inner {
    padding: 5px 0px 25px 10px; /* right space comes from .cb_tag margin-right*/
    max-height: 810px; /* changed in js */
    overflow-y: auto;
    box-sizing:border-box;
}

#not_small .tags_menu.two_column_tags .tag_menu_inner {
    overflow-y: hidden; /* if needs overflow, switches to 3 columns */
}

#small .tags_menu {
    /* scroll is on inner instead. is this necessary to set? */
   overflow-y: hidden;
   text-align:left;
}

#xsmall .tags_menu .menu_label{
   max-width:130px;
}

@media screen and (min-width : 360px){
    #xsmall .tags_menu .menu_label{
	   max-width:164px;
	}
}

#small .tags_menu .tag_menu_inner {
    /* inner scrolling so close and save buttons stay on top */
    overflow-y: auto;
    padding: 5px 10px 25px 10px; 
    box-sizing:border-box;
    /* height set in js */
}

 #not_small .tags_menu.two_column_tags .cb_tag,
 #not_small .tags_menu.three_column_tags .cb_tag{
   float:left;
   width:164px; 
}

.tags_menu #newtag_div{
    margin:5px 0;
    overflow:hidden;
 }
 
 .tags_menu #newtaginput{
    width: 160px;
    box-sizing: border-box;
    border: solid gray 1px;
    margin: 0 0 0 0;
    height: 36px;
    line-height:var(--lh36);
    padding: 0 2px;
    float:left;
	font-size:var(--f16);
}

 #small.font130plus .tags_menu #newtaginput{
	 font-size:var(--f14);
}

 #small .tags_menu #newtaginput{
    width: 150px;
}

@media screen and (min-width : 360px){
    #small .tags_menu #newtaginput{
        width: 180px;
    }
}


 .tags_menu #newtag_trigger{
    text-align:center;
    height: 36px;
    line-height:var(--lh36);
    box-sizing: border-box;
    border: 1px gray solid;
    border-radius:4px;
     float:left;
     margin-left:10px;
     padding:0 5px;
     cursor:pointer;
 }
 
 .tags_menu #newtag_submit,
 .tags_menu #newtag_ok,
 .tags_menu #newtag_button_next{
    text-align: center;
    border: 1px gray solid;
	/* border adds extra height, even with border-box, if padding takes up the full height */
    border-radius: 4px;
    float: left;
    margin-left: 10px;
    cursor: pointer;
    height: 34px;
    line-height:0;
    padding: 17px 0px;
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box; 
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
 }
 
 .tags_menu #newtag_submit.clicked,
  .tags_menu #newtag_button_next.clicked{
   color:#A80739;
 }
 
.tags_menu #newtag_submit.disabled,
  .tags_menu #newtag_button_next.disabled{
   color:lightgray;
   border: 1px lightgray solid;
 }
 
 .tags_menu #newtag_submit.hidden,
.tags_menu #newtag_button_next.hidden{
    display: none;
 }
 
 .tags_menu .cb_tag.cb_div{
	border-bottom: 1px #cdcdcd dotted;
    margin-right:10px; 
	padding:10px 0 8px 0;
	/* if change margin or padding right/left, also update js where calculate cb_width for tag menu column view */
 }
 
  .tags_menu #archive_recipe.cb_div{
	  background:aliceblue;
	  padding-right: 10px;
	 display: inline-block;
  }
  
  .tags_menu #archive_recipe.has_all .is_not_archived{
     display:none;
}

.tags_menu #archive_recipe.has_some .is_archived{
     display:none;
}

.tags_menu #archive_recipe.has_none .is_archived{
     display:none;
}

.tags_menu #trigger_archive_info div{
     display: inline-block;
     height: 20px;
    line-height:var(--lh20);
    width: 20px;
    border-radius: 20px;
    text-align: center;
    color: #505050;
    border: 1px solid #dbdbdb;
}

.tags_menu #archive_info{
     margin-left: 12px;
    margin-right: 12px;
    background: #ffffc9;
    margin-top: 10px;
    padding-right: 10px;
    max-width: 500px;
}

.tags_menu.two_column_tags .cb_tag{
    float:left;
    /* width set in js */
}
 
 .tags_menu .cb_tag.not_a_match{
   display:none;
 }
 

.recipes_multiupdate_div #listview_cookbook_picker_div{
    position:absolute;
    font-size:var(--f15);
    z-index:100;
    padding:6px;
    border-radius:3px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.48);
    background: white;
    border: solid 2px #eeeeee;
    min-width: 140px;
    text-align: left;
    line-height:var(--lh26); /* msg if must edit */
    top:45px;
    right:5px;
} 

.recipes_multiupdate_div #listview_cookbook_picker_div .cb_project_name_can_add, 
.recipes_multiupdate_div #listview_cookbook_picker_div .cb_project_name_added{
    border: solid 1px gray;
    padding: 5px;
    min-height: 26px;
    line-height:var(--lh26);
    margin: 3px 0;
    border-radius: 3px;
    overflow:hidden;
} 

.recipes_multiupdate_div #listview_cookbook_picker_div .cb_project_name_can_add:hover{
    background:#eeeeee;
    cursor: pointer;
} 

.recipes_multiupdate_div #listview_cookbook_picker_div .cb_project_name_can_add .is_added{
    display:none;
} 

.recipes_multiupdate_div #listview_cookbook_picker_div .cb_project_name_added .is_added{
    display:inline-block;
}    

#not_small .menu_with_mp_quickview
/* recipe and recipes */
{
     /* for recipes: top set in js  */
	 /* for recipe: top set below here */
    background-color: #A80739;
    padding: 15px 10px 5px 10px;
    text-align: left;
    width:600px;
    height: 410px;
    border-radius: 3px;
    margin-left:-310px; /* half width + padding*/
    left:50%;
}

#not_small #not_mob .menu_with_mp_quickview
	{
		width:630px;
		margin-left:-325px; /* half width + padding*/
		left:50%;
	}

@media only screen and (min-width : 680px)  {
	#not_small .menu_with_mp_quickview
	{
		width:630px;
		margin-left:-325px; /* half width + padding*/
		left:50%;
	}
}

#small .menu_with_mp_quickview{
   background-color:#A80739;
  padding:0px 0px 5px 0px;
}

#not_small #recipe .menu_with_mp_quickview
{
    position: fixed;
    top: 140px;
    left: 50%;
	margin-left:-305px;
}

@media only screen and (max-width : 619px) 
{ 
   #not_small #mob .menu_with_mp_quickview{
            width:560px;
            margin-left:-290px; /* half width + padding*/
    }
   #not_small #mob .menu_with_mp_quickview #mp_quickview{
       width:260px;
    }
}

#small .menu_with_mp_quickview .mp_datepicker_cancel{
    min-width: 80px;
    margin-right: 10px;
    float: right;
    box-sizing: border-box;
    margin-top: 4px;
    text-align: center;
    font-size:var(--f16);
    font-weight: bold;
    cursor:pointer;
	height: 40px;
    line-height:0;
    padding: 20px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

#small .menu_with_mp_quickview #mp_menu_not_premium{
	padding: 20px;
	color:white;
}

#not_small .menu_with_mp_quickview #mp_menu_not_premium{
	padding: 20px;
	float: left; 
	width: 260px;
	color:white;
}

#not_small .menu_with_mp_quickview #mp_menu_not_premium a{
	padding: 20px;
	 color:white;
	 display: block;
}

#small .menu_with_mp_quickview #mp_menu_not_premium a{
   color:white;
}

#not_small .menu_with_mp_quickview .mp_menu_chooser_div{
   float:left;
}

#small .menu_with_mp_quickview .mp_menu_chooser_div{
  padding-top:15px;
}


.menu_with_mp_quickview .mp_menu_cant_add_div{
   color:white;
   padding:20px;
}

#not_small .menu_with_mp_quickview .mp_menu_cant_add_div{
   width:240px;
   float:left;
}

.menu_with_mp_quickview .recipe_mp_add_to_queue
{
    text-align:center;
    background:rgb(247, 247, 247);
    border:rgb(170, 170, 170) solid 1px;
	/* border adds extra height, even with border-box, if padding takes up the full height */
    border-radius:4px;
    font-weight:bold;
    cursor:pointer;
   width:281px;
    margin: 0 auto;
	/* if make taller, check that calendar doesn't get pushed below its section, also with Android large font.*/
	height: 36px;
    line-height:0;
    padding: 18px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

#not_small .menu_with_mp_quickview .recipe_mp_add_to_queue
{
	font-size:var(--f14);
}

#small .menu_with_mp_quickview .recipe_mp_add_to_queue
{
	font-size:var(--f16);
}

.menu_with_mp_quickview .recipe_mp_add_to_queue.inactive{
    color: #bdbdbd;
    cursor: default;
    background: #e2e2e2;
}

.menu_with_mp_quickview .recipe_mp_add_to_queue.clicked{
    background:#CC0C47; 
}
   
#small .menu_with_mp_quickview .mp_quickview_showmore{
   background: #f0b2c5;
   text-align:center;
}

#small .menu_with_mp_quickview .mp_quickview_showmore .text{
   display: inline-block;
    vertical-align: top;
    height: 40px;
    line-height:0;
    padding: 20px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}
#small .menu_with_mp_quickview .mp_quickview_showmore .ic_upchevron,
#small .menu_with_mp_quickview .mp_quickview_showmore .ic_downchevron{
   opacity: .6;
   height: 40px;
   width: 40px;
   display: inline-block;
}

#small .menu_with_mp_quickview .mp_quickview_showmore .showing_less_div,
#small .menu_with_mp_quickview .mp_quickview_showmore .showing_more_div{
    overflow: hidden;
    max-height: 40px;
}
    
#small .menu_with_mp_quickview .mp_quickview_showmore.showing_more .showing_less_div{
   display: none;
}

#small .menu_with_mp_quickview .mp_quickview_showmore.showing_less .showing_more_div{
   display:none;
}
 
 .menu_with_mp_quickview .mp_suggestions{
    background: white;
	/* width set in js */
	border-radius: 4px;
    overscroll-behavior-block: contain;
	padding-bottom: 15px;
    overflow: hidden;
    overflow-y: hidden;
	box-sizing: border-box;
}
#not_small .menu_with_mp_quickview .mp_suggestions{
   float:left;
   height: 405px;
   margin-right: 7px;
   padding: 0 5px; 
}

#small .menu_with_mp_quickview .mp_suggestions{
   /* small height set in js */
   padding: 0 15px; 
   margin: 1px 1px 2px 1px;
}

.menu_with_mp_quickview .mp_suggestions #mp_suggestions_top{
	 padding-bottom:10px;
 }

.menu_with_mp_quickview .mp_suggestions #mp_suggestions_bottom{
	 /* height set in js */
	overflow: hidden;
    overflow-y: auto;
	overscroll-behavior-block: contain;
 }

.menu_with_mp_quickview .mp_suggestions .cb_div{
	border-bottom: 1px solid lightgray;
	width: 100%;
    box-sizing: border-box;
	padding: 8px 5px 6px 3px;
}

#small .menu_with_mp_quickview .mp_suggestions #top_msg {
	padding: 10px 20px 10px 0px;
}

#not_small .menu_with_mp_quickview .mp_suggestions #top_msg {
	padding:10px 20px 10px 10px;
}

.menu_with_mp_quickview .mp_suggestions #submit_mp_suggestions,
.menu_with_mp_quickview .mp_suggestions #added_done_ok,
.menu_with_mp_quickview .mp_suggestions #submit_mp_unpair_suggestions
{
    border-radius: 3px;
    border: 1px gray solid;
    cursor: pointer;
    text-align: center;
    font-size:var(--f15);
	margin: 0 0 0 0px;
	height: 42px;
    line-height:0;
    padding: 21px 10px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

#small .menu_with_mp_quickview .mp_suggestions #submit_mp_suggestions
 {
	margin: 0 0 10px 0;
}

.menu_with_mp_quickview .mp_suggestions #submit_mp_unpair_suggestions
 {
	margin: 20px;
}

#not_small #not_mob .menu_with_mp_quickview .mp_suggestions #submit_mp_suggestions
{
	margin:0px 25px 10px 25px;
}

@media only screen and (min-width : 680px)  {
	#not_small .menu_with_mp_quickview .mp_suggestions #submit_mp_suggestions
	{
		margin:0px 25px 10px 25px;
	}
}

.menu_with_mp_quickview .mp_suggestions #submit_mp_suggestions.disabled,
.menu_with_mp_quickview .mp_suggestions #submit_mp_unpair_suggestions.disabled {
	color:darkgray;
	cursor: default;
}

.menu_with_mp_quickview .mp_suggestions #submit_mp_suggestions:not(.disabled):hover,
.menu_with_mp_quickview .mp_suggestions #submit_mp_unpair_suggestions:not(.disabled):hover{
	border-color:black;
}

.menu_with_mp_quickview .mp_suggestions #submit_mp_suggestions.clicked,
.menu_with_mp_quickview .mp_suggestions #submit_mp_unpair_suggestions.clicked
 {
	background:#CC0C47;
}
    
.menu_with_mp_quickview #mp_quickview{
   background: white;
    padding-bottom: 15px;
    text-align: left;
    overflow:hidden;
    overflow-y: scroll;
    text-align:center;
    z-index: 950;
}
   
#small .menu_with_mp_quickview #mp_quickview{
   border: 2px solid #A80739;
}


#not_small .menu_with_mp_quickview #mp_quickview{
    border-radius: 4px;
    margin-left: 2px;
    float:left;
   height:390px;
   width:306px;
   overscroll-behavior-block: contain;
}

@media only screen and (min-height : 650px) 
{ 
   #not_small .menu_with_mp_quickview{
		height:460px;
	}
	#not_small .menu_with_mp_quickview  .mp_suggestions{
		height:455px;
	}
	#not_small .menu_with_mp_quickview  #mp_quickview{
		height:440px;
	}
}

@media only screen and (min-height : 700px) 
{ 
   #not_small .menu_with_mp_quickview{
		height:510px;
	}
	#not_small .menu_with_mp_quickview  .mp_suggestions{
		height:505px;
	}
	#not_small .menu_with_mp_quickview  #mp_quickview{
		height:490px;
	}
}

@media only screen and (min-height : 1000px) 
{ 
    #not_small .menu_with_mp_quickview{
		height:610px;
	}
	#not_small .menu_with_mp_quickview  .mp_suggestions{
		height:605px;
	}
	#not_small .menu_with_mp_quickview  #mp_quickview{
		height:590px;
	}
}

#small .menu_with_mp_quickview .mp_quickview_datepicker{
  height:315px;
}

.menu_with_mp_quickview .ui-datepicker{
     margin:0 auto;
}

.menu_with_mp_quickview .or_line{
      text-align: center;
      border-bottom: 1px solid rgb(218, 218, 218);
      line-height:var(--lh2);
      margin: 20px auto 20px auto;
      width:281px;
    }
    
.menu_with_mp_quickview .or_line span{
          background: #A80739;
          padding: 0 10px;
          color: rgb(218, 218, 218);
}

 #not_small #multiupdate_done_msg, 
 #not_small #multiupdate_deleted_done_msg{
    line-height:var(--lh36);
    padding: 0 10px;
    line-height:var(--lh22);
    padding: 9px 10px;
    box-sizing: border-box;
    background: #FFFDE7;
    text-align: left;
    z-index: 1;
	min-width:200px;
	 /* width set in js */
	 /* top set in js */
    position: relative;
    margin: 0;
	 position: fixed;
	 min-width: 200px;
	 z-index: 900;
 }
 
#small #recipes #multiupdate_done_msg{
    margin-top: 4px;
    box-sizing: border-box;
    background: #FFFDE7;
    overflow: hidden;
	    text-align:center;
    padding: 0;
    height:auto;
    min-height: 36px;
     line-height:var(--lh26);
     padding-top: 3px;
	 z-index: 900;
    position: fixed;
    top: 44px;
    width: 100%;

 }
 
 #recipes #results_set.view_list,
  #recipes #results_set.view_taller_list
 {
    text-align:left;
}

#not_small #recipes #results_set.view_list
{
    font-family:arial;
}

 #not_small #recipes #results_set.view_list .results_page_set{
   margin-left:10px; /* space between vertical search and recipes */
   background:white;
    margin-right:10px; /* space to right of recipes */
 }
 
 #small #recipes #results_set.view_list .results_page_set,
  #small #recipes #results_set.view_taller_list .results_page_set
 {
   margin-left:5px; 
   background:white;
    margin-right:5px; 
 }

 
#recipes .recipe_border_bottom{
   height:0px;
   padding-top:2px;
   margin-bottom:2px;
   border-bottom:1px gray dotted;
}

#recipes .recipe_border_topfirst{
   height:0px;
   margin-bottom:2px;
}

#recipes .single_list_recipe .recipe_col {
    cursor:pointer;
 }


 #recipes .single_list_recipe .recipe_cb, 
 #recipes .single_list_recipe .recipe_cb .col_width {
    width: 47px;
}

 #small #recipes .single_list_recipe .recipe_cb, 
 #small #recipes .single_list_recipe .recipe_cb .col_width {
    width: 30px;
}

#not_small #recipes .single_list_recipe .recipe_cb .cb_div {
   height:100%;
   margin-left: 12px;
}

#small #recipes .single_list_recipe .recipe_cb .cb_div {
   margin-left: 4px;
}

#small #recipes .single_list_recipe .recipe_cb .cb_div .cb_parent {
   margin-top: 10px;
}

#recipes .single_list_recipe .recipe_cb .cb_div .cb_parent{
   height:100%;
}

#not_small #recipes .single_list_recipe .col_spacer, 
#not_small #recipes .single_list_recipe .col_spacer div{
    width:3px;
    background:transparent;
    height:63px;
}

#small #recipes .single_list_recipe .col_spacer, 
#small #recipes .single_list_recipe .col_spacer div{
    width:3px;
    background:transparent;
    height:58px;
}

#small #recipes .view_taller_list .single_list_recipe .col_spacer, 
#small #recipes .view_taller_list .single_list_recipe .col_spacer div{
    height:118px;
}



#not_small #recipes .single_list_recipe .col_confirmed_indicator{
    height:63px;
    width:2px;
}

#not_small #recipes .single_list_recipe .col_confirmed_indicator div{
    width:2px;
    height:57px;
    margin-top:3px;
    margin-bottom:3px;
}

#small #recipes .single_list_recipe .col_confirmed_indicator{
    height:58px;
    width:2px;
}

#small #recipes .view_taller_list .single_list_recipe .col_confirmed_indicator{
    height:118px;
}

#small #recipes .single_list_recipe .col_confirmed_indicator div{
    width:2px;
    height:54px;
    margin-top:2px;
    margin-bottom:2px; /* also setting bottom helps prevent single recipe getter shorter if all tags are removed */
}

#small #recipes .view_taller_list .single_list_recipe .col_confirmed_indicator div{
    height:114px;
}

#recipes .single_list_recipe.unconfirmed .col_confirmed_indicator div{
    background:#CC0C47;
}

#recipes .single_list_recipe .recipe_cb .icon_extender {
    position: absolute;
    width: 56px;
    left: 0;
    bottom: 0;
    background: transparent;
    height: 100%;
}

#small #recipes .single_list_recipe .recipe_cb .icon_extender {
   right: 0;
    left: auto;
    height: 55px;
	top:0;
}

#small #recipes .view_taller_list .single_list_recipe .recipe_cb .icon_extender{
    height:115px;
}

#mob #recipes .single_list_recipe .recipe_cb .icon_extender {
    width:74px;
}

#recipes .single_list_recipe .recipe_orig_link_col, 
#recipes .single_list_recipe .recipe_orig_link_col .col_width {
    width: 48px;
}

#recipes .single_list_recipe .recipe_orig_link_col .col_overflow {
    overflow: hidden;
}

#recipes .single_list_recipe .recipe_orig_link_col .icon_extender {
    position: absolute;
    width: 48px;
    right: 0;
    bottom: 0;
    background: transparent;
    height: 100%;
}

#recipes .single_list_recipe.selected{
    background:#FFFDE7;
}

#not_small #recipes .single_list_recipe .recipe_thumb_list{
    float: left;
    margin: 0;
    background-position: center center;
    background-size: cover;
    width: 55px;
    height: 55px;
    margin-top: 4px;
    margin-bottom: 4px;
 }
 
#small #recipes .single_list_recipe .recipe_thumb_list{
    float: left;
    margin: 0;
    background-position: center center;
    background-size: cover;
    width: 52px;
    height: 52px;
        margin-top: 3px;
        margin-bottom:3px;
 }
 
 #small #recipes .view_taller_list .single_list_recipe .recipe_thumb_list{
    width: 116px;
    height: 116px;
 }
 
#not_small #recipes .single_list_recipe  td, 
#not_small #recipes .single_list_recipe .recipe_cb .col_overflow, 
#not_small #recipes .single_list_recipe .recipe_orig_link_col .col_overflow,
#not_small #recipes .single_list_recipe .recipe_info_left_margin_col div{
     height:61px;
 }

#recipes .single_list_recipe .recipe_info_col{
    width:99%;
}

#small #recipes .single_list_recipe .recipe_info_left_margin_col{
    width:4px;
}

#not_small #recipes .single_list_recipe .recipe_info_left_margin_col{
    width:7px;
}

#small #recipes .view_taller_list .single_list_recipe .recipe_info_left_margin_col{
    width:10px;
}
    
#not_small #recipes .single_list_recipe .image_col{
    width:53px;
     vertical-align: top;
}

#small #recipes .single_list_recipe .image_col{
    width:53px;
     vertical-align: top;
}

#small #recipes .view_taller_list .single_list_recipe .image_col{
    width:116px;
}

#not_small #recipes .single_list_recipe .recipe_title_div{
   min-height: 23px;
    line-height:var(--lh23);
    font-size:var(--f17);
    color: blue;
    color:#0000e6;
}

#not_small #recipes .single_list_recipe.clicked .recipe_title_div{
    color:#6a00e6;
}

#small #recipes .single_list_recipe.clicked .recipe_title_div{
    color:#450096;
}

#small #recipes .single_list_recipe .recipe_title_div{
   min-height: var(--lh17);
    line-height:var(--lh17);
    font-size:var(--f15);
    color: rgb(72, 72, 72);
    font-weight: bold;
    padding: 2px 2px 1px 0;
}

 #small #recipes .view_taller_list .single_list_recipe .recipe_title_div{
	  line-height:var(--lh20);
	min-height: var(--lh40);
    padding: 5px 2px 6px 0;
 }


#recipes .single_list_recipe .starred_wrapper,
#recipes .single_list_recipe .madeit_wrapper,
#recipes .single_list_recipe .rating_wrapper
{
   height: 20px;
    width: 18px;
    position: relative;
    float: left;
}

#not_small #recipes .single_list_recipe .rating_wrapper{
    width: auto;
	opacity:.7;
	padding-right: 2px;
	font-size:95%;
}
 
#small #recipes .single_list_recipe .starred_wrapper,
#small #recipes .single_list_recipe .madeit_wrapper,
#small #recipes .single_list_recipe .rating_wrapper{
   height: 17px;
    width: 17px;
}

#small #recipes .single_list_recipe .rating_wrapper{
    width: auto;
	text-align:left;
	padding-right: 2px;
}
 
#recipes .single_list_recipe .starred_wrapper .starred_image,
#recipes .single_list_recipe .madeit_wrapper .madeit_image{
    position: absolute;
    box-sizing: border-box;
    height: 15px;
    width: 15px;
    top: 3px;
    border: 1px solid white;
}

#small #recipes .single_list_recipe .starred_wrapper .starred_image{
    top: 3px;
}

#small #recipes .single_list_recipe .madeit_wrapper .madeit_image{
    top: 3px;
}

#small.font130plus #recipes .single_list_recipe .starred_wrapper,
#small.font130plus #recipes .single_list_recipe .madeit_wrapper{
    width: 19px;
}

#small.font130plus #recipes .single_list_recipe .starred_wrapper .starred_image,
#small.font130plus #recipes .single_list_recipe .madeit_wrapper .madeit_image{
    height: 18px;
    width: 18px;
}

#small.font130plus #recipes .single_list_recipe .starred_wrapper .starred_image{
    top: 3px;
}

#small.font130plus #recipes .single_list_recipe .madeit_wrapper .madeit_image{
    top: 4px;
}

#recipes .single_list_recipe .starred_wrapper .starred_image{
    background:#8d8d8d;
    background-image: url(https://cdn.copymethat.com/static/star_40_transparent.png); /* also preloaded */
    background-position: center center;
    background-size: cover;
}


#recipes .single_list_recipe .madeit_wrapper .madeit_image{
    background:#8d8d8d;
    background-image: url(https://cdn.copymethat.com/static/checkbox_28_checked_transparent.png); /* also preloaded */
    background-position: center center;
    background-size: cover;
}

#recipes .single_list_recipe .recipe_origsite_div{
   font-size:var(--f16);
   min-height:19px;
    line-height:var(--lh19);
   color: #4a4949;
   white-space: nowrap;
}

#small #recipes .single_list_recipe .recipe_origsite_div{
    font-size:var(--f15);
    line-height:var(--lh19); /* if change, also update recipe_origsite_text */
}

#small #recipes .view_taller_list .single_list_recipe .recipe_origsite_div{
    padding-top:2px;
	padding-bottom:10px;
}

#small #recipes .single_list_recipe .recipe_origsite_div .recipe_origsite_text{
   overflow:hidden; /** putting overflow on parent didn't work on iOS - if long link also had star or madeit, link disappeared */
   min-height: 19px; /* same as parent recipe_origsite_div*/
}

#recipes .single_list_recipe .recipe_tags_div{
    font-size:var(--f16);
    line-height:var(--lh21);
    color:black;
}

#small #recipes .single_list_recipe .recipe_tags_div{
    font-size:var(--f15);
    line-height:var(--lh19);
}

#recipes .single_list_recipe .recipe_border_col{
   height:1px;
}

#recipes .single_list_recipe .recipe_tags_div 
#recipes .single_list_recipe .made_this_tag{
    color:#717171;
}

#recipes .single_list_recipe .recipe_tag,
#recipes .single_list_recipe .recipe_tag_middot,
#recipes .single_list_recipe .archived_tag
{
    float:left;
    padding: 0 1px;
}

#recipes .single_list_recipe .archived_tag
{
    color: red;
}

#recipes .single_list_recipe .recipe_orig_link_text{
    font-size:var(--f12);
    line-height:var(--lh16);
    text-align: center;
    color: black;
    margin-top: 14px;
    border-left: 1px gray dotted;
}

#recipes_shared .people{
   text-align:center;
}

#not_small #recipes_shared .people{
   margin-top: 20px; 
}

#small #recipes_shared .people{
   margin-top: 48px; /* must be at least height of searchtype_wrapper */
}
#recipes_shared .people .single_person, #follower_ing .single_person{
	display:inline-block;
	color:black;
	font-size:var(--f14);
	overflow:hidden;
	background:white;
    text-align:center;
    border-radius:10px;
    cursor:pointer;
    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25);
    padding: 10px 0;
}

#small #recipes_shared .people .single_person, #small #follower_ing .single_person{
  margin:5px 3px 5px 3px;
   width:152px;   
}

@media only screen and (min-width : 360px) 
{ 
   #small #recipes_shared .people .single_person, #small #follower_ing .single_person{
        width:170px;
        margin:5px 3px 5px 3px;
    }
}

@media only screen and (min-width : 375px) 
{ 
   #small #recipes_shared .people .single_person, #small #follower_ing .single_person{
        width:170px;
        margin: 5px 6px 5px 6px;
    }
}

@media only screen and (min-width : 411px) /* iphone 6+, Google Pixel 2, Nexus 6 */
{ 
  #small #recipes_shared .people .single_person, #small #follower_ing .single_person{
        width:190px;
        margin: 5px 6px 5px 6px;
    }
}

@media only screen and (min-width : 480px) 
{ 
   #small #recipes_shared .people .single_person, #small #follower_ing .single_person{
        width:152px;
        margin:5px 3px 5px 3px;
    }
}

@media only screen and (min-width : 568px) 
{ 
   #small #recipes_shared .people .single_person, #small #follower_ing .single_person{
        width:170px;
        margin: 5px 6px 5px 6px;
    }
}

@media only screen and (min-width : 667px) 
{ 
   #small #recipes_shared .people .single_person, #small #follower_ing .single_person{
        width:152px;
        margin: 5px 6px 5px 6px;
    }
}

@media only screen and (min-width : 732px)  /* landscape iphone 6+, Google Pixel?, Nexus 6 */
{ 
   #small #recipes_shared .people .single_person, #small #follower_ing .single_person{
        width:170px;
        margin: 5px 6px 5px 6px;
    }
}

#not_small #recipes_shared .people .single_person, #not_small #follower_ing .single_person{
     cursor:pointer;
    width:231px;
     background: white;
    margin:0px 7px 14px 7px;
    position:relative;
    -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow:    0px 1px 6px 0px rgba(0, 0, 0, 0.25);
    box-shadow:         0px 1px 6px 0px rgba(0, 0, 0, 0.25);
     text-align:center;
     display:inline-block;
}

#not_small #not_mob #recipes_shared .people .single_person:hover, #not_small #not_mob #follower_ing .single_person:hover{
    -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:    0px 1px 6px 0px rgba(0, 0, 0, 0.6);
    box-shadow:         0px 1px 6px 0px rgba(0, 0, 0, 0.6);
}

@media screen and (min-width: 800px) and (max-width: 849px){
  #not_small #mob #recipes_shared .people .single_person, #not_small #mob #follower_ing .single_person {
       margin: 0px 9px 14px 9px;
   }
}

@media screen and (min-width : 900px) and (max-width: 1000px){ 
   #not_small #mob #recipes_shared .people .single_person, #not_small #mob #follower_ing .single_person {
       margin: 0px 12px 14px 12px;
   }
}

@media only screen and (max-width : 760px) 
{ 
   #not_small #mob #recipes_shared .people .single_person, #not_small #mob #follower_ing .single_person{
        width:260px;
    }
}

@media only screen and (min-width : 850px) and (max-width : 1000px) 
{ 
    #not_small #mob #recipes_shared .people .single_person, #not_small #mob #follower_ing .single_person{
        width:260px;
    }
}

#recipes_shared .people .profile_image_div, #follower_ing .single_person .profile_image_div{
	margin: 5px auto;
    height:75px;
    width:75px;
}


#recipes_shared .people .profile_image_div img, #follower_ing .single_person .profile_image_div img{
    height:75px;
    width:75px;
}

#recipes_shared .people .name_div, #follower_ing .single_person .name_div{
	font-size:var(--f17);
	line-height:var(--lh20);
    min-height:20px;
	white-space: nowrap;
	margin:0 4px;
	overflow:hidden;
	text-decoration:None;
	cursor:pointer;
}

#small #recipes_shared .people .name_div, #small #follower_ing .single_person .name_div{
	font-size:var(--f14);
    font-weight:bold;
}

#recipes_shared .people .name_div a, #follower_ing .single_person .name_div a{
	text-decoration:None;
	color:black;
}

#recipes_shared .people .count_foll_div, #follower_ing .single_person .count_foll_div{
	font-size:var(--f14);
	line-height:var(--lh23);
	height:23px;
}

#follower_ing .single_person .follow_button_div{
        height:32px;
}

#follower_ing .single_person .button_follow{
  background-color: #2196F3;
   width:100px;
   	 height:34px;
     padding:17px 0;
  line-height:0;
 text-align:center;
  font-size:var(--f13);
  color: #fff;
  border: none;
  border-radius: 3px;
  margin: 0 auto;
  cursor:pointer;
  margin-top:5px;
  box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
}

#not_small #recipe .content, #not_small #recipe_u .content, #not_small #recipe_edit .content{
	padding-top:0;
}


#recipe_u .star{ 
   display:inline-block; 
   margin-bottom:-2px;
   height:16px;
   width:16px; 
   cursor:pointer;
 /*uses sprite sheet sprite_sheet_for_star_only. */
   background-position:-302px -2px; /* unselected/white star */
}
#recipe_u .starred{
  /*uses sprite sheet sprite_sheet_for_star_only*/
   background-position:-262px -2px; /* selected/yellow star */
}

  
#recipe_u .user_description_ta, #recipe_u .servings_ta, #recipe_u .title_ta {
margin-top:7px;
font-weight:normal;
}

 #small #recipe_u .star_recipe {
    padding:8px;
    float:right;
}

#recipe_u #title_options_select {
    width:570px;
    padding:2px;
    border:none;
    height:32px;
    box-sizing:border-box;
    outline: none;
   background:transparent;
   background:url('https://cdn.copymethat.com/static/dropdown_arrow.png?v=2') 0 0 no-repeat; 
   background-position: top right;
  -webkit-appearance: none;  
    border-radius: 0; -webkit-border-radius:0;
    z-index:2;
    font-size:var(--f17);
    color: transparent;
    width:100%;
    max-width:570px;
    position:absolute;
    top:0;
    left:0;
}

#small #recipe_u #title_options_select {
     width:300px; 
}

#recipe_u .title_input_has_options{
    width:525px;
    z-index:5;
}

#small #recipe_u .title_input_has_options{
   width:255px;
}

@media screen and (min-width : 360px){
   #small #recipe_u #title_options_select {
         width:340px;
    }
   #small #recipe_u .title_input_has_options{
        width:295px;
    }
}

@media screen and (min-width : 375px){
   #small #recipe_u #title_options_select {
         width:355px;
    }
   #small #recipe_u .title_input_has_options{
        width:310px;
    }
}

@media screen and (min-width : 411px){
   #small #recipe_u #title_options_select {
         width:390px;
    }
   #small #recipe_u .title_input_has_options{
        width:345px;
    }
}

@media screen and (min-width : 568px){
   #small #recipe_u #title_options_select {
         width:545px;
    }
   #small #recipe_u .title_input_has_options{
        width:500px;
    }
}

#recipe_u .left_top{
   width:570px; 
    float:left; 
}

#recipe_u .photo_container{
    float: right;
	width: 300px;
	border: 1px none #ccc;
	font-size:1em;
    background:white;
    margin:5px 0px 15px 15px; 
}

#recipe_u .photo{
    max-height:300px; 
     max-width:300px; 
     float:right;
	 cursor:pointer;
     margin:5px 0px 5px 0px;
}

#recipe_u .image_change_trigger_div{
        float: right;
}

#recipe_u .media_clear{
}

@media screen and (max-width : 767px)  { /* ipad portrait is 768 */
   /* width of left_side + photo container */
  #recipe_u .photo_container{
        float:left;  
         margin:15px 0px 0px 0px; 
    }

   #recipe_u .photo{
        float:left;
        margin:5px 0px 5px 0px;     
    }

   #recipe_u .image_change_trigger_div{
        float: left;
    }
    
   #recipe_u    .left_top{
        width:100%;
    }

   #recipe_u .media_clear{
        clear:both;
    }
}

#not_small #recipe_u #images_choices_menu{
	width:560px;
	left: 50%;
    margin-left:-280px;
}

@media screen and (min-width : 768px){
   #not_small #recipe_u #images_choices_menu{
        width:700px; 
        left: 50%;
        margin-left:-350px;
    }
}

@media screen and (min-width : 900px){
   #not_small #recipe_u #images_choices_menu{
        width:825px; 
        left: 50%;
        margin-left:-412px;
    }
}

#recipe_u #images_choices_menu .image_choice{
   max-height: 150px;
    max-width: 150px;
    vertical-align: top;
    margin-bottom: 4px;
}

#not_small #recipe_u #images_choices_menu .image_choice{
   max-height: 200px;
    max-width: 200px;
    vertical-align: top;
    margin-bottom: 4px;
}


#not_small #recipe_navi .navi_internal_more{
    border-right:white 2px solid;
    border-radius:0 3px 3px 0;
}

#small #recipe_navi{
    position:fixed;
    top:0;
    width:100%;
    height:44px;
    z-index:200;
    border-top: 1px white solid;
}

#small #recipe_u #recipe_navi{
    background:rgb(228, 228, 228);
}
         
#small #recipe_navi .navi_internal{
    display:block;
    float:left;
    width:20%;
    color:black;
    margin:0;
    height:44px; 
    padding: 22px 0;
    line-height:0;
    font-size:var(--f12);
    box-sizing: border-box;
    background:rgb(228, 228, 228);
    text-align:center;
    box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
}

#small.font150plus #recipe_navi .navi_internal{
    font-size:var(--f11);
}

#small #recipe_navi .navi_internal.side_menu_icon{
    padding:0px;
}

#small #recipe_u .side_menu_icon{
    height: 40px;
	float: left;
    padding: 0 14px;
    margin-right: 10px;
}

#small #small_main_navi .side_menu_icon{
	overflow:hidden;
	display:inline-block;
	float:left;
	padding:6px 8px 2px 8px;
	margin-bottom:4px;
}	

#small #small_main_navi .side_menu_icon.hidden{
	display:none; /* happens when show sl multi-edit */
}

#small #recipes #small_main_navi .side_menu_icon,
#small #recipes_shared #small_main_navi .side_menu_icon{
	/* OK to extend into search field. Prevent accidentally clicking search field. */
	/* extending it too far (22) interferred with iphone voiceover's ability to double-tap to select */
	padding-bottom:16px; 
	margin-bottom:0px;
}	
  
#small #recipe_navi .navi_internal.triple{
	width:40%;
	background: rgb(228, 228, 228);
}

#small #recipe_navi .navi_back_symbol{
   font-size:var(--f28);
   vertical-align:middle;
   position:relative;
   margin-top:-9px;
   display:inline-block;
}

#small #recipe_navi .navi_text{
}
 
@media only screen and (max-width : 400px)
{ 
   #small #recipe_navi .navi_text{
        display:none;
    }
}

#small #recipe_navi .navi_internal_more, 
#small #recipe_navi .navi_internal_back, 
#small #recipe_u #recipe_navi .navi_internal_back{
    background:rgb(213, 213, 213);
  }
#small #recipe_navi .navi_internal_back, #small #recipe_u #recipe_navi .navi_internal_back{
    border-left:white 2px solid;
    border-radius:3px 0 0 3px;
  }
  
#small #recipe_navi .navi_internal_clicked{
    background:rgb(167, 167, 167);
} 
  
#small #recipe_navi .navi_internal_more{
    border-right:white 2px solid;
    border-radius:0 3px 3px 0;
}
  
#small #recipe_navi .navi_internal_left{
    border-left:#A80739 1px solid;
  }
#small #recipe_navi .navi_internal_middle{
    border-right:#A80739 1px solid;
    border-left:#A80739 1px solid;
  }
#small #recipe_navi .navi_internal_right{
    border-right:#A80739 1px solid;
  }
  
#small #recipe_navi .navi_internal_left, #small #recipe_navi .navi_internal_middle, #small #recipe_navi .navi_internal_right{
    border-color:white;
  }
  
#small #recipe_navi .navi_internal_spacer{
    width:0%;
    border:none;
  }

  
#recipe #recipe_actions .recipe_option_icon, 
#recipe_u .recipe_option_icon, 
#not_small #recipe_actions .recipe_share_option_icon,
#recipe .ic_recipe_view,
#recipes .recipes_share_icon,
#mealplan .calendar_action_icon,
.spricon,
#recipes #recipes_view_options_menu .icon,
#recipes .icon_view_chosen
{
    /* todo: instead of all these classes, switch all html to spricon (sprite icon) class */
    background-image:url('https://cdn.copymethat.com/static/sprite_ic_20.png'); /* also preloaded in base */
    /* Make sprite sheet width = number evenly divisible by 100 + width of 1 sprite */
    /* Width = 51 sprites. This allows each sprite to be 2% because 100%/(51-1) = 2 */
    background-size: 5100% 100%; /*  5100% because 51 sprites. */
}

#recipe #recipe_actions .ic_placeholder,
#recipe_u .ic_placeholder{
	 background-image:none;
}

.ic_facebook{
 background-position: 0% 0;
}
.ic_list_checkbox{
 background-position:2% 0;
}
.ic_delete{
 background-position:6% 0;
}
.ic_mealplan{
 background-position: 8% 0;
}
.ic_link{
 background-position:10% 0;
}
.ic_tag{
 background-position:12% 0;
}
.ic_email{
 background-position:14% 0;
}
.ic_edit{
 background-position:16% 0;
}
.ic_print{
 background-position:18% 0;
}
.ic_share_arrow{
 background-position: 20% 0;
}
.ic_view_grid_smaller,
.icon_view_chosen[viewchosen="smaller_grid"]
{
 background-position: 22% 0;
}
.ic_view_grid_larger,
.icon_view_chosen[viewchosen="grid"]
{
 background-position: 24% 0;
}
.ic_cmt{
 background-position: 26% 0;
}
.ic_recipe_view{
 background-position: 30% 0;
}
.side_by_side .ic_recipe_view{
 background-position: 28% 0;
}
.ic_view_list,
.icon_view_chosen[viewchosen="list"]
{
 background-position: 32% 0;
}
.ic_mealpan_plus{
 background-position: 38% 0;
}
.ic_edit_2{
 background-position:40% 0;
}
.ic_shoppingcart_minus{
 background-position: 42% 0;
}
.ic_shoppingcart_plus{
 background-position: 44% 0;
}
.ic_view_taller_list,
.icon_view_chosen[viewchosen="taller_list"]
{
 background-position: 48% 0;
}
.ic_share_arrow_outline{
 background-position: 52% 0;
}
.ic_share_arrow_filled{
 background-position: 54% 0;
}
.ic_cmt_plus{
 background-position: 56% 0;
}
.ic_rightarrow{
 background-position: 62% 0;
}
.ic_leftarrow{
 background-position: 64% 0;
}
.ic_upchevron{
 background-position: 74% 0;
}
.ic_downchevron{
 background-position: 76% 0;
}
.ic_search{
 background-position: 78% 0;
}
.ic_plus{
 background-position: 80% 0;
}
.ic_opencircle{
 background-position: 82% 0;
}
.ic_minus{
 background-position: 84% 0;
}
.ic_r_align{
 background-position: 86% 0;
}
.ic_x{
 background-position: 88% 0;
}
.ic_copy{
 background-position: 90% 0;
}
.ic_skillet{
 background-position: 92% 0;
}
.ic_list_add{
 background-position: 94% 0;
}
.ic_list_remove{
 background-position: 96% 0;
}
/* ic_recipe_view handled further down; two options */

 #small #snapwrapper #recipe.current_showing #inner_recipe_container {
     xbackground:pink;
 }

 #small #snapwrapper{
     overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
 }
 
#small #snapwrapper.disable_scroll{
     overflow-x: hidden;
 }
 
 #small #snapwrapper.disable_snap{
    scroll-snap-type: none;
 }
 
 #small #snapwrapper #recipe, 
 #small #snapwrapper #recipe_u,
 #small #snapwrapper #recipe_edit,
 #small #snapwrapper #recipe_print
{
    scroll-snap-align: start;
    display: inline-block;
	white-space: normal;
}

#small #snapwrapper #recipe #outer, 
#small #snapwrapper #recipe_u #outer,
#small #snapwrapper #recipe_edit #outer,
#small #snapwrapper #recipe_print #outer{
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll;
    z-index: 201;
	position:static;
    /* height, width set in js */
    margin-right: 0px;
}

#small #snapwrapper #recipe_navi{
  position:static;
}


#not_small #recipe_actions{
    float:right;
}

        
#not_small #recipe_actions .wrapper_recipe_option,
#not_small #recipe_u .wrapper_recipe_option{
	display: inline-block;
    overflow: hidden;
    padding: 8px; /* if change, also look at navi_action_icons */
    float: left;
    margin-left: 0px;
    margin-right: 6px;  /* delete gets extra margin in html */
    background:transparent;
    cursor:pointer;
}

@media screen and  (min-width : 620px) {
	 #not_small #recipe_actions .wrapper_recipe_option,
	#not_small #recipe_u .wrapper_recipe_option{
		margin-right: 8px;  /* delete gets extra margin in html */
	}
}

@media screen and  (min-width : 671px)  {
	 #not_small #recipe_actions .wrapper_recipe_option,
	#not_small #recipe_u .wrapper_recipe_option{
		margin-right: 10px;  /* delete gets extra margin in html */
	}
}

@media screen and  (min-width : 752px)  {
	 #not_small #recipe_actions .wrapper_recipe_option,
	#not_small #recipe_u .wrapper_recipe_option{
		margin-right: 14px;  /* delete gets extra margin in html */
	}
}

#not_small #not_mob #recipe_actions .wrapper_recipe_option:hover,
#not_small #not_mob #recipe_u .wrapper_recipe_option:hover{
    background:white;
}
    
#not_small #not_mob #recipe_actions .wrapper_recipe_option.clicked, 
#not_small #mob #recipe_actions .wrapper_recipe_option.clicked,
#not_small #not_mob #recipe_u .wrapper_recipe_option.clicked, 
#not_small #mob #recipe_u .wrapper_recipe_option.clicked
 {
    background: #b1b8bc;
}
    
#not_small #recipe_actions .wrapper_recipe_option .action_text{
    margin-left: 0px; 
    color:black; 
    font-size:var(--f11); 
    line-height:var(--lh28);
    height:28px;
    display:inline-block;
    text-align:left;
    vertical-align: top;
    xxwidth:55px;
	width:42px;
    padding-left: 4px;
}

#not_small #recipe_actions .wrapper_recipe_option .action_text.narrow{
    xxwidth:45px; /* shopping list add text shorter than mp's */
}

#not_small #recipe_actions .recipe_share_option_icon{
    /* uses sprite_ic */
    cursor: pointer;
    float: left;
    margin-right: 6px;
    margin-left: 2px;
    height: 26px;
    width: 26px;
    margin-top: -1px;
    opacity:.7;
}

#small #recipe #recipe_actions .recipe_option, 
#small #recipe #recipe_actions #sharing_options .share_option{
    border-bottom: 1px solid gray;
    font-weight: bold;
    line-height:var(--lh20);
    padding: 10px 10px;
}

#small #recipe #recipe_actions .recipe_option.inactive,
#small #recipe #recipe_actions .share_option.inactive{
    color:gray;
}


#small #recipe #recipe_actions .recipe_option.clicked,
#small #recipe #recipe_actions .share_option.clicked{
     background:#A80739;
    color:white;
}

#small #recipe #recipe_actions .recipe_option_icon{
    /* uses sprite_ic sheet */ 
    height: 30px; 
    width: 30px; 
    margin-top: -4px;
    opacity: .65;
    display: inline-block;
    float: left;
    margin-right: 10px;
}

#small.font120plus #recipe #recipe_actions .recipe_option_icon{
    margin-top: -2px;
}

#small.font150plus #recipe #recipe_actions .recipe_option_icon{
    margin-top: 0px;
}

#not_small #recipe #recipe_actions .recipe_option_icon{
    height: 28px; /* if change, also look at wrapper_recipe_option and .wrapper_recipe_option .action_text and navi_action_icons */
    width: 28px; 
    opacity: .7;
    float:left;
}

#small #recipe #recipe_actions .recipe_option_icon.inactive{
    opacity: .5;
}

#not_small #recipe #recipe_actions #confirm_delete{
   position: absolute;
    top: 4px;
    right: 5px;
    width: 100px;
    background: red;
    color: white;
    font-size:var(--f12);
    height: 36px;
    line-height:var(--lh36);
    cursor: pointer;
    text-align: center;
    padding: 0 5px;
    box-shadow: 3px 3px 5px #888888;
}

#not_small #recipe #recipe_actions #confirm_delete.clicked{
   background:#B60202;
   cursor:wait;
}

#small #recipe #recipe_actions #confirm_delete{
    background: #A80739;
    color: white;
}

#not_small #recipe #recipe_actions .recipe_action_popup_info
{
    position: absolute; 
    z-index: 100;
    top: 38px;
    right: 20px;
    background-color: white;
    margin: 0;
    padding: 10px 10px 10px 10px;
    text-align: left;
    width: 250px;
    border-radius: 3px;
    border: solid 1px lightgray;
}

#not_small #recipe #recipe_actions .recipe_action_popup_info .premiumlink
{
   font-weight:bold;
   margin:5px 0 0 0;
   text-decoration:underline;
   color:blue;
}

#not_small #recipe #recipe_actions #sharing_options .share_option .forced_private_line{
    line-height:var(--lh20);
    overflow: hidden;
    white-space: nowrap;
}

#small #recipe #recipe_actions #sharing_options .share_option .forced_private_line{
    line-height:var(--lh18);
    overflow: hidden;
    white-space: nowrap;
}

#small #recipe #recipe_actions #sharing_options .share_option .forced_private_line .forced_private_msg{
    font-size:var(--f13);
}

#recipe #recipe_actions #sharing_options #share_options_link_input{
    width:248px;
   height: 24px;
    border: none;
}

#small #recipe #recipe_actions #sharing_options #share_options_link_input{
     width: 95%;
    height: 30px;
}

#recipe #recipe_actions #sharing_options #share_options_link_href{
    width:248px;
   display:block;
   text-decoration:None;
   color:black;
}

#small #recipe #recipe_actions #share_options_link_href{
     width: 95%;
}

#not_small #recipe #recipe_actions #sharing_options .share_option img{
    margin-top:10px;
}


#small #recipe #recipe_actions #sharing_options .share_option img{
    float:left;
    cursor: pointer;
    margin-top:16px;
    margin-right:10px;
}

#small #recipe #recipe_actions #sharing_options .share_option_change_default_sharing {
   line-height:var(--lh40);
   cursor:pointer;
   text-align:left;
}

#small #recipe #recipe_actions #sharing_options .share_option_change_default_sharing a{
   color:black;
   text-decoration:underline;
   padding-left:10px;
}

#small #recipe #recipe_actions #sharing_options #share_option_change_sharing{
  min-height:40px;
  padding-left:10px;
    
}

#small #recipe #recipe_actions #sharing_options .view_sharing_settings{
    text-decoration:underline;
    font-weight:bold;
}  

#not_small #recipe #recipe_actions #sharing_options, 
#not_small #recipe #recipe_actions #recipe_copy_options {
  position:absolute;z-index:100;
  top:38px;
  right:20px;
  background-color:white;
  margin: 0;
  padding:10px 10px 10px 10px;
  text-align:left;
  width:250px;
  border-radius:3px;
  border:solid 1px lightgray;
}

#not_small #recipe #recipe_actions #recipe_copy_options .copy_option{
    cursor:pointer;
    border-bottom:solid 1px gray;
    display:block;
    color:rgb(82, 82, 82);
    text-decoration:none;
    font-family:arial;
    font-size:var(--f15);
    height:auto;
    line-height:var(--lh20);
    padding-top:9px;
    padding-bottom:9px;
}

#not_small #recipe #recipe_actions #recipe_copy_options .copy_option.first{
    border-top:solid 1px gray;
}

#not_small #recipe #recipe_actions #recipe_copy_options .copy_option.clicked{
    background:#ececec;
}

#not_small #recipe #recipe_actions #recipe_copy_options .copy_option.noaction{
   cursor:default;
}

#not_small #recipe #recipe_actions .wrapper_recipe_option #did_copy_recipe{
    position:absolute;
    top:5px;
    right:5px;
   width:130px;
   height:32px; 
   line-height:var(--lh32);
   background:green;
   color:white;
   font-size:var(--f12);
   cursor:default;
   text-align:center; 
   padding:0 5px; 
   box-shadow: 3px 3px 5px #888888;
   z-index: 2;
}


           
#not_small #recipe #recipe_actions #sharing_options .share_option{
    cursor: pointer;
    border-bottom: solid 1px gray;
    display: block;
    color: rgb(82, 82, 82);
    text-decoration: none;
    font-family: arial;
    font-size: var(--f15);
    line-height: 22px;
    padding: 9px 0;
}

#not_small #not_mob #recipe #recipe_actions #sharing_options .share_option:not(.inactive):hover{
   background:rgb(232, 232, 232);
}

#not_small #recipe #recipe_actions #sharing_options .share_option:not(.inactive).clicked{
   background:rgb(232, 232, 232);
}

#not_small #recipe #recipe_actions #sharing_options .share_option .forced_private_line{
    line-height:var(--lh20);
    overflow: hidden;
    white-space: nowrap;
}

#not_small #recipe #recipe_actions #sharing_options .share_option.first{
   border-top:solid 1px gray;
}

#not_small #recipe #recipe_actions .view_sharing_settings{
   color:#0267F8;
   cursor:pointer;
}

#not_small #not_mob #recipe #recipe_actions .view_sharing_settings:hover{
   text-decoration:underline;
}

#not_small #recipe #recipe_actions .sharing_options_overlay{
    position: absolute;
    background-color: white;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity:.6; 
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
 }

#small #recipe .navi_internal .ic_recipe_view{
    /* uses sprite_ic */
	/* when showing in top bar, not options menu */
    height: 30px;
    width: 30px;
    margin: 0 auto;
    float: none; 
    margin-top: -13px;
    opacity:.3;
}

#recipe #rating_madethis_div{
    height:32px;
    margin-bottom:4px;
    margin-top:6px;
}
  
#recipe #rating_div{
    float:left;
  }        
        
#recipe .recipe_left{
   max-width:800px;
}

#recipe .photo_container{
    float: right;
	width: 300px;
	border: 1px none #ccc;
	font-size:1em;
    background:white;
}

#small #recipe .photo_container{
    margin:7px 0px 0px 0px;
}

#recipe #photo_tag_div{
    float:right;
    margin:5px 0px 15px 25px;
    max-width:800px;/* same as left*/
}

@media screen and (max-width : 666px) {
  #small #recipe .photo_container{
        float:left;  
         margin:0px 0px 0px 0px; 
    }
    
   #small #recipe #photo_tag_div{
        float:left;  
         margin:5px 0px 0px 0px; 
    }

   #small #recipe .recipe_left{
        width:100%;
    }

   #small #recipe .media_clear{
        clear:both;
    }
}


@media screen and (max-width : 415px) {
  #small #recipe .photo_container{
        float:none;  
        margin:0px auto;
    }
    
   #small #recipe #photo_tag_div{
        float:none;  
         margin:5px 0px 0px 0px; 
         width:100%;
    }

   #small #recipe .recipe_left{
        width:100%;
    }

   #small #recipe .media_clear{
        clear:both;
    }
}

#not_small #mob #recipe #image_enlarged_frame
{
    white-space: nowrap;
    text-align: center;
    border-radius: 3px;
    position: fixed;
    z-index: 1000;
    height: 100%;
    width: 100%;
    top:0;
    left: 0;
}

#not_small #mob #recipe #image_enlarged_frame img{
   vertical-align: middle;
   max-width: 600px;
}

#not_small #mob #recipe #image_enlarged_frame .helper{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#not_small #mob #recipe #image_enlarged_frame .image_close_x{
        position: fixed;
    z-index: 1001;
    height: 60px;
    line-height:var(--lh60);
    width: 60px;
    background-color: #2d2d2d;
    color:white;
    font-size:var(--f18);
    font-weight:bold;
    top: 0;
    right:0;
}

#not_small #not_mob #recipe #image_enlarged_frame{
    white-space: nowrap;
    text-align: center;
    border-radius: 3px;
    position: absolute;
    z-index: 1000;
    height: 100%;
    width: 100%;
    top: -40px;
    left: 0;
}

#not_small #not_mob #recipe #image_enlarged_frame img{
    vertical-align: middle;
    width: 600px;
}

#not_small #not_mob #recipe #image_enlarged_frame .helper{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#not_small #not_mob #recipe #image_enlarged_frame .image_close_x{
    position: fixed;
    z-index: 1001;
    height: 60px;
    line-height:var(--lh60);
    width: 60px;
    background-color: #2d2d2d;
    color:white;
    font-size:var(--f18);
    font-weight:bold;
    top: 0;
    right:0;
}


@media screen and (min-width : 667px) {
  #recipe #tags_div{
        width:300px;
        float:right;
    }
}

#small #recipe_image {
    display: inline-block;
    width: 300px;
    height: 224px;
    margin-top: 0px;
    background-position: center center;
    background-size: cover;
    position:relative;
    margin-left:0px;
}

#small #recipe_image.recipe_image_hidden{
    display: none;
}

#small #recipe_image .corner_count{
    position:absolute;
    right:0;
    bottom:0;
  height:42px;
  width:42px;
  line-height:var(--lh42);
  font-size:var(--f12);
  text-align:center;
    background:rgba(255, 255, 255, 0.64);
    color:black;
    margin:2px;
}

 #small #recipe_image #image_progress_circle, 
 #not_small #image_container #image_progress_circle{
     top:0;
    position:absolute;
    height:100%;
    width:100%;
    background:rgba(255, 255, 255, 0.79);
     text-align:center;
     color:black;
     line-height:224px; /* TINE */
}

#small #recipe .side_by_side #inner_recipe_container{
    overflow:hidden;
}

#recipe .side_by_side #ingredient_section, #recipe .side_by_side #steps_section{
   display:table-cell;
}

#recipe .side_by_side #ingredient_section{
   width:180px;  
}

@media screen and (min-width : 376px){ 
    #recipe .side_by_side #ingredient_section{
       width:200px;  
    }
}

@media screen and (min-width : 667px){ 
    #recipe .side_by_side #ingredient_section{
       width:250px;  
    }
}

@media screen and (min-width : 732px){ 
    #recipe .side_by_side #ingredient_section{
       width:260px;  
    }
}

@media screen and (min-width : 768px){ 
    #recipe .side_by_side #ingredient_section{
       width:280px;  
    }
}

@media screen and (min-width : 801px){ 
    #recipe .side_by_side #ingredient_section{
       width:350px;  
    }
}

#recipe .side_by_side .left{
    width:100%;
    max-width:none;
}

#recipe .side_by_side .ingreds, #recipe .side_by_side .notes{
    padding-left:15px;
}

#not_small #recipe #recipe_scale_div{
    float:left;  
}
#not_small #recipe .servings_text {
    float:left;
}
#not_small #recipe #view_switch{
    float:right;
}

#recipe .side_by_side #photo_tag_div{
    float:none;
}

#small #recipe .side_by_side #photo_tag_div #tags_div{
    max-width:300px;
}


 #recipe .side_by_side #photo_tag_div #tags_div, 
 #recipe .side_by_side #photo_tag_div .photo_container{
    float:left;
}

#recipe .side_by_side #photo_tag_div .non_side_by_side{
    display:none;
}

#recipe .side_by_side #photo_tag_div{
    margin-left:30px;
}

#small #recipe .side_by_side #photo_tag_div{
    margin-left:10px;
}

#recipe .side_by_side #tags_div{
    margin-left:30px;
}


#not_small #recipe .side_by_side .servings{
   margin-bottom:15px;
}

#recipe .side_by_side .ingredient_header, #recipe .side_by_side .step_header{
    display:none;
}

#small #recipe .side_by_side #ingredient_section_inner ,#small #recipe .side_by_side #steps_section_inner{
    overflow-y:scroll;
        margin-top: 10px;
}


#recipe_u .image_change_trigger{
    display: inline-block;
    line-height:0;
    padding: 20px 0;
    background: rgb(66 66 66);
    width: 122px;
    margin-top: 0px;
    margin-bottom: 5px;
    text-align: center;
    color: white;
    font-size:var(--f14);
    font-weight: bold;
    cursor: pointer;
    border-radius:5px;
    box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
    overflow:hidden;
}    

#small #recipe_u .image_change_trigger{
	width:auto;
    min-width: 142px;
	 padding: 20px 10px;
	 font-size:var(--f16);
}   

#recipe_u .label{margin-bottom:1px;font-weight: bold;color: #323232;font-size:var(--f16);margin-top: 12px;}
#recipe_u .title_label{margin-bottom:1px;display:inline-block;margin-top: 0px;}
#recipe_u .header{font-size:var(--f21);font-family:Georgia, 'Times New Roman', Times, serif;font-weight:normal; width:300px;}

#recipe_u .expanding_area{
   border: 1px solid #afafaf;
}

#not_small #recipe_u .tasks{
    margin-top: 2px;
    margin-bottom: 2px;
    overflow:hidden;
 }
 
 #small #recipe_u .tasks{
    margin-top:1px;
    text-align:left;
    margin:0 auto;
	padding-left:4px;
     text-align:left;
   margin-left:0px;
   padding-top:0px;
   overflow:hidden;
 }


#recipe_u .already_copied_msg{
    background:white;
   text-align:left;
   margin-top:4px;
   margin-bottom:4px;
   margin-left:3px;
         line-height:1.2em;
    padding-left: 4px;
    padding: 8px 0;
    padding-left: 4px;
}

#small #recipe_u .already_copied_msg{
     background: #e6e6e6;
    margin-left: 0px;
    margin-right: 4px;
}
    
#recipe_u .already_copied_msg a{
   text-decoration:underline;
   color:black;
}

#recipe_u #weak_set_warning{
    color:black; 
    text-align:left;
   margin-top:2px;
   margin-bottom:2px;
} 


#small #recipe_u #info_links{
    text-align:left;
}

#recipe_u .extra_spacer2{height:5px;}

#recipe_u .explanation{
margin-top:5px;
margin-right:5px;
padding:15px 2px 15px 7px;
margin-bottom:10px;
color:black;
background:yellow;} 

#recipe_u .show_more_button{width:13px;height:13px;
 background-image: url('https://cdn.copymethat.com/static/expand.png');
 display:inline-block;
 margin-left:5px;
 }

#recipe_u .show_less_button{width:13px;height:13px;
 background-image: url('https://cdn.copymethat.com/static/collapse.png');
 display:inline-block;
 margin-left:5px;
 }
 
#recipe_u .show_more_less_link{cursor:pointer} 
#recipe_u .show_more_less_link:hover{text-decoration:underline;} 
 
#recipe_u #show_more_lines, #recipe_u #show_fewer_lines{
cursor:pointer; color:#A80739; text-decoration:underline; 
margin:10px 0px 10px 0px; font-weight:bold;
max-width: 570px;
}

#recipe_u .info_link{line-height:var(--lh35); height:35px; vertical-align:middle;cursor:pointer;
              color:#A80739;font-weight:bold;
              margin-left:12px;}

#recipe_u .info_link:hover{text-decoration:underline;}

#recipe_u .info_line_divider{height:8px;}

#recipe_u #tell_us_input {
     resize:vertical;
     max-width:375px;
     width:100%;
     height:20px;
     padding:3px 3px 3px 5px;
     border:solid 2px lightgray;
     font-family: verdana, helvetica, arial, sans-serif;
     margin-top:5px;
}
#recipe_u #form_tell_us{margin-left:10px;font-size:var(--f13);}



/* checkbox */

#recipe_u .td_cb{
    vertical-align:top;  
}

#recipe_u .td_line{
}

#recipe_u  .ingred_checkbox, #recipe_u .step_checkbox, #recipe_u .note_checkbox{
    margin:0px;
    padding:0px;
    vertical-align:middle;
}

/* ingredient, step, note styles */

#recipe_u .header_steps, #recipe_u .header_notes{margin-top:15px;}

#recipe_u .ingreds, #recipe_u .steps, #recipe_u .notes{
   margin:0 0 4px 0px;
   border-collapse: collapse;
   table-layout:fixed;
   padding:0px;
   line-height:var(--lh26);
   
       -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

#small #recipe_u .ingreds, #small #recipe_u .steps, #small #recipe_u .notes{
 
   
}

#recipe_u .ingred_container, #recipe_u .step_container, #recipe_u .note_container{
   
    }
    


#recipe_u .recipe_container  ul, #recipe_u .recipe_container ol{
margin:0;padding: 0;}

#recipe_u .recipe_container li {
        padding-left:0px;
        margin:0;
        margin-left:10px;
        margin-right: 5px; 
    } 

#recipe_u .step li, #recipe_u .note li{
   cursor:pointer;
   list-style-position: outside;
}

#recipe_u .ingred li, #recipe_u .note li{
   cursor:pointer;
   list-style: none;
     margin-left:2px;
}
         
#recipe_u .step_after_line1 li{
   list-style-type: none;
   margin-top:4px;
   list-style-position: inside;
    text-indent: 0;
      cursor:pointer;
   }

#recipe_u .ingred_subheader  li,
 #recipe_u .step_subheader li{
    list-style-type: none;
    font-weight:bold;
    cursor:pointer;
       list-style-position: outside;
       margin-left:-10px;
}

#recipe_u .ingred_note li{
    font-style:italic;
    list-style-type: none;
        cursor:pointer;
       list-style-position: outside;
       margin-left:-10px;
}

#recipe_u .sub_divider li{
    list-style-type: none;
}

#recipe_u .not_ingred ul, #recipe_u .not_step ol, #recipe_u .not_note ul {
  display:block;}

#recipe_u .not_ingred li, #recipe_u .not_step li, #recipe_u .not_note li{
    color: #FD6F6F; 
    list-style-type: none;
    text-overflow:ellipsis; /* surrounding text can be very long and don't want to include it all, just one line */
    overflow:hidden; 
    white-space:nowrap;
     margin-left:0px;
     max-width:250px;
}

#not_small #recipe_u .not_ingred li, #not_small #recipe_u .not_step li, #not_small #recipe_u .not_note li{
     max-width:300px; 
}

@media screen and (min-width : 800px){
   #not_small #recipe_u .not_ingred li, #not_small #recipe_u .not_step li, #not_small #recipe_u .not_note li{
         max-width:370px; 
    }
}

#recipe .content{overflow:visible;margin-top:0px}


#not_small #recipe_u .recipe_container{
    font-size:var(--f15);
    margin-top:0px; 
    position:relative; 
    margin-left:auto;
    margin-right:auto;
    overflow:visible; /*visible allows tag options to extend outside if necessary*/
    background:white;
    text-align:left;
    border: 2px solid #A80739;
    border-radius: 5px;
    word-wrap: break-word;
  
}

#not_small #recipe .recipe_container{
    font-size:var(--f15);
    position:relative; 
    margin-left:auto;
    margin-right:auto;
    overflow:visible; /*visible allows tag options to extend outside if necessary*/
    background:white;
    text-align:left;
    border: 2px solid #A80739;
    border-radius: 5px;
    word-wrap: break-word;
}

#small #recipe .recipe_container, #small #recipe_u .recipe_container{
	width:100%;
    box-sizing: border-box;
    overflow:visible; /*visible allows tag options to extend outside if necessary*/
    padding:1px;
    word-wrap: break-word;
}

#small #inner_recipe_container{
    padding:2px 5px 10px 7px;
    background:white;
    text-align:left;
    border: 2px solid #A80739;
    margin:0px;
    border-radius:5px;
}
 
#small #recipe .recipe_container,
#small #recipe_u .recipe_container{
    font-size:var(--f17);
}

/* use mobile (instead of using max-width) to prevent font suddenly changing on laptop as screen becomes smaller */
#not_small #mob #recipe .recipe_container,
#not_small #mob #recipe_u .recipe_container{
    font-size:var(--f17);
}

#recipe .recipe_container{
    padding:7px 20px 10px 20px;
}

@media screen and (max-width : 767px){
   #not_small #mob #recipe .recipe_container{
         padding:7px 10px 10px 10px;
    }
}

#recipe_u .recipe_container{
    padding:7px 20px 10px 20px;
}

#recipe .recipe_top{
    border-bottom:2px solid #DADADA;
    overflow:hidden;
    margin-bottom:4px;
}

#small #recipe .recipe_top{
    margin-bottom:0px;
}

#not_small #recipe .recipe_top_left{
    float:left; 
    padding-right:15px;
    width:540px;
}

#not_small #recipe .recipe_top_right{
    float:right;
}

@media screen and (max-width : 920px){
   #not_small #recipe .recipe_top_left{
        width: 510px;
    }
}

@media screen and (max-width : 899px){
   #not_small #recipe .recipe_top_left{
        width: 410px;
    }
}

@media screen and (max-width : 799px){
   #not_small #recipe .recipe_top_left{
        width: 380px;
    }
}

@media screen and (max-width : 767px){
   #not_small #recipe .recipe_top_right{
           float:left;
    }
   #not_small #recipe .recipe_top_left{
        width: 540px;
    }
}

#recipe .recipe_profile_wrapper{
  padding: 0px 0px 0px 0px;
    height: 86px;
	margin-bottom:9px;
    width: 300px;
}

#recipe .recipe_profile_wrapper .link_in_recipe{text-decoration:None; color:#1d5de0;} /* class is added to element in tags.py*/
/* class also used in profile text on recipe and in community box */

#recipe .recipe_profile_wrapper_owner_name{
      font-style: italic;
    font-weight: bold;
    color: #595959;
    font-size:var(--f18);
    line-height:var(--lh27);
    margin: 0px;
    padding-top: 4px;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    padding-right:5px;
    margin-left: 2px;
}

#small #recipe .recipe_profile_wrapper_owner_name{
    display:inline-block;
	white-space:nowrap;
	    line-height: var(--lh22);
    padding: 4px 5px 4px 0;
}
}

#recipe .recipe_profile_wrapper.hover .recipe_profile_wrapper_owner_name{	
	text-decoration:underline;
}

#recipe .recipe_profile_picture{
 width: 50px;
height: 50px;
    border-radius: 200px;
    border: 2px solid #fff;
    float: left;
    margin-right: 10px;
		 border: none;
		 float:left;
}

#small #recipe .recipe_profile_picture{
	 width:30px;
	 height:30px;
}

#not_small #recipe .recipe_profile_wrapper_owner_profile{
 max-height: 63px;
 line-height: var(--lh23);
 overflow: hidden;
}

float:left;width:30px;height:30px;"

#not_small #recipe .orig_link, #recipe_u .orig_link{margin:5px 0px 0px 0px;font-size:var(--f16);}
#recipe .orig_link_a, #recipe_u .orig_link_a{cursor:pointer;text-decoration:none;color:#5A5A5A;}
#recipe .orig_link_a:hover, #recipe_u .orig_link_a:hover{text-decoration:underline}
#small #recipe .orig_link, #small #recipe_u .orig_link{
    font-size:var(--f16);line-height:var(--lh34);overflow:hidden;white-space: nowrap;
    }
#recipe .orig_link{float:left; display:inline-block;}
#recipe_u .orig_link_a:hover{text-decoration:underline}

#recipe .star_recipe{
  padding-right: 5px;
    padding-left: 10px;
    padding-top: 8px;
    position: absolute;
    padding-bottom: 20px;
    right: 2px;
    z-index: 2;
}
   
#recipe .star{float:right; margin-right:0px;height:24px;width:24px;
/* favorite star */
 background: url('https://cdn.copymethat.com/static/star_inner_deactive.png') ; cursor:pointer; display:table-cell;
}

#recipe .starred{
    /* favorite star */
 background: url('https://cdn.copymethat.com/static/star_inner.png') 
}

#recipe #ratings_container{
    display:inline-block;
    height:32px;
}   

#recipe #ratings_container .star_wrapper,
#review_ratings_container .star_wrapper{
    position: relative;
    width: 24px;
    height:32px;
    display:inline-block;
    cursor:pointer;
 }

 #recipe #ratings_container .star_wrapper.editablestar,
  #review_ratings_container .star_wrapper.editablestar{
    width: 38px;
 }
 
#small #recipe #ratings_container .star_wrapper,
#small #review_ratings_container .star_wrapper{
    height: 32px;
    width: 22px;
}

#small #recipe #ratings_container .star_wrapper.editablestar,
#small #review_ratings_container .star_wrapper.editablestar{
    height: 32px;
    width: 36px;
}
 
#recipe #ratings_container .star_image,
#review_ratings_container .star_image{
    position: absolute;
    box-sizing: border-box;
    height: 20px;
    width: 20px;
    top: 6px;
    background:#d2d2d2;
    background-image: url(https://cdn.copymethat.com/static/star_40_transparent.png); /* also preloaded */
    background-position: center center;
    background-size: cover;
}

#recipe #ratings_container .star_wrapper.done .star_image, 
#recipe #ratings_container .star_wrapper.action .star_image,
#review_ratings_container .star_wrapper.done .star_image, 
#review_ratings_container .star_wrapper.action .star_image{
     background: #f7c600;
     background-image: url(https://cdn.copymethat.com/static/star_40_transparent.png);
     background-position: center center;
     background-size: cover;
}

#recipe #ratings_container .star_wrapper.preload .star_image,
#review_ratings_container .star_wrapper.preload .star_image{
     background: transparent;  /* prevent colored flash before star image loads. Class is removed when image loads.*/
}
   
   
#not_small #recipe .recipe_title{
    float:left;font-size:var(--f24);
    padding-top:8px;
     margin-bottom:5px;color:black;font-weight:normal;font-family:Georgia, 'Times New Roman', Times, serif;display:table-cell; width: 85%;
     line-height:var(--lh24);
    
    }


#small #recipe .recipe_title{
     font-size:var(--f20);
     float:left;
     margin-bottom:0px;
     color:black;
     font-family:Georgia, 'Times New Roman', Times, serif;
     width: 85%;
    min-height: 24px;
    line-height:var(--lh24);
    /* used to have max-height, but caused issues with Android when font was made bigger. Didn't increase height, even with em units (but used to) */
    overflow: hidden;
    padding:8px 2px 0 0px;
}


#recipe .recipe_rating{
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right:2px;
}


#recipe #imadethis_wrapper.cb_div{
	float: right;
    margin-right: 5px;
	padding: 4px 0 4px 3px;
}

#recipe #imadethis_wrapper.cb_div .cb_text{
  font-size:var(--f15);
  max-width:82px;
}

#recipe #imadethis_wrapper.cb_div .cb_border,
#recipe #imadethis_wrapper.cb_div .cb_check{
  border-radius:3px;
}

@media screen and (min-width : 360px){
	#recipe #imadethis_wrapper.cb_div .cb_text{
		max-width:122px;
	}
}

#recipe #tags_div{margin-top:3px; padding: 6px 0; border-bottom: 1px solid #DADADA; border-top: 1px solid #DADADA; margin-bottom:2px;}


#small #recipe #tags_div{margin-top:5px;}
#recipe_u #tags_div{margin-top:7px;}

#recipe .tag, #recipe_u .tag,
#recipe .tag_archived, #recipe_u .tag_archived{
   float: left;
    background: #f4f5f6;
    border-radius: 5px;
    height: 32px;
    line-height:var(--lh30);
    padding: 0 10px;
    font-size:var(--f14);
    margin: 2px 2px 2px 0;
    margin-bottom: 2px;
    cursor: pointer;
	    height: 32px;
    line-height:0;
    padding: 16px 10px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

#recipe .tag_archived, #recipe_u .tag_archived{
   color:red;
}

 #recipe_u #show_tag_menu_button{
   float: left;
    background: #b1b8bc;
    padding: 20px 13px;
    margin-top: 2px;
    height: 0px;
    line-height:0;
    color: #fff;
    cursor: pointer;
    border-radius:5px;
}

#not_mob #recipe_u #show_tag_menu_button:hover{
color: #000;
}


#recipe .image_upload_button{
    position: relative;
    background: #b1b8bc;
    color: white;
    font-size:var(--f17);
    width: 300px;
    display: inline-block;
    cursor: pointer;
    margin-top: 5px;
    height: 36px;
    line-height:0;
    padding: 18px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
  }
  
 #small #recipe .image_upload_button{
    margin-top:0px;
  }
  
#small.font120plus #recipe .image_upload_button{
	font-size:var(--f15);
}

#recipe .image_upload_button_image{
    margin-top:-10px;
	margin-left:75px;
	margin-right:5px;
	float:left;
	width:38px;
}

#small.font130plus #recipe .image_upload_button_image{
	margin-left:15px;
}

 #recipe .image_upload_input_wrapped{
		position:absolute; top:0; left:0;
        height:100%;
        width:300px;
       opacity: 0;
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
       filter: alpha(opacity=0);
       z-index:2;
	   cursor:pointer;
 }
 
 #not_mob #recipe .image_upload_button:hover{
	color:black;
 }
 
 
#recipe .description{margin-left:0px;margin-top:0px; padding: 5px 0;}
#small #recipe .description{line-height:var(--lh24d65);}
#not_small #recipe .description{line-height:var(--lh22);}
#not_small #mob #recipe .description{line-height:var(--lh25);}
     
#recipe .recipe_left .link_in_recipe{text-decoration:None; color:#009BD3;font-weight: bold;} /* class is added to element in tags.py*/
/* class also used in profile text on recipe and in community box */

#recipe .directions_src_link{
    display: inline-block;
    background: white;
    padding: 6px 12px;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 3px;
    color: black;
    border: dotted 2px gray;
    margin-top: 9px;
    cursor:pointer;
}

#small #recipe .directions_src_link{
    max-width: 300px;   
}

#recipe .directions_src_link:hover{
      border: dotted 2px #A80739; 
}

#recipe .directions_src_cmt_info{
    margin-top:10px;
}

#small #recipe .directions_src_cmt_info{
    line-height:var(--lh25);
}

#not_small #recipe .directions_src_cmt_info{
    line-height:var(--lh24);
}

#recipe .directions_src_cmt_info span{
   font-weight:bold;
   cursor:pointer;
}

#recipe .directions_src_cmt_info span:hover{
   text-decoration:underline;
}



/*servings styles */

/* Servings determine whether the ingredients are below or next to the image */

#recipe .servings{
    margin:5px 0;
    padding: 10px 0; 
    border-bottom: 1px solid #DADADA; 
    border-top: 1px solid #DADADA; 
    line-height:var(--lh21);
    min-width:100px;
}

#not_small #recipe .servings{
    overflow: hidden;
    position:relative;
    padding: 5px 0 3px 0;
    line-height:var(--lh35);
    height:35px;
}

@media screen and (max-width : 666px){
   #small #recipe .servings{
        display:table;
        width:100%;
        min-height:35px;
    }
   #small #recipe #recipe_scale_div{
        display:table-cell;
        vertical-align:middle;
        padding-right:4px;
        width: 35px;
    }
    #small #recipe .servings_text{
       display:table-cell;
       vertical-align:middle;
     }
    #small #recipe .servings{
        padding: 2px 0; 
    }
}

@media screen and (min-width : 667px){
   #small #recipe .servings{
        overflow: hidden;
        position:relative;
    }
   #small #recipe #recipe_scale_div{
        position:absolute;
        top:3px;
        padding-right:4px;
        width: 35px;  
    }
   #small #recipe .servings_text{
        padding-left:40px;
     }
}


#not_small #recipe #recipe_scale_div{
    position:absolute;
    top:3px;
    padding-right:4px;
    width: 35px;  
}
#not_small #recipe .servings_text{
    padding-left:40px;
 }
 

 
 #recipe #recipe_scale_ingred_input{
     height: 35px;
    width: 35px;
    border: 1px solid #DADADA;
    box-sizing: border-box;
    text-align: center;
 }
 
 #small #recipe #recipe_scale_ingred_input{
    padding-left:1px;
    padding-right:1px;
 }
 
#recipe  #recipe_scale_ingred_input.scaled{
    color: brown;
 }

 
 #recipe #recipe_scale_submit{
   position: absolute;
    left: 46px;
    background: #CC003F;
    color: white;

    vertical-align: middle;
    border-radius: 3px;
    cursor: pointer;

    min-width: 65px;
    text-align: center;
    top: 0px;
	
	line-height:0;
    padding: 23px 4px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
 }
 
  #not_small #recipe #recipe_scale_submit{
       padding: 17.5px 4px;
 }
 
 #recipe .recipe_scale_about_premium{
     position: absolute;
    left: 46px;
    width: 130px;
    text-align: center;
    top: 0px;
    background: white;
    padding: 10px;
    border: black 1px solid;
    z-index:10;
 }
 
 #recipe #recipe_scale_submit.clicked{
    background:#A80739;
 }
 
#recipe #recipe_scale_bad_format{
    color:red;
    margin:10px 0;
 }
 
 #recipe .ingred_amount_scaled{
    color:brown;
 }
 

 
 #recipe .servings_text.light{
    color:#a5a1a1;
 }

 /* make recipe text selectable */
#recipe .recipe_title, #recipe .orig_link, #recipe .ingreds, #recipe .servings, #recipe .steps, #recipe .notes, #recipe .header{
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}
      
#recipe .header{
    font-size:var(--f18);
    min-height: 28px;
    line-height:var(--lh27);
    font-weight: bold;
    color: #363A3C;
}

/*ingredient styles */

#recipe .step_anchor{
    padding-left:15px;
    border-left:3px solid white;
}


#small #recipe .step_anchor{
    padding-left:26px;
    border-left:3px solid white;
}

#small #recipe .side_by_side #inner_recipe_container .step_anchor{
	padding-left:5px;
	border-bottom: 1px solid #A80739;
}

#small #recipe .step_anchor.step_anchor_active{
    border-left:3px solid #A80739;
}
#not_small #recipe .step_anchor.step_anchor_active{
    border-left:3px solid #A80739;
}
#recipe li{list-style-position: outside;}

#not_small #recipe .ingreds, #not_small #recipe .notes{padding-left:18px;}
#recipe .steps{padding-left:5px;} /* less because steps_anchor has padding */

#small #recipe .notes{
	padding-left:23px;
	padding-right:5px;
}

#small #recipe .ingreds{
	padding-left:5px;
	padding-right:5px;
	list-style-type:none;
}
	
#small #recipe .steps{padding-left:0px;padding-right:5px;
}

#small #recipe .side_by_side #inner_recipe_container .ingreds{
	padding-left: 3px;
}

#small #recipe .side_by_side #inner_recipe_container .notes{
	padding-left: 3px;
}

#recipe .recipe_container   ul, #recipe .recipe_container  ol{margin-top:0px;}

#recipe #scale_multiplier_msg{
    font-weight:bold;
}

#not_small #recipe .ingred li{
    margin: 2px 0 2px 0;
	 list-style-image: url('https://cdn.copymethat.com/static/li-style.png');
}
#small #recipe .ingred li{
	line-height:var(--lh24d65);
	border-bottom:1px dotted #7eb348;
	padding-top:1px;
	padding-bottom:2px;
	color:black;
    vertical-align:middle;
    padding-left:2px;
}

#not_small #recipe .ingred li{line-height:var(--lh22);}
#not_small #mob #recipe .ingred li{line-height:var(--lh25);}

#small #recipe .side_by_side #inner_recipe_container .ingred li{
	border-bottom: 1px #4f4f4f dotted;
	list-style-image: none;
    list-style-type: none;
	padding:1px 0 4px 0;
}

#not_small #recipe .ingred li span{
	color:black;
    vertical-align:middle;
    margin-left:2px;
}

#small #recipe .ingred li.ingred_used{
	background:rgb(226, 226, 226);
}

#not_small #recipe .ingred li.ingred_used span{
	background:rgb(226, 226, 226);
}

.ingred_line{
 color: #7eb348;
}

#recipe .ingred_subheader li{
  /*text-decoration:underline;*/
  font-weight:bold;
  list-style-type: none;
  margin-left:-15px;
      margin-top:10px;
      margin-bottom:10px;
 color: #363A3C;
    font-size:var(--f17);
}

#small #recipe .ingred_subheader li{
  /*text-decoration:underline;*/
  font-weight:bold;
  list-style-type: none;
  margin-left:0px;
      margin-top:10px;
      margin-bottom:4px;
 color: #363A3C;
    font-size:var(--f17);
}

#recipe .side_by_side .ingred_subheader li{
  margin-left:0px;
}

#recipe .ingred_note li{
  /*text-decoration:underline;*/
  font-style:italic;
  list-style-type: none;
  margin-left:-22px;
  color:black;
}

#small #recipe .ingred_note li{ic;
    list-style-type: none;
    margin-left: 3px;
    color: black;
    line-height:var(--lh24d65);
    border-bottom: 1px dotted #7eb348;
    padding-top: 4px;
    padding-bottom: 4px;
}

#recipe  .sub_divider li{
    list-style-type: none;
    margin-top:0px;
    margin-bottom:-5px;
}

/* step styles */

#recipe .step_subheader li{
  font-weight:bold;
  list-style-type: none;
  margin-left:-20px;
      margin-top:15px;
      margin-bottom:15px;
 color: #363A3C;
    font-size:var(--f17);
}

#not_small #recipe .step_subheader li{
    font-size:var(--f16);
}

#recipe .side_by_side .step_subheader li{
  margin-left:0px;
}

#recipe .step li{
    margin-top:5px;
    color: #7eb348;
	margin: 5px 0 8px 0;
}

#recipe .step li span{
	color:black;
}

#recipe .step_after_line1 li{
   list-style-type: none;
   margin-top:5px;
   }

#small #recipe .step li, 
#small .step_after_line1 li{
    line-height:var(--lh24d65);
}

#not_small #recipe .step li, #not_small .step_after_line1 li{
   line-height:var(--lh22);
}

#not_small #mob #recipe .step li, #not_small #mob .step_after_line1 li{
   line-height:var(--lh25);
}

#small #recipe .side_by_side #inner_recipe_container .step li{
	list-style-type: none;
}

/* note styles */

#recipe .note li {
   margin-top:5px;
     list-style-image: url('https://cdn.copymethat.com/static/li-style.png');
  color: #7eb348;
}

#small #recipe .note li{
    line-height:var(--lh24d65);
}
#not_small #recipe .note li{
   line-height:var(--lh22);
}
#not_small #mob #recipe .note li{
   line-height:var(--lh25);
}

#small #recipe .side_by_side #inner_recipe_container .note li{
	list-style-type: none;
	border-bottom: 1px dotted #4f4f4f;
	padding-bottom: 3px;
}

#recipe  .note li span {
   color:black;
   vertical-align:middle;
}

#recipe .note_asterix{
	color:#7eb348;	
}


#not_small .menu_add_recipe_to_sl {
	width:400px;
	margin-left:-200px;
	left: 50%;
}

.menu_add_recipe_to_sl #sl_list_multiplier {
     text-align:center;
    margin:5px 0 5px 10px;
    height:32px;
    line-height:var(--lh32);
    border: 1px solid #d4d4d4;
    width:30px;
}

.menu_add_recipe_to_sl #sl_list_select {
    margin: 0 5px 0 10px;
    height: 36px;
    line-height:var(--lh36);
    width: 210px;
    font-size:var(--f16);
}

.menu_add_recipe_to_sl #sl_check_allnone_wrapper {
    margin-top: 8px;
	padding-left:0;
}

.menu_add_recipe_to_sl .single_ingred_for_sl {
  margin: 4px 0;
}

.menu_add_recipe_to_sl .sl_ingred_checkbox{
	float:left;
}

.menu_add_recipe_to_sl .sl_ingred_checkbox.cb_div{
	padding:0;
}

#not_small .menu_add_recipe_to_sl .sl_ingred_checkbox.cb_div .cb_parent{
	padding-top:3px; /* input padding + border top */
	height:var(--h22); /* same as ingred input */
}

#small .menu_add_recipe_to_sl .sl_ingred_checkbox.cb_div .cb_parent{
	padding-top:7px; /* input padding + border top */
	height:var(--h22); /* same as ingred input */
}

.menu_add_recipe_to_sl .sl_ingred_input
{
    width: 380px;
    line-height: var(--lh22);
	padding: 6px 0 6px 3px;
    font-size:var(--f16);
	width:85%;
    border: solid gray 1px;
    border-radius: 2px;
    margin-left:6px;
}


@media screen and (min-width : 360px){
	#small .menu_add_recipe_to_sl .sl_ingred_input
	{
		width:88%;
	}
}

#not_mob .menu_add_recipe_to_sl .sl_ingred_input
{
	padding: 4px 0 4px 3px;
}

#not_small #recipe #recipe_sharing_settings,
#not_small #recipe_edit #recipe_sharing_settings
{
    width:500px;
    top:70px;
    margin-left:-250px;
    left:50%;
}

#recipe_edit #community_visibility_label.alerted{
    color:red;
}

#not_small #recipe_sharing_settings .menu_inner{
    padding: 0px 5px;
}

#not_small #recipe_sharing_settings .menu_inner {
    padding: 0px 5px;
    max-height: 810px; /* changed in js */
    overflow-y: auto;
    box-sizing:border-box;
}

#small #recipe_sharing_settings .menu_inner {
    /* inner scrolling so close and save buttons stay on top */
    overflow-y: auto;
    padding: 5px 10px 25px 10px; 
    box-sizing:border-box;
    /* height set in js */
}

#small #recipe_sharing_settings .sharing_all_inputs{padding:0px 2px 2px 2px;margin:3px 0px 3px 0px;}
#recipe_sharing_settings input{margin:2px 3px 2px 0px;padding: 3px 0;}
#not_small #recipe_sharing_settings .input_wrapper{display:block; }
#small #recipe_sharing_settings .input_wrapper{display:block;padding:4px 0; }
#recipe_sharing_settings #include_description_options{margin-left:20px;}

#small #recipe_sharing_settings input{margin:6px 3px 2px 2px;padding:0}
#recipe_sharing_settings .label_sharing{display:block;font-weight:bold;margin-bottom:5px;}
#recipe_sharing_settings .sharing_inputs{display:table-cell;padding-left:20px;}
#small #recipe_sharing_settings .sharing_inputs{display:table-cell;padding-left:5px;}
#recipe_sharing_settings .sharing_row{border-bottom:solid lightgray 1px;margin-top:5px;padding:3px 0px 8px 3px;}
#recipe_sharing_settings #saving_msg{color:gray;padding-left:3px;margin-top:2px;}
#recipe_sharing_settings .option_not_avail{color:gray}
#recipe_sharing_settings .sharing_question_mark{display:inline-block;color:black;font-weight:bold;text-decoration:underline;font-size:var(--f11);cursor:pointer;}
#recipe_sharing_settings #share_description{border:none gray 1px; padding:3px;margin:3px;}
#recipe_sharing_settings #member_chooser{overflow:hidden;padding:5px 0px 5px 5px;border:solid orange 1px;margin-top:4px;}
#recipe_sharing_settings .member_option{margin-top:3px;width:300px; float:left;}
#recipe_sharing_settings #link_show_member_options{font-size:var(--f11);text-decoration:underline;cursor:pointer}


#not_small #shopping_list .content{
    width: 650px; /* match #shopping_list #sl_navi_menu.fixed */
    margin:0 auto;
    padding-top:0px;
}

@media screen and (min-width : 1366px){
	#not_small #mob #shopping_list .content{
		width: 750px; /* match #shopping_list #sl_navi_menu.fixed */
		margin:0 auto;
		padding-top:0px;
	}
}

@media screen and (max-width : 650px){
  #not_small #shopping_list .content{
        width: auto;
  }
}


#shopping_list #content_inner{
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

#not_small #shopping_list #content_inner{
    background:white;
    overflow:hidden;
    text-align:left;
    padding:  20px;
    min-height:450px;
}

@media screen and (max-width : 600px){
  #not_small #shopping_list #content_inner{
    padding:  20px 10px;
   }
}



#small #shopping_list .content{
    min-height:450px;
}

#small #shopping_list #content_inner{
    padding-top:10px;
	 padding-left:2px;
	 padding-right:2px;
     min-height:300px;
}

.button_look{
    text-align:center;
     background:#4C4C4C;
    cursor: pointer;
     font-family: helvetica;
    color:white;
    font-size:var(--f13);
    /*No border because border does not work. When wrapping, does not activate actual button on the border*/
    border-radius:2px;
}

#not_mob .button_look:hover{
    background:#6f4a51;
    cursor:pointer;    
}

.button_wrapper{
    position:relative; 
	top:0;left:0;
	width:140px;
    display: block;
    line-height:0;
    padding: 16px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
   }
      
.button_wrapper input{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	z-index: 2;
}

 #recipe_edit #photo_upload #image_reorder_option, 
 #recipe_edit #photo_upload #image_reorder_done_option{
       cursor:pointer;
       border:1px solid gray;
       border-radius:5px;
       text-align:center;
       width:270px;
       margin-top:10px;
		line-height:0;
		padding: 19px 0px;
		box-sizing: border-box;
		white-space: nowrap;
		word-wrap: break-word;
		overflow: hidden;
 }
 
 #recipe_edit #photo_upload.only_image_edit_trigger #image_reorder_option{
       display:none;
 }

 #recipe_edit #photo_upload .button_wrapper {
       padding: 19px 0px;
        text-align: center;
        background: #9DB0B1; 
        cursor: pointer;
        font-family: Arial;
        color: white;
        font-size:var(--f15);
        border-radius: 5px;
        display:inline-block;
        float:left;
}

#recipe_edit #photo_upload .button_wrapper.add_from_camera {
	width:272px;
	margin-top:3px;
}

#recipe_edit #photo_upload .button_wrapper.add_from_url {
	 width:158px;
}


#not_mob #recipe_edit #photo_upload .button_wrapper:hover{
    background: #839798;
}

#recipe_edit #photo_upload .url_input{
   float:left;
   margin: 0 2px 0 0;
   height:38px;
   box-sizing:border-box;
   border:1px gray solid;
   padding-left:2px;
   width:120px;
}

@media screen and (min-width : 360px){
	 #small #recipe_edit #photo_upload .url_input{
	   width:135px;
	}
    
	#small #recipe_edit #photo_upload .button_wrapper.add_from_camera {
		width:322px;
		margin-top:3px;
	}

	#small #recipe_edit #photo_upload .button_wrapper.add_from_url {
		 width:184px;
	}
	
	 #small #recipe_edit #photo_upload #image_reorder_option, 
	 #small #recipe_edit #photo_upload #image_reorder_done_option{
		 width:322px;
	 }

}

#recipe_edit #photo_upload .photo {
 max-width: 80px;
  max-height: 80px;
   vertical-align: middle;    
}

#recipe_edit #photo_upload #photo_form{
    float:left;
    display:inline-block;
    margin-bottom:10px;
    
}

#recipe_edit #photo_upload.only_image_edit_trigger #photo_form{
    display:none;
}


#recipe_edit #photo_upload #photo_list{float:left;margin-right:30px}

#recipe_edit .photo_list_waiting{
    background-image:url('https://cdn.copymethat.com/static/spinner_25.gif');
    height:74px;width:74px;
    background-repeat:no-repeat;
    background-position:center;
    }
    
#recipe_edit #photo_upload .photo_container{
	text-align: center;
	width: 82px;
	height: 82px;
	margin: 1px;
	border: 1px solid #ccc;
	/* font-size:1em;
	line-height:80px; Used to vertical-align with line-height, but shifts down if user increases Android's defau't size. Now sits at top  */
    background:white;
 }
 
 #not_mob #recipe_edit #photo_upload .photo_container{
	font-size:1em;
	line-height:var(--lh80);
 }
  
#recipe_edit #photo_upload .photo_msg{color:red;margin:5px 0}

#photo_upload .photo_div{float:left; padding-top:3px;background:white;}

#not_mob #photo_upload #photo_list.ui-sortable .photo_div .photo_container:hover{
    box-shadow: 1px 1px 3px black;
}

#not_mob #photo_upload #photo_list.ui-sortable-disabled .photo_div .photo_container:hover{
    box-shadow: none;
}

#not_mob #photo_upload #photo_list.ui-sortable .photo_div .photo_container{
    cursor:pointer;
}
#not_mob #photo_upload #photo_list.ui-sortable-disabled .photo_div .photo_container{
    cursor:default;
}


#photo_upload .photo_div.dragging .photo_container {
   box-shadow: 1px 1px 3px black; 
}

#recipe_edit #photo_upload .photo_remove{
    color:black;
    cursor:pointer;
    background: rgba(255, 192, 203, 0.22);
	width: 84px;
    text-align: center;
    line-height:0;
    padding: 19px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
	font-size:var(--f16);
} 

#small.font130plus #recipe_edit #photo_upload .photo_remove{
	font-size:var(--f14);
} 

#not_mob #photo_upload .photo_remove:hover{text-decoration:underline;}

#recipe_edit #photo_upload.only_image_edit_trigger .photo_remove{
    display:none;
}

#recipe_edit .content{
     min-width:250px;    
}

#recipe_edit .recipe_container{
     padding-right:20px; 
     padding-left:5px;
     margin-top:10px;
}

#small #recipe_edit .recipe_container{
     padding-right:10px; 
     margin-top:20px;
}

#recipe_edit #show_tag_menu_button,
#recipe_edit #edit_show_sharing_options_trigger,
#recipe_edit #photo_upload #image_edit_trigger
 {
   cursor: pointer;
    line-height:var(--lh20);
    padding: 6px 0;
    box-sizing: border-box;
    word-wrap: break-word;
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: var(--f17);
    font-weight: bold;
    color: #a80739;
}

#recipe_edit #photo_upload #image_edit_trigger{
    display:none;
}

#recipe_edit #photo_upload.only_image_edit_trigger #image_edit_trigger{
    display:block;
}

#recipe_edit #show_tag_menu_button{
    margin-top:4px;
    margin-bottom:4px;
}

#recipe_edit .images{margin-bottom:0px;margin-top:8px;}

#recipe_edit #styling_info{ 
    border: #A80739 dotted 2px;
    padding:5px 10px 5px 5px;
    max-width:720px;
    overflow:hidden;
    margin-top:5px;
    width:100%
}

#small #recipe_edit #styling_info{ 
   padding:5px 5px 5px 5px;
    width:95%;
}

#recipe_edit #styling_info ul{margin-top:15px; margin-bottom:5px;padding-left:25px;}

#recipe_edit .style_info_line{margin-bottom:2px;}

#recipe_edit #styling_tricks_link{
    color: #A80739;
    margin: 10px 0px 0px 0px;
    cursor: pointer;
    font-weight: bold;
    font-size:var(--f15);
    text-decoration: underline;
    height: 36px;
    line-height:var(--lh36);
}

#recipe_edit #styling_tricks_link:hover{
     text-decoration:underline;
}

#recipe_edit .button_insert_str{
    cursor:pointer;
    display:inline-block;
    font-weight:normal;
    vertical-align:center;
    height:22px;
    line-height:var(--lh22);
    width:22px;
    border:rgb(230, 230, 230) 1px solid;
    text-align:center;
    border-radius:3px;
    font-size:var(--f17);
    background:rgb(252, 252, 252);
    padding:1px;
    margin-bottom:2px;
    font-family:arial; /* not all fractions/symbols available with open sans */
}

#recipe_edit .more_symbols_trigger{
    width:50px;
    font-size:var(--f15);
}

@media screen and (min-width : 360px){
 #small #mob #recipe_edit .button_insert_str{
        height:28px;
        line-height:var(--lh28);
        width:28px;
    }
  #small #mob #recipe_edit .more_symbols_trigger{
        width:50px;
        font-size:var(--f15);
    }
}

@media screen and (min-width : 375px){
 #mob #recipe_edit .button_insert_str{
        height:30px;
        line-height:var(--lh30);
        width:30px;
    }
  #mob #recipe_edit .more_symbols_trigger{
        width:50px;
        font-size:var(--f15);
    }
}
    
#recipe_edit .header{
font-weight:bold;
font-size:var(--f17);
margin-left:0px;
color:black;
margin-bottom:3px;
margin-top:7px;
line-height:var(--lh24);
max-width: 750px;
}

#recipe_edit #edit_symbol_wrapper{
max-width: 750px;
}

#recipe_edit .expanding_area {
    max-width:760px;
}

#recipe_edit .expanding_area textarea,
#recipe_edit .expanding_area pre {
  padding: 5px 5px 15px 5px;
}

#ios #recipe_edit .expanding_area pre {
  /* padding: 5px 8px 15px 8px; */ 
   /* this is no longer the case. */ 
  /* l/r Padding for iOS pre must be +3/+3 compared to textarea because ioS adds extra space */
}

#not_small #mob .expanding_area textarea,
#not_small #mob .expanding_area pre {
  font-size:var(--f17);
}

/*  below for js editor */

#recipe_edit  pink{background:pink;} 
#recipe_edit .yellow{background:yellow;}

#recipe_edit #ingredients{background:white;border:solid 2px lightgray; width:700px; overflow:hidden; padding:15px 15px 15px 40px; margin:5px 0px 10px 5px;}
#recipe_edit #ingredients ul{font-weight:normal;list-style-type:disc;}
#recipe_edit .ingred{font-weight:normal;}
#recipe_edit .subheader{font-weight:bold;list-style-type:none; margin: 5px 0px 0px -18px;}
#recipe_edit .ingred_note{font-style:italic; list-style-type:none; margin: 0px 0px 0px -18px;}
#recipe_edit .blankline{list-style-type:none;}

#recipe_edit #steps{background:white;border:solid 2px lightgray; width:700px; overflow:hidden;padding:15px 15px 15px 40px; margin:5px 0px 0px 5px;}
#recipe_edit #steps li{margin-bottom:5px;}
#recipe_edit .step_subheader{font-weight:bold;list-style-type:none; margin: 0px 0px 0px -18px;}
#recipe_edit .step_line1{}
#recipe_edit .step_line_non1{list-style-type:none;}

#recipe_edit #notes{background:white;border:solid 2px lightgray; width:700px; overflow:hidden; padding:15px 15px 15px 40px; margin:5px 0px 10px 5px;}
#recipe_edit #notes ul{font-weight:normal;list-style-type:disc;}
#recipe_edit .note{font-weight:normal;}

/* was interfering with non.js
#recipe_edit b{font-weight:normal;}
#recipe_edit i{font-style:normal}
#recipe_edit .bold{font-weight:bold}

*/

#recipe_edit #form_recipe{}


/* related to ajax loading */
.current_showing{
    position:relative; /* overwritten by result spages. Necessary for side menu */ 
}

/*
#not_small #recipes, 
#not_small #recipes_shared, 
#recipe_u, 
#recipe_edit, 
#not_small #recipe{
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll;
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0px;
    background:#eef2f4;
} 
*/

#small #recipe #outer, #small #recipe_u #outer, #small #recipe_edit #outer{
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll;
    z-index:201; /* > content_top z-index to prevent flash when load recipe via ajax */
    position: fixed;
    height: 100%; /* Is changed in JS */
    width: 100%;
    top: 45px;  /* must equal height of recipe navigation */
    left: 0px

}

#small #recipe .side_by_side .content{
    padding-bottom:0;
}

#small #recipe .side_by_side .footer{
    display:none;
}

#small #recipes #small_main_navi, 
#small #recipes_shared #small_main_navi {
    background: white;
    height: 44px; /* if change height, change top of content_top, outer, and #outer  with fixed small_main_navi */
    position: fixed;
    top: 0;
    width: 100%;
    z-index:201; /* more than content_top, allowing side_menu_icon to extend down, past  */
}

#small #recipes.left_for_side_menu #small_main_navi, 
#small #recipes_shared.left_for_side_menu #small_main_navi, 
#small .current_showing.left_for_side_menu { 
  left:250px;
}

@media screen and (min-width : 360px){  
  #small #recipes.left_for_side_menu #small_main_navi, 
	#small #recipes_shared.left_for_side_menu #small_main_navi, 
	#small .current_showing.left_for_side_menu {
	  left:280px;
	}
}

@media screen and (min-width : 375px){  
	#small #recipes.left_for_side_menu #small_main_navi, 
	#small #recipes_shared.left_for_side_menu #small_main_navi, 
	#small .current_showing.left_for_side_menu {
	  left:295px;
	}
}

@media screen and (min-width : 411px){  
  #small #recipes.left_for_side_menu #small_main_navi, 
	#small #recipes_shared.left_for_side_menu #small_main_navi, 
	#small .current_showing.left_for_side_menu {
	  left:350px;
	}
}


#small #recipes #content_top, #small #recipes_shared #content_top{
    background: white;
    height: 44px;   /* searchbar-height-dependent */
    position: fixed;
    top: 44px; /* matches height of small_main_navi */
    width: 100%;
    z-index: 200; /* more than #search_saved_searches and outer */
}


#small #recipes.left_for_side_menu #content_top, #small #recipes_shared.left_for_side_menu #content_top{
   left:250px;
}

#small #recipes #outer, 
#small #recipes_shared #outer{
    box-sizing: border-box;
    overflow: hidden;
    overflow-y: scroll;
    z-index:1;
    position: fixed;
    height: 100%; /* Is changed in JS */
    width: 100%;
    top: 88px;  /* must equal height of small_main_navi + content_top searchbar-height-dependent  */
    left: 0px
 }
 
 
#not_small #recipes.current_showing.noscroll{
    overflow:hidden; /* to allow scrolling of generic_popup so doesn't scroll page benetah popup instead */
 }
 
 #small #recipes.current_showing.noscroll #outer{
    overflow:hidden; /* to allow scrolling of generic_popup so doesn't scroll page benetah popup instead */
 }


 #small #recipes.left_for_side_menu #outer, #small #recipes_shared.left_for_side_menu #outer{
    left:250px;
}

 
#recipe_navi{
    box-sizing: border-box;
    overflow: hidden;
    position: fixed;
    height:45px; /* must equal #small #recipe #outer height */
    width: 100%;
    top: 0;
    }
    

#recipes.hidden_page, #recipes_shared.hidden_page, #recipe.hidden_page, #recipe_u.hidden_page, #recipe_edit.hidden_page, 
.hidden_page
    {
    position:fixed;
    left:-20000px; 
    }
    
#not_small .hidden_page #page_header, #not_small .hidden_page #header_navis_wrapper,
#small .hidden_page #page_header, #small .hidden_page #header_navis_wrapper
    {
   width:0px; /* otherwise shows on print as are 100% wide and print page background:white doesn't always cover it (Edge) */
    }
    
#not_small .hidden_page .sort_trigger_wrapper
    {
   display:None; /* otherwise shows on print (Edge) */
    }

#small #recipe.left_for_side_menu{
    left:250px;
    }
#small #recipe.left_for_side_menu #outer{
    left:250px;
}

#profile #content_inner{padding:15px 10px 30px 10px;} 
#not_small #profile #content_inner{padding:15px 30px 30px 30px;} 

#profile .profile_radio_div{
	margin-bottom:8px;
	display:block;
}

#profile .header, #profile .header_no_border{font-weight:bold;padding-top:10px;margin-bottom:3px;border-top:gray 1px solid;}
#profile .header_no_border{border:None}

#profile #show_recipe_circle_options{cursor:pointer;font-weight:bold;color:gray;font-size:90%;text-decoration:underline;}

#profile .insides{margin-left:10px}
#profile .edit_icon{display:inline;color:gray;text-decoration:underline;cursor:pointer;padding:3px 3px 3px 0}
#profile .name{display:inline-block;}
#profile .current_email{}
#profile  form{margin-top:10px;}
#profile #email_input{float:left;width:150px;margin-right:2px;margin-top:2px;}
#profile .space_divider{height:8px;}
#profile .label{font-weight:bold}
#profile .error_msg{color:red;}
#profile .header_account_recovery{color:red}

#profile .link_in_recipe {text-decoration:None; color:#1d5de0;} /* class is added to element in tags.py*/
/* class also used in recipe text , profile on recipe and community box*/

#profile .pageoption{
   cursor:pointer;
   border-top: 1px solid black;
    padding: 10px 0;
}
#profile .pageoption_label{
  font-weight:bold;
}
#profile .pageoption_description{
}
#profile .profile_page_back{
    font-weight: bold;
    padding-bottom: 5px;
    color: green;
    cursor: pointer;
}

#profile .profile_submit_button{
	display:inline-block;
    min-width: 120px;
    text-align: center;
    border-radius: 3px;
    background: rgb(218, 218, 218);
    cursor: pointer;
    line-height:var(--lh22);
    padding:5px 10px;
 }
    
#profile .profile_submit_button.disabled{
    color:gray;
    cursor:pointer;
}

#profile .show_my_followers_button{
	display: inline-block;
	border: solid 1px gray;
	border-radius: 5px;
	text-align: center;
	line-height: 22px;
	padding: 7px 8px;
	margin: 5px 0;
	cursor: pointer;
	min-width:200px;
 }

#profile #profile_page_photo_form .button_wrapper {
	width:100px;
}

#profile_sharing input{margin-top:5px;}
#profile_sharing form{margin:0px;}
#profile_sharing ul{margin:0px;}
#profile_sharing #default_form_wrapper{border:none 1px gray;margin-top:5px;}
#profile_sharing #add_form_wrapper{margin-top:10px;}

#profile_sharing label{ display: block;
    padding-left: 1em;
    text-indent: -1em;}

#profile_sharing .single_line_explanation{margin-bottom:10px;}
#profile_sharing .explanation{margin-top:7px;}

#profile_sharing .invite_link{text-decoration:none;color:blue;}
#profile_sharing #link_show_members{text-decoration:underline;cursor:pointer}

#profile_sharing #personal_recipebox_link{margin-top:5px;margin-bottom:5px;}
#profile_sharing #personal_recipebox_link_a{color:blue;text-decoration:none}

#profile_sharing #my_members, #profile_sharing #people_who_added_me, #profile_sharing #user_search_results {overflow:hidden; border:solid orange 1px; max-width:400px;margin:3px 0px 3px 0px;}

#profile_sharing #my_members{padding:5px 0px 5px 5px;}

#profile_sharing #link_show_people_who_added_me{font-size:var(--f11);text-decoration:underline;cursor:pointer;margin-bottom:3px;}
#profile_sharing #link_show_people_who_added_me{font-size:var(--f13);}
#profile_sharing #people_who_added_me{padding:5px 0px 0px 5px;}
#profile_sharing .i_am_member{display:inline-block;float:left;}

#profile_sharing #msg_count_in_circle{margin:3px 0px 2px 0px}

#profile_sharing #ul_people_who_added_me{overflow:hidden;padding:0px 0px 0px 0px;margin:6px 0px 0px 0px;}

#profile_sharing #user_search_results{padding:5px 5px 5px 5px;}
#profile_sharing .search_user_result{
    display: block;
    font-family: 'lucida grande', tahoma, verdana, arial, sans-serif;
    font-size:var(--f12);
    font-weight:bold;
    height: auto;
    list-style-type: none;
    height:52px;
    padding-left:60px;
    padding-bottom:3px;
    padding-top:3px;
}

#profile_sharing .search_result_display_name{
    padding-top:2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#profile_sharing .search_result_img{height: 50px;width: 50px;position:absolute;left:6px;}

#profile_sharing .add_member_not_addable{color:black;margin-top:0px;font-weight:normal;}
#profile_sharing .add_member{color:blue;cursor:pointer;margin-top:0px;font-weight:normal;text-decoration:underline;width:120px;}
#profile_sharing .remove_member_not_addable{color:red;cursor:pointer;margin-top:0px;}
#profile_sharing .remove_member{color:red;cursor:pointer;margin-top:0px;font-weight:normal;text-decoration:underline;width:90px;}
#profile_sharing .remove_member_cannot{color:black;margin-top:0px;font-weight:normal;}
 

#profile_sharing #checkbox_all_none_wrapper{
     position:absolute;
     left:61px;
     margin:3px 3px 3px 3px; 
     padding:0px; line-height:0;
 }

 #profile_sharing .some_checked{
     background:blue;
 }
 
#profile_sharing #check_all_none{
    margin:0px;  /*overwritten by small*/
    opacity:0.8;
    float:left;
    margin-top:0px;
     padding:0px;
}

/* set_password_form is on separate webpage, also with #profile ID*/

 #profile #set_password_form .pw_show_hide{
    width: 56px;
    position: absolute;
    height: 36px;
    line-height:var(--lh36);
    right: 0;
    top: 0;
    font-size:var(--f13);
    font-weight: bold;
    color: #9c9999;
    text-align: center;
    cursor:pointer;
}

#profile #set_password_form .newuser_input{
    width:260px;
    box-sizing:border-box;
    height:36px;
    border:#9d9d9d solid 1px;
    font-size:var(--f16);
    color:#5c5c5c;
    padding:0 5px 0 5px;
    margin:0px;
}

#profile #set_password_form .error_msg{
    color:red;
    margin-bottom:4px;
}

#profile #change_account_form_button{
    width:170px;
    border:1px solid gray;
    height:38px;
    line-height:var(--lh38);
    text-align:center;
    border-radius:5px;
    cursor:pointer;
}

#profile #change_account_form_button:hover{
    background:#f6f6f6;
}

#profile #change_account_form_button.clicked{
    background:#cbcbcb;
}




#download #form_intro{font-weight:bold;margin-bottom:5px;}

#download #form_wrapper{margin-left:10px;}

#download #tag_input{
       width:150px; /*overwritten by small*/
      padding:1px 1px 1px 1px;}
#small #download #tag_input{width:130px;}

#download input[type=radio]{margin-top:5px;margin-right:5px;}

#small #download #tag_search_type, #small #download optgroup{font-size:var(--f15);}

#small #download .line2{margin-left:50px;}

#download #get_files_button{
       margin-top:10px;
font-size:var(--f15);

}

#download .button_working{
    background-image:url('https://cdn.copymethat.com/static/spinner_16.gif');
    background-repeat:no-repeat;
    background-position:center;
}

#download #spinner{height:25px;width:25px;display:inline-block;}


#download #tag_options{
   z-index:2;
   position:absolute;
    border-bottom:1px solid black;
    top:27px; /*overwritten by small*/
    cursor:default;
}

#small #download #tag_options{
    top:29px;
}

#download .tag_option{
    display:block;
    width:150px;
    border:1px solid black;
    border-bottom:none;
    background:white;
    padding-left:2px;
    overflow:hidden;
    padding-top:2px; /*overwritten by small*/
    padding-bottom:2px; /*overwritten by small*/
}

#small #download .tag_option{
    padding-top:4px; 
    padding-bottom:4px;
}

#download .hlight{
    background:#FFC65F;
}


#about_tine .content{
    padding-top:10px;
}
#about_tine #top_margin{
   height:20px;
   }

#about_tine .section{
}

#about_tine .section div{
    margin-top:10px;
}

#about_tine .section_title{font-weight:bold;font-size:var(--f15);margin-bottom:3px;}

#small #about_tine .section_title{margin-top:0px;}

#about_tine .photo_div_right img, #about_tine .photo_div_left img{ 
}

#about_tine .photo_div_left
{
   float:left; margin:0 15px 10px 0px; 
}

#about_tine .photo_div_right
{
   float:right; margin:0 0px 10px 15px; 
}

#about_tine .photo_div_right .caption, #about_tine .photo_div_left .caption{ 
    font-size:var(--f11);text-align:center; 
}





#small #recipes_shared .content{
    overflow:hidden;
}

#recipes_shared .app_download_div{
    margin:0 auto;
    width:180px;
    border:solid #CC0C47 2px;
    text-align:center;
    color:#CC0C47;
    border-radius:5px;
    font-size:var(--f16);
     margin-top: 5px;
    background:white;
    height:32px;
    line-height:var(--lh32);
}

#not_small #recipes_shared .app_download_div{
    width:200px;
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    margin-top:0px;
}

#recipes_shared .app_download_div_a{
    text-decoration:None;
}

#recipes_shared .recipebox_name_small{text-align:center;color:#920732;font-size:var(--f16);font-weight:bold;padding-top:3px;}


#recipes_shared #add_people_to_circle_link{float:right}
#small #recipes_shared #add_people_to_circle_link{float:none;margin-bottom:3px}
#recipes_shared #add_people_to_circle_link_a{text-decoration:underline;color:#0034d4;font-size:var(--f11);font-weight:bold;}

#recipes_shared #from_user_div_public{position:relative;text-align:center;}
#recipes_shared #page_title_recipe_box {display:inline-block;text-align:left;height:17px;line-height:var(--lh17);}

#not_small #recipes_shared #follow_link_div{margin-top:3px;display:inline-block;color:gray;font-size:var(--f10);cursor:pointer;position:absolute;margin-left:5px;height:17px;line-height:var(--lh17);font-weight:bold;}
#not_small #recipes_shared #follow_link_div:hover{text-decoration:underline}


#not_small #recipes_shared #sort_select_div{
    float:right;
    color:gray;
}
#recipes_shared .sort_label{
    display:inline-block;
}

 #recipes_shared #sort_select_div .sort_option{
    display:inline-block;
    cursor:pointer;
    color:gray;
}
 #recipes_shared #sort_select_div .sort_option_chosen{
    display:inline-block;
    color:black;
}
 #recipes_shared #sort_select_div .sort_option:hover{
    color:black;
}

 #not_small #recipes_shared #count_msg_div{
     position: absolute;
     top: 0; 
     left: 20px; 
     top: -25px;
}

#not_small #recipes_shared .recipe_count_msg{
color:black;
margin-left:0px;
float:left;
font-size:var(--f13); 
text-align: left; 
font-family: 'Georgia Sans, sans-serif';
margin-bottom:3px;
}

#small #recipes_shared .recipe_count_msg{margin: 10px 0 4px 6px;color:#1f1f1f;font-size:var(--f14);float:left;}

#recipes_shared .msg_special_case_when_none_found{
    background:white;
    padding:10px;
    text-align:center;
}

#not_small #recipes_shared .msg_link_to_fb_friends{
    color:#920732;
    text-align:left;
    background:white;
    width:100%;
    padding:5px 0px 5px 2px;
    font-size:var(--f13);
     margin:2px 0px 2px 0px;
 }

 #not_small #recipes_shared .msg_link_to_fb_friends a{
    color:#920732;
    text-decoration:underline;
 }
 
#recipes_shared .legend_about_title{font-size:85%;margin-top:5px;text-align:left}
#recipes_shared .legend_cmt_recipe_title_color{color:#0034d4;}

#small #recipes_shared #sort_select_div{
    float:right;
}

#small #recipes_shared #follow_link_div{display:block;color:gray;font-size:var(--f10);margin-top:5px;cursor:pointer;text-align:center;font-weight:bold;}
#small #recipes_shared #follow_link_div:hover{text-decoration:underline}

#small #recipes_shared .owner_div{
    padding: 0 3px;
}

#small #recipes_shared .owner_div_clicked{
    background:#F7E8ED;
}
#small #recipes_shared .owner {
    font-size:var(--f12);
    font-weight:normal;
    line-height:var(--lh22);
    min-height: 22px;
    text-align:center;
     white-space:nowrap;
     overflow:hidden;
     width:100%;
     box-sizing:border-box;
     font-size:var(--f12);
     border-bottom:1px dotted gray;
     color:gray;
}

#small #recipes_shared .owner_a{
    color:gray;
    text-decoration:None;
}





#recipes_shared .next_prev_bottom_page{
padding-top: 15px;
padding-bottom: 10px;
}


#recipes_shared .next_prev_top_page{
    margin-bottom:1px;margin-left:10px;font-size:var(--f11);float:left
}

#recipes_shared .next_prev_top_page .previous_page, #recipes_shared .next_prev_top_page .next_page{
  color:black;text-decoration:none
}


#tag_mgmt #more_explanation{
    max-width:600px;
        -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

#tag_mgmt #tag_hints li{margin-top:4px;margin-bottom:4px}

#tag_mgmt #create_tag_trigger{
	 min-width: 192px;
    text-align: center;
    display: inline-block;
	box-sizing: border-box;
	border: 1px gray solid;
	border-radius: 4px;
	cursor: pointer;
	background:white;
	margin-top:10px;
	margin-right:10px;
     line-height:0;
    padding: 18px 5px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}
	
#tag_mgmt #newtag_div  {
      border: 2px #a70839 solid;
      padding:10px;
  }
  
 #not_small #tag_mgmt #newtag_div  {
      width:316px;
  }
    
#tag_mgmt #newtaginput{
    width: 195px;
    box-sizing: border-box;
    border: solid gray 1px;
    margin: 0 0 0 0;
    height: 36px;
    line-height:var(--lh36);
    padding: 0 2px;
 }
 
 #tag_mgmt #create_tag_submit,
 #tag_mgmt #cancel_tag_submit {
	    min-width:100px;
        display: inline-block;
        text-align: center;
        border: 1px gray solid;
        border-radius: 4px;
        padding: 0 5px;
        cursor: pointer;
        background:white;
        margin-top:10px;
        margin-right:10px;
		line-height:0;
		padding: 18px 5px;
		box-sizing: border-box;
		white-space: nowrap;
		word-wrap: break-word;
		overflow: hidden;
    }
	
#tag_mgmt #create_tag_submit.clicked{
    background:#eeeeee;
}

#tag_mgmt #create_tag_submit.disabled{
    color: gray;
    border-color: lightgray;
}
                
#tag_mgmt .single_tag{
    border-bottom:dotted 1px black;
    border-top:dotted 1px black;
    width:320px;
    padding-top:4px;}

#tag_mgmt .tag_name{
    font-weight:bold;
    line-height:0;
    padding:18px 0;
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

#tag_mgmt .tag_option{
    line-height:0;
    padding:18px 0;
   cursor:pointer;
   color:#3493e5;
   font-weight:bold;
   font-size:var(--f15);
   float:left;
   margin-left:12px;
}

#tag_mgmt .tag_option.first{
   margin-left:0px;
}

#small #tag_mgmt .tag_option{
      font-size:var(--f16);
}

#small.font130plus #tag_mgmt .tag_option{
      font-size:var(--f14);
}

#small.font150plus #tag_mgmt .tag_option{
     float:none;
	 margin:8px 0;
}

#not_mob #tag_mgmt .tag_option{
   cursor:pointer;
   font-weight:bold;
   float:left;
}

#tag_mgmt .tag_option.inactive{
     /* while waiting for response */
      color:#adadad;
}

#tag_mgmt .view_recipes_link{margin-left:0;margin-right:5px;float:left;}
#tag_mgmt .view_recipes_link a{
	margin-left:0;
	text-decoration:none;
	font-size:var(--f15);
	color:gray;
	font-weight:bold;}
#small #tag_mgmt .view_recipes_link a{
	font-size:var(--f16);
}
#small.font130plus #tag_mgmt .view_recipes_link a{
	font-size:var(--f14);
}
#small #tag_mgmt .view_recipes_link .ahref{text-decoration:underline;}
#not_small #tag_mgmt .view_recipes_link .ahref{text-decoration:underline;}
#not_mob #tag_mgmt .view_recipes_link .ahref:hover{color:#484848;}

#not_mob #tag_mgmt .tag_option:hover{
    text-decoration:underline
}
#not_mob #tag_mgmt .tag_option.remove_tag_confirm,
#mob #tag_mgmt .tag_option.remove_tag_confirm{
    color:red
 }

/* tine, to here checking line-height:0 */
#tag_mgmt .update_tag_input{
    width: 195px;
    box-sizing: border-box;
    border: solid gray 1px;
    margin: 0 0 0 0;
    height: 0px;
    line-height:0;
    padding: 19px 2px;
    margin-top:5px;
    margin-bottom:5px;
}

#tag_mgmt .tag_form_button{
    text-align: center;
    height: 36px;
    height: 0px;
    line-height:0;
    box-sizing: border-box;
    border: 1px gray solid;
    border-radius: 4px;
    padding: 19px 8px;
    cursor: pointer;
    background: white;
    margin-top: 5px;
    margin-bottom: 5px;
}

#not_small .tag_form_button{
    width:200px;
     margin-left: 10px;
}

#tag_mgmt .tag_form_button.edit_tag_submit{
    width:80px;
    display:inline-block;
}

#tag_mgmt .edit_form{margin-top:7px}
#tag_mgmt #more_explanation_link{color:#a70839;cursor:pointer;text-decoration:none;font-weight:bold;}
#tag_mgmt .explanation_line_label{font-weight:bold;}


#cookie_info #instructions li{margin:10px;}
#cookie_info #instructions .little_space{margin-top:7px; margin-bottom:7px}




#not_small .chevron_wrapper_next{
      cursor:pointer; float: left; margin-right: 5px; padding: 8px 18px; background-color: white; margin: 0 2px;}
#not_small .chevron_wrapper_prev{
   cursor:pointer; float: left; padding: 8px 18px; background-color: white; margin: 0 2px;}
#not_small .chevron {
  position: relative;
  padding: 2px;
  height:17px;
  width: 0px;
  opacity:0.8;
}
#not_small .chevron_wrapper_prev_inactive{
	cursor:auto;
	background:transparent;
}

#not_small .chevron:before {
  content: ''; position: absolute;top: 0;left: 0;height: 50%;width: 100%;background: #adbcc3;
   -webkit-transform: skew(30deg, 0deg); -moz-transform: skew(30deg, 0deg); -ms-transform: skew(30deg, 0deg); -o-transform: skew(30deg, 0deg); transform: skew(30deg, 0deg);
}

#not_small .chevron_white:before{
	background:white;
}

#not_small .chevron_dark:before{
	background:#6f6f6f;
}

#not_small .chevron_inactive:before{
	background: transparent;
}

#not_small .chevron:after {
  content: ''; position: absolute; top: 50%; right: 0; height: 50%; width: 100%;background: #adbcc3;
  -webkit-transform: skew(-30deg, 0deg); -moz-transform: skew(-30deg, 0deg); -ms-transform: skew(-30deg, 0deg);-o-transform: skew(-30deg, 0deg);transform: skew(-30deg, 0deg);
}

#not_small .chevron_white:after{
	background:white;
}

#not_small .chevron_dark:after{
	background:#6f6f6f;
}

#not_small .chevron_inactive:after{
	background: transparent;
}

#not_small .chevron_hover{opacity:1.0}

#not_small .chevron_rotate180{
  -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg);-ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg);
}



#small .next_button{
display:inline-block;
font-weight:bold; font-size:var(--f32);line-height:var(--lh32);
height:32px;padding:0px;width:32px;text-align:center;
color:#5f0b1d;
margin:2px;
}


#small #recipes .load_more_button, #small #recipes_shared .load_more_button{
    background: #CC0C47;
    color: white;
    font-size:var(--f15);
    padding: 5px 18px;
    border-radius: 2px;
    margin: 2px auto;
    width: 200px;
    text-align:center;
}

#small #recipes .load_more_button.clicked, #small #recipes_shared .load_more_button.clicked{
    background: #A80739;
}

#not_small #follower_ing #content_top {
    padding:0px 10px 0px 8px;
} 
    
#recipes #outer #recipes_view table, 
#recipes #outer #sort_div table {
   /* may not include datepicker table */
    border-collapse: collapse;
    table-layout: fixed;
    white-space: normal;
    word-wrap: break-word;
    border-spacing:0;
    width:100%;
}

 #recipes #outer #recipes_view table td, 
 #recipes #outer #sort_div table td {
   padding:0; margin:0;
}

 #recipes #outer #recipes_view table td {
   vertical-align:top;
}

#recipes #recipes_view_top{
   min-width:600px;
   height:46px;
}

#recipes #recipes_view #results_set{
        width: 100%;
 }

#not_small #recipes #sort_div{
    width:210px;
    text-align:left;
     box-sizing:border-box;
     float:right;
     margin-right:10px;
     
 }
 
 #recipes #recipes_column, #recipes #recipes_column_div {
    width:100%;
}

#not_small #recipes .vertical_search_trigger .usesfilter{
    color: #CC0C47;
}
      
#not_small #recipes .single_recipe, 
#not_small #recipes_shared .single_recipe{
     cursor:pointer;
     background: white;
    position:relative;
    -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.25);
    -moz-box-shadow:    0px 1px 6px 0px rgba(0, 0, 0, 0.25);
    box-shadow:         0px 1px 6px 0px rgba(0, 0, 0, 0.25);
     text-align:center;
}

#not_small #recipes .single_recipe.clicked, #not_small #recipes_shared .single_recipe.clicked {
    -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:    0px 1px 6px 0px rgba(0, 0, 0, 0.6);
    box-shadow:         0px 1px 6px 0px rgba(0, 0, 0, 0.6);
}


#not_small #recipes .single_recipe, #not_small #recipes_shared .single_recipe{
    display: inline-block;
}

#not_small #not_mob #recipes .single_recipe:hover, 
#not_small #not_mob #recipes_shared .single_recipe:hover{
    -webkit-box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:    0px 1px 6px 0px rgba(0, 0, 0, 0.6);
    box-shadow:         0px 1px 6px 0px rgba(0, 0, 0, 0.6);
}

#not_small #recipes .recipe_thumb, 
#not_small #recipes_shared .recipe_thumb {
    display: inline-block;
    background-position: center center;
    background-size: cover;
    /* border:solid gray 1px; */
   
}

/* these sizes used for all not mobile
   and mobile  >1000 (other mobile have media queries below ) */
   /* 4 across */
#not_small #recipes .single_recipe, 
#not_small #recipes_shared .single_recipe{
	width:231px;
	margin:0px 7px 14px 7px;
}
#not_small #recipes .recipe_thumb, 
#not_small #recipes_shared .recipe_thumb{
	width: 231px;
	height: 226px;
}
#not_small #recipes .orig_recipe_link_div, 
#not_small #recipes_shared .orig_recipe_link_div,
#not_small #recipes .orig_recipe_link_div a, 
#not_small #recipes_shared .orig_recipe_link_div a{
	width:231px;
}	

/* smaller grid : 5 across */
#not_small #recipes .view_smaller_grid .single_recipe, 
#not_small #recipes_shared .view_smaller_grid .single_recipe{
	width:180px;
	margin:0px 6px 14px 6px;
}

#not_small #recipes .view_smaller_grid .recipe_thumb, 
#not_small #recipes_shared .view_smaller_grid .recipe_thumb {
    width: 180px;
    height: 178px;
}

#not_small #recipes .view_smaller_grid .orig_recipe_link_div, 
#not_small #recipes_shared .view_smaller_grid .orig_recipe_link_div,
#not_small #recipes .view_smaller_grid .orig_recipe_link_div a, 
#not_small #recipes_shared .view_smaller_grid .orig_recipe_link_div a{
    width:180px;
}

@media screen and (min-width : 1366px)
{ 
   /* smaller grid : 6 across */
	#not_small #mob #recipes .view_smaller_grid .single_recipe, 
	#not_small #mob #recipes_shared .view_smaller_grid .single_recipe{
		width:196px;
		margin:0px 6px 14px 6px;
	}

	#not_small #mob #recipes .view_smaller_grid .recipe_thumb, 
	#not_small #mob #recipes_shared .view_smaller_grid .recipe_thumb {
		width: 196px;
		height: 190px;
	}

	#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div, 
	#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div,
	#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div a, 
	#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div a{
		width:196px;
	}
}

@media screen and (max-width : 600px)
{ 
  #not_small #mob #recipes .single_recipe, 
  #not_small #mob #recipes_shared .single_recipe{
        width:260px;
		margin:0px 7px 14px 7px;
    }
  #not_small #mob #recipes .recipe_thumb, 
  #not_small #mob #recipes_shared .recipe_thumb{
        width: 260px;
        height: 254px;
    }
	#not_small #mob #recipes .orig_recipe_link_div, 
	#not_small #mob #recipes_shared .orig_recipe_link_div,
	#not_small #mob #recipes .orig_recipe_link_div a, 
	#not_small #mob #recipes_shared .orig_recipe_link_div a{
		width:260px;
	}	
	/* fir 3 across, but really only works for 600 2024-06 found 0 users < 600 (except some 300s for ipad? split view? not handled */
	#not_small #mob #recipes .view_smaller_grid .single_recipe, 
	#not_small #mob #recipes_shared .view_smaller_grid .single_recipe{
		width:193px;
		 margin:0px 3px 14px 3px;
	}

	#not_small #mob #recipes .view_smaller_grid .recipe_thumb, 
	#not_small #mob #recipes_shared .view_smaller_grid .recipe_thumb {
		width: 193px;
		height: 191px;
	}

	#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div, 
	#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div,
	#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div a, 
	#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div a{
		width:193px;
	}
}

@media screen and (min-width : 601px) and (max-width: 603px){
    /* Kindle HD 8 is 602. For some reason needed to say 601/603, at least in emulator*/
	/* fit 3 across. wider physical screen than others with same px */
 #not_small #mob #recipes .single_recipe, 
 #not_small #mob #recipes_shared .single_recipe{
       width: 180px;
       margin: 0px 6px 14px 6px;
    }
  #not_small #mob #recipes .recipe_thumb, 
  #not_small #mob #recipes_shared .recipe_thumb{
        width: 180px;
        height: 178px;
    }
	#not_small #mob #recipes .orig_recipe_link_div, 
	#not_small #mob #recipes_shared .orig_recipe_link_div,
	#not_small #mob #recipes .orig_recipe_link_div a, 
	#not_small #mob #recipes_shared .orig_recipe_link_div a{
		width:180px;
	}	
	
     /* fit 4 across */
	#not_small #mob #recipes .view_smaller_grid .single_recipe, 
	#not_small #mob #recipes_shared .view_smaller_grid .single_recipe{
		width:143px;
		 margin:0px 3px 14px 3px;
	}

	#not_small #mob #recipes .view_smaller_grid .recipe_thumb, 
	#not_small #mob #recipes_shared .view_smaller_grid .recipe_thumb {
		width: 143px;
		height: 141px;
	}

	#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div, 
	#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div,
	#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div a, 
	#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div a{
		width:143px;
	}

}

@media screen and (min-width : 604px) and (max-width : 673px)
/* largest is pretty much 712 */
/* fit 2 across */
{ 
  #not_small #mob #recipes .single_recipe, 
  #not_small #mob #recipes_shared .single_recipe{
        width:260px;
		margin:0px 7px 14px 7px;
    }
  #not_small #mob #recipes .recipe_thumb, 
  #not_small #mob #recipes_shared .recipe_thumb{
        width: 260px;
        height: 254px;
    }
	#not_small #mob #recipes .orig_recipe_link_div, 
	#not_small #mob #recipes_shared .orig_recipe_link_div,
	#not_small #mob #recipes .orig_recipe_link_div a, 
	#not_small #mob #recipes_shared .orig_recipe_link_div a{
		width:260px;
	}	
	/* fir 3 across */
	#not_small #mob #recipes .view_smaller_grid .single_recipe, 
	#not_small #mob #recipes_shared .view_smaller_grid .single_recipe{
		width:186px;
		 margin:0px 6px 14px 6px;
	}

	#not_small #mob #recipes .view_smaller_grid .recipe_thumb, 
	#not_small #mob #recipes_shared .view_smaller_grid .recipe_thumb {
		width: 186px;
		height: 184px;
	}

	#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div, 
	#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div,
	#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div a, 
	#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div a{
		width:186px;
	}
}

@media screen and (min-width : 674px) and (max-width : 743px)
/* largest is pretty much 712 */
/* fit 2 across */
{ 
  #not_small #mob #recipes .single_recipe, 
  #not_small #mob #recipes_shared .single_recipe{
        width:260px;
		margin:0px 10px 14px 10px;
    }
  #not_small #mob #recipes .recipe_thumb, 
  #not_small #mob #recipes_shared .recipe_thumb{
        width: 260px;
        height: 254px;
    }
	#not_small #mob #recipes .orig_recipe_link_div, 
	#not_small #mob #recipes_shared .orig_recipe_link_div,
	#not_small #mob #recipes .orig_recipe_link_div a, 
	#not_small #mob #recipes_shared .orig_recipe_link_div a{
		width:260px;
	}	
	/* fir 3 across */
	#not_small #mob #recipes .view_smaller_grid .single_recipe, 
	#not_small #mob #recipes_shared .view_smaller_grid .single_recipe{
		width:208px;
		 margin:0px 6px 14px 6px;
	}

	#not_small #mob #recipes .view_smaller_grid .recipe_thumb, 
	#not_small #mob #recipes_shared .view_smaller_grid .recipe_thumb {
		width: 208px;
		height: 206px;
	}

	#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div, 
	#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div,
	#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div a, 
	#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div a{
		width:208px;
	}
}

@media screen and (min-width : 744px) and (max-width : 799px)
/* includes new ipad-mini 744, ipad 768, and 753px Samsung tablet */
/* fit 3 across */
{ 
  #not_small #mob #recipes .single_recipe, 
  #not_small #mob #recipes_shared .single_recipe{
        width:231px;
		margin:0px 7px 14px 7px;
    }
  #not_small #mob #recipes .recipe_thumb, 
  #not_small #mob #recipes_shared .recipe_thumb{
       width: 231px;
       height: 226px;
    }
	#not_small #mob #recipes .orig_recipe_link_div, 
	#not_small #mob #recipes_shared .orig_recipe_link_div,
	#not_small #mob #recipes .orig_recipe_link_div a, 
	#not_small #mob #recipes_shared .orig_recipe_link_div a{
		width:231px;
	}	
	@media screen and (min-width : 744px) and (max-width : 751px)
		/* fit 4 across */
		{ 
			#not_small #mob #recipes .view_smaller_grid .single_recipe, 
			#not_small #mob #recipes_shared .view_smaller_grid .single_recipe{
				width:170px;
				 margin:0px 6px 14px 6px;
			}

			#not_small #mob #recipes .view_smaller_grid .recipe_thumb, 
			#not_small #mob #recipes_shared .view_smaller_grid .recipe_thumb {
				width: 170px;
				height: 168px;
			}

			#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div, 
			#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div,
			#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div a, 
			#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div a{
				width:170px;
			}
		}
	@media screen and (min-width : 752px) and (max-width : 799px)
		/* includes ipad 768, and 753px Samsung tablet */
		/* fit 4 across */
		{ 
			#not_small #mob #recipes .view_smaller_grid .single_recipe, 
			#not_small #mob #recipes_shared .view_smaller_grid .single_recipe{
				width:176px;
				 margin:0px 6px 14px 6px;
			}

			#not_small #mob #recipes .view_smaller_grid .recipe_thumb, 
			#not_small #mob #recipes_shared .view_smaller_grid .recipe_thumb {
				width: 176px;
				height: 174px;
			}

			#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div, 
			#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div,
			#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div a, 
			#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div a{
				width:176px;
			}
		}
}



@media screen and (min-width: 800px) and (max-width: 859px){
  /* fit 3 across */
  /* 834 is pretty much the widest in this range */
	#not_small #mob #recipes .single_recipe, 
	#not_small #mob #recipes_shared .single_recipe {
       width:254px;
       margin: 0px 5px 14px 5px;
   }
	#not_small #mob #recipes .recipe_thumb ,
	#not_small #mob #recipes_shared .recipe_thumb{
        width: 254px;
        height: 252px;
    } 
	#not_small #mob #recipes .orig_recipe_link_div, 
	#not_small #mob #recipes_shared .orig_recipe_link_div,
	#not_small #mob #recipes .orig_recipe_link_div a, 
	#not_small #mob #recipes_shared .orig_recipe_link_div a{
		width:254px;
	}	
	@media screen and (min-width : 825px) and (max-width: 859px){ 
		 #not_small #mob #recipes .single_recipe, 
		 #not_small #mob #recipes_shared .single_recipe {
			   margin: 0px 8px 14px 8px;
		   }
	}
	
	#not_small #mob #recipes .view_smaller_grid .single_recipe, 
	#not_small #mob #recipes_shared .view_smaller_grid .single_recipe {
       width:188px;
       margin: 0px 5px 14px 5px;
   }
	#not_small #mob #recipes .view_smaller_grid .recipe_thumb ,
	#not_small #mob #recipes_shared .view_smaller_grid .recipe_thumb{
        width: 188px;
        height: 186px;
    } 
	#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div, 
	#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div,
	#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div a, 
	#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div a{
		width:188px;
	}	
}

@media screen and (min-width : 860px) and (max-width : 960px) ,
@media screen and (min-width : 964px) and (max-width : 1000px) 
/* mostly just 860, 902, 960 in this range */
/* fit 3 across */
{ 
  #not_small #mob #recipes .single_recipe, 
  #not_small #mob #recipes_shared .single_recipe{
        width:260px;
		margin:0px 7px 14px 7px;
    }
  #not_small #mob #recipes .recipe_thumb, 
  #not_small #mob #recipes_shared .recipe_thumb{
        width: 260px;
        height: 254px;
    }
	#not_small #mob #recipes .orig_recipe_link_div, 
	#not_small #mob #recipes_shared .orig_recipe_link_div,
	#not_small #mob #recipes .orig_recipe_link_div a, 
	#not_small #mob #recipes_shared .orig_recipe_link_div a{
		width:260px;
	}	
	@media screen and (min-width : 900px) and (max-width: 1000px){ 
		 #not_small #mob #recipes .single_recipe, 
		 #not_small #mob #recipes_shared .single_recipe {
			   margin: 0px 10px 14px 10px;
		   }
	}
	/* fit 4 across */
   #not_small #mob #recipes .view_smaller_grid .single_recipe, 
   #not_small #mob #recipes_shared .view_smaller_grid .single_recipe {
       width:203px;
   }
	#not_small #mob #recipes .view_smaller_grid .recipe_thumb ,
	#not_small #mob #recipes_shared .view_smaller_grid .recipe_thumb{
        width: 203px;
        height: 201px;
    } 
	#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div, 
	#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div,
	#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div a, 
	#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div a{
		width:203px;
	}	
}

@media screen and (min-width : 961px) and (max-width: 963px){
    /* Kindle HD 8 landscape width is 962. For some reason needs 1px bigger, at least in emulator */
	/* fit 4 across */
  #not_small #mob #recipes .single_recipe, 
  #not_small #mob #recipes_shared .single_recipe{
       width: 220px;
       margin: 0px 8px 14px 8px;
    }
   #not_small #mob #recipes .recipe_thumb, 
   #not_small #mob #recipes_shared .recipe_thumb{
        width: 220px;
        height: 214px;
    }
	#not_small #mob #recipes .orig_recipe_link_div, 
	#not_small #mob #recipes_shared .orig_recipe_link_div,
	#not_small #mob #recipes .orig_recipe_link_div a, 
	#not_small #mob #recipes_shared .orig_recipe_link_div a{
		width:220px;
	}

	/* fit 5 across */
   #not_small #mob #recipes .view_smaller_grid .single_recipe, 
   #not_small #mob #recipes_shared .view_smaller_grid .single_recipe {
       width:176px;
   }
	#not_small #mob #recipes .view_smaller_grid .recipe_thumb ,
	#not_small #mob #recipes_shared .view_smaller_grid .recipe_thumb{
        width: 176px;
        height: 174px;
    } 
	#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div, 
	#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div,
	#not_small #mob #recipes .view_smaller_grid .orig_recipe_link_div a, 
	#not_small #mob #recipes_shared .view_smaller_grid .orig_recipe_link_div a{
		width:176px;
	}
	
}

#not_small #recipes_shared .owner_div{
    text-align:center;
    height:18px; /* necessary for height to be correct in iPad when .owner_div a cuts off a third line */
	line-height:var(--lh18);
}
#not_small #recipes_shared .owner_div_clicked{
    background:#F7E8ED;
}

#not_small #recipes_shared .owner_div a{
    color:#737373;
    text-decoration:None;
    display:inline-block;
    overflow: hidden;
    text-align: center;
    min-height: 16px;
    max-height: 16px;
    line-height:var(--lh16);
    font-style: italic;
	 font-size:var(--f13);
     font-family:arial; /* open sans doesn't work with italic. The last part of the last letter is cut off with overflow:hidden */

}

#not_small #not_mob #recipes_shared .owner_div a:hover{
	text-decoration:underline;
}

#not_small #recipes .recipe_info_column, #not_small #recipes_shared .recipe_info_column{
    font-family:arial;
    padding-top:5px;
    overflow:hidden;
    min-height:32px;
}

#not_small #recipes .recipe_title, 
#not_small #recipes_shared .recipe_title{
	height:50px;  /* necessary for height to be correct in iPad when recipe_title_a cuts off a third line. */
    border-bottom: 1px dashed #DDDDDD; 
}

#not_small #recipes .recipe_title a, 
#not_small #recipes_shared .recipe_title a{
    overflow: hidden;
    font-size:var(--f17);
    font-weight: normal;
    color: black;
    text-decoration: None;
    display: inline-block;
    text-align: center;
    height:42px;
    line-height:var(--lh21);
    padding: 0 3px;
    box-sizing: border-box;
	width: 100%;
}

#not_small.font110plus #recipes .recipe_title a, 
#not_small.font110plus #recipes_shared .recipe_title a{
    height:47px;
}

#not_small.font110plus #recipes .recipe_title, 
#not_small.font110plus #recipes_shared .recipe_title{
	height:55px; 
}

#not_small.font120plus #recipes .recipe_title a, 
#not_small.font120plus #recipes_shared .recipe_title a{
    height:51px;
}

#not_small.font120plus #recipes .recipe_title, 
#not_small.font120plus #recipes_shared .recipe_title{
	height:58px; 
}

#not_small.font130plus #recipes .recipe_title a, 
#not_small.font130plus #recipes_shared .recipe_title a{
    height:55px;
}

#not_small.font130plus #recipes .recipe_title, 
#not_small.font130plus #recipes_shared .recipe_title{
	height:63px; 
}

#not_small.font140plus #recipes .recipe_title a, 
#not_small.font140plus #recipes_shared .recipe_title a{
    height:88px;
}

#not_small.font140plus #recipes .recipe_title, 
#not_small.font140plus #recipes_shared .recipe_title{
	height:96px; 
}

#not_small.font150plus #recipes .recipe_title a, 
#not_small.font150plus #recipes_shared .recipe_title a{
    height:95px;
}

#not_small.font150plus #recipes .recipe_title, 
#not_small.font150plus #recipes_shared .recipe_title{
	height:100px; 
}

#not_small #recipes .orig_recipe_link_div, 
#not_small #recipes_shared .orig_recipe_link_div{
    font-size:var(--f11);
    text-align:center;
    line-height:var(--lh21); 
    background-color: #FAFAFA;
	 height: 21px;
}


#not_small #recipes .orig_recipe_link_div.haslink:hover, 
#not_small #recipes_shared .orig_recipe_link_div.haslink:hover{
   background-color: #A60839;
    color: #fff;
    text-decoration: none;
}

#not_small #recipes .orig_recipe_link_div.haslink a, 
#not_small #recipes_shared .orig_recipe_link_div.haslink a{
    color: #9A9A9A;
    text-decoration:None;
    display:inline-block;
    white-space: nowrap;
     overflow:hidden;
    text-decoration: none;
}

#not_small #recipes .orig_recipe_link_div.haslink a:hover, 
#not_small #recipes_shared .orig_recipe_link_div.haslink a:hover{
 color: white;
    text-decoration: none;
}

#not_small #recipes .description_popup, #not_small #recipes_shared .description_popup{
position: absolute;
z-index: 2;
top: 50px;
left: 5px;
background: white;
border: solid whitesmoke 1px;
padding: 5px;
width: 233px;
max-height: 190px;
overflow: hidden;
box-shadow: 0 0 5px rgb(117, 117, 117);
font-size:var(--f14);
}

#TINE_FIX_DUPLICATE_NAME #not_small #recipes .star{
   position:absolute; 
   right:5px;
    margin:0px;
    height: 19px;
    width: 19px;
    cursor: pointer;
    top:5px;
    background: url('https://cdn.copymethat.com/static/star.png') no-repeat;
}

.triangle-topright {
    position: absolute;
right: 0px;
margin: 0px;
cursor: pointer;
top: 0px;
background: url('https://cdn.copymethat.com/static/starred_corner_recipe.png') no-repeat;
height: 55px;
width: 55px;
}
	

#not_small #recipes .options_trig,
#not_small #recipes .description_trigger
{
    float: left;
    padding-right: 8px;
    position: absolute;
    top: -10px;
    padding-top: 10px;
    padding-bottom: 5px;
}

#not_small #recipes .description_trigger
{
    margin-left:38px;
}


#not_small #recipes .options_trig .spricon, 
#not_small #recipes .description_trigger .spricon{
    height:18px;
    width:18px;
    opacity:.4;
    margin-right:8px;
}
#not_small #recipes .options_trig:hover .spricon,
#not_small #recipes .description_trigger:hover .spricon{
    opacity:.6;
}
#not_small #recipes .options_hidden .options_showing_ic{
    display:none;
}
#not_small #recipes .options_trig .options_notshowing_ic{
    display:none;
}
#not_small #recipes .options_hidden .options_notshowing_ic{
    display:block;
}

#not_small #recipes .options{
    position:absolute; bottom:55px; left:5px;
    background:#A60839;
    padding:5px 0px 15px 0px;
    font-size:var(--f12);
    cursor:default;
    width: 210px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.48);
    border-radius:2px;
    z-index:1;
}

#not_small #recipes .options button{
    margin-top:10px;
    cursor:pointer;
    background: white;
    border:solid 1px #C9C9C9;
    width: 190px;
    border-radius: 4px;
    font-size:var(--f13);
    color:black;
	
	line-height:0;
    padding: 21px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}


#not_small #recipes .options button:hover{
    background: #DFDFDF;
}

#not_small #recipes .options .recipe_delete_confirm{
    background:white;
    color:red;
}

#not_small #recipes .options .recipe_delete_confirm.clicked{
     background:#a0a0a0;
}


#not_small #recipes .options .close_options{
   float:right; font-weight:bold;padding:3px;margin-right:3px;
}

#not_small #recipes .options .close_options:hover{
   cursor:pointer; 
}


#not_small #recipes #recipes_cookbook_picker_div{
    position:absolute;
    font-size:var(--f13);
    z-index:100;
    padding:6px;
    border-radius:3px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.48);
 
    background: white;
    border: solid 2px #eeeeee;
    min-height: 70px;
    min-width: 120px;
    text-align: left;
} 

#not_small #recipes #recipes_cookbook_picker_div .cb_project_name_can_add, 
#not_small #recipes #recipes_cookbook_picker_div .cb_project_name_added{
    border: solid 1px gray;
    padding: 5px;
    height: 26px;
    line-height:var(--lh26);
    margin: 3px 0;
    border-radius: 3px;
    overflow:hidden;
} 

#not_small #recipes #recipes_cookbook_picker_div .cb_project_name_can_add:hover{
    background:#eeeeee;
    cursor: pointer;
} 

#not_small #recipes #recipes_cookbook_picker_div .cb_project_name_can_add .is_added{
    display:none;
} 

#not_small #recipes #recipes_cookbook_picker_div .cb_project_name_added .is_added{
    display:inline-block;
}       

#not_small .menu_with_mp_quickview #mp_datepicker_cancel{
     background:white;
     margin-top:2px;
     border-radius:5px;
     text-align:center;
	 line-height:0;
    padding: 15px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

#not_small #not_mob .menu_with_mp_quickview #mp_datepicker_cancel:hover{
     background:#E6E6E6;
     cursor:pointer;
}


/* ------------------------------------- */

#mealplan #content_inner{
    text-align:center;
    padding:5px 0px 20px 0px;
    background:transparent;
}

#small #mealplan #content_inner{
    padding:0px 0px 20px 0px;
}

#actioncompleted_fixed_popup{
	position:fixed;
	
	bottom:30px;
	left:30px;
	background:cornsilk;
	border: 1px solid #f0ebd7;
    background: #fffae6;
	
	 overflow:hidden;
  	line-height:var(--lh22);
     padding:10px 10px;
  border-radius: 3px;
    box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
}

.generic_popup{
    /* js adds height and scrolll if needed */
    position: fixed;
    width: 300px;
    box-sizing:border-box;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    background: white;
    min-height: 100px;
    padding: 30px 10px;
    border: #CC0C47 solid 3px;
    z-index: 1000;
    text-align:center;
     font-size:var(--f17);
     line-height:var(--lh24);
   top:50px;
}


.generic_popup .generic_popup_link{
   color:blue;
}

.generic_popup .generic_popup_link.clicked{
   color:purple;
}

.generic_popup .generic_popup_link_err{
    margin-bottom:15px;
}


.generic_popup .generic_popup_ok{
    min-width: 60px;
    display: inline-block;
    height:40px;
    border:gray 1px solid;
	/* border adds extra height, even with border-box, if padding takes up the full height */
    border-radius:4px;
    text-align: center;
    line-height:0;
    padding:20px 0;
    margin: 0 auto;
    cursor:pointer;
    white-space: nowrap;
    word-wrap: break-word;
    box-sizing: border-box;
}

#person_info_wrapper{
	background:white;
	overflow:hidden;
}

#not_small #person_info_wrapper{
    min-width:580px;
}

#person_info_wrapper{
	text-align:left;
	max-width:980px;
	margin:0 auto;
	padding: 10px 0px 0 0;
	overflow:hidden;
	width:100%;
    padding-left:5px;
}

#small #person_info_wrapper{
	width:auto;
    padding: 10px;
}

#not_small #person_info_wrapper .profile_picture{
	width:100px;
	height:100px;
	border-radius:200px;
}

#small #person_info_wrapper .profile_picture{
	float:left;
    width:65px;
    height:65px;
    margin-right:5px;
    margin-bottom:4px;
    margin-bottom:1px;
	border-radius:200px;
}

#not_small #person_info_wrapper .owner_name {
    display: inline-block;
    font-size:var(--f18);
    font-weight: bold;
    line-height:var(--lh34);
    overflow: hidden;
    margin-right: 10px;
    margin-top: 3px;
    margin-bottom: 3px;
    max-width: 460px;
    color: #313131;
}

#small #person_info_wrapper .owner_name{
	display: block;
    font-size:var(--f16);
    line-height:var(--lh22);
    overflow: hidden;
    max-width: 235px;
    margin: 5px 0 7px 0;
    font-weight: bold;
    color: #3a3a3a;
}

@media screen and (max-width : 1023px){  
      #not_small #person_info_wrapper .owner_name{
        max-width:290px;
    }
}

@media screen and (max-width : 799px){  
      #not_small #person_info_wrapper .owner_name{
        max-width:260px;
    }
}

@media screen and (max-width : 767px){  
      #not_small #person_info_wrapper .owner_name{
        max-width:360px;
    }
}

@media screen and (min-width : 360px){  
   #small #person_info_wrapper .owner_name{
      max-width:270px;      
    }
}

@media screen and (min-width : 375px){  
   #small #person_info_wrapper .owner_name{
      max-width:285px;      
    }
}

@media screen and (min-width : 411px){  
   #small #person_info_wrapper .owner_name{
      max-width:315px;      
    }
}

@media screen and (min-width : 568px){  
   #small #person_info_wrapper .owner_name{
      max-width:475px;      
    }
}
        
#person_info_wrapper .button_follow{
     overflow:hidden;
  background: #2196F3;
  color: white;
  	 height:34px;
     padding:17px 0;
  line-height:0;
     margin-top:3px;
      margin-bottom:3px;
 width:70px;
 text-align:center;
  font-size:var(--f12);
  border-radius: 3px;
  cursor:pointer;
    box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
}

#small #person_info_wrapper .button_follow{
  	 height:32px;
     padding:16px 0;
 width:74px;
  margin:0;
   border-radius: 14px;
}

    
#not_small #person_info_wrapper #personal_recipebox_share_div{
     overflow:hidden;
    margin: 8px 10px 4px 0;
 text-align:center;
  border-radius: 3px;
  cursor:pointer;
  background: #e8e8e8;
    float: left;
    height: 36px;
    line-height:var(--lh36);
    width: 80px;
    border: 1px solid #e0e0e0;
    font-weight: bold;
    color: #797878;
    font-size:var(--f13);
}

#small #person_info_wrapper #personal_recipebox_share_div{
    overflow:hidden;
 text-align:center;
  font-size:var(--f12);
  border-radius: 3px;
  cursor:pointer;
  background: #e8e8e8;
    color: black;
  	 height:32px;
  line-height:var(--lh32);
 width:64px;
    margin:0 0 0 2px;
    border-radius: 14px;
}

#not_small #person_info_wrapper .owner_profile_text{
	width:500px;
	max-height: 80px;
	line-height:var(--lh20);
	overflow:hidden;
	font-size:var(--f15);
    padding-top: 7px;
    display:inline-block;
}


@media screen and (max-width : 767px){  
      #not_small #person_info_wrapper .owner_profile_text{
        width:388px;
    }
}


#small #person_info_wrapper .owner_profile_text{
    margin-left:0px;
	margin-top:0px;
	width:100%;
	max-height: 80px;
	line-height:var(--lh20);
	overflow:hidden;
	font-size:var(--f16);
    box-sizing: border-box;
    padding-left:3px;
    padding-right:3px;
    padding-top: 4px;
    margin-bottom:6px;
}


#person_info_wrapper .owner_profile_text .link_in_recipe{text-decoration:None; color:#1d5de0;} /* class is added to element in tags.py*/
/* class also used in recipe text */

#not_small #person_info_wrapper #category_wrapper{
	float:right;
    margin-right:5px;
}


@media screen and (max-width : 767px){  
   #not_small #person_info_wrapper #category_wrapper{
        float:none;
    }
}


#not_small #person_info_wrapper .category_button{
	font-size:var(--f13);
    padding:2px 10px;
    border-radius:5px;
    background: white;
    border: 1px solid #e0e0e0;
    font-weight: bold;
    color: #797878;
    cursor:pointer;
     line-height:var(--lh16);
     text-align:center;
     display:inline-block;
     margin-right:5px;
}


#small #person_info_wrapper .category_button{
    font-size:var(--f13);
    padding:2px 3px;
    border-radius:5px;
    background: white;
    border: 1px solid #e0e0e0;
    font-weight: bold;
    color: #606060;
      line-height:var(--lh16);
   text-align:center;
     display:inline-block;
}

@media screen and (min-width : 321px){
  #small #person_info_wrapper .category_button{
        padding:2px 8px;
    }
}

@media screen and (min-width : 411px){
  #small #person_info_wrapper .category_button{
        padding:2px 14px;
    }
}

#not_mob #person_info_wrapper .category_button:hover{
	background:#E9E9E9;
}

#not_small #person_info_wrapper .category_button.active{
    background:#f6f6f6;
}

#small #person_info_wrapper .category_button.active{
    background:#f6f6f6;
}

#person_info_wrapper a{
	color:black;
    text-decoration:none;
}



#small #shopping_list #button_show_sl_header{
    position:fixed;
    padding:2px 15px 2px 5px;
    z-index:10;
    top:13px;
    right:0px;

}

#small #shopping_list #button_show_sl_header_inner{
    font-size:var(--f26);
    font-weight: bold;
    cursor: pointer;
    color: black;
    background: #d4d4d4;
    height: 34px;
    width: 34px;
    line-height:0;
    padding: 17px 0;
    border-radius: 17px;
    box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, .5);
    z-index: 10;
    top: 15px;
    right: 15px;
    text-align: center;
    white-space: nowrap;
    word-wrap: break-word;
    box-sizing: border-box;
}

#shopping_list #sl_items_layover.on, #shopping_list #sl_actions_layover.on{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(255, 255, 255, 0.56);
}

 #shopping_list #sl_page_error{
    position: fixed;
    width: 400px;
    left: 50%;
    top: 100px;
    margin-left: -200px;
    z-index: 10;
	text-align: center;
    background: #FFEB3B;
    cursor:pointer; 
	line-height:0;
	padding:20px 0;
    box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
	overflow:hidden;
}

#small #shopping_list #small_main_navi{
    position: fixed; 
    top:0;
    left:0;
    width: 100%;
    z-index: 4;
    height:88px;  /* Should match heigth of small section_included_ingredients */
    border-bottom: solid 1px #E6E6E6;
    background: #F6F6F6;
    overflow:visible;
}

#small #shopping_list #small_main_navi.minimized{
    display:none;
}

#small #shopping_list .sl_action_row{
    height:44px;
	box-sizing:border-box;
	padding-top:6px;
}

#small #shopping_list .sl_action_row.bottom{
	padding-top:4px;
}


#small #shopping_list #section_included_ingredients{
    padding-top:88px;  /* Should match heigth of fixed small_main_navi */
}

#small #shopping_list #section_included_ingredients.minimized{
    padding-top:0px; 
}

#not_small #shopping_list #sl_navi_menu{
    background: #eef2f4;
    padding: 6px 0px 6px 15px;
    margin: 0;
    z-index:4;
    border-bottom:2px solid #D1D1D1;
}

#not_small #shopping_list #header_border_fixed_sl.fixed{
    width:100%;
    height:10px; /* must match js handle_sl_scroll_fix() and #sl_navi_menu.fixed top */
    background:#A80739;
    position:fixed;
    top:0;
    left:0;
    z-index:4;
    cursor:pointer;
  }
  

#not_small #shopping_list #sl_navi_menu.fixed{
    position:fixed;
     width: 650px;  /* match #shopping_list .content*/
    top:10px; /* height of header_border_fixed_sl */
    box-sizing: border-box;
    border-bottom:2px solid #D1D1D1;
}


@media screen and (min-width:1366){
	#not_small #mob #shopping_list #sl_navi_menu.fixed{
		width: 750px; /* match #shopping_list #sl_navi_menu.fixed */
	}
}

@media screen and (max-width : 650px){
  #not_small #shopping_list #sl_navi_menu.fixed{
        width:100%
   }
}

#small #shopping_list #multi_edit_item_actions{
    margin-left: 6px;
}

#not_small #shopping_list #multi_edit_item_actions{
    margin-left:4px;
}

/* sl action / navi button */

#shopping_list .sl_button{
	cursor:pointer;
    margin-right:8px;
    padding:17px 0;
    line-height:0;
    float:left;
    background:white;
    font-size:var(--f13);
    font-weight:bold;
    border:1px #cdcdcd solid;
    border-radius: 2px;
    color:#555555;
    font-family: arial;
    text-align:center;
    box-sizing:border-box; 
    white-space:nowrap;
    word-wrap:break-word;
	overflow:hidden;
}

#not_small #shopping_list .sl_button{
	 margin-right:5px;
    padding:16px 0px;
	color:black;
	border-radius: 3px;
}

#small #shopping_list .sl_button.clicked{
    background:lightgray;
}


#small #shopping_list .sl_button.slmore,
#small #shopping_list .sl_button.multidone{
	float:right;
	margin-right:12px;
	width:72px;
	position:relative;
}

#small #shopping_list .sl_button.multidone{
	border-color:black;
}

#small #shopping_list .sl_button.add_item {
      float: left;
       margin-right:5px;
	   width:88px;
}

 #small #shopping_list .sl_button.multi_option{
     width:68px;
}

#small #shopping_list .sl_button.multi_option .full_name{
        display:none;
}

@media screen and (min-width : 360px){  
    #small #shopping_list .sl_button.multi_option{
        width:80px;
    }
	#small.font130plus #shopping_list .sl_button.multi_option{
        width:86px;
		margin-right:2px;
    }
   #small #shopping_list .sl_button.multi_option .full_name{
        display:inline-block;
    }
   #small #shopping_list .sl_button.multi_option .short_name{
        display:none;
    }
}

#small #shopping_list .sl_button.save_changes,
#small #shopping_list .sl_button.cancel_changes
{
    width:100px;
}

#not_small #shopping_list .sl_button.save_changes,
#not_small #shopping_list .sl_button.cancel_changes
{
    width:100px;
}

#not_small #shopping_list .sl_button.save_changes:hover,
#not_small #shopping_list .sl_button.cancel_changes:hover
{
    border-color:black;
}

#shopping_list .sl_button.multi_option.inactive{
    color:#454545;
    cursor:default;
}
   
 #not_small #shopping_list .sl_button.clicked{
    background:lightgray;
}

#not_small #shopping_list .sl_button.slmore{
    width: 70px;
    padding-left: 0px;
    margin-left: 5px;
    padding-right: 10px;
	position:relative;
}

 @media screen and (min-width : 680px){
   #not_small.font130plus #shopping_list .sl_button.slmore{
		width: 88px;
	}
}

#not_small #shopping_list .sl_button.multitrigger{
    width: 78px;
}

#not_small #shopping_list .sl_button.add_item {
      float: left;
       margin-right:5px;
	   width:70px;
}


 #not_small #shopping_list .sl_button.multi_option{
     width:68px;
}

 #small #shopping_list .sl_button.multi_option, 
 #not_small #shopping_list .sl_button.multi_option{
     background:#B3E5FC;
}


#not_small #shopping_list #cancel_edit{
    background: white;
    border: 2px #151515 solid;
	/* border adds extra height, even with border-box, if padding takes up the full height */
    border-radius: 2px;
    width: 40px;
    padding:15.5px 0;
    line-height:0;
    top: 6px;
    left: 5px;
    overflow: hidden;
    position: absolute;
    font-size:var(--f13);
    margin-right: 10px;
    font-weight: bold;
    color: #151515;
    font-family: arial;
    text-align:center;
    cursor:pointer;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
	
	 top:0;
    left:0;
    float:left;
    position: relative;
	
   }
   
#shopping_list #cancel_edit.clicked{
    background: #E1E1E1;
}

#shopping_list #check_all_none_div,
#shopping_list #item_select_all_none_div
{
	font-family: arial;
    font-size: var(--f13);
    font-weight: bold;
    float: left;
    margin-right: 5px;
    box-sizing: border-box;
    position: relative;
    padding: 0;
	overflow:visible;
}

#small #shopping_list #check_all_none_div,
#small #shopping_list #item_select_all_none_div
{
	margin-left: 4px;
    margin-right: 12px;
}

#shopping_list #sl_check_allnone_trigger,
#shopping_list #item_select_allnone_trigger
{
      border-radius: 2px;
	  border: 1px #D0CFCF solid;
	  
	  width:41px;
	 
    cursor: pointer;
   
    overflow: hidden;
    position: relative;
    float: left;
    display: inline-block;
    line-height: 0;
	padding: 16px 0 16px 10px; 
    
    word-break: break-all;
    white-space: nowrap;
    word-wrap: break-word;
    box-sizing: border-box;
  
}

#small #shopping_list #sl_check_allnone_trigger,
#small #shopping_list #item_select_allnone_trigger
{
	padding: 17px 0 17px 10px; 
}

#shopping_list #sl_check_allnone_trigger .downtriangle,
#shopping_list #item_select_allnone_trigger .downtriangle
{
	/* absolute and background, etc. necessary for positioning and to prevent long list name coverign triangle */
    right: 0;
    font-size: 150%;
    position: absolute;
    padding: 16px 2px 16px 2px;
    margin-top: -16px;
}

.font120plus #shopping_list #sl_check_allnone_trigger .downtriangle,
.font120plus #shopping_list #item_select_allnone_trigger .downtriangle
{
    font-size: 100%;
}

#small #shopping_list #sl_check_allnone_trigger .downtriangle,
#small #shopping_list #item_select_allnone_trigger .downtriangle
{
	/* absolute and background, etc. necessary for positioning and to prevent long list name coverign triangle */
    padding: 18px 2px 18px 2px;
    margin-top: -18px;
}

#shopping_list #sl_check_allnone_options,
#shopping_list #sl_select_allnone_options
{
    border:1px solid gray;
    position:absolute;
    top:36px;
    left:0;
    z-index:10;
    background:white;
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    font-weight:bold;
    padding-bottom:5px;
    padding-top:5px;
    text-align:left;
}

#shopping_list .sl_checkallnone_option
{
	display:block;
	text-decoration:none;
	padding-left:5px;
	min-width:130px;
	line-height:var(--lh40);
	margin:0px 5px;
	border-bottom:1px solid gray;
	color:rgb(82, 82, 82);
	cursor:pointer;
    font-size:var(--f13);
	font-family:arial;
	white-space: nowrap;
}

#small #shopping_list .sl_checkallnone_option{
	line-height:var(--lh42);
	font-size:var(--f16);
}

#shopping_list .sl_checkallnone_option.first{
	border-top:1px solid gray;
}


#shopping_list .sl_checkallnone_option:hover{
	background:rgb(230, 230, 230);
}

#not_small #shopping_list .sl_filtertext{
    line-height:var(--lh32d8);
    height: 32.8px;
    margin-top: 0px;
    box-sizing: border-box;
    padding: 0 3px;
    width: 130px;
    border: 1px #aba8a8 solid;
	float:left;
	border-radius:2px;
}
 
 @media screen and (min-width : 675px){
   #not_small #shopping_list #sl_navi_menu.edit_mode .sl_filtertext{
        width: 82px;
    }
}
 
#small #shopping_list .sl_filtertext{
	height:0;
    border: 1px #aba8a8 solid;
	 width: 92px;
	 line-height:0;
	 padding:17px 6px;
	 float:left;
}

#shopping_list #sl_list_view_div,
#shopping_list #master_list_copyto_div
{
    font-family: arial;
    font-size:var(--f13);
    font-weight: bold;
    float: left;
    box-sizing: border-box;
   position:relative;
   padding: 0;
   margin-right: 5px; 
   /* width specified further down */
   /* width: 145px; */
	
}

#shopping_list #sl_list_view_div #sl_list_view_trigger,
#shopping_list #master_list_copyto_div #master_list_trigger
{
    line-height:0;
	text-align: left;
   background:#CC0C47;
   color:white;  
	cursor: pointer;
	border-radius: 3px;
    overflow: hidden;
	 position:relative;
	 float:left;
    display: inline-block;
    line-height:0;
	padding: 17px 0 17px 10px; 
    word-break: break-all;
    white-space: nowrap;
    word-wrap: break-word;
    box-sizing: border-box;
	width:100%;
}

#shopping_list #master_list_copyto_div #master_list_trigger
{
    background:rgb(246, 211, 222);
   color:black; 
}

#small #shopping_list #sl_list_view_div #sl_list_view_trigger,
#small #shopping_list #master_list_copyto_div #master_list_trigger
{
	 padding: 18px 0 18px 10px;
}

#small #shopping_list #master_list_copyto_div #master_prev_text .long
{
	 display:none;
}

#not_small #shopping_list #master_list_copyto_div #master_prev_text .short
{
	 display:none;
}

#shopping_list #sl_list_view_div #sl_list_view_trigger .downtriangle,
#shopping_list #master_list_copyto_div #master_list_trigger .downtriangle,
#shopping_list #sl_more_menu_trigger .downtriangle
{
	/* absolute and background, etc. necessary for positioning and to prevent lone  list name coverign triangle */
	color: white;
    right: 0;
    font-size: 150%;
    position: absolute;
     background:#CC0C47; 
	padding: 17px 0 17px 8px;
    margin-top: -17px;
}

#shopping_list #master_list_copyto_div #master_list_trigger .downtriangle
{
	background:rgb(246, 211, 222);
	color:black;
}

#shopping_list #sl_more_menu_trigger .downtriangle
{
	background:white;
	color:black;
}

#small #shopping_list #sl_list_view_div #sl_list_view_trigger .downtriangle,
#small #shopping_list #master_list_copyto_div #master_list_trigger .downtriangle,
#shopping_list #sl_more_menu_trigger .downtriangle
{
	/* absolute and background, etc. necessary for positioning and to prevent lone  list name coverign triangle */
    padding: 18px 5px 18px 2px;
    margin-top: -18px;
}
	 
 #not_small #shopping_list #master_copyto_firstedit_wrapper.cb_div .cb_text{
	width: 84px;
    max-width: 84px; /* width isn't enough, needs max-width. I don't know why! */
 }
 
#not_small #shopping_list #master_list_copyto_div{
	width:230px;
}

@media screen and (min-width : 768px){  
    #not_small #shopping_list #master_list_copyto_div{
		width:250px;
	}
}

 #small #shopping_list #master_copyto_firstedit_wrapper.cb_div .cb_text{
	 width: 76px;
    max-width: 76px; /* width isn't enough, needs max-width. I don't know why! */
 }
 
  #small.font150plus #shopping_list #master_copyto_firstedit_wrapper.cb_div .cb_text{
	 width: 84px;
    max-width: 84px; /* width isn't enough, needs max-width. I don't know why! */
 }

#small #shopping_list #master_list_copyto_div{
	width:190px;
}

 @media screen and (min-width : 360px){  
    #small #shopping_list #master_list_copyto_div{
		width:230px;
	}
}

 @media screen and (min-width : 375px){  
    #small #shopping_list #master_list_copyto_div{
		width:245px;
	}
}

 @media screen and (min-width : 411px){  
    #small #shopping_list #master_list_copyto_div{
		width:280px;
	}
}


#not_small #shopping_list #sl_list_view_div
{
    width: 152px;
	margin-right: 5px;
}

@media screen and (min-width : 768px){  
   #not_small.font130plus #shopping_list #sl_list_view_div
	{
		width: 178px;
	}
}

#small #shopping_list #sl_list_view_div{
	width: 172px;
	margin-left:10px;
}

@media screen and (min-width : 360px){  
   #small #shopping_list #sl_list_view_div{
        width: 210px;
    }
	#small #shopping_list .sl_filtertext{
        width: 105px;
    }
}

@media screen and (min-width : 375px){  
   #small #shopping_list #sl_list_view_div{
        width: 225px;
    }
	#small #shopping_list .sl_filtertext{
        width: 118px;
    }
}

@media screen and (min-width : 411px){  
   #small #shopping_list #sl_list_view_div{
        width: 260px;
    }
	#small #shopping_list .sl_filtertext{
        width: 152px;
    }
}

 #not_small #shopping_list #sl_list_view_options{
    top: 36px;
    width: 250px;
}

 #not_small #shopping_list #master_copyto_options{
    top: 38px;
    width: 260px;
}

#shopping_list .sl_list_view_option_wrapper,
#shopping_list .sl_list_copyto_option_wrapper
{
	border:2px transparent solid;
}

#shopping_list .sl_list_view_option_wrapper:has(.sl_list_view_option.selected),
#shopping_list .sl_list_copyto_option_wrapper:has(.sl_list_copyto_option.selected)
{
	border-color:black;
}

#shopping_list .sl_list_view_option_wrapper:has(.sl_list_view_option:hover),
#shopping_list .sl_list_copyto_option_wrapper:has(.sl_list_copyto_option:hover)
{
	border-color:black;
}

#not_small #shopping_list .sl_list_view_option,
#not_small #shopping_list .sl_list_copyto_option{
	display: block;
    text-decoration: none;
    padding: 0 7px;
    line-height:var(--lh20);
    padding: 10px;
    color: rgb(60, 60, 60);
    cursor: pointer;
    font-family: arial;
    font-size:var(--f14);
    box-sizing: border-box;
    overflow:hidden;
    border-bottom: 1px solid gray;
    width:100%;
}

#master_copyto_same_wrapper.cb_div{
	 border-bottom: 1px solid gray;
	 padding:12px 2px 10px 3px;
}

#not_small #shopping_list #master_copyto_options.cb_div .cb_text
{
	font-weight:normal;
    width:80%; /* room for check box */
	float:left;
	padding-top: 5px;
}

 #small #shopping_list .sl_list_view_option,
 #small #shopping_list .sl_list_copyto_option{
    border-bottom: 1px solid gray;
    line-height:var(--lh20);
    padding: 10px;
    text-align: left;
    font-weight: bold;
}

#small #shopping_list #master_copyto_options.cb_div .cb_text 
{
	font-weight:normal;
}

#shopping_list .select_box_wrapper{
    float:left;
    width: 32px; 
    border-radius: 2px;
    margin-left:1px;
}


 #small #shopping_list .item_cb_taller_unchecked, #small #shopping_list .item_cb_taller_checked, #small #shopping_list .item_cb_taller_somechecked {
	padding-left: 26px;
	cursor: pointer;
	overflow: hidden;
}

#not_small #shopping_list .item_cb_taller_unchecked, #not_small #shopping_list .item_cb_taller_checked, #not_small #shopping_list .item_cb_taller_somechecked {
	padding-left: 26px;
	cursor: pointer;
	overflow: hidden;
    margin-left:4px;
}

#shopping_list .item_cb_taller_unchecked{
    background: url('https://cdn.copymethat.com/static/checkbox_green_unchecked_26_34.png') no-repeat; 
}

#shopping_list .item_cb_taller_checked{
    background: url('https://cdn.copymethat.com/static/checkbox_green_checked_26_34.png') no-repeat;   
}

#shopping_list .item_cb_taller_somechecked{
    background: url('https://cdn.copymethat.com/static/checkbox_green_somechecked_26_34.png') no-repeat;   
}


#not_small #shopping_list .item_cb_select_unchecked_forallnone, 
#not_small #shopping_list .item_cb_select_somechecked_forallnone, 
#not_small #shopping_list .item_cb_select_checked_forallnone 
{
	display: block;
	padding-left: 26px;
	cursor: pointer;
	overflow: hidden;
     background-position-x: 3px;
}

#small #shopping_list .item_cb_select_unchecked_forallnone, 
#small #shopping_list .item_cb_select_somechecked_forallnone, 
#small #shopping_list .item_cb_select_checked_forallnone  {
	padding-left: 28px;
	cursor: pointer;
	overflow: hidden;
     background-position-x: 2px;
}

#shopping_list .item_cb_select_unchecked_forallnone{
	background: url('https://cdn.copymethat.com/static/cb_select_unchecked_26_30.png?v=2') no-repeat;
}

#shopping_list .item_cb_select_somechecked_forallnone  {
	background: url('https://cdn.copymethat.com/static/cb_select_somechecked_26_30.png?v=2') no-repeat;
}

#shopping_list .item_cb_select_checked_forallnone {
	background: url('https://cdn.copymethat.com/static/cb_select_checked_26_30.png?v=2') no-repeat;
}

 #not_small #shopping_list #item_select_all_wrapper, 
 #small #shopping_list #item_select_all_wrapper{
   position:relative;
   float:left;
   line-height:var(--lh34);
   height:34px;
   overflow:visible;
   border: 1px #D0CFCF solid;
  margin-right:5px;
  border-radius:2px;
}

#small #shopping_list #item_select_all_wrapper{
   margin-left:4px;
   margin-right:12px;
}
 

/* menu look */

 #shopping_list .jump_to{
    cursor:pointer;
 }
 
#small #shopping_list .sl_recipe_title{
    line-height:var(--lh22);
    overflow: hidden;
    text-align: left;
    font-weight: bold;
    padding: 10px;
    border-bottom: solid gray 1px;
	text-align: center;
}
 
#not_small #shopping_list .menu_options_div,
#not_small #sl_change_cat_menu .menu_options_div{
    width: 372px;
    margin: 0 auto;
}

#not_small #shopping_list #list_admin_menu{
    width:350px;
}
	
#shopping_list #list_admin_menu .list_color_chooser_div{
    overflow:hidden;
    padding:1px;
}

#shopping_list #list_admin_menu .list_color_chooser{
    height:35px;
    width:35px;
    border:solid 2px lightgray;
    float:left;
    margin:0 6px 0 0;
    cursor:pointer;
}
#shopping_list #list_admin_menu .list_color_chooser:hover{
    border:solid 2px black;
}
#shopping_list #list_admin_menu .list_color_chooser.active{
    border:solid 2px black;
}

#shopping_list #list_admin_menu .create_button,
#shopping_list #category_admin_menu .create_button
{
    line-height:0;
    padding: 17px 8px;
    border: 1px solid gray;
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
    font-size:var(--f15);
    text-align:center;
	white-space: nowrap;
    word-wrap:break-word;
    box-sizing:border-box; 
	overflow:hidden;
}

#shopping_list #category_admin_menu .create_button
{
    margin-left:5px;
}

#shopping_list .create_button.clicked{
  background:aliceblue;
}

#not_mob #shopping_list .create_button:hover{
  border: 1px solid black;
}

#shopping_list #list_admin_menu #new_sl_name_input,
#shopping_list #list_admin_menu #list_edit_input,
#shopping_list #category_admin_menu #new_cat_name_input{
	box-sizing: border-box;
    border: solid gray 1px;
    margin: 0 0 0 0;
    height: 36px;
    line-height:var(--lh36);
    padding: 0 5px;
	border-radius: 2px;
}

#shopping_list #category_admin_menu #new_cat_name_input{
	float:left;
}

#shopping_list #list_admin_menu #new_sl_name_input:focus,
#shopping_list #list_admin_menu #list_edit_input:focus,
#shopping_list #category_admin_menu #new_cat_name_input:focus{
	outline:none;
	border:1px lightblue solid;
}

#not_small #shopping_list #category_admin_menu .create_button
{
    width:110px;
}

#small #shopping_list #category_admin_menu .create_button
{
    width:76px;
}

@media screen and (min-width : 360px){  
   #small #shopping_list #category_admin_menu .create_button
	{
		width:110px;
	}
}

#small #shopping_list #category_admin_menu #new_cat_name_input
{
	width: 200px;
}

@media screen and (min-width : 375px){  
   #small #shopping_list #category_admin_menu #new_cat_name_input{
       width: 230px;
    }
}

#not_small #shopping_list #category_admin_menu #new_cat_name_input
{
	width: 190px;
}

#not_small #shopping_list #list_admin_menu .create_button
{
    min-width:140px;
}

#small #shopping_list #list_admin_menu .create_button
{
    min-width:140px;
}

@media screen and (min-width : 360px){  
   #xsmall #shopping_list #list_admin_menu .create_button
	{
		width:110px;
	}
}

#not_small #shopping_list #list_admin_menu #new_sl_name_input,
#small #shopping_list #list_admin_menu #new_sl_name_input,
#shopping_list #list_admin_menu #list_edit_input
{
	width:269px;
}

#shopping_list #list_admin_menu .listedit_button
{
   line-height:0;
    width: 276px;
    padding: 18px 8px;
    border: 1px solid gray;
    border-radius: 3px;
    cursor: pointer;
    font-size:var(--f15);
    text-align: center;
	margin:20px 0;
	 white-space: nowrap;
    word-wrap: break-word;
    box-sizing: border-box;
    overflow: hidden;
}

#not_mob #shopping_list #list_admin_menu .listedit_button
{
	margin:10px 0;
}

#shopping_list #list_admin_menu .listedit_button.delete
{
   background:pink;
}

#not_mob #shopping_list #list_admin_menu .listedit_button:hover
{
	 border: 1px solid black;
}

#shopping_list #list_admin_menu .listedit_button.clicked
{	
	color:gray;
}

#shopping_list .list_edit_form_div
{
   width:288px;
   margin:0 auto;
}

#shopping_list .menu_update_msg,
#add_item_menu .menu_update_msg,
#sl_change_cat_menu .menu_update_msg
{
    position: absolute;
    width: 100%;
   
	
    left: 0;
    top: 40px;
    background: #FFF9C4;
    color: black;
    text-align: center;
    font-size:var(--f16);
    z-index:2;
    cursor:pointer;
	
	 line-height:0;
	 padding:20px ;
	white-space: nowrap;
    word-wrap:break-word;
    box-sizing:border-box; 
}
  
#shopping_list .menu_update_msg.error,
#add_item_menu .menu_update_msg.error,
#sl_change_cat_menu .menu_update_msg.error
{
    background:#FFEB3B;
}

#small #shopping_list .menu_update_msg,
#small #add_item_menu .menu_update_msg,
#small #sl_change_cat_menu .menu_update_msg
{
    position: fixed;
}


/* More drop-down and sl more menu (called options menu)*/

#not_small #shopping_list #sl_more_menu{
    top:36px;
    right:0;
	left: auto;
    width: 216px;
}


#shopping_list .sl_more_option, 
#shopping_list .sl_more_option_confirm{
    text-decoration: none;
    padding: 9px 0;
    padding-left: 5px;
    margin: 0;
    border-bottom: 1px solid gray;
    cursor: pointer;
    text-align: left;
    word-wrap: break-word;
    box-sizing: border-box;
}

#not_small #shopping_list .sl_more_option, 
#not_small #shopping_list .sl_more_option_confirm{
    font-family: arial;
    font-size:var(--f14);
    font-weight: bold;
	color: rgb(60, 60, 60);
	line-height:var(--lh22);
	width: 196px;
}

#small #shopping_list .sl_more_option, 
#small #shopping_list .sl_more_option_confirm{
	width: 100%;
    line-height:var(--lh24);
	padding:9px;
    font-weight: bold;
}

#shopping_list .sl_more_option.option_not_show{
	display:none;
}

#not_small #shopping_list .sl_more_option_confirm{
    font-size:var(--f15);
    white-space: normal;
	font-family: 'open sans', verdana;
	 line-height:var(--lh19);
    width:175px;
    padding-top:5px;
    font-weight: normal;
    height:auto;
    padding-bottom:10px;
}


#small #shopping_list .sl_more_option_confirm{
    line-height:var(--lh21);
    padding:10px;
    font-weight: normal;
    height:auto;
	font-family: 'open sans', verdana;
}

#shopping_list .sl_more_option_confirm #clear_this_confirm_sl_name{
    font-weight: bold;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: break-word;
}

#shopping_list  .sl_more_option_topline{
	border-top:1px solid gray;
}

#not_mob .sl_more_option:hover{
	background:rgb(230, 230, 230);
}

#not_small #shopping_list .sl_more_option a{
	text-decoration:none;
	color: rgb(60, 60, 60);
}

#small #shopping_list .sl_more_option a{
	text-decoration:none;
	color: black;
}

#shopping_list .sl_more_option.inactive a, 
#shopping_list .sl_more_option.inactive,
 {
    color:gray;
}

  
#small #shopping_list .sl_more_option.clicked{
	background:#A80739;
	color:white;
}

#small #shopping_list .sl_more_option.clicked a{
    color:white;
}

#small #shopping_list #clear_this_also_recipes label,
#small #shopping_list #clear_this_also_recipes2 label{
   line-height:var(--lh20); 
}

#small #shopping_list .sl_more_option_confirm #clear_this_confirm_sl_name{
    font-weight: bold;
    width: 100%;
    overflow: hidden;
    word-wrap: break-word;
}

#shopping_list #sl_more_menu .sl_button.confirm_clear,
#shopping_list #sl_more_menu .sl_button.cancel_clear{
    width: 76px;
	display:inline-block;
	float:none;
}

#small #shopping_list #sl_more_menu .sl_button.confirm_clear,
#small #shopping_list #sl_more_menu .sl_button.cancel_clear{
    width: 100px;
}

#not_mob #shopping_list #sl_more_menu .sl_button.confirm_clear:hover,
#not_mob #shopping_list #sl_more_menu .sl_button.cancel_clear:hover{
    border-color:black;
}


#shopping_list #clear_all_confirm_button_div{
    position: absolute;
    background: white;
    width: 230px;
    top: 0;
    padding: 10px;
    text-align: left;
    border: solid 2px red;
    z-index:10;
     right:-120px;
}


/* Master menu: edit before copying */


#shopping_list #master_copyto_edit_menu .divider_line{
    border-top: 2px #e2e2e2 solid;
    height: 0px;
    width:100%;
}


#not_small #master_copyto_edit_menu #edit_single_item_form{
    margin:20px;
}

#shopping_list #master_copyto_edit_menu .expanding_area{
   border: 1px solid black;
}

#shopping_list #master_copyto_edit_menu .expanding_area textarea,
#shopping_list #master_copyto_edit_menu .expanding_area pre {
  /* width is set in JS or HTML */
  padding: 5px 5px 7px 5px; 
}

#ios #shopping_list #master_copyto_edit_menu .expanding_area pre {
  /* padding: 5px 8px 7px 8px; */
  /* no longer true */
  /* l/r Padding for iOS pre must be +3/+3 compared to textarea because ioS adds extra space */
}



/* Master action row */

#small #shopping_list #item_edit_master_row{
    position: fixed;
    width: 100%;
    height: 40px;
    z-index: 3;
    padding-top: 5px;
    padding: 3px 0 3px 6px;
    background: #f6f6f6;
}

 #shopping_list #master_copyto_firstedit_wrapper.cb_div{
    border: 1px lightgray solid;
	border-radius:2px;
	float:left;
	padding: 5px 2px 3px 3px;
	/* width specified further down */
}

#shopping_list #master_copyto_firstedit_wrapper.cb_div .cb_text{
	font-family: arial;
    font-weight: bold;
    color: #555555;
}
	
#not_small #shopping_list #master_copyto_firstedit_wrapper.cb_div .cb_text{
	font-size:var(--f13);
}

#small #shopping_list #master_copyto_firstedit_wrapper.cb_div .cb_text{
	font-size:var(--f13);
}

#small #shopping_list #sl_master_copiedto_popup{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff176;
    line-height:0;
	padding:17px 0;
    z-index: 10;
    text-align: center;
	box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

#not_small #shopping_list #sl_master_copiedto_popup{
    margin: 0 0 0 5px;
    float: left;
    overflow:hidden;
    background: #FFF59D;
   padding:17px 8px;
    line-height:0;
    z-index: 10;
    text-align: left;
    border-radius: 3px;
	position:absolute;
	right:0;
	white-space: nowrap;
    word-wrap:break-word;
    box-sizing:border-box; 
	/* will extend on top od "edit first" and copyto drop down if long. ok*/
}

/* recipes removed last item menu */

 #not_small #shopping_list #sl_recipes_no_items_menu{
       width:360px;
}

#shopping_list #sl_recipes_no_items_menu .cb_div {
    border-bottom: 1px solid lightgray;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 5px 6px 3px;
}


/* Settings menu */

 #not_small #shopping_list #sl_settings_menu{
       width:360px;
}

#xsmall #sl_settings_menu .menu_label{
   max-width:130px;
}

@media screen and (min-width : 360px){
    #xsmall #sl_settings_menu .menu_label{
	   max-width:164px;
	}
}

#shopping_list #sl_settings_menu .sl_settings_subheader{
        font-weight: bold;
        margin: 5px 0;
		border-top: solid 1px gray;
		padding-top: 8px;
}
#shopping_list #sl_settings_menu .sl_settings_subheader .sub{
	font-weight:normal;
}
#shopping_list #sl_settings_menu .radio_option{
        margin: 5px 0;
		
}

#shopping_list #sl_settings_menu .radio_option label{
    padding: 2px 5px 2px 0;
    min-width: 100px;
    display: inline-block;
}

    


/* category and list option menus */

/* note that sl_change_cat_menu is also opened from non sl module */
 
#not_small #shopping_list .menu_options_div{
    width: 450px;
}

#edit_item_menu .list_option,
#edit_item_menu .category_option,
#sl_change_list_menu .list_option,
#sl_change_cat_menu .category_option,
#master_copyto_edit_menu .list_option
{
    border-radius: 6px;
    line-height:0;
    padding:18px 0;
    background: rgb(226, 226, 226);
    overflow: hidden;
    float: left;
    text-align: center;
    cursor: pointer;
    margin: 3px;
    font-size:var(--f14); 
    border:solid #d0cdcd 2px;
     white-space: nowrap;
    word-wrap:break-word;
    box-sizing:border-box; 
}

#small #edit_item_menu .list_option,
#small #edit_item_menu .category_option,
#small #sl_change_list_menu .list_option,
#small #sl_change_cat_menu .category_option,
#small #master_copyto_edit_menu .list_option
{
    width: 260px;
}

@media screen and (min-width : 360px){ 
	#small #edit_item_menu .list_option,
	#small #edit_item_menu .category_option,
	#small #sl_change_list_menu .list_option,
	#small #sl_change_cat_menu .category_option,
	#small #master_copyto_edit_menu .list_option
	{
		width: 156px;
	}
}

@media screen and (min-width : 375px){ 
	#small #edit_item_menu .list_option,
	#small #edit_item_menu .category_option,
	#small #sl_change_list_menu .list_option,
	#small #sl_change_cat_menu .category_option,
	#small #master_copyto_edit_menu .list_option
	{
		width: 164px;
	}
}

@media screen and (min-width : 411px){ 
    #small #edit_item_menu .list_option,
	#small #edit_item_menu .category_option,
	#small #sl_change_list_menu .list_option,
	#small #sl_change_cat_menu .category_option,
	#small #master_copyto_edit_menu .list_option
	{
       width: 180px;
    }
}
 
#not_small #edit_item_menu .list_option,
#not_small #edit_item_menu .category_option,
#not_small #sl_change_list_menu .list_option,
#not_small #sl_change_cat_menu .category_option,
#not_small #master_copyto_edit_menu .list_option
{
   width: 144px;
   font-size:var(--f13);
}
   
#not_mob #shopping_list .list_option:hover, 
#not_mob #shopping_list .category_option:hover{
	border:solid black 2px;
}
   
#shopping_list .list_option.chosen, 
#shopping_list .category_option.chosen,
#sl_change_cat_menu .category_option.chosen{
	border:solid black 2px;
    font-weight:bold;
}


/* releated to recipe options in sl */

#small #shopping_list .sl_button_growheight{
	border:solid gray 1px;
    border-radius:2px;
    font-size:var(--f15);
	min-height: 22px; /* will be this + padding */
    line-height:var(--lh22);
    padding: 7px 5px;	
	overflow: hidden;
    word-wrap: break-word;
}

#small #shopping_list .sl_button_growheight.clicked{
	color:gray;
}



#small #shopping_list .multiply_form_options_div{
	text-align:center;
	margin-top:10px;
	width:280px;
	margin:15px auto 0 auto;
}

#small #shopping_list .multiply_form_options_div .recipe_multiply_input_field{
	box-sizing: border-box;
    border: solid gray 1px;
    margin: 0 0 0 0;
    height: 36px;
    line-height:var(--lh36);
    padding: 0 5px;
    border-radius: 2px;
}

#small #shopping_list .multiply_form_options_div .recipe_multiply_input_field:focus{
	border-color:lightblue;
}

#small #shopping_list .sl_button_growheight.clear_recipe{
	width:270px; /* this + padding */
	margin:20px 0;
}

#small #shopping_list .sl_button_growheight.update_recipe{
	width:270px; /* this + padding */
	margin:20px 0;
}

#small #shopping_list .sl_button_growheight.update_recipe.clicked .show_as_save,
#small #shopping_list .sl_button_growheight.update_recipe .show_as_updating
{
	display:none;
}

#small #shopping_list .sl_button_growheight.update_recipe.clicked .show_as_updating
{
	display:inline;
}

#not_small #shopping_list .sl_button_for_recipe{
	 display:inline-block; 
	 height:25px;
	 line-height:var(--lh25);
	 font-family:arial; 
	 font-size:var(--f12);
	 border:solid 1px rgb(231, 231, 231);
	 border-radius:3px;
	 font-weight:bold; 
	 color:rgb(74, 74, 74);
	 display:block;
	 float:left;
	 margin-top:3px;
	 margin-right:5px;
	 cursor:pointer;
	 padding:0 5px;
     font-weight:normal;
   }
   

#not_small #shopping_list .sl_button_for_recipe.inactive{
	 color:gray;
    cursor:default;
}
   
#shopping_list .multiply_recipe_update_button{
	display: inline-block;
    border: solid gray 1px;
    border-radius: 4px;
    font-size:var(--f13);
    padding: 0 3px;
    margin-left: 3px;
    cursor:pointer;
}

#small #shopping_list .multiply_recipe_update_button{
	font-size:var(--f14);
    padding: 0 6px;
    height:32px;
    line-height:var(--lh32);
}

#shopping_list .multiply_recipe_update_button.active{
	color:gray;
}

/* Add item menu */

 
#small #add_item_menu{
   text-align: center;  
 }
 
 #not_small #add_item_menu{
     width:328px;
 }
 
#not_small #add_item_menu #add_new_item_form_wrapper{
	 margin:20px 10px 0 10px;
	 text-align:center;
}

#small #add_item_menu #add_new_item_form_wrapper{
	 margin:10px 0 0 0;
	 text-align:center;
}

#add_item_menu #add_new_item_submit{
	background:#367739;
	color:white;
	padding: 18px 0;
    line-height:0;
    width:100px;
    margin-top:5px;
    border-radius:3px;
    cursor:pointer;
    font-size:var(--f14);
    text-align:center;
    white-space: nowrap;
    word-wrap:break-word;
    box-sizing:border-box; 
	overflow:hidden;
}

#not_mob #add_item_menu #add_new_item_submit:hover{
}

#add_item_menu #add_new_item_submit{
	width:200px;
	display:inline-block;
}

#small #add_item_menu #add_new_item_submit{
    margin-top:15px;
}

#add_item_menu #add_new_item_submit.adding .ready
{
    display:none;
}

#add_item_menu #add_new_item_submit .adding
{
    cursor:default;
}

#add_item_menu #add_new_item_submit:not(.adding) .adding
{
    display:none;
}

#add_item_menu #new_item_sl_id{
    margin:10px 0;
    height:42px;
    line-height:var(--lh42);
    width:250px;
    font-size:var(--f16);
	background:white;
	color:black;
	border-radius:0;
	border:1px #b5b5b5 solid;
 }
 
 #not_small #add_item_menu #new_item_sl_id{
    width:288px;
	    height:36px;
    line-height:var(--lh36);
 }

#add_item_menu #new_item_sl_id:focus{
    outline:none;
	border:1px #b5b5b5 solid;
 }

 #shopping_list #tamove{
	position:fixed;
	z-index:945;
	/* size, position set in js */
}

#shopping_list #tamove.asbutton{
	padding:0px;
	border:0;
	caret-color: transparent;
	background:transparent;
	/*background: rgba(0, 128, 0, 0.21); */
}

 #shopping_list #tamove.asinput{
	background:white;
		/*background: rgba(0, 128, 0, 0.21); */
}

 #shopping_list #tamove.sidemenu_open{
	display:none; /* instead of class hidden, so goes back to what it was */
}
 
#small #add_item_menu .add_new_item_text_input{
	/* visibility:hidden; */
	/* set in html. only want this if using #tamove (not using if open add item menu from non sl module */
}
 
 #add_item_menu .add_new_item_text_input,
  #shopping_list #tamove.asinput
 {
    margin-top:20px;
    width:250px;
    height:120px;
    margin:0 auto;
    padding:3px;
     resize: none;
     resize:vertical;
     outline:0;
     border:0;
     outline: 1px solid #b5b5b5;
	 /* In android webview, window.innerHeight is dfifferent (wrong) when a textarea gets focus. So don't use media queries with height when a textarea might have focus. */
 }
 
 #not_mob #add_item_menu .add_new_item_text_input:hover
{
    outline: 1px solid lightblue;
}

 #add_item_menu .add_new_item_text_input:focus,
 #shopping_list #tamove.asinput:focus {
    outline: 2px solid lightblue;
}
 
 @media screen and (min-width : 345px){  
   #small #add_item_menu .add_new_item_text_input,
   #shopping_list #tamove.asinput{
        width:306px;
    }
	#small #add_item_menu #new_item_sl_id{
		width:312px;
	 }
}

 
 #not_small #add_item_menu .add_new_item_text_input{
   width:280px;
   height:85px;
 }

 #shopping_list #edit_item_menu .edit_item_form_button,
 #shopping_list #master_copyto_edit_menu .edit_item_form_button,
 #shopping_list #sl_settings_menu .form_button,
#mealplan .form_button
 {
    padding: 17px 0;
    line-height:0;
    width:100px;
    margin-top:5px;
    border:1px solid gray;
    border-radius:3px;
    cursor:pointer;
    font-size:var(--f14);
    text-align:center;
    white-space: nowrap;
    word-wrap:break-word;
    box-sizing:border-box; 
	overflow:hidden;
 }
 

 
#small #shopping_list #edit_item_menu .edit_item_form_button,
#small #shopping_list #master_copyto_edit_menu .edit_item_form_button
 {
    height:34px;
    padding: 17px 0;  
 }
 
 #shopping_list #edit_item_menu .edit_item_form_button.inactive,
 #shopping_list #sl_settings_menu .form_button.inactive,
 #shopping_list #master_copyto_edit_menu .form_button.inactive,
 #mealplan .form_button.inactive
 {
    cursor:default;
    color:lightgray;
	border-color:lightgray;
 }
 
 #shopping_list #edit_item_menu .edit_item_form_button.clicked,
 #shopping_list #sl_settings_menu .form_button.clicked,
 #shopping_list #master_copyto_edit_menu .form_button.clicked,
  #mealplan .form_button.clicked
  {
    border-color:black;
    background:#e4e4e4;
 }
 
 #add_item_menu #add_item_return_text{
    text-align:left;
	 margin: 20px 0 0 0;
 }
 
 #add_item_menu #add_item_return_text_div{
    text-align:left;
    margin-top:10px;
    border-top:solid 1px #444444;
    padding-top: 5px;
        overflow: hidden;
}

#add_item_menu #added_item_header{
    font-weight:bold;
    height: 29px;
    line-height:var(--lh29);
}

#add_item_menu #added_item_header_label_item{
     width: 160px;
}

#add_item_menu .added_item{
    overflow: hidden;
    border-bottom: 1px dotted gray;
    height: 29px;
    line-height:var(--lh29);
}

#not_mob #add_item_menu .added_item.hover{
    background:#f7f7f7;
}

#add_item_menu .item_added_line{
     width: 155px;
     padding-right:5px;
    white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
}

#add_item_menu .item_added_cat{
	  text-decoration: underline;
}

#add_item_menu .added_item.hover .item_added_cat{
    font-weight:bold;
}

#add_item_menu .added_item_col2{
    width:100%;
}

 #small #add_item_menu #added_item_header_label_item,
 #small #add_item_menu .item_added_line{
   width: 150px;
}

#small #add_item_menu #add_item_return_text{
        width:290px;
		margin-top:20px;
		margin-left:0;
}

@media screen and (min-width : 360px){ 
    #small #add_item_menu #added_item_header_label_item,
    #small #add_item_menu .item_added_line{
       width: 165px;
    }
   #small #add_item_menu #add_item_return_text{
        width:325px;
    }
}
@media screen and (min-width : 375px){ 
    #small #add_item_menu #added_item_header_label_item,
    #small #add_item_menu .item_added_line{
       width: 180px;
    }
   #small #add_item_menu #add_item_return_text{
        width:335px;
    }
}
@media screen and (min-width : 411px){ 
    #small #add_item_menu #added_item_header_label_item,
    #small #add_item_menu .item_added_line{
       width: 200px;
    }
   #small #add_item_menu #add_item_return_text{
        width:365px;
    }
}

 /* Edit item menu */
 
 #shopping_list #edit_item_menu #master_edit_uncopy{
    border-radius: 6px;
    max-height: 36px;
    line-height:var(--lh18);
    padding:8px 0;
    background: rgb(246, 211, 222);
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    margin: 3px;
    font-size:var(--f14);
    border: solid 1px rgb(255 139 175);
    margin-bottom:14px;
}

 #shopping_list #edit_item_menu #master_edit_uncopy.clicked{
    background:#CC0C47;
}

 #shopping_list #edit_item_menu .cat_list_header{
    height:34px;
    line-height:var(--lh34);
    background:rgb(226, 226, 226);
    text-align:center;
    margin-top:5px;
    cursor:pointer;
    border-radius:2px;
}

#not_small #shopping_list #edit_item_menu .cat_list_header{
    width: 270px;
    margin: 5px auto;
}

#not_small #shopping_list #edit_item_menu_item_text{
     max-width:400px;
     margin-bottom:10px;
}

#shopping_list #edit_item_menu .divider_line{
    border-top: 2px #e2e2e2 solid;
    height: 0px;
    width:100%;
}


#small #shopping_list #edit_item_menu .edit_upper_div{
    margin-top:10px;
}

#not_small #shopping_list #edit_item_menu .edit_upper_div{
    margin-top:10px;
}


#shopping_list #edit_item_menu .expanding_area{
   border: 1px solid black;
}

#shopping_list #edit_item_menu .expanding_area textarea,
#shopping_list #edit_item_menu .expanding_area pre {
  /* width is set in JS or HTML */
  padding: 5px 5px 7px 5px;  
}

#ios #shopping_list #edit_item_menu .expanding_area pre {
  /* padding: 5px 8px 7px 8px;  */
   /* no longer true */
  /* l/r Padding for iOS pre must be +3/+3 compared to textarea because ioS adds extra space */
}



#small #shopping_list #edit_item_menu #merged_lines {
    margin-top: 10px;
    margin-left: 0px;
}

#small #shopping_list #edit_item_menu #item_recipes {
    margin-top: 10px;
    margin-left: 0px;
    list-style:None;
}

#not_small #shopping_list #edit_item_menu #merged_lines {
    margin-top: 10px;
    margin-left:20px;
}

#not_small #shopping_list #edit_item_menu #item_recipes  {
    margin-top: 10px;
    margin-left:20px;
    list-style:None;
}

 
 /* List admin menu and category admin menu */

#shopping_list #list_admin_menu #listadmin_lists{
    padding-top:10px;
}

#not_small #shopping_list #list_admin_menu #listadmin_lists{
    padding-bottom:20px;
    padding-right:0px;
}
        
#shopping_list #list_admin_menu .list_admin_option{
	border-bottom: 1px solid #B8B8B8;
    line-height:var(--lh22);
	padding: 8px 28px 8px 12px;
    text-align: left;
	position: relative;
	cursor:pointer;
}
	  
#shopping_list #list_admin_menu .list_admin_option{
	border-bottom: 1px solid #B8B8B8;
    line-height:var(--lh22);
	padding: 8px 28px 8px 12px;
    text-align: left;
	position: relative;
}

#shopping_list #list_admin_menu .list_admin_option .master_indicator{
	width: 7px;
    background: rgb(60, 60, 60);
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#shopping_list #list_admin_menu .list_admin_option .threedoticon{
	height: 28px;
	width:28px;
    display: inline-block;
    position: absolute;
    right: 4px;
    top: 5px;
	opacity:.4;
	cursor: pointer;
}

#not_mob #shopping_list #list_admin_menu .list_admin_option:hover .threedoticon{
	opacity:.8;
}

#shopping_list #list_admin_menu .new_list_radio_option{
    display: inline-block;
    margin-right: 4px;
    margin-top: 8px;
	margin-bottom:5px;
	 line-height:0;
    padding: 17px 0;
    text-align: center;
    box-sizing: border-box;
}

@media screen and (max-width : 359px){ 
   #shopping_list #list_admin_menu .new_list_radio_option{
        margin-right:0;
    }
}

.small_fullscreen_popup_menu .extra_info_popup,
.not_small_popup_menu .extra_info_popup
{
    position: fixed;
    width: 280px;
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    background: white;
    min-height: 100px;
    padding: 30px 10px;
    border: #CC0C47 solid 3px;
    z-index: 10000001;
    text-align:left;
   top: 50px;
     overflow: hidden;
}

@media screen and (max-height : 568px){  
   #small .small_fullscreen_popup_menu .extra_info_popup{
        max-height: 430px;
        top:48px;
        overflow-y: scroll;
        padding: 30px 10px 8px 10px;
    }
}

@media screen and (max-height : 480px){  
   #small .small_fullscreen_popup_menu .extra_info_popup{
        max-height: 340px;
        top:48px;
        overflow-y: scroll;
         padding: 30px 10px 8px 10px;
    }
}

.small_fullscreen_popup_menu .extra_info_popup .xclose,
.not_small_popup_menu .extra_info_popup .xclose
{
	float: right;
	font-size:var(--f20);
	margin-top: -18px;
	cursor:pointer;
}

.small_fullscreen_popup_menu .extra_info_popup .okbutton
{
	cursor:pointer;
	
}

.small_fullscreen_popup_menu .extra_info_popup .extra_info_button
{
	padding: 9px 5px;
    line-height: var(--lh22);
    border: 1px gray solid;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
    display: block;
	margin:15px 30px 0 30px;
    word-wrap: break-word;
    box-sizing: border-box;
}

#shopping_list #category_admin_menu #catadmin_cat_list{
    min-height: 200px;
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
 #not_small #mob #shopping_list #category_admin_menu #catadmin_cat_list{
  }
  
#shopping_list #category_admin_menu #catadmin_cat_list li {
    margin: 0 5px 5px 5px;
    padding: 8px 36px 8px 5px; /* padding left room for delete x*/
    cursor:pointer;
    width: 210px; /* width must leave blank space to side for scrolling mob */
    line-height:var(--lh20);
    border: 1px solid #E1E1E2;
    font-family: arial;
    font-size:var(--f14);
    background:aliceblue;
    position:relative;
    border-radius:3px;
    font-weight:bold;
     text-align:left;
  }
  
  #small #shopping_list #category_admin_menu #catadmin_cat_list li{
	  width:200px; /* width must leave blank space to side for scrolling */
	   font-size:var(--f16);
  }
  
 @media screen and (min-width : 360px){ 
	  #small #shopping_list #category_admin_menu #catadmin_cat_list li{
		  width:230px;
	  }
 }
 
#shopping_list #category_admin_menu #catadmin_cat_list li:hover{
    box-shadow: 1px 1px 3px black;
}

#shopping_list #category_admin_menu #catadmin_cat_list li .cat_name, 
#shopping_list #category_admin_menu #catadmin_cat_list li .cat_delete{
    display:inline-block;
}

#shopping_list #category_admin_menu #catadmin_cat_list li .cat_delete{
    border: gray 1px solid;
    position: absolute;
    right: 1px;
	top:1px;
    line-height:0;
    padding: 15px 0;
    width: 32px;
    text-align: center;
    box-sizing: border-box;
    color: black;
}

#small.font110plus #shopping_list #category_admin_menu #catadmin_cat_list li .cat_delete{
	top:3px;
}

#small.font120plus #shopping_list #category_admin_menu #catadmin_cat_list li .cat_delete{
	top:5px;
}

#small.font130plus #shopping_list #category_admin_menu #catadmin_cat_list li .cat_delete{
	top:5px;
}

#small.font150plus #shopping_list #category_admin_menu #catadmin_cat_list li .cat_delete{
	top:7px;
}

#shopping_list #category_admin_menu #catadmin_cat_list li .cat_delete:hover{
    color:red;
    font-weight:bold;
    border: red 1px solid;
}
 
 /* list view itself */
 
 #small #shopping_list .title_category_header, 
 #small #shopping_list .title_recipe_header, 
 #small #shopping_list .title_sl_name_header{
    font-weight:normal;
	background:#CC0C47;
	color:white;
	padding-left:5px;
	margin-bottom:1px;
    font-size:var(--f15);
}

 #small #shopping_list .title_category_header, 
 #small #shopping_list .title_sl_name_header{
    min-height: 22px;
    line-height:var(--lh22);
}


 #small #shopping_list .title_sl_name_header{
	background:#565656;
	color:white;
    border:solid 1px white; /* color set in html */
    margin-bottom:0;
}

#small #shopping_list .title_recipe_header{
	width: 85%;
    float: left;
    
    height: 30px;  /* if change, look at #small #shopping_list .title_recipe_header a */
	padding: 15px 0;
    font-size:var(--f17);
    overflow: hidden;
    word-break: break-all;
    line-height:0;
	box-sizing: border-box;
    padding-left: 5px;
    white-space: nowrap;
}

#small #shopping_list .title_recipe_header.nonrecipe_header{
    width:100%; /* extra items, checked items */
}

#small #shopping_list .title_recipe_header a{
	width: 100%;
    display: block;
    color: white;
    text-decoration: none;
    padding: 10px 0; /* make it shorter with margin so easier to tap items above and below */
    margin-top: -10px;
}

#small #shopping_list .title_category_header.checked_items, 
#small #shopping_list .title_recipe_header.checked_items{
	background:gray;
}
   
#small #shopping_list .extra_items_title_recipe_header{
   width:100%;
}
   
#not_small #shopping_list .title_category_header, 
#not_small #shopping_list .title_recipe_header, 
#not_small #shopping_list .title_sl_name_header{
    font-weight:normal;
	height:28px;
	line-height:var(--lh28);
	background:white;
	font-size:var(--f15);
	color:#A80739;
	font-weight:bold;
	padding-left:5px;
	margin-bottom:1px;
}

#not_small #shopping_list .title_sl_name_header{
	color:black;
    margin-top:10px;
    margin-bottom:0;
    border-bottom: gray double 4px;
    /* background set in html */
}


#not_small #shopping_list .title_category_header.checked_items, 
#not_small #shopping_list .title_recipe_header.checked_items{
    color:#070707;
}

#not_small #shopping_list .title_recipe_header a{
    color:#A80739;
    text-decoration:None;
}
#not_small #shopping_list .title_recipe_header a:hover{
    text-decoration:underline;
}

#not_small #shopping_list .title_recipe_header{
	height:auto;
	min-height:30px;
}



 #not_small #shopping_list .item_div{
  min-height:23px;
  border-bottom:dotted gray 1px;
  display:table;
  table-layout:fixed;
  cursor:pointer;
 }

 #small #shopping_list .item_div{
   border-bottom:dotted 1px gray;
   overflow:hidden;
    display:table;
    table-layout:fixed;
 }

 #not_small #shopping_list .item_div.exists_on_other_list, #small #shopping_list .item_div.exists_on_other_list{
  background:rgb(246, 211, 222);
  cursor:default;
 }
 
 #small #shopping_list .item_div.checked, #not_small #shopping_list .item_div.checked {
    background:#EBEBEB;
     border-bottom:dotted white 1px;
}

#not_small #shopping_list .item_div.ghost, #small #shopping_list .item_div.ghost{
    display:none;
}

 #shopping_list .item_row{
    display:table-row;
    width:100%
 }
 
 #shopping_list .col_overflow{
    overflow:hidden; /* allows elements inside to have margin without increasing col height */
    height:30px; /* item line-height + padding = 1 line */
 }
 
 
#not_small #shopping_list .hover_col{
   /* indicate hover over edit icon  */
    vertical-align:top;
    display:table-cell;
} 
 
#not_small #shopping_list .hover_col .col_width{
    width:3px;
    
} 
 
 #mob #shopping_list .hover_col, #small #shopping_list .hover_col{
    display:none;
 } 

#not_small #shopping_list .hover_col.hover .hover_line{
    border-right:1px #c1c0c0 dotted; 
    border-left:1px #c1c0c0 dotted;
     height:22px;
     margin-top:3px; 
}  
  
 #not_small #shopping_list .item_div.checked .hover_col.hover .hover_line{
        border-color: gray;
}  

#shopping_list .spacer_col{
    vertical-align:top;
    display:table-cell;
 }
 
#shopping_list .checkbox_col{
    vertical-align:top;
    display:table-cell;
 }

 #shopping_list .checkbox_col .col_width{
    width:28px; /* if change, consider spacer_col for master view */
 }
 
 #shopping_list .text_col{
    display:table-cell;
    width:99%;
    vertical-align:middle;
 }
 
#shopping_list .item_row .checkbox_col,
#shopping_list .item_row .text_col,
#shopping_list .item_row .edit_icon_col,
#shopping_list .item_row .select_col
  {
    padding-top:2px;
    padding-bottom:2px;
 }
 
#mob #shopping_list .item_row.tall .checkbox_col,
#mob #shopping_list .item_row.tall .text_col,
#mob #shopping_list .item_row.tall .edit_icon_col,
#mob #shopping_list .item_row.tall .select_col
  {
    padding-top:8px;
    padding-bottom:8px;
 }
 
 #shopping_list .edit_icon_col,  
 #shopping_list .show_indiv_col, 
 #shopping_list .master_edit_icon_col{
    display:table-cell;
    vertical-align: top; 
    text-align: center;
    cursor:pointer;
 }
 
#shopping_list .show_indiv_col{
   visibility:hidden;
 }
 
#shopping_list .item_div.has_merged .show_indiv_col{
   visibility:visible;
}
 
 #shopping_list .edit_icon_col .col_width, 
 #shopping_list .show_indiv_col .col_width, 
 #shopping_list .master_edit_icon_col .col_width{
    width:28px;
  }
  
#small.font130plus #shopping_list .edit_icon_col .col_width, 
#small.font130plus #shopping_list .show_indiv_col .col_width, 
#small.font130plus #shopping_list .master_edit_icon_col .col_width{
    width:32px;
  }
  
#not_small #mob #shopping_list .edit_icon_col .col_width, #not_small #mob #shopping_list .show_indiv_col .col_width, #not_small #mob #shopping_list .master_edit_icon_col .col_width{
    width:42px;
  }
  

#shopping_list .edit_icon_col .edit_icon_wrapper, 
#shopping_list .show_indiv_col .show_indiv_icon_wrapper, 
#shopping_list .master_edit_icon_col .master_edit_icon_wrapper{
    height: 24px;
    width: 24px;
    margin: 3px auto 0 auto
}

#small.font130plus #shopping_list .edit_icon_col .edit_icon_wrapper, 
#small.font130plus #shopping_list .show_indiv_col .show_indiv_icon_wrapper, 
#small.font130plus #shopping_list .master_edit_icon_col .master_edit_icon_wrapper{
    height: 28px;
    width: 30px;
}

#shopping_list .item_div.has_merged .edit_icon_col .edit_icon_wrapper, 
   #shopping_list .item_div.has_merged .show_indiv_col .show_indiv_icon_wrapper{
   background: #e4e3e3;
    border-radius: 7px;
}
      
#shopping_list .edit_icon_col .edit_icon, 
#shopping_list .show_indiv_col .icon, 
#shopping_list .master_edit_icon_col .icon{
    height:24px;
    width:24px;
    opacity:.4;
     cursor:pointer;
}

#small.font130plus #shopping_list .edit_icon_col .edit_icon, 
#small.font130plus #shopping_list .show_indiv_col .icon, 
#small.font130plus #shopping_list .master_edit_icon_col .icon{
    height:28px;
    width: 30px;
}

#not_mob #shopping_list .edit_icon_col:hover .edit_icon, 
#not_mob #shopping_list .show_indiv_col:hover .icon, 
#not_mob #shopping_list .master_edit_icon_col:hover .icon{
    opacity:.6;
}

#not_mob #shopping_list .edit_icon_col:hover, 
#not_mob #shopping_list .show_indiv_col:hover, 
#not_mob #shopping_list .master_edit_icon_col:hover{
    background:rgb(245, 245, 245);
}


 #shopping_list .edit_icon_col .edit_icon_extender{ 
 /* invisibly extends width pass icon image. overlays some of text */
    position:absolute;
    width:40px;
    right:0;
    bottom:0;
    background:transparent;
    height:100%;
}

 #shopping_list .master_edit_icon_col .icon_extender{ 
 /* invisibly extends width pass icon image. overlays some of text */
    position:absolute;
    width:40px;
    left:0;
    bottom:0;
    background:transparent;
    height:100%;
}

 #mob #shopping_list .edit_icon_col .edit_icon_extender,
 #mob #shopping_list .master_edit_icon_col .icon_extender{ 
    width:62px;
}

 #shopping_list .text_col .item_text{
    line-height:var(--lh26);  
 }
 
#shopping_list .text_col .item_text, 
#shopping_list .item_div .item_info{
    font-size:var(--f14);
}

#shopping_list .item_div .item_info{
   width:400px;
   /* for non_small used to get width and height for edit item text area. Small uses actual element */
}
   
#mob #shopping_list .text_col .item_text,  
#shopping_list .item_div .item_info{
     font-size:var(--f17);
    padding-left:2px;
}

#shopping_list .checkbox_col .checkbox{
    height:26px;
    width:26px;
    margin:3px auto 0 auto;
    background-image: url("https://cdn.copymethat.com/static/checkbox_green_26_with_hover.png");
}


#shopping_list .item_div .checkbox_col .checkbox{
     /* unchecked. Overwritten below if checked */
      background-position: 0px -26px;
	  margin-top:2px;
}

.font120plus #shopping_list .item_div .checkbox_col .checkbox{
	  margin-top:3px;
}

.font130plus #shopping_list .item_div .checkbox_col .checkbox{
	  margin-top:5px;
}

#shopping_list .item_div.checked .checkbox_col .checkbox{
     background-position: 0px 0px;
}

#shopping_list .item_div .checkbox_col.hover .checkbox{
     /* unchecked. Overwritten below if checked */
      background-position: 0px -78px;
}

#shopping_list .item_div.checked .checkbox_col.hover .checkbox{
     background-position: 0px -52px;
}

#shopping_list .item_div .checkbox_col .icon_extender{ 
 /* invisibly extends width pass icon image. overlays some of text */
    position:absolute;
    width:40px;
    left:0;
    bottom:0;
    background:transparent;
    height:100%;
    z-index:1; /* necessary so is on top of text div */
}

 #mob #shopping_list .item_div .checkbox_col .icon_extender{ 
    width:62px;
}
 
/* for edit mode */

 #shopping_list .sl_color_col{
    display:table-cell;
    vertical-align:top;
}

 #shopping_list .sl_color_col .col_width{
    width:6px;
}

 #shopping_list .select_col{
    display:table-cell;
    vertical-align:top;
 } 

 #shopping_list .select_col .col_width{
    width:28px;
 }                                
                                    
#not_small #shopping_list .item_div.checked .select_col {
    background:#EBEBEB;
}


#not_small #shopping_list .show_ta .item_div {
    margin-bottom: 2px;
    padding-bottom: 2px;
     border-bottom: dashed gray 1px; 
 }
      
#not_small #shopping_list .show_ta .item_div.checked  {
    background:white;
}

 #shopping_list .show_ta .item_ta_edit{
	resize: vertical; 
    width: 100%;
    box-sizing: border-box;
    font-family: 'open sans', verdana;
    -webkit-appearance: none;
    outline: none;
    border: 1px solid white;
   overflow:hidden;
    width: 100%;
    padding: 0 2px;
    line-height:var(--lh26);
    height:28px; /* min height: line-height + border + padding */ 
    vertical-align: top
}

#shopping_list .show_ta textarea:hover, #shopping_list .show_ta textarea:focus{
    border: 1px solid lightblue;   
}

#not_small #shopping_list .item_cb_select 
{
    width:26px;
    margin: 2px auto 0 auto;
    height:26px;
    opacity:.75;
}

#not_small #shopping_list .item_cb_select.hover 
{
    opacity:1;
}

#small #shopping_list .item_cb_select {
	width:26px;
    margin-top:2px;
    height:26px;
}

#small.font130plus #shopping_list .item_cb_select {
    margin-top:3px;
}

#small.font130plus #shopping_list .item_cb_select {
    margin-top:5px;
}

#shopping_list .item_cb_select_unchecked{
	background: url('https://cdn.copymethat.com/static/cb_select_unchecked_26.png?v=2') no-repeat;
}

#shopping_list .item_cb_select_checked {
	background: url('https://cdn.copymethat.com/static/cb_select_checked_26.png?v=2') no-repeat;
}





#shop #content_inner{
 padding: 0 50px 30px 50px;
}

#shop #amazon_affliate_info{
   width: 730px;
    font-size:var(--f12);
    margin: 40px auto 0;
    text-align: center;
    padding:0 10px;
    box-sizing:border-box;
    line-height:100%;
}

#shop #top_div{
    line-height:140%;
  width: 730px;
      margin: 0px auto 0;
}

#not_small #shop #top_div{
    margin-top:20px;
}

#shop .product_div {
   
    padding-top: 15px;
    border-top: solid #C1C1C1 1px;
   margin: 10px auto 0;
}

#shop .image_div {
}

#shop .main_img {

}

#shop .product_text_div {

    
}

#shop .product_title {
    font-weight: bold;
}

#shop .store_name{
    font-style:italic;
}

#shop .product_price {
    margin-top: 1px;
}

#shop .product_description {
    margin-top: 7px;
    line-height:1.4em;
}

#shop .product_description_spacer {
    height: 10px;
}

#shop .in_text_link {
    text-decoration:underline;
    display: inline;
}

#shop #content_inner{
     padding: 0;
    }

#shop .product_div {
    width:730px; /* based on ipad */
    padding-top: 15px;
    border-top: solid #C1C1C1 1px;
   margin: 10px auto 0;
}

#shop .product_div a{
   display: table-row;
}

#shop .image_div, #shop .product_text_div{
    display:table-cell;
    vertical-align:top;
}

#shop .image_div .main_img{
    width:260px;
    padding-left:10px;
}

#shop .product_text_div{
    padding-left:15px;
    width: 100%;
}

@media screen and (max-width : 767px){ 
   
  #shop .product_div {
        width:100%;
    }
    
   #shop #amazon_affliate_info{
       width: 100%;
       box-sizing:border-box;
       padding:0 20px;
    }

   #shop #top_div{
      width: 100%;
       box-sizing:border-box;
       padding:0 20px;
    }
    
    #shop .product_text_div {
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
        box-sizing: border-box;
    }
    
   #shop .image_div .main_img{
        width:240px;
        padding-left: 10px;
    }
}

@media screen and (max-width : 599px){ 
   #shop .image_div, #shop .product_text_div{
        display:block;
    }
    
   #shop .product_div {
        width:100%; 
    }
    
   #shop #amazon_affliate_info{
       padding:0 10px;
    }

   #shop #top_div{
       padding:0 10px;
    }
    
  #shop .product_title, #shop .product_price{
    text-align:center;
   }
   
  #shop .product_text_div {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
    }

     #shop .image_div {
        text-align: center;
    }
    
   #shop .image_div .main_img{
        width:250px;
        margin:0;
        padding:0;
    }
}




#premium .content{
    background:#eef2f4;
    
        -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

#premium #content_inner{
  background:transparent; /* color of .content*/
  padding: 0;
}

#not_small #premium #premium_description{
     border: solid gray 1px;
     margin:0 auto;
    padding: 0 30px;
    width: 706px;
     background:white;
   padding-bottom: 20px;
}

@media screen and (max-width : 767px){
  #not_small #premium #premium_description{
        padding: 0 10px;
        width: 578px;
    }
}

#small #premium #premium_description{
     margin:0 auto;
    padding: 10px 5px;
    width: 100%;
     background:white;
   box-sizing:border-box;
}

#premium #premium_description_layover.layover{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(19, 19, 19, 0.09);
    z-index:1;
}


#premium #top, #premium #bottom{
    overflow:hidden;
    background:white;
    
}
#premium #top{
     border-bottom: double #CC0C47 4px;
    padding: 15px 20px 15px 20px;
    margin-bottom: 6px;
}

#small #premium #top{
    border-bottom: double #CC0C47 4px;
    padding: 0px 0;
    margin-bottom: 6px;
}

#premium #premium_page_top_text{
    margin-bottom:10px;
    text-align:center;
    font-size:var(--f15);
    line-height:var(--lh23);
}

#small #premium #premium_page_top_text{
    margin-bottom:10px;
    text-align:center;
    font-size:var(--f17);
    line-height:var(--lh23);
}

#premium .premium_page_top_text_heading{
    font-weight:bold;
    margin-bottom:7px;
    font-size:var(--f16);
}

#small #premium .premium_page_top_text_heading{
    font-size:var(--f18);
    margin-bottom:10px;
}

#premium #option_buttons{
    width:400px;
    margin:0 auto;
}

#small #premium #option_buttons{
    width:100%;
    margin:0 auto;
    box-sizing:border-box;
}

@media screen and (min-width : 360px){
  #small #premium #option_buttons{
        padding:0 15px;
    }
}

@media screen and (min-width : 411px){
  #small #premium #option_buttons{
        padding:0 25px;
    }
}

#premium .premium_option_button{
    width: 145px;
    border: solid 1px #E6E6E6;
    color: black;
    cursor: pointer;
    float: left;
    padding: 8px 20px;
    border-radius: 6px;
    font-size:var(--f14);
    text-align: center;
    font-weight: bold;
    color: white;
    background: #CC0C47;
}

#small #premium .premium_option_button{
        width: 130px;
    padding: 8px 10px;
}


#not_small #premium .premium_option_button:hover{
   background:#9C0835;
}

#premium #gift_link{
    width:240px;
    border: solid 1px #E6E6E6;
    color: black;
    cursor: pointer;
    padding: 8px 20px;
    border-radius: 6px;
    font-size:var(--f14);
    text-align: center;
    font-weight: bold;
    color: white;
    background:green;
    margin:5px auto 10px auto;
}
   

#premium #price_currency_info{
       width: 380px;
    margin: 0 auto;
    margin-top: 5px;
    font-size:var(--f13);
    color: #616161;
    background-color: white; 
}


#premium #payment_error_msg{
      color: red;
    margin-bottom: 20px;
    margin-top: 10px;
    font-weight: bold;
}



#not_small #premium .subsub_header{
font-weight:bold;margin-left:5px;margin-top:12px;margin-bottom:0px;
padding-top: 10px;
color:rgb(50, 50, 50);
border-top: 1px dotted gray;
}
#small #premium .subsub_header{
	font-weight:bold;font-size:var(--f16); 
	color:#464646;
	margin-left:5px;margin-top:15px;margin-bottom:2px;border-top: 1px solid gray;padding-top: 6px;}

#small #premium .subsubsub_header{font-weight:bold;font-size:var(--f16); color:#3B1E00;}
#not_small #premium .subsubsub_header{font-weight:bold;color:rgb(50, 50, 50);}

#not_small #premium .subsub_header_info_start{font-weight:bold;margin-left:5px;margin-top:12px;margin-bottom:0px;
padding-top: 3px;}
#small #premium .subsub_header_info_start{font-weight:bold;font-size:var(--f14); color:#3B1E00;margin-left:5px;margin-top:15px;margin-bottom:2px;}
#premium .text_line, #premium .text_line_non_indent {
    list-style-type: none;
    padding-left: 15px;
    padding-top: 13px;
}

#not_small #premium .features_overdesc{
    margin-top:5px;
    margin-bottom:10px;
}

#small #premium .features_overdesc{
        margin-top:5px;
    margin-bottom:10px;
}

#not_small #premium .features_overheader{
    color:#464646;
    font-size:var(--f16);
    font-weight:bold;
    margin-top:7px;
}

#small #premium .features_overheader{
        color:#464646;
    font-weight:bold;
}


#premium #payment_options{
    
   position: absolute;
    left: 108px;
    top: 20px;
    background: white;
    width: 550px;
    border: solid 1px gray;
    box-sizing: border-box;
    padding: 20px 15px 10px 20px;
     z-index:2;
     
         -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

}



#small #premium #payment_options{
    left: 0;
    top:0;
    background: white;
    width: 100%;
    padding: 20px 5px 10px 5px;
    line-height:var(--lh16);
     box-sizing: border-box;
}

#small #premium #payment_options_inside{
    width:310px;
    margin:0 auto;
}

#premium #close_payment_options{
    cursor: pointer;
    color: #5D5C5C;
    float: right;
    margin-top: 15px;
    margin-right: 20px;
    line-height:0;
	padding:19px 0;
}

#not_mob #premium #close_payment_options:hover{
    text-decoration:underline;
}


#premium #pay_with_stripe_div{
    float:left;
}

#premium #pay_with_paypal_div{
       float: left;
    text-align: center;
    padding-top: 30px;
    margin-left: 5px;
    padding-right: 20px;
}


#small #premium #pay_with_paypal_div{
        float: none;
    text-align: center;
    padding: 0;
    width: 160px;
    margin: 0 auto;
    margin-top: 15px;
    margin-bottom: 15px;
}

#premium #pay_with_paypal{
        color: #000000;
    font-size:var(--f14);
    cursor: pointer;
    border: solid 1px #FFAF00;
    border-radius: 3px;
    background: #FFC520;
    width: 120px;
    padding: 7px 5px;
}

#small #premium #pay_with_paypal{
    width: 120px;
    padding: 7px 10px;
}

#premium #pay_with_paypal.disabled{
    background:orange;
}

#premium #payment_form_div {
    border: solid 2px #0C65C1;
    box-shadow: 5px 5px 5px gray;
    background: white;
    width: 320px;
    padding: 5px 10px 10px 15px;
}

#small #premium #payment_form_div {
    background: white;
    width: 310px;
       padding: 5px 5px 10px 5px;
    box-sizing: border-box;
     box-shadow: none;
     font-size:var(--f14);
}
  
  
#premium .stripe_info{
    margin-top:10px;color:gray;font-size:var(--f13);
}

#premium .payment-errors{ /* Stripe adds a div with this at top of form if there is a validation error */
    color:red;
    margin-bottom:3px;
     margin-top:10px;
}

#premium .placeholder
{
  color: #aaa;
}



#premium #payment_form{
   margin:0px;
   padding-top: 10px;
    text-align:left;
    
}

#premium #product_label{
   font-weight: bold;
    font-size:var(--f15);
    margin-bottom: 20px;  
}


#small #premium #product_label {
    font-weight: bold;
    font-size:var(--f16);
    margin-bottom: 15px;
    text-align: center;
}

#premium #payment_form #pay_with_credit_card_label{
  font-weight:bold;
   margin-bottom:15px;
}

#small #premium #payment_form #pay_with_credit_card_label{
   font-size:var(--f15);
}



#premium #payment_form input[type=text]{
    padding:3px;
    
}

#premium #payment_form .form_row{
  margin:5px 0;
}

#premium #payment_form .form_row span{
    display:inline-block;
    width:100px;
}

#small #premium #payment_form .form_row span{
    display:block;
    width:auto;
}
 
#premium #payment_form button{
    background:#0B92E0; 
    color: white;
    font-weight: bold;
    margin-top:10px;
	
	border: none;
    font: inherit;
    cursor: pointer;
    outline: inherit;
	border-radius:3px;
	
	height: 40px;
    line-height:0;
    padding: 20px 10px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

#premium #payment_form button.disabled{
    background: #90C5E4;
    color: gray;
}


#not_mob #premium #payment_form button:hover{
   background:#3EA8E5;
}


#premium .claim_header{
    margin-bottom:20px;
    font-weight:bold;
}

#premium .claim_text{
}

#premium .claim_gift_button{
    width:150px;
    background:#CC003F;
    color:white;
    text-align:center;
    height:42px;
    line-height:var(--lh42);
    cursor:pointer;
    border-radius:5px;
    margin-top:20px;
    font-weight:bold;
}

#premium .claim_gift_button.clicked{
    background:#A80739;
    cursor:default;
}

#premium .purchased_claim_link{
    margin-bottom:15px;
    color: #a80739;
    font-weight: bold;
    margin-bottom: 15px;
    word-break: break-all;
    text-align: center;
}

#small #premium .purchased_claim_link{
    width: 250px;
    margin: 0 auto 15px auto;
}

#premium .giftlink{
  display:inline-block
} 

#small #premium .giftlink{
  display:block;
  width: 250px;
  word-break: break-all;
    margin: 0 auto 15px auto;
}

#premium .link_to_premium{
    color: #1565C0;
    font-weight: bold;
    margin-top: 10px;
    text-decoration: underline;
}

#small #premium .link_to_premium{
    color: #2d83e4;
    font-weight: normal;
    text-decoration: none;
     font-weight: bold;
     margin:10px auto 10px auto;
     width:300px;
     text-align:center;
     font-size:var(--f16);
}

#print_page_options{
    margin:30px 0 10px 0;
    overflow: hidden;
}

@media screen and (min-width : 700px){
  #print_page_options{
    width:660px;
    margin:30px auto 10px auto;
    }
}
  
.print_page_option, 
.print_option_save{ /* print/ cancel / save buttons */
    float: left;
    min-width: 100px;
	display: inline-block;
    text-align: center;
    background: #464646;
	line-height:0;
	padding:17px 5px;
    margin-left: 30px;
    border-radius: 5px;
    cursor:pointer;
    color:white;
    text-decoration:none;
    font-family:arial;
}

.print_option_save{
    float: none;
    margin-top:10px;
    margin-left:0px;
}


.print_option_save.inactive{
    color:white;
    background:lightgray;
}

.print_option_save.active{
    background:#CC0C47;
}

#not_mob .print_option_save.active:hover{
    color:red;
}

#not_mob .print_page_option:hover{
    background:black;
}

.print_page_option.clicked{
    background:black;
}

@media print{
   #print_page_options{
        display:None;
    }
}

#recipe_print{
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
     position: relative;
    overflow: visible;
    box-sizing: border-box;
    background:white;
}
    
#recipe_print #print_page_options #print_style_options{
    font-size:var(--f15);
    background: #FFFDE7;
    padding:10px 25px 10px 25px;
    margin: 5px 0;
}

@media screen and (max-width : 320px){
  #recipe_print #print_page_options #print_style_options{
        padding:10px 0px 10px 10px;
    }
}

@media screen and (min-width : 360px){
  #recipe_print #print_page_options #print_style_options{
		width:305px;
	}
}

@media screen and (min-width : 768px){
  #recipe_print #print_page_options #print_style_options{
		width:360px;
	}
}



#recipe_print #print_page_options #print_style_options .label_for_option{
    display: block;
    height: 34px;
    line-height:var(--lh34);
    cursor: pointer;
    float: left;
    margin-right: 9px;
}

#recipe_print #print_page_options.pp_mob #print_style_options .label_for_option{
   height: 40px;
   line-height:var(--lh40);
}

#recipe_print #print_page_options #print_style_options .radio_header{
    font-weight:bold;
}


#not_small #recipe_print #outer{
    width:auto;
    margin:0px;
}
   
#recipe_print .content{
   box-sizing:border-box;
   width:900px;
   width:100%;
   padding: 0 10px;
   margin:0 auto;
}

@media print{
   #recipe_print .content{
       margin:0;
       padding: 0 30px;
    }
}

#recipe_print .container{
    position: relative;
    min-height: 500px;
    overflow: visible;
    text-align: center;
    background: transparent;
    padding-top: 5px;
    overflow: visible;
    margin-top: 0px;
}

#recipe_print #recipe_container{
    position: relative;
    width: 660px;
    box-sizing:border-box;
    margin: 5px auto;
    text-align: left;
    border: 2px solid #A80739; /* color can be changed in JS as print option */
    border-radius: 5px;
    line-height:var(--lh22); /* changs with font size options */
    padding: 28px 25px 10px 25px;
    font-family: georgia;
    color:black;
}

/* fonts can be changed in JS: classes further down are added */
#recipe_print #recipe_container{
    font-family: georgia, "Times New Roman";
}
#recipe_print #recipe_container.opt_font_handlee{
    font-family: Handlee, "Times New Roman";  /* Also nice: "Delius Swash Caps" , "Delius" */
}
#recipe_print #recipe_container.opt_font_roboto{
    font-family: Roboto, "Times New Roman";
}

#recipe_print #recipe_container{
    font-size:var(--f14);
}
#recipe_print .recipe_title {
    font-size:var(--f19);
}
#recipe_print .header{
    font-size:var(--f16);
}
#recipe_print .ingred_subheader, #recipe_print .step_subheader{
    font-size:var(--f15);
}

@media print{
   #recipe_print #recipe_container{
        width:100%;
    }
}

#recipe_print .recipe_title {
    margin-bottom: 5px;
    font-weight:bold;
}

#recipe_print .orig_link{
    margin: 3px 0px 2px 0px;
}

#recipe_print .description{
    margin-left: 0px;
    margin-top: 0px;
    padding: 3px 0;
}

#recipe_print a.link_in_recipe{
   color:black;
   text-decoration:underline;
}

#recipe_print .servings{
    margin: 3px 0;
    padding: 3px 0;
    border-bottom: 1px solid #DADADA;
    border-top: 1px solid #DADADA;
    overflow: hidden;
    min-width: 100px;
}

#recipe_print #tags_div{
    margin-top: 3px;
    padding: 3px 0;
    border-bottom: solid #eff1f2 1px;
    border-top: solid #eff1f2 1px;
    margin-bottom: 3px;
    display: inline-block; /* changed in JS with print options */
    padding-right: 5px;
}

#recipe_print #photo_div{
    float: right;
    margin: 5px 0px 15px 15px;
}

 #recipe_print #photo_container{
    float: right;
    width: 240px;
    font-size:1em;
    background: white;
}

#recipe_print #photo_container img{
    max-height:100%;
    max-width:100%;
    position:relative;
    display:block;
}

#recipe_print #scale_multiplier_msg{
   margin-top:3px;
}


 #recipe_print .header{
    font-weight: normal;
    padding: 3px 0 3px 0;
}
#recipe_print li {
    list-style-position: outside;
}
#recipe_print .ingreds{
    padding-left: 30px;
    margin: 0 0 0 0;
}

#recipe_print .ingred_subheader{
    list-style-type: none;
    padding: 1px 0 1px 0;
    margin-left:-20px;
}

#recipe_print .ingred_sub_divider{
    list-style-type: none;
    margin: 0px;
    padding:0px;
    height:12px;
}

#recipe_print .ingred{
    padding: 1px 0 1px 0;
    list-style:circle;
    color: #7eb348; /* changed by js print options */
    line-height:var(--lh19);
}

#recipe_print .ingred li span{
    color: black;
    /*vertical-align: middle;*/
}

#recipe_print .ingred_note{
    padding: 5px 0 1px 0px;
    margin-left:-17px;
    list-style:none;
    font-style: italic;
    color:black;
}

#recipe_print .ingred_note .note_asterix{
    color:#7eb348;
}

#recipe_print .steps{
    padding-left: 30px;
    padding-right:50px;
    margin: 0 0 0 0;
}
#recipe_print .step_subheader{
    list-style-type: none;
    margin-left:-20px;
    padding: 0;
}
 #recipe_print .step{
    padding: 3px 0 3px 0; /* changed with font size */
    color: #7eb348; /* bullet color. changed by class called from js print options */
}
#recipe_print .step li span{
    color: black;
}
#recipe_print .step_after_line1{
    list-style-type: none;
    margin-top: 5px;
}

#recipe_print .notes{
    padding-left: 30px;
    margin:  0;
}
#recipe_print .note{
    padding: 3px 0 3px 0; 
    color: #7eb348;
    list-style-type:circle;
}
#recipe_print .note li span{
   color:black;
}


#recipe_print #recipe_container.opt_black_bullet .ingred, #recipe_print #recipe_container.opt_black_bullet .step, #recipe_print #recipe_container.opt_black_bullet .note{
    color:black;
}
#recipe_print #recipe_container.opt_black_bullet .ingred_note .note_asterix{
    color:black;
}

#recipe_print #recipe_container.opt_cmtred_bullet .ingred, #recipe_print #recipe_container.opt_cmtred_bullet .step, #recipe_print #recipe_container.opt_cmtred_bullet .note{
    color:#A80739;
}
#recipe_print #recipe_container.opt_cmtred_bullet .ingred_note .note_asterix{
    color:#A80739;
}

#recipe_print #recipe_container.opt_smaller_font {
    line-height:var(--lh19);
}
#recipe_print #recipe_container.opt_smaller_font .ingred{
    line-height:var(--lh17);
}
#recipe_print #recipe_container.opt_smaller_font #recipe_container_fs,
/*#recipe_print #recipe_container.opt_smaller_font .recipe_title span, keep title same size*/
#recipe_print #recipe_container.opt_smaller_font .header span,
#recipe_print #recipe_container.opt_smaller_font .ingred_subheader span, #recipe_print #recipe_container.opt_smaller_font .step_subheader span
 {
    font-size:90%;
}


#recipe_print #recipe_container.opt_bigger_font .ingred{
  line-height:var(--lh20);
}
#recipe_print #recipe_container.opt_bigger_font .steps{
    padding-right:25px;
}
#recipe_print #recipe_container.opt_bigger_font #recipe_container_fs,
#recipe_print #recipe_container.opt_bigger_font .recipe_title span,
#recipe_print #recipe_container.opt_bigger_font .header span,
#recipe_print #recipe_container.opt_bigger_font .ingred_subheader span, #recipe_print #recipe_container.opt_bigger_font .step_subheader span
 {
    font-size:114%;
}

#recipe_print #recipe_container.opt_biggest_font {
   line-height:var(--lh26);
}
#recipe_print #recipe_container.opt_biggest_font .ingred{
   line-height:var(--lh24);
}
#recipe_print #recipe_container.opt_biggest_font .steps{
    padding-right:15px;
}
#recipe_print #recipe_container.opt_biggest_font #recipe_container_fs,
#recipe_print #recipe_container.opt_biggest_font .recipe_title span,
#recipe_print #recipe_container.opt_biggest_font .header span,
#recipe_print #recipe_container.opt_biggest_font .ingred_subheader span, #recipe_print #recipe_container.opt_biggest_font .step_subheader span
 {
    font-size:140%;
}


#shopping_list_print{
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}


#shopping_list_print #outer{
    width:auto;
    margin:0px;
}

#shopping_list_print .content{
   box-sizing:border-box;
   width:100%;
   padding: 0 30px;
   margin:0 auto;
   text-align:left;
}



@media print{
   #shopping_list_print .content{
       margin:0;
       padding: 0;
    }
}

#shopping_list_print #print_page_options{
    margin:30px 0 10px 0;
    overflow: hidden;
}

@media screen and (min-width : 700px){
  #shopping_list_print #print_page_options{
    width:660px;
    margin:30px 0 10px 0;
    }
}


@media screen and (max-width : 500px){
   #shopping_list_print #print_page_options{
         margin:30px 0 10px -25px;
    }
}

#shopping_list_print #print_page_options #print_style_options{
    font-size:var(--f15);
    background: #FFFDE7;
    padding:10px 25px 10px 25px;
    margin: 5px 0;
    overflow: hidden;
}

@media screen and (max-width : 375px){
  #shopping_list_print #print_page_options #print_style_options{
        padding:10px 0px 10px 10px;
    }
}

@media screen and (max-width : 320px){
  #shopping_list_print #print_page_options #print_style_options{
        padding:10px 0px 10px 10px;
    }
}


#shopping_list_print #print_page_options #print_style_options .label_for_option{
    display: block;
    height: 34px;
    line-height:var(--lh34);
    cursor: pointer;
    float: left;
    margin-right: 9px;
}

#shopping_list_print #print_page_options.pp_mob #print_style_options .label_for_option{
   height: 40px;
   line-height:var(--lh40);
}

#shopping_list_print #print_page_options #print_style_options .radio_header{
    font-weight:bold;
}


#shopping_list_print{
    font-family:verdana;
    font-size:var(--f12);
    text-align:left;
}

#shopping_list_print table{
    border-collapse:collapse;
}

#shopping_list_print #slprint_outer{
    
}


#shopping_list_print #multi_col_view .item_col{
    border-left:dotted gray 1px;
    margin-top:20px;
    height:900px; /* js makes it shorter if first page with title showing */
    padding-right:5px;  /* removed for print. make sure it still fits... */
}

#shopping_list_print #multi_col_view.a4 .item_col{
    height:980px; /* js makes it shorter if first page with title showing */
}

#shopping_list_print #multi_col_view .print_sl_table{
    width:672px;
}

#shopping_list_print #multi_col_view.twocol .print_sl_table .item_col{
    width:336px;
    box-sizing:border-box;
}

#shopping_list_print #multi_col_view.threecol .print_sl_table .item_col{
    width:224px;
    box-sizing:border-box;
}


#shopping_list_print #multi_col_view.a4 .print_sl_table{
    width:660px;
}

#shopping_list_print #multi_col_view.a4.twocol .print_sl_table .item_col{
    width:330px;
    box-sizing:border-box;
}

#shopping_list_print #multi_col_view.a4.threecol .print_sl_table .item_col{
    width:220px;
    box-sizing:border-box;
}


#cshopping_list_print #multi_col_view .col1 .item_col{
    border-left:none;
}

@media print{
   #shopping_list_print #multi_col_view #item_col{
        padding-right:0;
    }
}

#shopping_list_print #multi_col_view .print_sl_table td{
    vertical-align:top;
     padding:0; 
    margin:0;
}

#shopping_list_print #single_col_view td.col2, #shopping_list_print #single_col_view td.col3{
    display:none;
}

#shopping_list_print #multi_col_view.twocol td.col3{
    display:none;
}

#shopping_list_print #multi_col_view .pagebreak_after { 
    page-break-after: always; 
}

#shopping_list_print .sl_name{
    font-weight:bold;
    font-size:var(--f16);
    margin: 0px 15px 0 15px;
    font-family:verdana, helvetica, arial, sans-serif;
}
#shopping_list_print .title{
    font-weight:bold;
    margin:2px 15px;
    font-family:verdana, helvetica, arial, sans-serif;
}
#shopping_list_print .title_sl_name{
    font-weight:bold;
    margin:3px 15px;
    font-family:verdana, helvetica, arial, sans-serif;
    text-decoration:underline;
    margin-top:20px;
}
#shopping_list_print .item{
    font-weight:normal;
    margin:0px 20px;
    padding:2px 0;
    font-family:verdana, helvetica, arial, sans-serif;
}

#shopping_list_print #multi_col_view .item{
    margin:0px 5px 0 20px;
}

#shopping_list_print .smaller_font .title, #shopping_list_print .smaller_font .title_sl_name, #shopping_list_print .smaller_font .item{
    font-size:var(--f11);
    line-height:var(--lh16);
}

#shopping_list_print .regular_font .title, #shopping_list_print .regular_font .title_sl_name, #shopping_list_print .regular_font .item{
    font-size:var(--f13);
    line-height:var(--lh19);
}
#shopping_list_print .bigger_font .title, #shopping_list_print .bigger_font .title_sl_name, #shopping_list_print .bigger_font .item{
    font-size:var(--f15);
    line-height:var(--lh19);
}


#shopping_list_print .smaller_font .item{
    line-height:var(--lh13);
}

#shopping_list_print .regular_font .item{
    line-height:var(--lh15);
}

#shopping_list_print .bigger_font .item{
    line-height:var(--lh17);
}












/* meal plan */


#mealplan .transparent_glass{
    z-index:99;
}

#mealplan #navi{
    text-align:left;
    margin-left:20px;
}

@media screen and (max-width : 620px){  
  #not_small #mob #mealplan #navi{
        margin-left:5px;
    }
}

#mealplan #move_recipe_hint {
    position: absolute;
    float: left;
    z-index:500;
    background:white;
    padding:10px;
    border:red 2px solid;
}

#mealplan #mp_settings_options {
        position: absolute;
        background: white;
        border: orange solid 2px;
        padding: 15px;
        color: black;
        width: 250px;
        right: 0px;
        top: 35px;
        z-index: 100;
    } 
    
#small #mealplan #mp_settings_options {
    left:0;
}

#mealplan #update_error_msg{
    color:red; 
     text-align:center;
     font-weight:bold;
}

#not_mob #mealplan #mp_grid .recipe_options{
    position:fixed;
    /* top, left set in js */
    width:260px;
    z-index:100;
    background:white;
    border: solid #5a5a5a 1px;
    box-shadow: #353535 2px 2px 8px;
    text-align: center;
    padding: 2px;
}

#mob #mealplan #mp_grid .recipe_options{
    position:fixed;
    top:5px;
    width:380px;
    left:50%;
    margin-left:-193px;
    z-index:100;
    background:white;
    border: solid #5a5a5a 1px;
    box-shadow: #353535 2px 2px 8px;
    text-align: center;
    padding: 2px;
}



#mealplan .show_recipe_options, #mealplan .show_note_options{
    font-size:var(--f12);
    text-align:center;
    margin-bottom:2px;
    padding-top:2px;
    color:#0267F8; 
}

#mealplan .show_note_options{
   border-top:dotted gray 1px;
}

#not_small #mealplan .show_recipe_options:hover, #not_small #mealplan .show_note_options:hover{
   text-decoration:underline;
}

#mealplan .mp_recipe_option{
    height:42px;
    margin:0;padding:0;
    line-height:var(--lh40); 
    font-size:var(--f14);
    cursor:pointer;
}

#mealplan .mp_recipe_option_move{
    height: 22px;
    line-height:var(--lh22);
    background: #e8e8e8;
}

#small #mealplan .mp_recipe_option{
    height:42px;
    line-height:var(--lh42); 
    font-size:var(--f15);
}

#small #mealplan .mp_recipe_option.shopping_div{
    line-height:var(--lh18); 
}

#not_small #mealplan .mp_recipe_option.shopping_div{
    line-height:var(--lh15); 
}

#mealplan .mp_recipe_option td{
    border-bottom:dotted 1px black;
}


#not_mob #mealplan .mp_recipe_option:hover{
    background:#f9f9f9;
}

#not_mob #mealplan .mp_recipe_option.option_clicked, #mob #mealplan .mp_recipe_option.option_clicked{
    background:gray;
}

#mealplan .mp_recipe_option a{  
    color:black;
    text-decoration:none;
}

#mealplan #queue .calendar_only, #mealplan #queue .view_all_day_option, #mealplan #queue .copy_to_queue_option{
    display:none;
}


#mealplan .pointer_cursor{
    cursor:pointer;
}

#mealplan .calendar_section{
    overflow:auto;
    white-space:nowrap;
    text-align:center;
}

#mealplan .day_div{
    display:inline-block;
    border:solid rgb(185, 185, 185) 1px;
    border-right:none;
     margin:0px;
     vertical-align:top;
     white-space:normal;
     min-height:100px; /* taller for week view. js sets it */
     background:white;
}
  
#not_mob #mealplan .day_div.mpset_hover{
    background:#ffe1ea;
}

#not_mob #mealplan .day_div.mpset_selected{
    background:pink;
}
    
#mealplan .day_div_last{
    border-right:solid rgb(185, 185, 185) 1px;
}

#mealplan #calendar_day_header{
    height:var(--lh24);
    line-height:var(--lh24);
    overflow:hidden;
    white-space: nowrap;
    text-align: center;
}

    
#mealplan .day_div_header{
    overflow:hidden;
    display:inline-block;
    height:var(--lh22);
    line-height:var(--lh22);
    margin:0px;
    border:solid rgb(185, 185, 185) 1px;
    border-right:none;
    background:white;
    text-align:left;
    font-weight:bold;
    font-size:var(--f15);
}

#not_mob #mealplan .day_div_header {
    float:left;
}

#mealplan .day_div_header_insides{
    padding-left:8px;
    overflow:hidden;
}

#mealplan .day_div_header.last{
    border-right:solid rgb(185, 185, 185) 1px;
}

#mealplan .day_label{
    font-size:var(--f15);
    font-weight:bold;
    text-align:left;
    width:100%;
    height:var(--lh20); 
    line-height:var(--lh20);
}


#mealplan .day_label_insides{
    padding-left:8px;
}

#mealplan .day_div.other_month .day_label{
    color:gray;
}

#mealplan .day_div.today .day_label{
     color:#3333f3;
}

#mealplan .single_recipe{
    border:solid 1px #b5b3b3;
    box-shadow:1px 1px 1px #d6d6d6;
    margin:3px 0px 3px 0px;
    display:inline-block;
    background:white;
    white-space:normal;
    cursor:pointer;
    vertical-align: bottom;
    text-align:center;
    box-sizing: border-box;
}

#mealplan .single_recipe.single_note{
    background:#f6f6f6;
}


#mealplan #queue .single_recipe.hover, #mealplan #calendar .single_recipe.hover{
     box-shadow: 1px 1px 1px #929090;
 }
 
#mealplan #queue .single_recipe.activated, #mealplan #calendar .single_recipe.activated{
     background:#ffff4e;
     border:gray 1px solid;
     box-shadow: 5px 5px 6px -0px #717070, 0px 0 1px black;
 }

#mealplan .recipe_thumb{
     display: block;
    margin: 3px auto 0 auto;
    background-position: center center;
    background-size: cover;
    border: solid #bbbaba 1px;
}

#mealplan #mp_grid #calendar_list_wrapper.no_images .recipe_thumb{
    display:none;
}

#mealplan .title, 
#mealplan .single_note .note_text {
    color:black;
    text-align:left;
    line-height:var(--lh16);
    overflow: hidden;  
    padding:0 2px;
    font-size:var(--f15);
    font-family:arial;
    /*font-size:var(--f14);
    font-family:verdana;*/
}

#mealplan .title{
    max-height:  48px;
    min-height: 48px;
}

#not_mob #mealplan .title{
    margin:5px 2px 8px 2px;
}

#mob #mealplan .title{
    margin:5px 2px 6px 2px;
}

 .font120plus #mealplan .title{
    max-height:  58px;
    min-height: 58px;
}

 .font130plus #mealplan .title{
    max-height:  62px;
    min-height: 62px;
}

 .font150plus #mealplan .title{
    max-height:  70px;
    min-height: 70px;
}

#not_mob #mealplan .single_note .note_text {
    min-height: 32px;
    margin:5px 2px 8px 2px;
}

#mob #mealplan .single_note .note_text {
    min-height: 32px;
    margin:5px 2px 6px 2px;
}


#mealplan .date_range{
    display:inline-block;
    height:36px;
	line-height:36px;
    overflow:hidden;
    margin-left:10px;
    float:left;
    font-size:var(--f14);
    font-weight:bold;
    color: rgb(50,50,50);
    max-width:154px;
}

#not_small.font130plus #mealplan .date_range{
    font-size:var(--f12);
}


#mealplan .tips_trigger{
     display:inline-block;
    height:32px;
    line-height:var(--lh32);
    overflow:hidden;
    margin-left:15px;
    font-size:var(--f11);
    font-weight:bold;
    color:gray;
    cursor:pointer;
    float:left
}

#mealplan #meal_plan_tips{
    max-width:400px;
    border:solid 2px gray;
    padding:10px 10px 10px 20px;
    margin:0 auto;
}

#mealplan #meal_plan_tips li{
    margin-top:5px;
    text-align:left;
}

#not_small #mealplan .not_small_popup_menu{
    width: 460px;
    left: 50%;
    margin-left: -230px;
    top:100px;
}


#not_small #mealplan .not_small_popup_menu .submit_button,
#small #mealplan .small_fullscreen_popup_menu .submit_button{
    color: white;
    cursor: pointer;
    border-radius: 3px;
	min-width:100px;
    padding: 18px 5px;
    line-height:0;
    background: #367739;
    font-size:var(--f15);
	display:inline-block;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    margin-top: 10px;
}

#not_small #mealplan .not_small_popup_menu .submit_button.top,
#small #mealplan .small_fullscreen_popup_menu .submit_button.top{
    margin-top: 0px;
}

#small #mealplan .small_fullscreen_popup_menu .submit_button {
    padding: 20px 10px;
}

#not_mob #mealplan .not_small_popup_menu .submit_button:hover {
}

#not_small #mealplan .not_small_popup_menu .submit_button.clicked,
#small #mealplan .small_fullscreen_popup_menu .submit_button.clicked{
    background: #367739;
}

#not_small #mealplan .not_small_popup_menu .submit_button .clicked_text,
#small #mealplan .small_fullscreen_popup_menu .submit_button .clicked_text{
    display:none;
}

#not_small #mealplan .not_small_popup_menu .submit_button.clicked .clicked_text,
#small #mealplan .small_fullscreen_popup_menu .submit_button.clicked .clicked_text{
    display:inline;
}

#not_small #mealplan .not_small_popup_menu .submit_button.clicked .not_clicked_text,
#small #mealplan .small_fullscreen_popup_menu .submit_button.clicked .not_clicked_text{
    display:none;
}

#not_small #mealplan .not_small_popup_menu .submit_button.inline,
#small #mealplan .small_fullscreen_popup_menu .submit_button.inline{
    /* cannot be hiddne with class hidden. doesn't override */
    display:inline-block;
     width:120px;
}

#not_small #mealplan .not_small_popup_menu .submit_button.cancel,
#small #mealplan .small_fullscreen_popup_menu .submit_button.cancel{
    /* cannot be hiddne with class hidden. doesn't override */
    background: #545454;
}


#mealplan #mp_shopping_list_menu .mp_sl_recipe, .mp_sl_note{
    line-height:var(--lh26);
    
    margin:2px 0;
     overflow: hidden;
}

#mealplan #mp_shopping_list_menu .mp_sl_note{
    color: #24A11C;
}

#mealplan #mp_shopping_list_menu .mp_sl_added_x{
    line-height:var(--lh16);
    color:#525252;
    font-size:var(--f14);
}

#mealplan #mp_shopping_list_menu .mp_sl_title{
    height:26px;
    line-height:var(--lh26);
    overflow:hidden;
    display:block;
}

#mealplan #mp_shopping_list_menu .sl_menu_note{
    font-size:var(--f14);
    line-height:var(--lh18); 
    margin-bottom:10px;    
}

#mealplan .datepicker_input
{
	width:110px;
}

@media screen and (min-width : 360px){  
 #small.font120plus #mealplan .datepicker_input{
		width:130px;
	}
    #small.font130plus #mealplan .datepicker_input{
		width:140px;
	}
}

#not_small #mealplan #mp_more_trigger{
    margin-top:0px;
    display:inline-block;
    float:right;
    width:62px;
}

#small #mealplan #copy_move_div{
    float: right;
    margin-right: 5px;
    width: 110px;
    border-radius: 0px;
	text-align:center;
	padding-left:0;
	overflow:hidden;
}

#small #mealplan #mp_more_trigger, 
#small #mealplan .show_queue, 
#small #mealplan .show_sets{
	float:right;
    width:70px;
	margin-right:5px;
	overflow:hidden;
}

#small #mealplan #mp_more_trigger{
	padding-left:2px;
}

#small #mealplan #mp_list .show_queue, 
#small #mealplan #mp_list .show_sets{
   width:68px;
   background: #C8E6C9;   
}

#small #mealplan #mp_list .show_queue.showing, 
#small #mealplan #mp_list .show_sets.showing{
    background: #548e56;   
}

#small #mealplan #mp_more_options .mp_more_option{
	border-bottom: 1px solid gray;
    line-height: var(--lh24);
    padding: 9px;
    text-align: left;
    font-weight: bold;
	margin-right:5px;
}


@media screen and (max-width : 359px){  
  #small #mealplan #mp_list .show_queue, 
  #small #mealplan #mp_list .show_sets {
        width:60px;
    }
	#small #mealplan #copy_move_div{
		width:114px;
	}
	#small #mealplan #mp_more_trigger{
	}
   #small #mealplan #mp_list .mptopbutton{
		margin-right:2px
	}
}

@media screen and (min-width : 360px){  
    #small.font120plus #mealplan #copy_move_div{
		width: 120px;
	}
	#small.font130plus #mealplan #copy_move_div{
		width: 130px;
	}

	#small.font150plus #mealplan #copy_move_div .radio_container{
		padding:17px 1px 17px 1px;
	}
}

@media screen and (min-width : 375px){  
  #small #mealplan #mp_list .show_queue, 
  #small #mealplan #mp_list .show_sets {
        width:72px;
    }
	#small #mealplan #copy_move_div{
	}
	#small #mealplan #mp_more_trigger{
	}
   #small #mealplan #mp_list .mptopbutton{
		margin-right:6px
	}
}

@media screen and (min-width : 411px){
	#small #mealplan #mp_list .show_queue, 
    #small #mealplan #mp_list .show_sets{
        width:72px;
    }
	#small #mealplan #copy_move_div{
	}
	#small #mealplan #mp_more_trigger{
		width:76px;
	}
  #small #mealplan #mp_list .mptopbutton{
		margin-right:9px
	}
}

#not_small #mealplan #mp_more_trigger{
    float:right;
    width:70px;
    margin-right:15px;
}

@media screen and (max-width : 620px){  
  #not_small #mob #mealplan #mp_more_trigger{
        margin-right:5px;
    }
}


#not_small #mealplan #mp_more_options{
    /* if change, also look at #small #mealplan #mp_more_options #cal_range_options */
    border:1px solid gray;
    position:absolute;
    top: 36px;
    right: 0;
    z-index:100;
    background:white;
    box-sizing: border-box;
    padding: 5px;
    font-weight:bold;
    text-align:left;
    min-width:230px;
}

#not_small #mealplan .mp_more_option, 
#not_small #mealplan .mp_more_option_showimage{
	text-decoration:none;
	padding-left:5px;
	min-height:40px;
	line-height:var(--lh40);
	margin:0px 5px;
	border-bottom:1px solid gray;
    color:#323232;
	cursor:pointer;
	font-family: arial;
    font-size:var(--f14);
    white-space: nowrap;
}

#mealplan .mp_more_option.inactive{
    color:gray;
}

#mealplan .mp_more_option.first_row{
	border-top:1px solid gray;
}

#mealplan .mp_more_option:hover{
	background:rgb(230, 230, 230);
}

#mealplan .mp_more_option.inactive:hover{
	background:white;
}

#mealplan .mp_more_option.clicked{
	background:#A80739;
    color:white;
}

#mealplan .mp_more_option.inactive.clicked{
	background:white;
    color:gray;
}

/* show images either in more menu or main navi. only has main navi in non-mob */
@media screen and (min-width : 768px){  
   #mob #mealplan .mp_more_option_showimage{
        display:none;
    }
}

@media screen and (max-width : 767px){  
   #mob #mealplan #showimage_div{
        display:none;
    }
}

#mealplan .note_form_div{
    position:fixed;
    width:300px;
    box-sizing: border-box;
    overflow:hidden;
    top: 100px;
    left: 50%;
    margin-left: -150px;
    z-index:100;
    background:white;
    border:gray 1px solid;
    box-shadow:  0 2px 4px rgba(0,0,0,.2);
    padding: 10px 25px;
}

#small #mealplan .note_form_div{
    top: 100px;
}

#not_small #mob #mealplan .note_form_div{
    top: 5px;
}

#mealplan .expanding_area textarea,
#mealplan .expanding_area pre {
  padding: 5px 5px 15px 5px; 
  min-height:55px;
  
  line-height:var(--lh19);
}

#ios #mealplan .expanding_area pre {
  /*padding: 5px 8px 15px 8px; */
   /* no longer true */
   /* l/r Padding for iOS pre must be +3/+3 compared to textarea because ioS adds extra space */
}

#not_small #mob .expanding_area textarea,
#not_small #mob .expanding_area pre {
  font-size:var(--f15);
}

#mealplan .note_form_button{
    display:inline-block;
    width:60px;
    border:gray 1px solid;
    border-radius:5px;
    font-size:var(--f15);
	min-height: 22px; /* will be this + padding */
    line-height:var(--lh20);
    padding: 6px 10px;	
    text-align:center;
    margin-right:5px;
    cursor:pointer;
}
#mealplan .note_form_button:hover{
    background:gray;
    color:white;
}

#mealplan .note_form_info{
    font-size: var(--f14);
    margin-top: 10px;
}

#mealplan .note_form_date_label{
    margin-bottom: 2px;
    font-weight: bold;
}
#mealplan .note_form_date_label_date{
    color: rgb(40, 40, 40);
}
#mealplan .note_form_date_label_text{
    color:rgb(82, 82, 82);
}
#mealplan .note_info_text{
    width:250px;
    margin-top:10px;
    font-size:var(--f14);
}

 #not_mob #mealplan .single_recipe .options_trigger_look{
    width: 24px;
    background: white;
    height: 24px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
 }
 
 #not_mob #mealplan .single_recipe.single_note .options_trigger_look{
    background: #f6f6f6;
 }
 
 #not_mob #mealplan .single_recipe.activated .options_trigger_look {
   background:transparent;
 }
 
 #not_mob #mealplan .single_recipe .options_trigger_look img{
    width:24px;
    opacity:.5;
 }
 
 #not_mob #mealplan .single_recipe .options_trigger_look.hover img{
    opacity:1;
 }

               
#mealplan #prev_month_scroll, #mealplan #next_month_scroll{
    height:38px;
    line-height:var(--lh38);
    text-align:center;
}

#mealplan #prev_month_scroll.active, #mealplan #next_month_scroll.active{
    background:lightgray;
}

#not_small #mealplan #cal_range_options, 
#mealplan #copy_move_div, 
#mealplan #showimage_div{
    float:left;
    background:white;
    text-align:center;
    font-size:var(--f13);
    color:rgb(50,50,50);
    font-weight:bold; 
}

#not_small.font130plus #mealplan #cal_range_options, 
.font130plus #mealplan #copy_move_div, 
.font130plus #mealplan #showimage_div{
    font-size:var(--f12);
}

#not_small #mealplan .cal_range_option{
    display: inline-block;
    width: 56px;
    height: 34px;
    padding:17px 0;
    line-height:0;
	overflow:hidden;
    background: white;
    float: left;
    cursor:pointer;
    white-space: nowrap;
    word-wrap:break-word;
    box-sizing:border-box; 
}

#not_small #mealplan .cal_range_option.left{
    border: 1px rgb(160, 160, 160) solid;
    border-radius: 2px 0 0 2px;
}
#not_small #mealplan .cal_range_option.right{
    border: 1px rgb(160, 160, 160) solid;
    border-left:none;
    border-radius: 0 2px 2px 0;
}

#not_small #mealplan .cal_range_option.selected{
    background:#e9eef1;
}
 
#mealplan .mptopbutton{
    background:white;
    height: 36px;
    padding:0px;
    line-height:0;
    font-size:var(--f13);
    font-weight:bold;
    border:1px rgb(160, 160, 160) solid;
    color:#151515;
    text-align:center;
    cursor:pointer;
    border-radius:2px;
    white-space: nowrap;
    word-wrap:break-word;
    box-sizing:border-box; 
}

#not_small.font130plus #mealplan .mptopbutton{
    font-size:var(--f12);
}

#mealplan .mptopbutton_inner{
    height:0px;
    padding:17px 0;
    line-height:0;
     white-space: nowrap;
    word-wrap:break-word;
}

#mealplan #copy_move_div, #mealplan #showimage_div{
    text-align:left;
    margin-right:5px;
}

#mealplan #showimage_div{
    width:72px;
	overflow:hidden;
}

#not_small #mealplan #header_minimized_mp {
    width: 100%;
    height: 10px;
    background: #A80739;
    z-index: 4;
    cursor: pointer;
}

#not_small #mealplan #mp_minimize_header{
    text-align: left;
    border: solid 1px rgb(160, 160, 160);
    margin-right: 5px;
    height: 34px;
    line-height:var(--lh34);
    border-radius: 2px;
    cursor:pointer;
    background: white;
    margin-right: 17px;
}

@media screen and (max-width: 666px){
    #not_small #mealplan #mp_minimize_header{
        display:none;
     } /* todo: find a way for it to fit on smaller screen */
}

#not_small #mealplan #mp_minimize_header.can_minimize #can_maximize{
    display:none;
}

#not_small #mealplan #mp_minimize_header.can_maximize #can_minimize{
    display:none;
}


@media screen and (min-width: 1024px){
   #mealplan #outer{
        width: 1024px;
    }
}

@media screen and (min-width : 1366px){
   #not_small #mob #mealplan #outer{
        width: 1266px;
    }
}

#mealplan #mp_email_options_menu .email_print_label {
    height:32px;
    line-height:var(--lh32);
    display:inline-block;
 }

#mealplan #mp_help_menu .tips_subheader{
    background: #dedede;
    color: black;
    padding: 3px 5px;
    font-weight:bold;
}

#mealplan #mp_help_menu ul{
    -webkit-padding-start: 30px;
}

 #mealplan #mp_shopping_list_menu #mp_sl_form .date_header{
    background:#e0e0e0;
    font-weight:bold;
  }
  
 #mealplan #mp_shopping_list_menu #mp_sl_form #sl_list_select{
	margin: 5px 0 5px 20px;
    height: 30px;
    width: 150px;
    box-sizing: border-box;
    font-size: var(--f16);	
  }  
  
   #mealplan #mp_shopping_list_menu #mp_sl_form #sl_list_multiplier{
	 text-align: center;
    margin: 5px 0 5px 0px;
    height: 30px;
    width: 30px;
    box-sizing: border-box;
	font-size: var(--f16);	
  }  
  
   #mealplan #mp_shopping_list_menu #mp_sl_form {
  }  
  
   #mealplan #mp_shopping_list_menu #mp_sl_form {
  }  

#mealplan #queue_and_calendar, 
#mealplan #queue_and_calendar table,
#mp_quickview table{
    border-collapse:collapse;
    table-layout:fixed;
     white-space: normal; 
    word-wrap: break-word; 
    width:100%;        
    
}
  
#mealplan #mp_grid .queue_section{
    overflow-x: hidden;
    overflow-y: scroll;
     text-align: center;
}

#not_mob #mealplan #mp_grid .queue_section{
    overflow-y: auto;
}

#mealplan #mp_grid .calendar_section {
    overflow-x: auto;
    overflow-y: auto;
}

#not_mob #mealplan #mp_grid #queue_list_wrapper ::-webkit-scrollbar,
#not_mob #mealplan #mp_grid #calendar_list_wrapper ::-webkit-scrollbar 
{
  width: 14px;  /* for vertical scrollbars Must be same as .scrollbar_spacer.os_chrome_safari */
  height: 14px; /* for horizontal scrollbars */
}

#not_mob #mealplan #mp_grid #queue_list_wrapper ::-webkit-scrollbar-track
{
    background: #649667;
     border-left:1px solid #459649;
}

#not_mob #mealplan #mp_grid #queue_list_wrapper ::-webkit-scrollbar-thumb
{
  background: #28542a;
}

#not_mob #mealplan #mp_grid #queue_list_wrapper ::-webkit-scrollbar-thumb:hover
{
  background: #214823;
}
#not_mob #mealplan #mp_grid #queue_list_wrapper ::-webkit-scrollbar-thumb:active{
  background: #203e22;
}

#not_mob #mealplan #mp_grid #calendar_list_wrapper ::-webkit-scrollbar-track
{
    background:#649667;
     border-left:1px solid #459649;
}

#not_mob #mealplan #mp_grid #calendar_list_wrapper ::-webkit-scrollbar-thumb
{
  background: #28542a;
}

#not_mob #mealplan #mp_grid #calendar_list_wrapper ::-webkit-scrollbar-thumb:hover
{
  background: #214823;
}
#not_mob #mealplan #mp_grid #calendar_list_wrapper ::-webkit-scrollbar-thumb:active{
  background: #203e22;
}

/* Handle scrollbar spacing. Necessary because scrollbar is within table and are handled differently */
#mealplan .scrollbar_spacer{
    display:inline-block;
}
 #mealplan .scrollbar_spacer.os_chrome_safari{
    width: 14px; /* same as scrollbar styling */
}
 #mealplan .scrollbar_spacer.os_other{
    width:15px;
}
 #mealplan .scrollbar_spacer.w_chrome{
    display:None; 
}
 #mealplan .scrollbar_spacer.w_edge{
    width:12px;
}
#mealplan .scrollbar_spacer.o_other{
    width:17px;
}

#mealplan #mp_grid #queue .single_recipe{
      text-align: center; 
    }
    
#mealplan #mp_grid #queue_list_wrapper, #mealplan #mp_grid #queue{
      background:#367739;
    }

#not_mob #mealplan #mp_grid #calendar_list_wrapper{
       vertical-align:top;
    }
 
#not_mob #mealplan #mp_grid #calendar .recipe_thumb_default{
      
    } 
    
#mealplan #mp_grid #mp_sets{
    margin:6px 0 36px 0;
}
    
#mealplan #mp_grid #mp_sets .mp_set{
    margin: 3px 0px;
    display: inline-block;
    white-space: normal;
    background:white;
    text-align:left;
    cursor:pointer;   
    border-radius: 2px;    
 }
 
 #not_mob #mealplan #mp_grid #mp_sets .mp_set{
    float:left;
    margin-left:3px;
 }
 
 #not_mob #mealplan #mp_grid #mp_sets .mp_set.hover{
    box-shadow: 0 0 3px white;       
 }
 
 #mealplan #mp_grid #mp_sets .mp_set.activated{
    background:#ffff4e;
 }

 #mealplan #mp_grid #mp_sets .mp_set_name{
    padding:5px 5px 0 5px; 
    font-weight:bold;     
    color:#333333;            
 }
 
 #mealplan #mp_grid #mp_sets .mp_set_info{
    padding-left:5px;
    line-height:var(--lh12); 
	padding-top:5;
    padding-bottom:8px;
    font-size:var(--f12);
        overflow: hidden;
}
 
 #mealplan #mp_grid #mp_sets .mp_set .mp_set_howto,
 #mealplan #mp_list #mp_sets .mp_set .mp_set_howto{
    background: #ffffda;
    margin-top: 2px;
    display:none;
    padding:3px;
        border-top: 1px #ffa000 solid;
}

 #small #mealplan #mp_list #mp_sets .mp_set .mp_set_howto{
     font-size:var(--f15);
}

 #mealplan #mp_grid #mp_sets .mp_set.activated .mp_set_howto,
  #mealplan #mp_list #mp_sets .mp_set.activated .mp_set_howto{
    display:block;
}

#mealplan #mp_list #mp_sets .mp_set{
    margin: 5px 5px 5px 5px;
    white-space: normal;
    background:white;
    text-align:left;
    cursor:pointer;   
    border-radius: 2px;            
 }
 
 #not_mob #mealplan #mp_list #mp_sets .mp_set.hover{
    box-shadow: 0 0 3px white;       

 }

 #mealplan #mp_list #mp_sets .mp_set.activated{
    background:#ffff4e;
 }

 #mealplan #mp_list #mp_sets .mp_set_name{
    padding:5px 5px 0 5px; 
    font-weight:bold;     
    color:#333333;    
    line-height:var(--lh19);            
 }
 
 #mealplan #mp_list #mp_sets .mp_set_info{
    padding-left:5px;
    line-height:var(--lh22); 
    padding-bottom:3px;
    font-size:var(--f13);
        overflow: hidden;
    }
    
#mealplan #mp_list #mp_sets .create_set_trigger,
#mealplan #mp_list #mp_sets .delete_set_trigger{
		background: rgba(255, 255, 255, 0.11);
		color: white;
		border: solid white 1px;
		margin: 0 auto;
		width:90%;
		border-radius: 3px;
		text-align: center;
		margin-top: 5px;
		
    height: 40px;
    line-height:0;
    padding: 20px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}

#mealplan #mp_grid #queue_mpset_header{
    background:#eef2f4;
}
#mealplan #mp_grid #queue_mpset_header_mpset_only {
    background:#367739;
}
#mealplan #mp_grid .queue_mpset_tab{
    text-align:center;
    background:#295f2b;
    text-align:center;
    height:100%;
    font-size:var(--f13);
    font-weight:bold;
    max-height:var(--lh40);
    line-height:var(--lh40);
    border-radius: 5px 5px 0 0;
    color:white;
    cursor:pointer;
	overflow:hidden;
}

@media screen and (min-width : 768px) and (max-width : 799px){
   #mob #mealplan #mp_grid .queue_mpset_tab{
        font-size:var(--f12);
    }
}   

#mealplan #mp_grid .queue_mpset_tab.selected{
    background:#367739;
}

#mealplan #mp_grid .mp_set_button{
    background: rgba(255, 255, 255, 0.11);
    color: white;
    border: solid white 1px;
    margin: 0 auto;
    font-size: var(--f15);
    line-height:var(--lh15);
    padding: 5px 0;
    max-width:70%;
    min-width:84px;
    border-radius: 3px;
    text-align: center;
    margin-top: 5px;
    cursor: pointer;
    overflow:hidden; 
}

@media screen and (min-width : 768px) and (max-width : 768px){
   #mealplan #mp_grid .mp_set_button{
        width:84px;
    }
}  

#mealplan #mp_grid .mp_set .mp_set_del{
    display:none;
    position: absolute;
    right: 0;
    bottom: 0;
    height: 53px;
    width: 46px;
    line-height:var(--lh53);
    text-align: center;
    background: red;
    color: white;
    font-weight: bold;
    cursor: pointer;
}

#mealplan #mp_grid .mp_set.deletable .mp_set_del{
    display:block;
}

#mealplan #mp_list .mp_set .mp_set_del{
    position: absolute;
    right: 0;
    bottom: 0;
    display:none;
     height: 36px;
    width: 36px;
    margin: 0px auto 0 auto;
}


#mealplan #mp_list .mp_set.deletable .mp_set_del{
    display:block;
}


#mealplan #mp_list .mp_set .mp_set_del{
    position: absolute;
    right: 0;
    bottom: 0;
    display:none;
     height: 100%;
    width: 40px;
    background:pink;
}

#mealplan #mp_list .mp_set .mp_set_del img{
    height: 36px;
    width: 36px;
    margin-top: 6px;
    margin-left: 2px;
}
#mealplan #mp_grid .mp_set.clicked{
    background:#ca0505;
    font-weight:bold;
}


/* WIDTH CALENDAR AND RECIPES */

   #not_mob #mealplan #calendar .single_recipe{
        width:108px;
    }

   #not_mob #mealplan #calendar .recipe_thumb{
        width: 98px;
        height: 74px;
    }

   #not_mob #mealplan #mp_grid #queue .single_recipe{
        width:auto;
        height:auto;   
        float:left;
        margin-left:3px;        
    }  

   #not_mob #mealplan #queue .title{
        height:48px;
        margin: 4px 2px 8px 2px;
        float: left;
        width: 100px;
    }
    
   #not_mob #mealplan #mp_grid #queue .recipe_thumb{
        float:left;
        width: 56px;
        height: 50px;
        margin: 4px 2px 4px 2px; 
    }        

   #not_mob #mealplan #mp_grid #queue .single_note, 
   #not_mob #mealplan #mp_grid #mp_sets .mp_set{
        width:172px;
    }
   
    
   #not_mob #mealplan #mp_grid #queue_list_wrapper, #not_mob #mealplan #mp_grid #queue, #not_mob #mealplan #mp_grid #mp_sets{
          width:192px;
    }
    
   #not_mob #mealplan #mp_grid #list_left_spacer, #not_mob #mealplan #mp_grid #list_left_spacer div{
     width:5px; 
    }
   #not_mob #mealplan #mp_grid #list_between_spacer, #not_mob #mealplan #mp_grid #list_between_spacer div{
     width:5px; 
    }
   #not_mob #mealplan #mp_grid #list_right_spacer, #not_mob #mealplan #mp_grid #list_right_spacer div{
     width:0px; 
    }
    
   #not_mob #mealplan #queue_and_calendar, #not_mob #mealplan #queue_and_calendar table{
        width:auto;
    }
    
   #not_mob #mealplan #mp_grid #calendar_list_wrapper{
      width:auto;
    }
    
   #not_mob #mealplan #mp_grid calendar_section{
      min-width:820px; /* prevent scrollbar shifting over  as table fills */
    }

    
  
  #not_mob #mealplan #mp_grid .day_div, #not_mob #mealplan #mp_grid .day_div_header{
        width:114px;
    }
    
    /* mobile */
    

   #mob #mealplan #mp_grid #list_right_spacer, #mob #mealplan #mp_grid #list_right_spacer div{
     width:0px; 
    }

   #mob #mealplan #mp_grid #calendar_list_wrapper{
       vertical-align:top;
    }
 
    
@media screen and (max-width : 767px) { 

   #mob #mealplan #mp_grid #calendar_list_wrapper{
      width:99%;
    }

    
   #mob #mealplan #calendar .single_recipe{
        width:118px;
    }

   #mob #mealplan #calendar .recipe_thumb{
        width: 108px;
        height: 84px;
    }

   #mob #mealplan #mp_grid #queue .single_recipe{
        width:auto;
        height:auto;     
    }     
    
   #mob #mealplan #mp_grid #queue .single_note,
   #mob #mealplan #mp_grid #mp_sets .mp_set{
        width:180px;
    }

   #mob #mealplan #queue .title{
        height:48px;
        margin: 4px 2px 8px 2px;
        float: left;
        width: 108px;
    }
    
   #mob #mealplan #mp_grid #queue .recipe_thumb{
        float:left;
        width: 56px;
        height: 50px;
        margin: 4px 2px 4px 2px; 
        display:block;
    } 
    
   #mob #mealplan #mp_grid #queue_list_wrapper, #mob #mealplan #mp_grid #queue, #mob #mealplan #mp_grid #mp_sets{
      width:188px;
    }
   #mob #mealplan #mp_grid #list_left_spacer, #mob #mealplan #mp_grid #list_left_spacer div{
     width:7px; 
    }
   #mob #mealplan #mp_grid #list_between_spacer, #mob #mealplan #mp_grid #list_between_spacer div{
     width:5px; 
    }
   #mob #mealplan #mp_grid .day_div, #mob #mealplan #mp_grid .day_div_header{
        width:126px;
    }

}

@media screen and (min-width : 768px) {
   #mob #mealplan #queue_and_calendar, #mealplan #queue_and_calendar table{
        width:100%;
    }
   #mob #mealplan #mp_grid #queue .recipe_thumb{
        display:none;
    } 
   #mob #mealplan #mp_grid #list_left_spacer, #mob #mealplan #mp_grid #list_left_spacer div{
        width:3px; 
    }
   #mob #mealplan #mp_grid #list_between_spacer, #mob #mealplan #mp_grid #list_between_spacer div{
        width:2px; 
    }
   #mob #mealplan #mp_grid #queue_list_wrapper, #mob #mealplan #mp_grid #queue, #mob #mealplan #mp_grid #mp_sets{
      width:94px;
    }
   #mob #mealplan #mp_grid #calendar_list_wrapper{
      width:auto;
    }
    
   #mob #mealplan #mp_grid .day_div, #mob #mealplan #mp_grid .day_div_header{
        width:94px;
    }
   #mob #mealplan .single_recipe{
        width:88px;
    }
    
   #mob #mealplan #mp_grid #queue .single_note,
   #mob #mealplan #mp_grid #mp_sets .mp_set{
        width:88px;
    }
    
   #mob #mealplan .recipe_thumb{
        width:80px;
        height:62px;
    }
}

@media screen and (min-width : 769px) and (max-width : 799px){
   #mob #mealplan #queue_and_calendar, #mealplan #queue_and_calendar table{
        width:auto;
        margin:0 auto;
    }
}   

    
@media screen and (min-width : 800px) {
   #mob #mealplan #queue_and_calendar, #mealplan #queue_and_calendar table{
        width:100%;
    }
   #mob #mealplan #mp_grid #queue .recipe_thumb{
        display:none;
    } 
    
   #mob #mealplan #mp_grid #list_left_spacer, #mob #mealplan #mp_grid #list_left_spacer div{
        width:3px; 
    }
   #mob #mealplan #mp_grid #list_between_spacer, #mob #mealplan #mp_grid #list_between_spacer div{
        width:3px; 
    }
   #mob #mealplan #mp_grid #queue_list_wrapper, #mob #mealplan #mp_grid #queue, #mob #mealplan #mp_grid #mp_sets{
      width:98px;
    }
   #mob #mealplan #mp_grid .day_div, #mob #mealplan #mp_grid .day_div_header{
        width:98px;
    }
    
   #mob #mealplan .single_recipe{
        width:92px;
    }
   #mob #mealplan .recipe_thumb{
        height:64px;
    }
    
   #mob #mealplan #mp_grid #queue .single_note,
   #mob #mealplan #mp_grid #mp_sets .mp_set{
        width:92px;
    }
    
}

@media screen and (min-width : 801px) and (max-width : 959px){
   #mob #mealplan #queue_and_calendar, #mob #mealplan #queue_and_calendar table{
        width:auto;
        margin:0 auto;
    }
}   

@media screen  and (min-width : 960px) { 
   #mob #mealplan #queue_and_calendar, #mob #mealplan #queue_and_calendar table{
        width:100%;
    }
   #mob #mealplan #calendar .single_recipe{
        width:104px;
    }

   #mob #mealplan #calendar .recipe_thumb{
        width: 94px;
        height: 72px;
    }

   #mob #mealplan #mp_grid #queue .single_recipe{
        width:auto;
        height:auto;     
    }     
    
    #mob #mealplan #mp_grid #queue .single_note,
    #mob #mealplan #mp_grid #mp_sets .mp_set{
        width:166px;
    }

   #mob #mealplan #queue .title{
        height:48px;
        margin: 4px 2px 8px 2px;
        float: left;
        width: 94px;
    }
    
	.font120plus #mob #mealplan #queue .title{
        height:58px;
    }
	
    .font130plus #mob #mealplan #queue .title{
        height:62px;
    }
	
    .font150plus #mob #mealplan #queue .title{
        height:70px;
    }
	
   #mob #mealplan #mp_grid #queue .recipe_thumb{
        float:left;
        width: 56px;
        height: 50px;
        margin: 4px 2px 4px 2px; 
        display:block;
    } 
    
   #mob #mealplan #mp_grid #queue_list_wrapper, #mob #mealplan #mp_grid #queue, #mob #mealplan #mp_grid #mp_sets{
      width:174px;
    }
   #mob #mealplan #mp_grid #list_left_spacer, #mob #mealplan #mp_grid #list_left_spacer div{
        width:3px; 
    }
   #mob #mealplan #mp_grid #list_between_spacer, #mob #mealplan #mp_grid #list_between_spacer div{
        width:2px; 
    }
   #mob #mealplan #mp_grid .day_div, #mob #mealplan #mp_grid .day_div_header{
        width:110px;
    }
    
}

@media screen and (min-width : 961px) and (max-width : 1023px){
   #mob #mealplan #queue_and_calendar, #mob #mealplan #queue_and_calendar table{
        width:auto;
        margin:0 auto;
    }
}   

    
@media screen  and (min-width : 1024px) { 
    /* first exactly across if width = 1024. Calendar scrolls if smaller. If wider then 1024 table is centered */
   #mob #mealplan #queue_and_calendar, #mob #mealplan #queue_and_calendar table{
        width:auto;
        margin:0 auto;
    }
   #mob #mealplan #calendar .single_recipe{
        width:108px;
    }

   #mob #mealplan #calendar .recipe_thumb{
        width: 98px;
        height: 76px;
    }

   #mob #mealplan #mp_grid #queue .single_recipe{
        width:auto;
        height:auto;     
    }  

   #mob #mealplan #mp_grid #queue .single_note,
   #mob #mealplan #mp_grid #mp_sets .mp_set{
        width:170px;
    }

   #mob #mealplan #queue .title{
        height:48px;
        margin: 4px 2px 8px 2px;
        float: left;
        width: 98px;
    }
    
   #mob #mealplan #mp_grid #queue .recipe_thumb{
        float:left;
        width: 56px;
        height: 50px;
        margin: 4px 2px 4px 2px; 
        display:block;
    } 
    
   #mob #mealplan #mp_grid #queue_list_wrapper, #mob #mealplan #mp_grid #queue, #mob #mealplan #mp_grid #mp_sets{
      width:186px;
    }
   #mob #mealplan #mp_grid #list_left_spacer, #mob #mealplan #mp_grid #list_left_spacer div{
     width:0px; 
    }
   #mob #mealplan #mp_grid #list_between_spacer, #mob #mealplan #mp_grid #list_between_spacer div{
     width:5px; 
    }
   #mob #mealplan #mp_grid .day_div, #mob #mealplan #mp_grid .day_div_header{
        width:116px;
    }

}

@media screen  and (min-width : 1366px) { 
    /* first exactly across if width = 1024. Calendar scrolls if smaller. If wider then 1024 table is centered */
   #not_small #mob #mealplan #queue_and_calendar, 
   #not_small #mob #mealplan #queue_and_calendar table{
        width:auto;
        margin:0 auto;
    }
   #not_small #mob #mealplan #calendar .single_recipe{
        width:132px;
    }

   #not_small #mob #mealplan #calendar .recipe_thumb{
        width: 122px;
        height: 98px;
    }

   #not_small #mob #mealplan #mp_grid #queue .single_recipe{
        width:auto;
        height:auto;     
    }  

   #not_small #mob #mealplan #mp_grid #queue .single_note,
   #not_small #mob #mealplan #mp_grid #mp_sets .mp_set{
        width:199px;
    }

   #not_small #mob #mealplan #queue .title{
        height:52px;
        margin: 4px 2px 8px 2px;
        float: left;
        width: 100px;
    }
    
   #not_small #mob #mealplan #mp_grid #queue .recipe_thumb{
        float:left;
        width: 60px;
        height: 60px;
        margin: 4px 2px 4px 2px; 
        display:block;
    } 
    
   #not_small #mob #mealplan #mp_grid #queue_list_wrapper, 
   #not_small #mob #mealplan #mp_grid #queue, 
   #not_small #mob #mealplan #mp_grid #mp_sets{
      width:200px;
    }
   #not_small #mob #mealplan #mp_grid #list_left_spacer, 
   #not_small #mob #mealplan #mp_grid #list_left_spacer div{
     width:0px; 
    }
   #not_small #mob #mealplan #mp_grid #list_between_spacer, 
   #mob #mealplan #mp_grid #list_between_spacer div{
     width:5px; 
    }
   #not_small #mob #mealplan #mp_grid .day_div, 
   #not_small #mob #mealplan #mp_grid .day_div_header{
        width:148px;
    }

}

  #small #mealplan{
       box-sizing: border-box;
        overflow: hidden;
        position: fixed;
        height: 100%;
        width: 100%;
        background:white;
   }
   

   
  #small #mealplan .mp_recipe_options_div{
    font-size:var(--f14);
   }

  #small #mealplan #small_main_navi{
        position:fixed;
        background:white;
         z-index:2;
         padding-bottom: 5px;
         width:100%;
         background: #F6F6F6;
         height: 48px;  /* match top of #navi */      
   }
   
 #small #mealplan #navi{
        position:fixed;
        top: 48px; /* match heigth of small_main_navi */
        z-index:2; /* less than z-index s_side_menu. Issue where this navi menu doesn't shift right and sits on top of side menu. At least in iOS 14 app. */
        width:100%;
        box-sizing: border-box;
        padding-bottom:5px;
        background: #F6F6F6;
        border-bottom: solid 1px #E6E6E6;
        margin:0;
   }
   
  #small #mealplan #mp_msg_activated, 
  #mealplan #mp_msg_completed{
	background: #FFF9C4;
	position: absolute;
	z-index: 999;
	top: -40px;
	left: 0;
	width: 100%;	
	line-height:0;
    padding: 16px 0 16px 30px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
   }
   
 #not_small #mealplan #mp_msg_completed{
	top: auto;
	bottom:40px;
	left: 40px; /* set in js */
	width: auto;
    padding: 16px 10px 16px 10px;
	min-width:120px;
   }
   
   #small #mealplan .list_spacer{
        height:90px; /* #navi top + height (from button height) + margin + padding */
        /* Also used in js */
     }

   #mealplan #mp_list .prev_scroll,
   #mp_quickview .prev_scroll{
        min-height:40px;
        line-height:var(--lh40);
        white-space: nowrap;
    }
    
   #mealplan #mp_list .calendar_list_month_heading,
   #mp_quickview .calendar_list_month_heading{
        min-height:32px;
        line-height:var(--lh32);
        background:#CC0C47;
        color:white;
        font-size:var(--f18);
        text-align:center;
    }
    
   #mp_quickview .calendar_list_month_heading{
        background:#dee3e5;
        color:black;
        font-size:var(--f18);
        text-align:center;
    }
    
   #mealplan #queue_and_calendar td,  
   #mealplan #queue_and_calendar table td,
   #mp_quickview td,  
   #mp_quickview table td{
        padding:0;           
    }
    
   #mealplan #mp_list .main_vertical_table{
        height:100vh; /* This is changed in js to px height. Not changing it caused issue on some devices where you couldn't scroll properly */
    }
    

   #mealplan #mp_list .not_showing_queue_or_mpset #calendar_list_wrapper{
       width:100%;
    }
    
   #mealplan #mp_list .not_showing_queue_or_mpset #queue_list_wrapper{
      display:none;
    }
    
   #mealplan #mp_list .not_showing_queue_or_mpset #list_between_spacer{
      display:none;
    }
    
    #mealplan #mp_list #queue, #mealplan #mp_list #mp_sets{
      display:none;
    }
  
   #mealplan #mp_list .showing_queue #queue{
       display:block;
    }
    
    #mealplan #mp_list .showing_mpsets #mp_sets{
       display:block;
    }
    
   #mealplan #mp_list .showing_queue #calendar_list_wrapper{
       width:120px;
    }
    
    @media screen and (min-width : 375px){
       #mealplan #mp_list .showing_queue #calendar_list_wrapper{
           width:130px;
        }
    }

    @media screen and (min-width : 411px){
       #mealplan #mp_list .showing_queue #calendar_list_wrapper{
           width:140px;
        }
    }
    
    @media screen and (min-width : 568px){
       #mealplan #mp_list .showing_queue #calendar_list_wrapper{
           width:270px;
        }
    }
    
    @media screen and (min-width : 667px){
       #mealplan #mp_list .showing_queue #calendar_list_wrapper{
           width:350px;
        }
    }
    
   #mealplan #mp_list .showing_mpsets #calendar_list_wrapper{
       width:140px;
    }
    
    @media screen and (min-width : 375px){
       #mealplan #mp_list .showing_mpsets #calendar_list_wrapper{
           width:195px;
        }
    }

    @media screen and (min-width : 411px){
       #mealplan #mp_list .showing_mpsets #calendar_list_wrapper{
           width:240px;
        }
    }
    
     @media screen and (min-width : 568px){
       #mealplan #mp_list .showing_mpsets #calendar_list_wrapper{
           width:340px;
        }
    }
    
    @media screen and (min-width : 667px){
       #mealplan #mp_list .showing_mpsets #calendar_list_wrapper{
           width:360px;
        }
    }
    

   #mealplan #mp_list .showing_queue #queue_list_wrapper, #mealplan #mp_list .showing_mpsets #queue_list_wrapper{
      width:99%;
      box-shadow: -5px 0px 10px -5px black;
      background:#367739;
    }
   #mealplan #mp_list .showing_queue #list_between_spacer, #mealplan #mp_list .showing_mpsets #list_between_spacer{
     width:5px; /* to show box-shadow of queue_list_wrapper. Otherwise looks weird */
    }
    

   #mealplan #mp_list .showing_queue .calendar_section td.opt_col, #mealplan #mp_list .showing_mpsets .calendar_section td.opt_col{
       display:none;
    }

    #mealplan #mp_list .queue_section, #mealplan #mp_list .calendar_section{
      height:100%; /* changed in js */
      overflow-x:hidden;
      overflow-y:scroll;  
            
    }

  #mealplan #mp_list table.day_table,
  #mp_quickview table.day_table{
           margin-top: 5px;
            margin-bottom: 5px;
   }
   
  #mealplan #mp_list .day_border,
  #mp_quickview .day_border{
    border-top: 1px #dad7d7 dotted;
    height:0px;
   }
   

   #mealplan #mp_list td.day_table_label,
   #mp_quickview td.day_table_label{
       width:44px;
       vertical-align:top;
   }

 #mealplan #mp_list td.day_table_label.today,
 #mp_quickview td.day_table_label.today
  {
       color:#3333f3;
   }
 
 #mealplan #mp_list td.title_col,
 #mp_quickview td.title_col{
        text-align:left;
        width:99%;
   }
   
  #mealplan #mp_list td.opt_col,
  #mp_quickview td.opt_col{
         vertical-align: middle;
        text-align: center;
         width:40px;
   }
   

   #mealplan #mp_list td.opt_col .note_opt_icon,
    #mp_quickview td.opt_col .note_opt_icon{
      font-size:var(--f24); /* edit icon seems much bigger than menu icon */
      color:#525252;
      
   }
   

  #mealplan #mp_list table.day_recipe_list,
   #mp_quickview table.day_recipe_list{
    width:100%;
   }
   
   #mealplan #mp_list .xday_label,
   #mp_quickview .xday_label{
        text-align:center;
        font-weight:bold;
        min-height: 40px;
        font-size:var(--f13);
        line-height:var(--lh18);
        margin-top:3px;
        white-space: nowrap;
        word-wrap: break-word;
        overflow: hidden;
   }
   
   #mealplan #mp_list .xday_label .xday_label_number,
    #mp_quickview .xday_label .xday_label_number{
        font-size:var(--f19);
   }
   
   #mp_quickview .day_table.other_month .xday_label{
       opacity:50%;
   }

 #mealplan #mp_list .xrecipe_thumb,
 #mp_quickview .xrecipe_thumb{
     display: block;
    margin: 1px;
    background-position: center center;
    background-size: cover;
    border: solid #c5c5c5 1px;
    width: 46px;
    height: 46px;
}


@media screen and (max-width : 567px){
   #mealplan #mp_list .showing_queue #calendar .image_col, 
   #mealplan #mp_list .showing_mpsets #calendar .image_col{
       display:none;
    }
}
    
@media screen and (max-width : 374px){
   #mealplan #mp_list #queue .image_col,
   #mp_quickview #queue .image_col{
        display:none;
    }
}

 #mealplan #mp_list .xtitle, #mealplan #mp_list .xnote,
 #mp_quickview .xtitle, #mp_quickview .xnote{
    border:1px #e6e6e6 solid;
    box-shadow:#4a4a4a 1px 1px 1px;
      margin:3px 0 3px 0;
    padding: 0px;
      border-radius:3px;
      line-height:var(--lh19);
      overflow:hidden; 
      background:white;
   }
   
 #mp_quickview .xtitle, #mp_quickview .xnote{
     box-shadow: none;
   }

  #mealplan #mp_list .queue_section .xtitle, #mealplan #mp_list .queue_section .xnote,
   #mp_quickview .queue_section .xtitle, #mp_quickview .queue_section .xnote{
    margin-left:4px;
    font-size:var(--f16);
   }
   
#mealplan #mp_list  .mp_list_recipe_height,
#mp_quickview .mp_list_recipe_height{
	/* sets min height of the recipe */
	/* xtitle_inner, xnote_inner determine whether all have same height, or is allowed to grow */
	min-height:50px;
}
   
#mealplan #mp_list .xtitle_inner, 
#mealplan #mp_list .xnote_inner,
#mp_quickview .xtitle_inner, 
#mp_quickview .xnote_inner{
	  max-height:42px;  /* should work for default and 110% */
	  /* see also mp_list_recipe_height */
	  /* should be multiple of line-height to avoid top of next line showing (bigger here to account for next font size before 130 */
	  /* if max-height bigger than min-height of mp_list_recipe_height, then can grow */
	  overflow:hidden; 
	   padding: 0 5px;
}
   
 .font120plus #mealplan #mp_list .xtitle_inner, 
.font120plus #mealplan #mp_list .xnote_inner,
.font120plus #mp_quickview .xtitle_inner, 
.font120plus #mp_quickview .xnote_inner{
  max-height:46px; 
}

.font130plus #mealplan #mp_list .xtitle_inner, 
.font130plus #mealplan #mp_list .xnote_inner,
.font130plus #mp_quickview .xtitle_inner, 
.font130plus #mp_quickview .xnote_inner{
  max-height:50px; 
}

.font150plus #mealplan #mp_list .xtitle_inner, 
.font150plus #mealplan #mp_list .xnote_inner,
.font150plus #mp_quickview .xtitle_inner, 
.font150plus #mp_quickview .xnote_inner{
  max-height:87px;
}
  
   
  #mealplan #mp_list .showing_queue .calendar_section .xtitle, #mealplan #mp_list .showing_queue .calendar_section .xnote,
  #mp_quickview .showing_queue .calendar_section .xtitle, #mp_quickview .showing_queue .calendar_section .xnote{
        border-right: none;
        border-radius: 3px 0 0 3px;
    }
    
 #mealplan #mp_list .recipe_row.activated .xtitle, #mealplan #mp_list .recipe_row.activated .xnote,
 #mp_quickview .recipe_row.activated .xtitle, #mp_quickview .recipe_row.activated .xnote{
      background:#ffff4e;
      box-shadow: black 1px 1px 3px;
   }
   
   
#mealplan #mp_list .queue_section .view_all_this_day{
    display:none;
}
   
#mealplan #mp_list .recipe_options {
    position: fixed;
    width: 200px;
    box-sizing: border-box;
    overflow: hidden;
    top: 100px;
    left: 50%;
    margin-left: -100px;
    z-index: 100;
    background: white;
    border: gray 1px solid;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    padding: 0;
    text-align:center;
}

#mob #ios #mealplan #mp_list #queue .recipe_options {
    /* ios handles z-index differently so menu can't overlap the queue */
    width:150px;
    left:auto;
    right:42px;
}

@media screen and (min-width : 375px){
  #mob #ios #mealplan #mp_list #queue .recipe_options {
       /* ios handles z-index differently so menu can't overlap the queue */
        width:180px;
        left:auto;
        right:48px;
    }
}

#mealplan #mp_list .options_icon_wrapper,
#mp_quickview .options_icon_wrapper{
     height: 36px;
    width: 36px;
    margin: 0px auto 0 auto;
}

#mealplan #mp_list .options_icon,
#mp_quickview .options_icon{
    height: 36px;
    width: 36px;
    opacity: .5;
}

#not_small #mealplan #mp_recipe_cal_menu{
    margin: 0 auto;
    width:auto;
    left: 50%;
    margin-left: -155px;
}

#not_small #not_mob #mealplan #mp_recipe_cal_menu{
    margin-left:0px;
    position:fixed;
}

#small #mealplan #mp_recipe_cal_menu .ui-datepicker {
    margin: 0 auto;
}

#small #mealplan #mp_recipe_cal_menu #recipecopymove_div {
     /* match .ui-datepicker  */
    margin: 10px auto;
    width: 306px;
	padding: 0;
}

#not_small #mealplan #mp_recipe_cal_menu #mp_recipe_cal_wrapper {
    text-align: left;
    width: 289px;
    height: 370px;
}

#not_small #mealplan #mp_recipe_cal_menu #recipecopymove_div {
    margin-bottom: 8px;
}

#mealplan #mp_list #queue .options_icon{
    opacity: .9;
}


#mealplan_print #outer {
    width: auto;
    margin: 0px;
    }
    
#mealplan_print .content {
    width: auto;
    padding: 0 0px;
    margin: 0 auto;
    text-align: left;
}

#mealplan_print #content_inner {
  background: white;
    overflow: hidden;
    text-align: left;
    padding: 0 30px;
    margin:0;
    min-height: 450px;
    width:700px
}

 @media print {
    #mealplan_print #content_inner {
        padding: 0;
        width:auto;
    }
 }

 #mealplan_print #print_page_options {
    margin: 30px 0 10px 0;
    overflow: hidden;
} 
#mealplan_print #print_page_options label{
    height:32px;
    line-height:var(--lh32);
    display:inline-block;
}

#mealplan_print .date_range{
    display:inline-block;
    line-height:var(--lh32);
    overflow:hidden;
    float:left;
    font-weight:bold;
    margin:20px 0px 15px 0px;
    font-size:var(--f17);
}
    
    
#mealplan_print .day_div{
    display:inline-block;
    border:solid rgb(185, 185, 185) 1px;
    border-right:none;
     width:120px;
     width:90px;
     overflow:hidden;
     margin:0px;
     vertical-align:top;
     white-space:normal;
     min-height:80px;
     text-align: center;
}

#mealplan_print .day_div_last,
#mealplan_print #print_calendar.exact_month_only .last_date_month{
    border-right:solid rgb(185, 185, 185) 1px;
}

#mealplan_print .day_label{
    font-weight:bold;
    font-size:var(--f13d5);
    text-align:center;
    width:100%;
    height:var(--lh18); 
    line-height:var(--lh18);
    border-bottom:solid rgb(185, 185, 185) 1px;
}

#print_calendar .other_month{
    visibility:visible;
}
#print_calendar.exact_month_only .other_month{
    visibility:hidden;
}

#mealplan_print .day_div.other_month .day_label {
    color: gray;
}

#mealplan_print .single_recipe{
    border:solid 1px gray;
    margin:5px 0px 5px 0px;
    width:84px;
    display:inline-block;
    background:white;
    white-space:normal;
    vertical-align: bottom;
    text-align:center;
}

#mealplan_print .recipe_thumb{
    display: inline-block;
    width: 74px;
    height: 58px;
    margin-top:2px;
    background-position: center center;
    background-size: cover;
     border:solid gray 1px;
}

#mealplan_print .recipe_thumb.no_show_image{
    display: none;
}

#mealplan_print .title, #mealplan_print .single_note .note_text{
    font-size:var(--f13); 
    line-height:var(--lh16);
    color:black;
    text-align:left;
    overflow: hidden;
}

#mealplan_print .title{ 
    min-height: 48px;
    max-height: 48px;
    margin:0 0 5px 0;  
    padding:0 2px;
}

#mealplan_print .title.no_show_image{
    margin:7px 0 5px 0;  
}

#mealplan_print .single_note .note_text{
    margin: 0;   
    padding:5px 2px;
    text-align:left;
}


#features {
    -moz-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

#small #features .content{  
   padding:0px 0px 0px 0px;  
}

#not_mob #features #signup_button_show{
     display:none; /* is in header */
}

 #features #features_header{
    background-position: center center;
    background-size: cover;
}

#not_small #features #features_header{
    min-width:580px;
    height:180px;
    border-top: 4px white solid;
        background-color:#53566A;
    background-image: url('https://cdn.copymethat.com/static/header_dark_mushroom_whisk_h200.jpg?v=1');
     /* for faster loading, also include this image as img in html with display:none */
}

#small #features #features_header{
    width: 100%;
    height:110px;
   background-color:#53566A;
    background-image: url('https://cdn.copymethat.com/static/header_dark_mushroom_whisk_small.jpg?v=2');
     /* for faster loading, also include this image as img in html with display:none */
}

#not_small #features #features_header #features_header_text_wrapper{
    color:white;
    text-align:center;
    padding-top: 55px;
}

#small #features #features_header #features_header_text_wrapper{
    color:white;
    text-align:center;
    padding-top: 50px;
}

 #not_small #features #features_header #features_header_text_wrapper #features_header_text{
    font-size:var(--f18);
 }
 
 #small  #features #features_header #features_header_text_wrapper #features_header_text{
    font-size:var(--f18);
 }


 #features #features_header .features_header_button{
   width:160px;
   height:40px;
   line-height:var(--lh40);
   border: 2px white solid;
   color:white;
   font-size:var(--f16);
   font-weight:bold;
   text-align:center;
   margin:0 auto;
   border-radius:16px;
   margin-top: 20px;
   cursor:pointer;
}

#small #features #features_header .features_header_button{
        width:120px;
        border: 1px white solid;
        color: white;
        font-weight: bold;
        margin-top: 5px;
}

#features #outer{
    width:100%;
}

#features #features_footer{
    background:black;
    color:white;
    text-align:center;
    height:42px;
    line-height:var(--lh42);
}

#features #features_footer a{
    color:white;
    text-decoration:none;
}


#features #features_menu_header{
    width:600px;
    margin:50px auto 30px auto;
}

#features .features_menu_section{
    display:inline-block;
    width:200px;
    cursor:pointer;
}


#features .features_menu_text{
   text-align: center;
    font-weight: bold;
    padding-top: 10px;
    font-size:var(--f15);
    color:black;
}

@media screen and (min-width:600px){
   #not_small #features .features_menu_text .narrow_only{
        display:none;
    }
}

#features .features_menu_text.active, #features .features_menu_text.hover{
    color:#A80739;
}


#features .features_menu_icon, #features .features_menu_icon_wrapper{
        width:80px;
        margin:0 auto;
}


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

   #features #features_menu_header{
        width:336px;
        margin:0 auto;
        margin-top:20px;
    }

   #features .features_menu_section{
        display:inline-block;
        width:112px;
        cursor:pointer;
    }
    
   #features .features_menu_icon, #features .features_menu_icon_wrapper {
        width: 50px;
    }
   #features .features_menu_text{
        font-size:var(--f14);
        line-height:var(--lh16);
    }
}

@media screen and (max-width : 374px){
     #features #features_menu_header{
        width:318px;
    }

   #features .features_menu_section{
        width:106px;
    }
}

#features .section_wrapper.double_text{
    /* shared features at bottom, add gray border at top when beow each other */
    border-top:1px solid gray;
}

#features .bg_salmon{
  background:#df6870;
  color:white;
}

#features .bg_white{
  background:white;
  color:black;
}

#features .bg_gray{
  background:#555555;
  color:white;
}

@media screen and (min-width : 980px){
   #features .section_insides{
        width:980px;
        margin:0 auto;
    }
}

/* iPhone 5 */
#features .section_image_wrapper, #features .section_image {
    width: 306px;
}
    
/* Android 360px */
@media screen and (min-width : 360px){
    #features .section_image_wrapper, #features .section_image {
        width: 330px;
    }
}

/* iPhone 6, Pixel */
@media screen and (min-width : 375px){
   #features .section_image_wrapper, #features .section_image {
        width: 340px;
    }
}

/* iPhone 6+, Pixel lg  */
@media screen and (min-width : 411px){
   #features .section_image_wrapper, #features .section_image {
        width: 360px;
    }
}

/* narrow tablets */
@media screen and (min-width : 600px){
   #features .section_image_wrapper, #features .section_image {
        width: 550px;
    }
}

#features .section_image_wrapper, #features .section_image {
    margin: 0 auto 0 auto;
} 

#features .section_image_wrapper {
    margin-top:0;
}
#features .image_section {
    padding: 20px 0 0 0;
}
#features .text_point_wrapper{
    width:100%;
}

#features .text_section{
    overflow:hidden;
    margin-top:0px;
    padding-top:30px;
}

#features .text_section_inner{
    width:100%;
    margin:0 0 30px 0;
}

#features .text_header{
    text-align:center;
    font-size:var(--f22);
    font-weight:bold;
    letter-spacing: 5px;
    line-height:var(--lh29);
}

#features .text_point{
    font-size:var(--f17);
    line-height:var(--lh21);
    margin: 12px 15px;
}

#features #features_top_text{
        text-align: center;
    width: 100%;
    box-sizing: border-box;
    margin: 15px 0;
    font-size:var(--f18);
    color: #292929;
    line-height:var(--lh25);
    padding: 0 10px;
}

@media screen and (min-width : 600px){
  #features .image_section{
       padding:30px 0 0 0;
    }
   #features .text_point_wrapper{
        width:430px;
        margin:20px auto;
    }
   #features #features_top_text{
        width:500px;
        margin:0 auto 20px auto;
    }
}

/* at 801 switches to side by side */


@media screen and (min-width : 801px){
    /* if change when switch, also consider .gray_if_fp */
   #features .text_section, #features .image_section{
        float:left;
        width:50%;
        min-height:350px;
        overflow:hidden;
        margin-top:0px;
    }
   #features .image_section {
        padding: 0;
    }
   #features .rightside_image{
        float:right;
    }
   #features .section_image_wrapper, #features .section_image {
        width: 380px;
        margin: 0 auto 0 auto;
    }
   #features .section_image_wrapper {
        margin-top:20px;
    }
   #features .text_point_wrapper{
        width:400px;
    }
   #features .text_section_inner{
        width:400px;
        margin:30px auto 30px auto;
    }
}

@media screen and (min-width : 980px){
  #features .text_section, #features .image_section{
        min-height:380px;
    }
   #features .section_image_wrapper, #features .section_image {
        width: 420px;
    }
    #features .section_image_wrapper {
        margin-top:20px;
    }
}

#features .double_text .text_section{
      min-height:0;
}

#features .features_bottom_button{
    width: 200px;
    margin: 20px auto 50px auto;
    text-align: center;
    padding: 15px 0;
    background:#CC0C47;
    color: white;
    border-radius: 5px;
    font-size:var(--f17);
    font-weight: bold;
    cursor:pointer;
}

#not_small #features #frontpage #search_wrapper{
    width:423px; 
    margin:20px auto; 
}

#small #features #frontpage #search_wrapper{
    width:300px; 
    margin:20px auto 15px auto; 
}

 #features #frontpage #frontpage_search_input{
    display: inline-block;
    font-size:var(--f14);
    line-height:var(--lh18);
    height: 44px;
    padding: 11px 10px 11px 10px;
    border: 1px solid #D7D7D7;
    box-sizing: border-box;
    width: 380px;
    font-family: open sans;
    width:360px;
}

#small #features #frontpage #search_wrapper #frontpage_search_input{
    width:100%; 
    font-size:var(--f16);
}

#features #frontpage #frontpage_search_submit{
    color: #a7a7a7;
    box-sizing: border-box;
    font-size:var(--f14);
    font-weight: 800;
    display: inline-block;
    width: 60px;
    height: 44px;
    line-height:var(--lh43);
    text-align: center;
    border: 1px solid #DBDBDB;
    background: #fdfdfd;
    border-radius: 2px;
    cursor: pointer;
    margin-left: 3px;
}

#features #frontpage .learn_more_button{
        border:gray 2px solid;
        border-radius:5px;
        height:38px;
        line-height:0;
        padding: 18px 0px;
        width:140px;
        margin:0 auto;
        font-size:var(--f16);
        color:gray;
        text-align:center;
        cursor:pointer;
        margin-top:20px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}


#features #frontpage .bg_salmon .learn_more_button{
    border-color:white;
    color: white;
}

#features #frontpage .bg_white .learn_more_button{
    border-color:black;
    color: black;
}

#features #frontpage .bg_gray .learn_more_button{
    border-color:white;
    color: white;
}

#features #frontpage a{
    text-decoration:none;
}


/* header css */


 #login_signup_show_wrapper{
    position: absolute; 
    top: 10px; 
    right: 0;  
 }
 
 #small #login_signup_show_wrapper{
   width:100px; /* force them beneath each other */ 
 }
     
#not_small #login_button_show, 
#not_small #signup_button_show, 
#not_small #logout_button{
    height:36px;
    line-height:var(--lh36);
    box-sizing:border-box;
    text-align:center;
    font-size:var(--f15);  
    cursor:pointer;
    font-family: arial; 
    padding:0 15px;
    float:right;
    margin-right:10px;
    border-radius:3px;
    background: rgba(255, 255, 255, 0.7);
    color: #35374c;
    border: 1px solid white;
}

#not_small #logout_button{
    background: white;
    color: #35374c;
    border: 1px solid #e1e1e1;
    margin-top:5px;
}

#small #login_button_show, 
#small #signup_button_show, 
#small #logout_button{
    background: #f9f9f9;
    border: 1px solid white;
    height: 36px;
    line-height:0;
    padding: 18px 15px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
    text-align: center;
    color: gray;
    font-size:var(--f14);
    cursor: pointer;
    font-family: arial;
    float: right;
    margin-right: 10px;
    margin-top:5px;
    border-radius: 3px;
}

#small #logout_button{
    background: #f9f9f9;
    border: 1px solid #e1e1e1;
}
@media screen and (max-width : 359px){
   #small #login_button_show, #small #signup_button_show, #small #logout_button{
        padding: 18px 10px;
    }
}

#not_small .nli_results_back_button{
    background:#b1b8bc;
    font-family:arial;float:left;width:170px;
    height:36px;line-height:var(--lh36);font-size:var(--f14);font-weight:bold;cursor:pointer;
    text-align:center;
    margin: 6px 3px 0px 5px;
}
#not_small .nli_results_back_button span{
	color:white; text-decoration:none;
}

#small .nli_results_back_button{
    height:40px;
    line-height:var(--lh40);
}


#small #nli_page_top_recipe_back, #small #nli_page_top_results_back{
    background: #4d5269;
        color: white;
    border: 1px solid white;
    height: 34px;
    line-height:var(--lh34);
    text-align: center;
    font-size:var(--f14);
    cursor: pointer;
    font-family: arial;
    padding: 0 15px;
    border-radius: 3px;
        position: absolute;
    top: 10px;
    left: 10px;
}

#nli_page_top_morerecipes{
    float: left;
    height: 36px;
    line-height:var(--lh36);
    text-align: center;
    font-size:var(--f14);
    font-family: arial;
    padding: 0 15px;
    border-radius: 3px;
    margin-left: 10px;
    margin-top:8px;
    font-weight: bold;
    color: #4f4f4f;
    background: white;
    border: solid 1px #dddddd;
    cursor:pointer;
}

#small #nli_menu_icon{
   position:absolute;
   top: 5px; 
   right: 5px;
}

#small #nli_menu_icon div{
    width: 32px;
    height: 4px;
    background: white;
    margin: 5px 0;
    border-radius: 2px;
}
    
    
#nli_header{
    background-position: center center;
    background-size: cover;
}

#not_small #nli_header{
    min-width:580px;
    height:180px;
    border-top: 4px white solid;
    background-color:#53566A;
    background-image: url('https://cdn.copymethat.com/static/header_dark_mushroom_whisk_h200.jpg?v=1');
     /* for faster loading, also include this image as img in html with display:none */
}

#small #nli_header{
    width: 100%;
    height:164px;
    height:104px;
    overflow:hidden;
    box-sizing: border-box;
    background-color:#53566A;
    background-image: url('https://cdn.copymethat.com/static/header_dark_mushroom_whisk_small.jpg?v=2'); 
    /* for faster loading, also include this image as img in html with display:none */
}

#small #recipes_shared #nli_header, #small #recipe #nli_header {
    z-index: 4;
}

#not_small #nli_header #nli_header_text_wrapper{
    color:white;
    text-align:center;
    padding-top: 38px;
    padding-top: 58px;
}

#small #nli_header #nli_header_text_wrapper{
    color:white;
    text-align:center;
    padding-top: 50px;
}

 #not_small #nli_header #nli_header_text_wrapper #nli_header_text{
    font-size:var(--f17);
 }
 
 #small #nli_header #nli_header_text_wrapper #nli_header_text{
    font-size:var(--f16);
 }


#nli_header .nli_header_button{
   width:160px;
   height:40px;
   line-height:var(--lh40);
   border: 2px white solid;
   color:white;
   font-size:var(--f16);
   font-weight:bold;
   text-align:center;
   margin:0 auto;
   border-radius:16px;
   margin-top: 20px;
   cursor:pointer;
   margin-top: 15px;
}

#small #nli_header .nli_header_button{
        width:120px;
        border: 1px white solid;
        color: white;
        font-weight: bold;
        margin-top: 10px;
}

#not_mob #nli_header .mob_only{
    display:none;
}

#mob #nli_header .notmob_only{
    display:none;
}

#small.not_logged_in #recipes_shared #content_top {
   /* not logged in has extra headers */
    border-top:4px white solid;
    box-sizing:border-box;
    height:44px;  /* searchbar-height-dependent  */
    top: 104px;
}

#small.not_logged_in #recipes_shared #outer {
     /* not logged in has extra headers */
    top: 148px; /* searchbar-height-dependent  */
}

#small.not_logged_in #recipe #outer {
 /* not logged in has extra headers */
    top: 104px;
}

#welcomebackdiv{
    color:white;
    background:#A80739;
    text-align:center;
    padding-top:40px;
    padding-bottom:50px;
    margin-bottom:20px;
}

#welcomebackdiv a{
    text-decoration:none;
    color:white;
}

#welcomebackdiv #welcometext{
    font-size:var(--f26);
}

#welcomebackdiv #gototext{
    font-size:var(--f21);
    padding-top: 25px;
    padding-bottom: 15px;
}

#welcomebackdiv .goto_option{
    line-height:var(--lh46);
    font-size:var(--f20);
    min-width: 200px;
    display: inline-block;
    margin-top: 20px;
    margin-left: 10px;
    margin-right: 10px;
    border-top: white solid 1px;
    border-bottom: white solid 1px;
}

@media screen and (max-width: 768px) {
   #welcomebackdiv .goto_option{
          margin-left: 6px;
          margin-right: 6px;
    }
}

#small #welcomebackdiv .goto_option{
    margin: 20px auto 0 auto;
}

#not_mob #welcomebackdiv .goto_option:hover{
   text-decoration:underline;
}

/* slider is for sliding images in viewport beneath the recipe's main image. Now also when click image in small */

#slider_viewport{
  width:240px; /* whole number times slider_image width */
  height:60px; /* same as #slider_images  */
  padding:2px 0;
  overflow:hidden;
  float:left;
  box-shadow: 3px 3px 6px -1px rgba(140,140,140,1);
  margin: 10px 0 5px 0; /* top same as slider_arrow */
}

#small #slider_wrapper.centered{
    margin: 0 auto;
    width: 370px; /* slider_viewport + 2x slider_arrow  */
}

@media screen and (max-width : 374px){
  #small #slider_wrapper.centered{
    margin: 0 auto;
    width: 312px; /* slider_viewport + 2x slider_arrow  */
    }
}

#small #slider_viewport{
   width:290px; /* whole number times slider_image width */
   height:58px;
   
}

@media screen and (max-width : 374px){
  #small #slider_viewport{
       width:232px; /* whole number times slider_image width */
   }
}

#slider_images {
  height:60px;
  width:2000%;
}

#small #slider_images {
  height:58px;
}

.slider_image{
  height:60px; /* same as #slider_images */
  width:60px; /* must fit exact number in slider_viewport */
  float:left;
  overflow:hidden;
}

#small .slider_image{
  height:58px; /* same as #slider_images */
  width:58px; /* must fit exact number in slider_viewport */
}

.slider_image img{
  width:58px; /* a bit less than .slider_image */
}

#small .slider_image img{
  width:56px; /* a bit less than .slider_image */
}

.slider_arrow{
  width: 30px;
  box-sizing:border-box;
  float: left;
  padding-top: 20px;
  padding-left: 12px;
  padding-bottom: 22px;
  cursor:pointer;
  margin-top:10px; /* same as margin-top slider_viewport */
}

#small .slider_arrow{
  width: 40px;
  padding-left:17px;
}

.slider_inner_arrow {
    position: relative;
    padding: 2px;
    height: 17px;
    width: 0px;
    opacity: 0.8;   
}

.slider_inner_arrow:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    height: 50%;
    width: 100%;
    background: #adbcc3;
    -webkit-transform: skew(-30deg, 0deg);
    -moz-transform: skew(-30deg, 0deg);
    -ms-transform: skew(-30deg, 0deg);
    -o-transform: skew(-30deg, 0deg);
    transform: skew(-30deg, 0deg);
}

.slider_inner_arrow:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background: #adbcc3;
    -webkit-transform: skew(30deg, 0deg);
    -moz-transform: skew(30deg, 0deg);
    -ms-transform: skew(30deg, 0deg);
    -o-transform: skew(30deg, 0deg);
    transform: skew(30deg, 0deg);
}

.left .slider_inner_arrow {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.slider_arrow.invisible{
  visibility:hidden;
}



/* Instead of making separate call:
 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
 
 This is for Datapicker
 
 Removed css not used by Datepicker
 
 */

/*! jQuery UI - v1.10.4 - 2014-01-17

/* Layout helpers
----------------------------------*/


#not_small div.ui-datepicker {
    font-size:var(--f16d5); 
	line-height:var(--lh23);
	width:280px;  /* if change, see recipecopymove_div */
	padding: 3.3px 3.3px 0 3.3px;
	
	/* if change line-height, also change in js set_calendar_max_sizing()  
	   Sets max line-height. max line-height must be 23 px
	   Can't just set in CSS because Android font size setting changes it
	*/
}

#not_small #not_mob .menu_with_mp_quickview div.ui-datepicker{
	width:310px;
}
@media screen and (min-width : 680px){
   #not_small .menu_with_mp_quickview div.ui-datepicker{
		width:310px;
	}
}

#small div.ui-datepicker {
    font-size:var(--f18); 
	line-height:var(--lh24d6);
	width:306px;  /* if change, see recipecopymove_div */
	padding: 3.6px 3.6px 0 3.6px;
	
	/* if change line-height, also change in js set_calendar_max_sizing()  
	   Sets max line-height. max line-height must be 24.6 px
	   Can't just set in CSS because Android font size setting changes it
	*/
}

#recipes .ui-priority-secondary, #recipes .ui-widget-content .ui-priority-secondary, #recipes .ui-widget-header .ui-priority-secondary,
#recipe .ui-priority-secondary, #recipe .ui-widget-content .ui-priority-secondary, #recipe .ui-widget-header .ui-priority-secondary,
#ui-datepicker-div .ui-priority-secondary, #ui-datepicker-div .ui-widget-content .ui-priority-secondary, #ui-datepicker-div .ui-widget-header .ui-priority-secondary{
    /* the dates from the other months. Also "today" button so that's changed below. */
    opacity:.5;
}

#ui-datepicker-div button.ui-datepicker-current,
 #ui-datepicker-div .ui-widget-content button.ui-priority-secondary {
	 font-size:var(--f14); 
	 opacity: .9; 
	 font-weight: bold; }
#ui-datepicker-div button.ui-datepicker-close {
	font-size:var(--f14); 
	opacity: 1; 
	font-weight: bold; }

.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-clearfix {
	min-height: 0; /* support: IE7 */
}

/* Interaction Cues
----------------------------------*/
/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}


/* Misc visuals
----------------------------------*/

/* Overlays */

/* workarounds */
/* reset extra padding in Firefox, see h5bp.com/l */

.ui-datepicker {
/*	width: 17em; 
	padding: .2em .2em 0;
	*/
	display: none;
}

.ui-datepicker .ui-datepicker-header {
	position: relative;
    height: 36px;
    line-height:0;
    padding: 18px 0px;
    box-sizing: border-box;
    white-space: nowrap;
    word-wrap: break-word;
    overflow: hidden;
}
#small .ui-datepicker .ui-datepicker-header {
    height: 40px;
    padding: 20px 0px;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	/*width: 1.8em;
	height: 1.8em;
	*/
}

#not_small .ui-datepicker .ui-datepicker-prev,
#not_small .ui-datepicker .ui-datepicker-next {
	width:27.7px;
	height:27.7px;
}

#small .ui-datepicker .ui-datepicker-prev,
#small .ui-datepicker .ui-datepicker-next {
	width:32.4px;
	height:32.4px;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
    text-align: center;
}

.ui-datepicker .ui-datepicker-title select {
	/*font-size:1em;*/
	margin: 1px 0;
}

#not_small .ui-datepicker .ui-datepicker-title select {
	font-size:var(--f16d5);
}

#small .ui-datepicker .ui-datepicker-title select {
	font-size:var(--f18);
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 49%;
}
.ui-datepicker table {
	/* this is ui-datepicker-calendar */
	width: 100%;
	/*font-size:.9em;*/
	border-collapse: collapse;
	/*margin: 0 0 .4em; */
}
#not_small .ui-datepicker table {
	/* this is ui-datepicker-calendar */
	font-size:var(--f15);
	margin: 0 0 5.94px;
	/* if change font-size, also change in js set_calendar_max_sizing()  
	   Sets max font-size. max font-size must be 20 px
	   Can't just set in CSS because Android font size setting changes it
	*/
}
#small .ui-datepicker table {
	/* this is ui-datepicker-calendar */
	font-size:var(--f17); 
	margin: 0 0 6.48px;
	/* if change font-size, also change in js set_calendar_max_sizing()  
	   Sets max font-size. max font-size must be 22 px
	   Can't just set in CSS because Android font size setting changes it
	*/
}
.ui-datepicker th {
/*	padding: .7em .3em; */
	text-align: center;
	font-weight: bold;
	border: 0;
}
#not_small .ui-datepicker th {
	padding: 10.5px 4.5px;
}
#small .ui-datepicker th {
	padding: 11.9px 5.1px;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	/*padding: .2em;*/
	text-align: right;
	text-decoration: none;
}
#not_small .ui-datepicker td span,
#not_small .ui-datepicker td a {
	padding: 3.3px;
}
#small .ui-datepicker td span,
#small .ui-datepicker td a {
	padding: 3.6px;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	/*margin: .7em 0 0 0;
	padding: 0 .2em; */
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
#not_small .ui-datepicker .ui-datepicker-buttonpane {
	margin: 11.55px 0 0 0;
	padding: 0 3.3px;
}
#small .ui-datepicker .ui-datepicker-buttonpane {
	margin: 12.6px 0 0 0;
	padding: 0 3.6px;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	/*margin: .5em .2em .4em;*/
	cursor: pointer;
	/*padding: .2em .6em .3em .6em;*/
	width: auto;
	overflow: visible;
}
#not_small .ui-datepicker .ui-datepicker-buttonpane button {
	margin: 7px 2.8px 5.6px 2.8px;
	padding: 2.8px 8.4px 4.2px 8.4px;
}
#small .ui-datepicker .ui-datepicker-buttonpane button {
	margin: 7px 2.8px 5.6px 2.8px;
	padding: 2.8px 8.4px 4.2px 8.4px;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	/*margin: 0 auto .4em;*/
}
#not_small .ui-datepicker-multi .ui-datepicker-group table {
	margin: 0 auto 5.6px;
}
#small .ui-datepicker-multi .ui-datepicker-group table {
	margin: 0 auto 5.6px;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size:0;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}

/* TR overrides */

/* Component containers
----------------------------------*/
.ui-widget {
	font-family: Verdana,Arial,sans-serif;
	font-size:1.1em; /* overwritten by div.ui-datepicker */
}
.ui-widget .ui-widget {
	font-size:1em; /* overwritten by div.ui-datepicker */
}

.ui-widget-content {
	border: 1px solid #aaaaaa;
	background: #ffffff /*url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x*/;
	color: #222222;
}
.ui-widget-content a {
	color: #222222;
}
.ui-widget-header {
	border: 1px solid #aaaaaa;
	background: #cccccc /*url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x*/;
	color: #222222;
	font-weight: bold;
}
.ui-widget-header a {
	color: #222222;
}

/* Interaction states
----------------------------------*/

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border: 1px solid #d3d3d3;
	background: #e6e6e6 /*url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x*/;
	font-weight: normal;
	color: #555555;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
	color: #555555;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid #999999;
	background: #dadada /*url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x*/;
	font-weight: normal;
	color: #212121;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
	color: #212121;
	text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border: 1px solid #aaaaaa;
	background: #ffffff /*url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x */; 
	font-weight: normal;
	color: #212121;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #212121;
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	/* ui-state-highlight is today's date */
	border: 1px solid #fcefa1;
	background: #fbf9ee; /* overwritten below*/
	/*url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x*/;
	color: #363636;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #363636;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #cd0a0a;
	background: #fef1ec url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
	color: #cd0a0a;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #cd0a0a;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #cd0a0a;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	filter:Alpha(Opacity=70);
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	filter:Alpha(Opacity=35);
	background-image: none;
}
.ui-state-disabled .ui-icon {
	filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
}

.menu_with_mp_quickview .ui-datepicker-current-day .ui-state-highlight,
#mealplan #mp_recipe_cal_menu .ui-datepicker-current-day .ui-state-highlight
 { 
     /* .ui-datepicker-current-day ui-state-highlight is today's date */
     background: #fbf9ee;
    color:#555555;             
}

.menu_with_mp_quickview .ui-datepicker td a.mp_cell_has_recipe,
#mealplan #mp_recipe_cal_menu .ui-datepicker td a.mp_cell_has_recipe
{  /* color when recipe is on that mp date */
    background: #f0b2c5; 
	color:#555555;
}
   
.menu_with_mp_quickview .ui-datepicker td a.mp_cell_has_recipe.ui-state-highlight,
#mealplan #mp_recipe_cal_menu .ui-datepicker td a.mp_cell_has_recipe.ui-state-highlight
{ 
   /* color when recipe is on that mp date and is today's date */
   background: #fd6493; 
    color:white;
}

.menu_with_mp_quickview .ui-datepicker-current-day .ui-state-active,
#mealplan #mp_recipe_cal_menu .ui-datepicker-current-day .ui-state-active { 
     /* when clicked  */
     background: #CC0C47;
     color:white;
}

.sronly { /* read by screen readers, but not visible on page.*/
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
	padding:0;
	-webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; 
}

.srfocus:focus{ /* when set focus to move screenreader, don't show visible focus */
    outline:none; 
	/*background:red;
	text-decoration: underline;	
	*/
}


/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
}

.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-icons_222222_256x240.png);
}
.ui-widget-header .ui-icon {
	background-image: url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-icons_222222_256x240.png);
}
.ui-state-default .ui-icon {
	background-image: url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-icons_888888_256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
	background-image: url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-icons_454545_256x240.png);
}
.ui-state-active .ui-icon {
	background-image: url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-icons_454545_256x240.png);
}
.ui-state-highlight .ui-icon {
	background-image: url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-icons_2e83ff_256x240.png);
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url(https://code.jquery.com/ui/1.10.4/themes/smoothness/images/ui-icons_cd0a0a_256x240.png);
}

/* positioning */
.ui-icon-blank { background-position: 16px 16px; }

.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }

/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 4px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 4px;
}

/* Overlays */