docs/css/Convert-to-IPA.css

.vertical-center {
 	min-height: 100%; 
  	min-height: 100vh;
}

.info-header, 
#main_format {
	font-family: 'Helvetica', 'Arial', sans-serif;
}

.info {
	font-family: "Libre Baskerville", serif;
	line-height: 0.75cm;
}

.top div.row:first-child {
	margin: 40px 5% 0 5%;
}

.top div.row:last-child {
	margin: 0 5% 30px 5%;
}

.gap {
	gap: 20px;
}

#main_format {
	padding: 20px;
	border: 5px solid black;
	border-radius: 10px;
	background: #FFFFFF;
}

#keyboard {
	display: none;
	height: 150px;
}

.kb1 { 
    	width: 100%;
    	height: 100px;
	overflow: auto;
}

.kb {
    	background-color: white;
    	display: flex;
	align-items: center;
	justify-content: center;
    	width: 25px;
    	height: 25px;
    	text-align: center;
    	border-style: outset;
    	float: left;
    	margin: 5px;
	cursor: pointer;
	font-size: 15px;
}

.kb:hover {
    	background: cornflowerblue;
    	color: white;
	cursor: pointer;
}

textarea {
	width: 100%;
	vertical-align: top;
	height: 80px;
}


#load {
	height: 100px;
  	display: flex;
  	justify-content: center;
  	align-items: center; 
	margin-top: 50px;
	cursor: default;
}

#loading {
	display: none;
}

.letter {
	display: inline;
	color: white;
	letter-spacing: 5px;
	animation: fade 5s infinite;
}

.letter:nth-child(1) {
	animation-delay: 0.5s;
}

.letter:nth-child(2){
	animation-delay: 1s;
}

.letter:nth-child(3) {
	animation-delay: 1.5s;
}

.letter:nth-child(4) {
	animation-delay: 2s;
}

.letter:nth-child(5) {
	animation-delay: 2.5s;
}

.letter:nth-child(6) {
	animation-delay: 3s;
}

.letter:nth-child(7) {
	animation-delay: 3.5s;
}

@keyframes fade {
  	0% {
    		opacity: 0;
    		color: grey; 
	}
  	25% {
    		opacity: 1;
    		color: black; 
	}
  	50% {
    		opacity: 0;
    		color: grey; 
	}
  	75% {
    		opacity: 1;
    		color: black; 
	}
  	100% {
    		opacity: 0;
		color: grey;
  	}
}

#leftbutton, 
#rightbutton {
	height: 80%;
	width: 100%;
}

#leftbutton {
	cursor: default;
	background-color: grey;
	color: #f5d654;
}

#rightbutton {
	cursor: pointer;
	background-color: black;
	color: white;
}

#language_info,
#translations_file {
	display: none;
	padding: 0;
	font-size: 14px;
	color: #337ab7;
	background: white;
	border: white;
	text-decoration: none;
}

#language_info,
#upload,
.col._1 .D,
.col._2 .D .col.p-0 {
	white-space: nowrap;
}

#upload_text_form {
	display: inline-block;
	cursor: pointer;
}

#upload {
	display: none;
}

#upload_form {
	display: inline-block;
}

#existing {
	display: flex;
}

div[a="#language_info"] {
	display: flex;
}

#rule_dropdown {
	width: 50%;
	cursor: pointer;
}

#submit {
	background: #f7adb1;
}

.msg {
	font-size: 15px;
	color: red;
	cursor: default;
}

#msg2 {
	visibility: hidden;
}

.msg:not(#msg2) {
	display: none;
}

#msg1 {
	padding: 0 15px;
}

#ko_warning {	
	display: none;
}

#ko_warning a {
	display: contents;
}

.col._1 {
	margin-bottom: 30px;
}

.col._1 div.A,
.col._2 div.A {
	height: 50px;
}

.top,
inthead,
#existing,
#out1,
.col._1 div.A p, 
.col._1 div.C div,
.col._1 div.D div,
.col._2 div.D {
	cursor: default;
}

.col._1 div.B {
	height: 200px;
}

.col._2 div.B {
	height: 30px;
}

.col._2 div.C {
	height: 150px;
}	

.footer {
	margin-top: 40px;
}