/*  Typo
----------------------------------------------- */

a:link, a:visited{
    text-decoration: underline;
    color:#EC4413;
}
a:active { text-decoration: underline; }
a:hover { text-decoration:none; }


h1 { font:bold 18px/140% "Trebuchet MS", Verdana, sans-serif; }
h2 { font:bold 5px/120% "Trebuchet MS", Verdana, sans-serif; }

p { font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;}

/*  Layout
----------------------------------------------- */

body {
    /*background: #333333 url(bg.gif) no-repeat top left;*/
    background: #f0f0f0 !important;
    padding:35px 0 0 0;
    margin:0;
    font: 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
}

#container {
    margin: 25px;
    background-color: #fff;
    padding: 20px 20px 50px 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#header{
    padding:10px;
}

#header h1,
#header a {
    padding:0;
    font-family:"Helvetica","Lucida Sans Unicode",Tahoma,Verdana,Arial,Helvetica,sans-serif;
    font-size:30px;
    font-weight:normal;
    text-decoration:none;
    line-height:1.3em;
    color:#666666;
    text-align:right;
}

#header a:hover { text-decoration:none;  }

#header h2 { margin-left:20px; }
	
#navigation{
    display:none;
}

#sidebar {
    padding-top:10px;
}

#content {
    width:97%;
    padding:10px 10px 10px 10px;
}

#footer {
    clear:both;
    background:url(footer-bg.gif) repeat-x top;
    height:65px;
}

#footer .gutter {
    height:30px;
    padding:30px 15px 0px 90px;
}

/*  Navigation
----------------------------------------------- */

ul.mainNav1,
ul.mainNav2
{
    margin:0;
    padding: 0;
}


ul.mainNav1 li,
ul.mainNav2 li {
    display: inline;
    margin: 0;	
    padding: 0;
}

ul.mainNav1 li a,
ul.mainNav2 li a {
    font:normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-decoration: none;
    display: block;
    color:#333;
    border-bottom:1px solid #CCC;
}

ul.mainNav1 li a { padding:4px 4px 4px 4px; }
ul.mainNav2 li a { padding:4px 4px 4px 14px; }
ul.mainNav3 li a { padding:4px 4px 4px 24px; }


ul.mainNav1 a:hover {
    background:#EEE;
    color:black;
}

ul.mainNav1 a.current { font-weight:bold; }

#login{
    display: none;
}

#content_area{
    display: none;
}

label, #textarea, #result {
    font-size: 1rem;
    letter-spacing: 1px;
    font-family: Arial, Helvetica, sans-serif;
}

#textarea, #result {
    resize: none;
    width: 100%;
    padding: 10px 10px 10px 10px;
    line-height: 1.5;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-shadow: 1px 1px 1px #999;
}

#textarea {
    overflow-y: auto;
    height: 420px;
}

label {
    display: block;
    margin-bottom: 10px;
}

#result{
    overflow:hidden;
} 

button {
    font-size: 16px;
    padding: 8px 16px;
    margin-bottom: 8px;
    cursor: pointer;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#lang {
    font-size: 15px;
    margin-right: 20px;
    cursor: pointer;
}

#lang:disabled {
    cursor: not-allowed;
}
 
#save, #resume {
    display: none;
} 

#operation {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Left-align the buttons */
    flex-wrap: wrap;
}
  
#clear{
    margin: 0px 5px 3px auto;
}

#download{
    margin-top: 6px;
}

.voice {
    background-repeat: no-repeat;
    background-position: 50% 50%;
    margin: 5px;
    padding: 20px; /* 大きさを変更 */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    background-color: #007BFF;
    color: #fff;
    transition: background-color 0.3s ease;
}

.voice:hover {
    background-color: #0056b3;
}

.voice:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
   
#read {
    margin-left:3px;
    background-image:url(read.png); 
}

#pause{
    background-image:url(pause.png);
}

#resume {
    background-image:url(resume.png);
}

#cancel {
    background-image:url(cancel.png);
}

select {
    font-size: 16px;
    margin-right: 20px;
    cursor: pointer;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
}

select:disabled {
    cursor: not-allowed;
}

.voice:disabled {
    opacity: 0.3;
}