* {margin: 0; padding: 0;} 
html, body { padding: 0; margin: 0; height: 100%;}
input, textarea {font-size: 24px;}

.page {font-size: 24px;}
.page:not([current]) {display: none !important;}
.page.center {height: 100%; display: grid; }
.page.center  .content {margin: auto; position: relative;}
.page.absolute {position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
.page.absolute .content {margin: auto; position: absolute; top: 48px; right: 0; left: 0; bottom: 0; overflow: auto;}

.page .caption {position: fixed; text-align: center; right: 0; left: 0; color: #fff; background: rgb(22, 144, 192); font-weight: bold; padding: 10px; text-transform: uppercase; z-index: 10;}
.page .caption > * {display: inline-block;}
.page .caption .left {float: left; cursor: pointer;}

.page .content-padding {padding: 20px;}

#page-start .content {top: -20px; text-align: center;}
#page-start #logo {text-decoration: none; color: #000; width: 200px; display: inline-block; margin: 0; font-size: 20px; vertical-align: top; margin-top: 15px; margin-bottom: 15px;}
#page-start #logo::before {content: ''; display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat; background-image: url(https://www.google.com/chrome/static/images/chrome-logo.svg); width: 160px; height: 160px; }
#page-start #loading {color: #bbb; padding: 10px 20px; margin-top: 10px; position: relative; left: 10px;} 
#page-start #loading ~ #button-start {display: none !important;}
#page-start #loading ~ #microphone {display: none !important;}
#page-start #microphone ~ #button-start {display: none;}
#page-start #microphone {text-align: center;}
#page-start #button-start {padding: 10px 20px; margin-top: 10px; text-align: center; cursor: pointer; border-radius: 5px; background: rgb(170, 201, 170);}

#page-main #button-text-selector {display: inline-block; float: left; cursor: pointer; margin-left: 5px; position: relative; height: 28px; width: 30px; top: 1px;}
#page-main #button-text-selector::before {content: ""; position: absolute; left: 0; width: 30px; height: 5px; background: #fff; box-shadow: 0 10px 0 0 #fff, 0 20px 0 0 #fff;}

#page-main .content {margin: 10px; text-align: center;}
#page-main #panel-counter {display: block;  z-index: 1; text-align: center;}
#page-main #panel-counter #phrase-number-input {display: none; width: 100px; text-align: center; background: #fff;}
#page-main #panel-counter #phrase-number-input:focus ~ #phrase-number {display: none;}
#page-main #panel-counter .button-arrow {cursor: pointer;}
#page-main #panel-counter > * {display: inline-block; font-size: 56px;}
#page-main #panel-counter #caption {display: block; font-size: 14px;}
#page-main #panel-phrase { margin-bottom: 10px; position: absolute; left: 0; right: 0; bottom: 50%;}
#page-main #panel-phrase .button {padding: 0px; margin: 0 5px; font-size: 36px; color: #bbb;}
#page-main #panel-phrase .button[current="true"] {color: rgb(137, 175, 137);}
#page-main #panel-phrase #phrase {border-bottom: 1px solid #bbb; padding: 10px;}
#page-main #panel-phrase #phrase > * { -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0);}
#page-main #panel-phrase #phrase > *[current] {box-shadow: 0 1px 0px #ccc;}
#page-main #panel-recognition {position: absolute; left: 0; right: 0; top: 50%; bottom: 0;}
#page-main #panel-recognition #recognition {color: rgb(156, 83, 83);}
#page-main #panel-recognition #recognition[confidence]:not([confidence="0%"])::after {content: attr(confidence); position: relative; bottom: -10px; font-size: 10px;}
#page-main #panel-recognition #recognition[correct="true"] {color: rgb(131, 170, 131);}
#page-main #panel-recognition[mode="recognition"] #compare {display: none;}
#page-main #panel-recognition[mode="compare"] #recognition {display: none;}

#page-main #panel-recognition #panel-record {position: absolute; bottom: 0; width: 100%;}
#page-main #panel-recognition #panel-record #button-record {background: rgb(156, 114, 114); color: #fff;}
#page-main #panel-recognition #panel-record #button-record[record="true"] {background: #f99;}
#page-main #panel-recognition #panel-record #button-listen {background: rgb(66, 146, 156); color: #fff;}
#page-main #panel-recognition #panel-record #button-listen[hidden] {display: none;}

#page-text-selector .content > * {vertical-align: top; height: 100%; overflow-y: auto;}  
#page-text-selector #texts {display: inline-block; float: left; width: 350px; border-right: 1px solid #bbb;}
#page-text-selector #texts > div {padding: 10px; border-bottom: 1px dashed #bbb; cursor: pointer; position: relative;}
#page-text-selector #texts > div[current] {background: #eef;}
#page-text-selector #texts #view {display: none; color: #bbb;}
#page-text-selector #texts #remove {position: absolute; top: 5px; right: 15px; z-index: 2; color: #bbb;}
#page-text-selector #text-wrapper { width: auto; display: block; height: auto; max-height: 100%; min-height: 100%;} 
#page-text-selector #text {white-space: pre; height: 100%; margin: 10px;}
#page-text-selector #text audio {display: block; margin-bottom: 10px;}
@media only screen and (max-width: 700px) {
	#page-text-selector #texts {width: 100% !important;}
	#page-text-selector #texts #view {display: inline-block !important; padding: 0 10px;}
	#page-text-selector #text-wrapper {display: none !important;}
}

#page-text-add #caption-block {margin-right: 80px;}
#page-text-add #caption {width: 100%; border: none; text-align: left;}
#page-text-add #text-block {position: absolute; top: 60px; left: 20px; right: 20px; bottom: 28px;}
#page-text-add #text {width: 100%; height: 100%; resize: none; border: none; border-top: 1px solid #bbb; padding: 10px 0; font-family: inherit;}
#page-text-add #button-load-file {position: absolute; top: 20px; right: 25px; cursor: pointer;}

#page-text-view .content {white-space: pre; overflow: auto;}
#page-text-view .content audio {display: block; margin-bottom: 10px;}

#page-option .selector {display: block; margin-bottom: 20px;}
#page-option .selector::before{content: attr(title); display: block; text-align: left; margin-bottom: 5px;}
#page-option .selector > div {display: inline-block; width: 100px; cursor: pointer; text-align: center; line-height: 28px;  font-size: 16px; background: #eee;}
#page-option .selector > div[current]::before {content: '\2714'; margin-right: 5px;} 
#page-option .selector > div[value="yes"] {background: #afa;}
#page-option .selector > div[value="no"] {background: #faa;}
#page-option .selector.col1 > div {width: 310px;}
#page-option .selector.col2 > div {width: 153px;}
#page-option .selector.col3 > div {width: 100px;}
#page-option .selector.col4 > div {width: 73px;}
#page-option .selector.col5 > div {width: 57px;}
#page-option .selector.col6 > div {width: 47px;}


#page-help .content a {text-decoration: none;}
#page-help .content p {margin-bottom: 20px;}
#page-help .content ul {margin-left: 30px;}

.button {padding: 10px 30px; text-align: center; cursor: pointer; border-radius: 5px; background: rgb(112, 143, 112); display: inline-block; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -webkit-tap-highlight-color:rgba(0,0,0,0);}
.caption-button {cursor: pointer; float: right; margin: 0 10px;}
.close {position: absolute !important; cursor: pointer; transform: rotate(45deg); z-index: 10; border-radius: 100%; top: 2px; right: 2px; margin: 2px 10px; display: inline-block; width: 40px; height: 40px;}
.close::before, .close::after {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #fff;}
.close::before {width: 6px; margin: 6px auto;}
.close::after {margin: auto 6px; height: 6px;}