@font-face {   font-family: TCBW;     src: url(fonts/s-regular.woff2);    font-weight: normal; }
@font-face {    font-family: TCBW;    src: url(fonts/s-semibold.woff2);    font-weight: bold;}
html {  box-sizing: border-box;}
*, *:before, *:after {  box-sizing: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body, h1, h2, h3, h4, h5, h6, p, ol, ul {  margin: 0;  padding: 0;   font-weight: normal;}
ol, ul {  list-style: none;}
img { max-width: 100%;   height: auto;}
svg:not(:root) {    overflow: hidden;}
.hidden {    display: none !important}


:root {
  --main-color: #FFCA1E;
  --text-color: #231F20;
  --text-light-color:#a7a7a7;
  --font-size:16px;
  --nav-color:#111;
  --nav-color-active:#fff;
  --header-bg:#fff;
  --link-color:#231F20;
  --link-color-hover:#555;
}

body{
	position: relative;
	font-family: TCBW, helvetica, 'sans-serif';
	color:#231F20;
	color: var(--text-color);
	font-size: var(--font-size);
}

select, input, textarea{
  font-family: TCBW, helvetica, 'sans-serif';
}

a{
	color:#231F20;
	color: var(--link-color);
	text-decoration: none;
}
a:hover{
	color:#555;
	color: var(--link-color-hover);
	text-decoration: none;
}

h2 {
  font-weight: bold;
  margin: 24px 0 8px;
}

p {
  margin-bottom: 12px;
}

dl, p {
	line-height: 1.5;
}

dl{
	margin-bottom:1.4em;
}
dt, dd{
	margin:0;
	padding:0;
}
dd {
  margin:0 0 8px;
}
dt{
  font-size: 0.6em;
  color: var(--text-light-color);
	font-weight: bold;
	text-transform: uppercase;
}

dl a, p a{
	text-decoration: underline;
}
button{ border:0; background: none; cursor:pointer; outline:0;}
.country-short{
  font-size:0.5em;
  text-transform: uppercase;
  color: var(--text-light-color);

}
.country-short:before{
  content:"(";
}
.country-short:after{
  content:")";
}
.input{
  padding:0.75em;
  font-size: 1em;
  display: block;
  width:100%;
  border-radius:8px;
  background: #f7f7f7;
  border:0;
}

textarea.input{
  height: 6em;
}


.f-select{
  display:inline-block;
  position: relative;
  font-size:1em;
}
.f-select .icon-dropdown{
	position: absolute;
	right:0;
	top:50%;
	margin-top:-4px;
	z-index:2;
	pointer-events:none;
}
.f-select select{
	cursor:pointer;
  font-size: 1em;
  margin:0;
  padding:0;
  padding-right:12px;
  border:0;
  color: var(--text-color);
  -webkit-appearance: none;
   -moz-appearance:    none;
   appearance:         none;
   border:none;
   background:none;
}

.t-sentence{
  text-transform: capitalize;
}

/* Navbar */
.c-navbar{
	background-color:#FFCA1E;
	background-color: var(--main-color);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding-bottom: env(safe-area-inset-bottom);

}

.c-nav{
	font-weight: bold;
}
.c-nav-link{
	padding:1em 0.75em;
	display:block;
	text-decoration: none;
	white-space: nowrap;
	color:#111;
	-webkit-tap-highlight-color: transparent;

	color:var(--nav-color);
}
.c-nav-link:hover, .c-nav-link--active{
	color:#fff;
	color:var(--nav-color-active);
}

/* Layout */
.c-view{
	position: relative;
}
.c-view-head{
  position: -webkit-sticky;
	position: sticky;
	top:0;
	padding:0.5em 0;
	display:flex;

	background-color: #fff;
	background-color:var(--header-bg);
	font-size:1.25em;
  z-index: 99;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.c-view-head-button{
	margin-right:0;
	width:1em;
  display: flex;
  z-index: 2;
  cursor: pointer;
}
.c-view-head-button a{

  display:flex;
  padding-right: 0.5em;
}
.c-view-head-button a svg{
  display:block;
  margin:auto;
}
.c-view-head-button + .c-view-head-title{
  transform:translateX(-1em);
}
.c-view-head-title{
	margin:0 auto;
  padding:0 1.5em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  z-index: 1;

}
  .c-view-head-title.hasLongText span{
    font-size: 0.8em;
  }

.c-view-body{
	padding:1em 0 2em 0;
}

.c-view[isWide=true] .c-view-body{
  padding-top:0;
}

/* List item */
.c-list-parent-title{
	margin-top:1.5em;
	margin-bottom:0;
	font-weight: bold;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.c-list-parent .c-list-parent-title:only-child{
  display:none;
}
.c-list-item + .c-list-parent-title{
	margin-top:3em;
}
.c-list-item{
	margin:0.5em 0;
	display:flex;
  align-items: flex-start;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.c-list-item:empty{
	display: none;
}

.c-view-parent .c-list-item{
  margin:1em 0;
}
.c-list-item-title, .c-list-item-details{
	display:block;
	white-space: nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.c-view-parent .c-list-item-title, .c-view-parent .c-list-item-details{
  white-space: normal;
}
.c-list-item .b-toggle-label{
  display:none;
}
.c-list-item-details{
	font-size:0.8em;
}
.c-list-item-link{
	min-width: 0;
  flex:1;
  display:block;
  margin-right:2em;
}
.c-list-item .b-item-check{
	margin-right:1em;
  display:block;
  padding:0.5em;
  padding-left: 0;
}
.c-list-item .b-item-fav{
	margin-left:auto;
  display:block;
  padding:1em 0.5em;
  padding-right: 0;
}

/* Category list */
.c-category-list{
	display:flex;
	flex-wrap:wrap;
  flex-direction: column;
  align-content: center;

}
.c-category-list-item{
	max-width:100%;
  margin-bottom: 4px;
}
.c-category-list-item-link{
	position:relative;
  display:block;
}
.c-category-list-item-image{
  display:none;
}
.c-category-list-item-title{
	/**position:absolute;
  display:inline-block;**/
	bottom:1em;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	/**padding:0.25em 0.5em;**/
}
.c-category-list-item-title span{
  color: #fff;
  display: inline;
  padding:0.24em;
  background: #000;
  box-shadow: 0.2em 0 0 #000, -0.2em 0 0 #000;
}

/* Icons */
.icon-star, .icon-check{
	width:24px; height:24px;
	fill: #111;
	fill-opacity:0.16;
}
.icon-dropdown{
	width:8px; height:8px;
	fill-opacity:1;
}

.icon-back{
	width:16px; height:24px;
	fill-opacity:1;
}




.b-selected .icon-star{
	fill: #ffca1e;
	fill-opacity:1 !important;
}

.b-selected .icon-check{
	fill: #4fc500;
	fill-opacity:1 !important;
}
.icon-star{ width:24px; height:24px;}

/* Buttons */

.b-fav{
	border:0;
	border-radius: 100%;
}
.b-toggle{
  padding:0;
}
.b-toggle .icon{
  display: inline-block;
  vertical-align: middle;
}
.b-toggle-label{
  display: inline-block;
  vertical-align: middle;
  margin-left:0.5em;
  font-size: 1rem;
}
.c-view-item .b-toggle{  padding:0.5em 0; min-width:13.5em; text-align: left; margin-right:1em; margin-bottom:1em; }

.c-buttons-group{
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
 }

.b-note-submit{
  padding:0.75em 1em;
  font-size:1em;
  border-radius: 100px;
  border:1px solid #eaeaea;
}


/* note */
.c-note-input{
  margin-bottom:0.5em;
}
.c-note{
  margin-top:1em;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

}

.c-view-search{
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

@media only screen  and (min-width : 620px) {

  .b-toggle:hover .icon-star{
  	fill: #ffca1e;
  	fill-opacity:0.5;
  }
  .b-toggle:hover .icon-check{
  	fill: #4fc500;
  	fill-opacity:0.5;
  }
	.c-view{
		margin-right:auto;
		margin-left:25%;
    padding-left:2em;
		width:100%;
		max-width:504px;
	}
	.c-view-head{
		font-size:1.5em;
	}
	.c-navbar{
		font-size:1.5em;
		padding-top:2.2em;
		position: fixed;
    width:25%;
    left:0;
    top:0;
    height:100%;

	}
	.c-nav{
		top:2.2em;
	}
	.c-nav-link{
		padding:0.5em 1.7em;
		min-width:9em;
	}
	.c-list-item + .c-list-parent-title{
		margin-top:1em;
	}
  .c-view[isWide=true]{
    max-width: inherit;
    width:auto;
    padding-right:2em;
  }
  .c-view[isWide=true] .c-view-head-title{
    margin-left:0;
  }
  .visibleMobile{
    display:none !important
  }
}

@media only screen  and (max-width : 620px) {
  .hiddenMobile{
    display:none !important
  }
	dt{
		font-size:0.8em;
	}
  .c-view-head-button{
    margin-left:1em;
  }
	.c-list-parent-title-old{
		font-size:0.8em;
		text-align: center;
		font-style: italic;
	}
	.c-category-list-item-title{
		font-size:0.8em;
	}
	.c-navbar{
		position: fixed;
		bottom:0;
		left:0;
		right:0;
		z-index: 99;
	}
	.c-view{
		padding-bottom:6em;
	}
	.c-nav{
		display:flex;
		justify-content:center;
	}
	.c-view-body{
		padding:1em;
	}
  .c-view[isWide=true] .c-view-body{
    padding-left:0;
    padding-right: 0;
  }
  .c-category-list-item{
    margin-left: 24px;
    width:80%;
  }
	.c-view-head{
		text-align: center;
	}
}