:root {
	--color-strong: #00465f;
	--color-medium: #1c5d73;
	--color-medium-light: #5f98a3;
	--color-light: #f0f2f4;
	--color-highlight: #4d7470;
	--color-highlight-backup: #ffa700;
	--color-base-background: white;
	--color-strong-text: #404040;
	--color-light-text: #fff;
}

/** Pallete's: 
	- https://colorpalettes.net/color-palette-47/ 
	- https://colorpalettes.net/color-palette-2139/
	**/

body {
	font-family: -apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Fira Sans,Ubuntu,Oxygen,Oxygen Sans,Cantarell,Droid Sans,Lucida Grande,Helvetica,Arial,sans-serif,Segoe UI Symbol,Hiragino Kaku Gothic Pro,Meiryo,Hiragino Sans GB W3,Noto Naskh Arabic,Droid Arabic Naskh,Geeza Pro,Simplified Arabic,Noto Sans Thai,Thonburi,Dokchampa,Droid Sans Thai,Droid Sans Fallback,'.SFNSDisplay-Regular',Heiti SC,Microsoft Yahei;
	font-size:14px;
	line-height:1.3rem;
	color: var(--color-strong-text)!important;
	background-color: var(--color-light)!important;
	font-smoothing: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5 {
	margin: 0.14rem 0rem 0.14rem 0rem;
}

h1 {
	font-size: 1.35rem;
}

h2 {
	font-size: 1.14rem;
}

h3 {	
	font-size: 1.07rem;
}

h4 {
	/*font-size: 0.90rem;*/
	font-weight: 600;
}

h5 {
	/*font-size: 0.80rem;*/
	font-weight: 400;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow:visible;
  border:0;
  border-top:0.1rem solid #eee;
  margin: 0.1rem 0rem 0.1rem 0rem;
}

hr.hidden-margin {
	visibility: hidden;
	margin: 0.1rem 0rem 0.1rem 0rem;
}

.right {
	float: right !important;
}

.left {
	float: left !important;
}

.hidden {
	visibility: hidden;
}

/*profile*/



/** Content **/

.content {
	max-width: 850px;
	margin: 0 auto;
}

section {
	background-color: var(--color-base-background);
	font-weight: 400;
	padding: 0.7rem 1.4rem 0rem 1.4rem;
}

section.first {
	padding: 1.4rem 1.4rem 0rem 1.4rem;
}

section.last {
	padding: 0.7rem 1.4rem 1.4rem 1.4rem;
}

section h2 {
	padding: 0.7rem 0rem 0.7rem 0rem;
	margin: 0;
}

section.title {
	background-color: var(--color-strong);
	color: #fff!important;
	padding: 1.4rem 1.4rem 1.4rem 1.4rem;
}

section.title h4 {
	color: #fff!important;
}

section.contact{
	background-color: var(--color-medium);
	padding: 0.7rem 1.4rem 0.7rem 1.4rem;
	/*text-align: center;*/
	color: var(--color-light-text)!important;
}

section.contact .fa, section.title .fa{
	color: var(--color-light-text)!important;
}

section h2 {
	color: #333333;
}

section h3 {
	color: #333333;
}

section h4 {
	color: var(--color-strong-text);
}

/** row **/ 

div.row {
	/*overflow:hidden;*/
	margin-top: 0.35rem;
}

div.row.header {
	/*overflow:hidden;*/
	margin-top: 0rem;
}

div.row span.date {
	font-weight:normal;
	font-size: 0.9rem;
	color: var(--color-medium);
}

section > div.row > div.title {
	display: flex;
}

section > div.row > div.title > div.heading-left {
	flex-grow: 1;
}

section > div.row > div.title > div.heading-right {
	position: relative; 
	width: 50%;
}

section > div.row > div.title > div.heading-right > div {
	bottom: 0px; 
	right: 0px; 
	position:absolute;
}

div.row > div.cell {
	display: block;
}

@media (max-width:512px){
	section > div.row > div.title > div.heading-left {
		width: 100%;
	}

	section > div.row > div.title > div.heading-right {
		width: 100%;
	}

	section > div.row > div.title > div.heading-right > div {
		position:relative;
	}

	section > div.row > div.title {
		display: table;
	}

	section.contact > div.row > div.title {
		display: inline;
	}

	section.contact div.row div.title {
		text-align: center;
	}
}

div.link-column > ul {
	list-style: none;
	padding-left: 0.7rem;
}

@media (max-width:560px){
	div.link-column > ul {
		padding-left: 0rem;
	}	
}

@media (max-width:560px){
	div.language-left {
		padding-right: 0rem;
	}

	div.language-right {
		padding-left: 0rem;
	}
}

/** Paragraph */

p {
	margin: 0rem;
}

span.calendar {
	font-weight:normal;
	font-size: 0.85rem;
	color: var(--color-medium);
}

/** Tasks **/

ul {
	margin: 0rem;
}

a {
	text-decoration:none;
	color: inherit;
}

.description a {
	font-weight: 500;
} 

/** special **/ 

.round {
	border-radius:4px!important;
}

.tag {
	background-color:#000;
	color:#fff;
	display:inline-block;
	padding-left:0.35rem;
	padding-right:0.35rem;
	text-align:center;
	margin: 0.1rem 0rem 0.1rem 0rem;
}

.main-color {
	color: var(--color-light-text)!important;
	background-color: var(--color-medium)!important;
}

.highlight-color {
	color: var(--color-light-text)!important;
	background-color: var(--color-highlight)!important;
}

.highlight-b-color {
	color: var(--color-strong-text)!important;
	background-color: var(--color-light)!important;
}

.medium-light-color {
	color: var(--color-light-text)!important;
	background-color: var(--color-medium-light)!important;
}

.level-bar {
	color: var(--color-light-text)!important;
	background-color: var(--color-medium-light)!important;
	width: 100%;
	text-align: center;
}

.center {
	text-align: center;
}

.level-bar-inner {
	color: var(--color-light-text)!important;
	background-color: var(--color-medium)!important;
}

.fa {
	color: var(--color-medium);
}

i {
	margin-right: 0.3rem !important;
}