:root
{
	--mv-font-size : 16px;
	--mv-body-bg-color : white;
	--mv-body-font-weight : 400;
	--mv-smaller-font-size : calc( 0.8 * var( --mv-font-size ) );
	
	--mv-link-color : #00B0CD;
	--mv-link-text-decoration : none;
	
	--mv-border-color : rgba( 239, 245, 251, 1 );
	--mv-border-width : 3px;
	--mv-border-style : solid;
	
	--mv-border-radius-small : 0.25rem;
	--mv-border-radius-large : 0.5rem;
	--mv-border-radius-xlarge : 1rem;

	--mv-h1-font-size : 2rem;
	--mv-h1-color : #007487;
	
	--mv-h2-font-size : 1.6rem;
	--mv-h2-color : #4e9fac;;
	
	--mv-h3-font-size : 1.2rem;
	--mv-h3-color : #4e9fac;
	
	--mv-larger-font-size : larger;
	--mv-smaller-font-size : smaller;
	--mv-heavier-font-weight : 500;
	
	--mv-custom-color1 : #57DAEE;  /* Bg of 'Search' in home */
	--mv-custom-color2 : #24454D;  /* Bg of 'Your Results' in home */
	--mv-custom-color3 : #007487;  /* Bg of 'Missing Results' in home */

	--mv-search-background-color : #EFF2F7;
	--mv-search-border-color : rgb(167, 236, 216);
	--mv-search-border-width : 2px;

}




html 
{
  font-size: var( --mv-font-size );
}

@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 2 * ((100vw - 320px) / 680));
  }
}

@media screen and (min-width: 1000px) {
  html {
    font-size: 18px;
  }
}


body 
{
	font-weight: var( --mv-body-font-weight );
	background-color: var( --mv-body-bg-color );
}


a, a:visited
{
	color: var( --mv-link-color );
  text-decoration: var( --mv-link-text-decoration );

}

.row > a
{
		padding-inline: 0px;
}

input, select
{
	border: 1px solid #F3F6FC;
}

.navbar
{
	background-color: #EFF5FA !important; 
	color: #4A4A4A !important; 
	padding: 0.2rem;
	border-bottom: 2px solid #EFF5FA;
	padding-top: 1rem;
	padding-bottom: 1rem;
	font-size: 1rem;
	font-weight: 300;
	padding-right: 10%;
}


.navbar a
{
	color: #4A4A4A !important; 
}

.navbar .form-group
{
	margin-bottom:0px;
}


a.dropdown-item:focus
{
    background-color: #A7ECD8 !important;
}

a.dropdown-item:active
{
    background-color: #A7ECD8 !important;
}


.navbar #mvSearchInput
{
    width: 260px;
    height: 2.25rem;
    border: 2px solid #A7ECD8;
	border-radius: var( --mv-border-radius-xlarge );
}

.navbar-toggler-icon 
{
	  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='black' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
}

#navbarNav
{
	padding-left: 10%;
}

.navbar-brand
{
	color: #4B4A4A !important; 
	font-size: 1rem !important; 
	padding-left: 2rem;
}


.mainContent
{
	margin-top: calc( 48px + 2rem);
	padding-top: 40px;
	padding-left: 10%;
	padding-right: 10%;
	padding-bottom: 48px;
	color: #383838;
}

.textContent
{
	max-width: 65rem;

}

.textContent p
{

	margin-top: 1rem;

}



@media only screen and (max-width: 720px)
{
	.mainContent
	{
		padding-top: 20px;
		padding-left: 5%;
		padding-right: 5%;
		padding-bottom: 20px;
	}
}

h1
{
	font-size: var( --mv-h1-font-size );
	color: var( --mv-h1-color );
	margin-block: 2rem;
}


h2 
{
	font-size: var( --mv-h2-font-size );
	color: var( --mv-h2-color );
	margin-block: 1.5rem;
}

h3 
{
	font-size: var( --mv-h3-font-size );
	color: var( --mv-h2-color );
}


.percentOuterBar
{
	background-color: #6ab446;
	width: 100%;
}

.percentInnerBar
{
	background-color: red;
	height: 0.8rem;
}


.country-flag-large 
{
	margin-block: 1rem;
	padding-left: 20px;
	padding-right: 20px;
}

.country-flag-large img
{
	max-width: 3.5rem;
	box-shadow: 1px 1px 3px grey;
}

#messageArea
{
	margin-top: 2rem;
	text-align: center;
}

	
	
#buttonsArea
{
	padding-top: 0.5em;
}

	
.red {
  color: red;
}

.green {
  color: green;
}

.imgProfile
{
	margin: 10px;
	max-height: 128px;
	max-width: 192px;
}
	

#imgProfile
{
	max-height: 128px;
	max-width: 192px;
}

#loadError
{
	color: red;
	font-size: 1.5em;
}

#divSearch 
{
	max-width: 360px;
}



#lblName
{
	color: white;
}


@media only screen and (min-width: 768px)
{
	#lblName
	{
		display:none;
	}
}

#divPortrait
{
	margin-top: 6px;
	text-align: center;
	color: blue;
}

@media only screen and (orientation: landscape), max-width: 720px
{
	#divPortrait 
	{
		display: none;
	}
}

/* Bootstrap 4 text input with search icon */
// https://codepen.io/gungorbudak/pen/ooKNpz

.has-search .form-control {
	padding-left: 2.375rem;
}

.has-search .form-control-feedback {
	position: absolute;
	z-index: 2;
	display: block;
	width: 2.375rem;
	height: 2.375rem;
	line-height: 2.375rem;
	text-align: center;
	pointer-events: none;
	color: #aaa;

}

.has-search .form-control-feedback:hover
{
	color: red;
}


.navbar .has-search
{
	font-size: 14px;
	position: relative;
}



#mvSearchInput
{
	padding-left: 2em;
	border-color: #24A6D8; 
	color: #24A6D8;
	border-radius: 0;
}

#mvSearchInput:focus
{
	box-shadow: none;
}


.form-control::placeholder { color: lightgray;} /* Chrome, Firefox, Opera*/
:-ms-input-placeholder.form-control { color: lightgray; }  /* Internet Explorer*/
.form-control::-ms-input-placeholder { color: lightgray; }  /* Microsoft Edge*/

input::placeholder { color: lightgray;} /* Chrome, Firefox, Opera*/

input:focus {
  box-shadow: none;
}

#pageFooter
{
	direction: ltr;
	background-color: #F4F4F4 !important;
	color: #4F4F4F !important;
	padding: 0px !important;
	height: 2.75rem;
}


// Input clear button

.has-clear
{
	  padding: 3px 18px 3px 4px; 
	  transition: background 0.4s;
}

.has-clear.x  
{ 
	background: #fff url(https://marathonview.net/image/x.svg) no-repeat right -8px center;
	background-size: 16px 16px;
	background-position: right 10px center; 
}


.has-clear.onX
{ 
	cursor: pointer; 
}

.mvlogo
{
	max-height: 48px;
}

.mvlogobox
{
	padding: 0px;
}

#imgBottom
{
	margin-top: 3rem;
	width: 100%;
}


.btn-primary
{
    background-color: #5BD3B0;
    color: white;
    border-radius: var( --mv-border-radius-large );
    border: none;
}

.btn-secondary
{
    color: white;
    border-radius: var( --mv-border-radius-xlarge );
    border: none;
    padding-left: 18px;
    padding-right: 18px;
}

.btn-outline-dark
{
	border-radius: 25px;
}

	
/*	
 Material Design
 http://google.github.io/material-design-icons/#icon-font-for-the-web
 */

.material-icons.md-36 { font-size: 36px; }
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }

.material-icons.md-48 { font-size: 48px; }	

.material-icons.md-star-color { color: #39B893; }



.profile_image_holder
{
    /*   background-image: url(https://upload.wikimedia.org/wikipedia/commons/6/61/Lelisa_Desisa_Benti_boston_marathon_2013.jpg); */
    background-size: cover;
    background-repeat: no-repeat;
    width: 120px;
    height: 120px;
    border-radius: 50%;
}

.facebook-btn
{
  width: 100%;
  color: #fff;
  background-color: rgb(66, 103, 178);;
  background-image: url(https://d3nn82uaxijpm6.cloudfront.net/assets/website/landing-page/icon-facebook-9ddcb5e9f2a1950d462ad216d4955f16d576437de4312625c67895d42302a0a0.svg);
  background-size: 24px;
  background-position: 16px center;
  background-repeat: no-repeat;
  border-radius: 5px;
  border-color: rgb(66, 103, 178);;
  padding-left: 30px;
  padding-right: 30px;
  padding-top:8px;
  padding-bottom:8px;
  margin-bottom: 10px;
}

.garmin_logo
{
	width: 24px;
	height: 24px;
}

.strava_logo
{
	width: 24px;
	height: 24px;
}

tr.group, tr.group:hover
{
	background-color: #F8F8F9 !important;
}

#divHotTopics
{
	margin-left: 0px;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.topic
{
	text-align:center;
	padding-right: 2rem;
}

.topic a:hover
{
	text-decoration-line: underline;
	text-decoration-color: #00B0CD;
}

.cookiealert
{
	z-index: 999999 !important;
}

.rowComment
{
	line-height: 1;
	font-size: smaller;
	background-color: #f8f8f9 !important;

}

.rowComment td 
{
	border: 1px solid #BEBEBE;
}

@media (hover: hover) 
{
	.rowComment .comment_tools
	{
		visibility: hidden;
	}
}

.rowComment:hover .comment_tools
{
	visibility: visible;
}


.comment_tool
{
	cursor: pointer;
	margin: 4px;
}

.comment_tools
{
	display: flex;
	flex-direction: column;
}


div + .comment_tools
{
	display: flex;
	flex-direction: row-reverse;
}


.drag_target_active
{
	background-color: #007487 !important;
}

.comment_textarea_wrapper
{
    position:relative;
	width: 100%;
	height: 5rem;
	border: 1px solid rgb(17, 17, 17);
}



.comment_textarea
{
	width: 100%;
	height:100%;
	line-height: 1;
	font-size: smaller;
	background-color: #f8f8f9 !important;
	padding: 4px;
}

.comment_textarea_wrapper button
{
	font-size: 12px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 8px;
	padding-right: 8px;
	position:absolute;
	bottom:10px;
	right:10px;
}

.comment_tools button
{
	font-size: 12px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 8px;
	padding-right: 8px;
	margin-left: 15px;
	bottom:10px;
	right:10px;
}

.comment_edit_row td
{
	padding: 0px !important;
}


.hebrew 
{
	direction: rtl;
	text-align: right;
}

.result_image
{
	max-height: 128px;
	margin-left: 5px;
	margin-right: 5px;
	border: 2px solid transparent;
}


.result_image:hover
{

	border: 2px solid green;
}

.result_image_wrapper
{
	display: inline-block;
	position: relative;
}

.result_image_wrapper i
{
	position: absolute;
	right: 8px;
    top: 4px;
	cursor: pointer;
}

.result_image_wrapper i:hover
{
	background-color: white;
}

.canceled 
{
  text-decoration: line-through;
  text-decoration-color: red;
}

.canceled:hover
{
  text-decoration: line-through;
  text-decoration-color: red;
}

.nodata
{
	text-decoration: none;
	color: gray;
}

.nodata:hover
{
	text-decoration: none;
	color: gray;
}


.modal-footer
{
	text-align: left;
	display: inline;
}

#external_link_container
{
	margin-top: 2rem;
	text-align: center;
}

#external_link_container img 
{
	margin-top: 1rem;
	margin-bottom: 1rem;
	max-width: 600px;
	max-height: 300px;
}

.mv-navbar
{
	display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}


/* Make the list on top of others */
.ui-autocomplete
{
	z-index: 100000 !important;
}

.alert
{
	margin-top: 2rem; !important
}

.error_msg
{
	text-align : left;
	direction : ltr;
}

.result_cell
{
	display: grid;
	text-align: center;
}


/*  General classes */

.heavier 
{
	font-weight: var( --mv-heavier-font-weight ) ;
}

.bold 
{
	font-weight: bold ;
}

.ltr 
{
	direction: ltr;
}

.hidden
{
	display: none;
}


.align-center
{
	text-align: center;
}

.align-right
{
	text-align: right;
}