<style>

h4 {
    font-family: 'Montserrat Alternates', sans-serif;
    color: #0b2dc1;
}

:lang(th) {
	font-family: "noto sans thai";
    font-size: 120%;
}

.ipa::before, .ipa::after {
	content: "/";
}

th, td {
    border-bottom: 1px solid #E1E1E1;
}


.init {
	font-size: 125%;
	font-family: 'Montserrat Alternates', sans-serif;
	font-weight: 400;
	color: #0b2dc1;
}
.notesbuttons {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 80px;
    padding-top: 10px;
    border-top: 2px solid #33C3F0;
}
.notesbuttons:after {
    content: none;
}

.tryit, .tryit:focus, .tryit:hover {
     color: #0b2dc1;
     margin-bottom: 4rem;
}

.diagbutton {
	font-size: 25px;
	font-weight: normal;
	line-height: normal;
	padding: 0;
    margin: 1px;
}

.diagbutton.diag {
	background-image: url("diagonal.svg");
	background-size: 60px 60px;
}

.diagbutton.size {
	width: 60px;
	height: 60px;
}

.diagbutton.halfsize {
	width: 60px;
	height: 27px;
}

.diagbutton span {
	display: block;
}

.diagbutton .left {
	text-align: left;
	line-height: 30px
}

.diagbutton .right {
	text-align: right;
	line-height: 30px
}

.diagbutton .center {
	text-align: center;
	line-height: 30px
}
.diagbutton sup {font-size: 35%;}

.fixed {
    width: 100%;
    
}
.fixed td {
        border-bottom: 1pt solid #cccccc;
}

.c1th td:nth-child(1) {
    vertical-align: middle;
    font-size: 20px;
    white-space:nowrap;
}

.c1ipa td:nth-child(1) {    
    vertical-align: middle;
    font-family: 'andikaregular'
}

.c1r td:nth-child(1) {
    text-align: right;    
}

.c2th td:nth-child(2) {
    vertical-align: middle;
    font-size: 20px;
    white-space:nowrap;
}

.c2ipa td:nth-child(2) {    
    vertical-align: middle;
    font-family: 'andikaregular'
}

.c2mono td:nth-child(2) {
    font-family: 'DM Mono', monospace;
    letter-spacing: 0.5em;
    line-height: 1;
    white-space:nowrap;
    vertical-align: middle;
}

.c3en td:nth-child(3) {
	vertical-align: middle;
}

/* INNOTES STYLES */
body {
  counter-reset: cb_counter_var;
}

sup::after {
  counter-increment: cb_counter_var;
  content: "\2009" "Note " counter(cb_counter_var);
}

input[type=checkbox]{
    display:none;  
}

input[type=checkbox] ~ span {
    display:none; 
}

input[type=checkbox]:checked ~ span {
    display: inline-block; 
    cursor:default;
    background: #fefefe;
    border: 1px solid #999999;
    border-radius: 5px;
    padding: 3px 5px;
    margin: 3px;
}

input[type=checkbox] ~ label {
    display: inline;
    cursor: pointer;
    color: #7a42f4;
    margin: 0;
}

input[type=checkbox] ~ label:hover {
    cursor:pointer;
}

ul {
  list-style: none;
}

ul li::before {
  content: "๏";
  color:  #0b2dc1;
  display: inline-block;
  width: 1.5em;
    margin-left: -1em;
}

ul > ul > li::before {
    color: #33c3f0;
}

 hr {
        height: 2px;
        background: #33C3F0;
        margin-left: 150px;
        margin-right: 150px;
        text-align: center;
        border-top: none;
}

hr:after {
        content: "๏";
        display: inline-block;
        position: relative;
        top: -.87em;
        font-size: 2.5em;
        background: white;
        color: #33c3f0;
}
</style>
