@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap');
:root {
	--wc-main: rgba(14, 90, 139, 1);
	--wc-main-60: rgba(60, 93, 128, .6);
	--wc-green:rgba(106, 149, 57, 1);
    --wc-green-60:rgba(113, 148, 53, .6);
	--wc-light_blue:rgba(131, 182, 209, 1);
	--wc-light_blue-60:rgba(131, 182, 209, .6);
	--wc-purple:rgba(102, 76, 109, 1);
    --wc-purple-60:rgba(102, 76, 109, .6);
	--wc-tan:rgba(221, 219, 212, 1);
    --wc-tan-60:rgba(221, 219, 212, .6);
	--wc-dark-grey:rgba(9, 14, 23, 1);
	--wc-font-sans-serif: font-family: 'Kanit', sans-serif;
    --wc-font-header: font-family: 'Montserrat', sans-serif;
	--wc-body-font-family: var(--wc-font-sans-serif);
    --wc-code-background-dark: rgba(9, 14, 23, 1);
}

body { color: #000; background: #f5f5f5; font-family: 'kanit', sans-serif; font-weight:300; font-size: 1em; }

header {display: flex;gap: 1em;}

.headerLogo {
	width: 101px;
}

code { background-color: var(--wc-code-background-dark);color: #FFF;font-family: courier, monospace;padding: 10px;border-radius: 5px;}

details {cursor: pointer;}
section {container: inline-size;}
.section--header {border:0;box-shadow: none;text-align: left;background-color: transparent;color: var(--wc-main);cursor:pointer;font-family:'Montserrat', sans-serif;font-size:1.5em;font-weight: 700;padding: 1rem 3.5rem 1rem 1.25rem;text-decoration: none;width: calc(80vw - 5em);margin-top: 0.5rem;}
.section--header:hover {border-color: var(--wc-main) solid 3px;border-radius: 5px;width:calc(80vw - 5em)}

/* *Color Swatch Section */
/* #colors {display: flex;gap: 1rem;flex-wrap: wrap;} */

/* #colors>.demo--group {
	width: calc(20% - 1em);
} */
.color__swatch {min-width: 10rem;height: 50px;border-radius: 5px;}
#blue {background-color: var(--wc-main);}
#blue60 {background-color: var(--wc-main-60);}
#green {background-color: var(--wc-green);}
#green60 {background-color: var(--wc-green-60);}
#tan {background-color: var(--wc-tan);}
#tan60 {background-color: var(--wc-tan-60);}
#purple {background-color: var(--wc-purple);}
#purple60 {background-color: var(--wc-purple-60);}
#lightblue {background-color: var(--wc-light_blue);}
#lightblue60 {background-color: var(--wc-light_blue-60);}
#darkgrey {background-color: var(--wc-dark-grey);}

/* @media (max-width: 1024px) {
	
} */

/* *Headings section*/
h1 {font-family: 'Montserrat', sans-serif;font-weight: 700;font-size: 2em;color: var(--wc-main);text-wrap:balance;}
h2 {font-family: 'Montserrat', sans-serif;font-weight: 700;font-size: 1.5em;color: var(--wc-main);text-wrap:balance;}
h3 {font-family: 'Montserrat', sans-serif;font-weight: 700;font-size: 1.3em;color: var(--wc-green);text-wrap:balance;}
h4 {font-family: 'Montserrat', sans-serif;font-weight: 700;font-size: 1.1em;color: var(--wc-green);text-wrap:balance;}
h5 {font-family: 'Montserrat', sans-serif;font-weight: 700;font-size: 1em;color: var(--wc-dark-grey);text-wrap:balance;}

.demo--group { display: flex;flex-direction: column;gap: 0.5em;}

/* *Button Section*/
#buttons {display: flex;gap:1em;}
.button {border-radius: 5px;font-size: 1.3em;border: none;}
.button:hover {cursor: pointer;}
.button__blue {background-color: var(--wc-main);color:#FFF;}
.button__blue:hover {background-color: var(--wc-main-60);color:#FFF;}
.button__green {background-color: var(--wc-green);color:#FFF;}
.button__green:hover {background-color: var(--wc-green-60);color:#FFF;}
.button__tan {background-color: var(--wc-tan);}
.button__tan:hover {background-color: var(--wc-tan-60);}
.button__purple {background-color: var(--wc-purple);color: #FFF;}
.button__purple:hover {background-color: var(--wc-purple-60);}

/* *Table Section */
th {font-weight: 300;}
/* Borderless */
.table--borderless {border-collapse: collapse;table-layout: fixed;text-align: left;}
.table--borderless thead tr{border-bottom: 2px solid #000;}
.table--borderless thead tr th {font-weight: bold;}
.table--borderless tbody tr{border-bottom: 2px solid #000;}

/* Alternating Colors */
.table--alternating-colors{border-collapse: collapse;table-layout: fixed;text-align: left;}
.table--alternating-colors thead tr th {border: #000 1px solid;font-weight: bold;}
.table--alternating-colors tbody tr th {border: #000 1px solid;}
.table--alternating-colors tbody tr td {border: #000 1px solid;}
.table--alternating-colors tbody tr:nth-child(odd){background-color: var(--wc-tan-60);}

/* Alternating and Borderless Table */
.table--alternating-colors--borderless {border-collapse: collapse;table-layout: fixed;text-align: left;}
.table--alternating-colors--borderless thead tr th {border-bottom: #000 1px solid;font-weight: bold;}
.table--alternating-colors--borderless tbody tr th {border-bottom: #000 1px solid;}
.table--alternating-colors--borderless tbody tr td {border-bottom: #000 1px solid;}
.table--alternating-colors--borderless tbody tr:nth-child(odd){background-color: var(--wc-tan-60);}


/* *Modal Section */
.modal{position: fixed;z-index:1000;width: 100%;height: 100%;overflow-x: hidden;overflow-y: auto;}
.fade{transition: opacity .15s linear;}
.modal__dialog{width: 50vw;max-width: 800px;border-radius: 5px;}
.modal__content{position: relative;display: flex;flex-direction: column;width: 100%;pointer-events: auto;background-color:#fff;border: 1px solid rgba(0,0,0,.2);font-size: 1rem;}
.modal__header{display: flex;flex-shrink:0;align-items: center;justify-content: space-between;border-bottom: 1px solid #000;}
.modal__body{position: relative;flex: 1 1 auto;padding:1rem;}
.modal__footer{background-color: var(--wc-tan-60);display: flex;flex-wrap: wrap;align-items: center;justify-content: flex-end;border-top: 1px solid #000;}

/* *Select Section */
.select--group {margin-left:20px;}
select {
	/* Reset */
	appearance: none;
	border: 0;
	outline: 0;
	font: inherit;
	/* Personalize */
	min-width: 10em;
	height: 2.5em;
	padding: 0 4em 0 1em;
	background: url(includes/svg/carrotBlue.svg)
      no-repeat right 0.8em center / 1.4em;
	background-color: #fff;
	color: var(--wc-dark-grey);
	border-radius: 0.25em;
	border: 2px solid rgba(0, 0, 0, 0.1);
	/* box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2); */
	cursor: pointer;
  }

  /* *Input Section */
  .textInput {
	line-height: 1.5rem;
	font-weight: 400;
	border-radius: .25rem;
	padding: .4rem .75rem;
	appearance: none;
	background-clip: border-box;
	font-family: var(--wc-body-font-family);
}


/* *Information Section */
.info--box {
	background-color: var(--wc-light_blue-60);
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 1rem;

	h3 {
		color: #000;
	}
}

.info--box_tan {
	background-color: var(--wc-tan-60);
	border-radius: 5px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	padding: 1rem;

}