/******************************************************************************************************************************************
appliaction form
***************************************************************************************************************/

.formstyle{
	margin:auto 0;
    max-width: 900px;
    padding: 10px 20px;
    background: #f4f7f8;
    padding: 20px;
    background: #f4f7f8;
    border-radius: 8px;
    font-family: 微軟正黑體, arial, serif;
}
.formstyle fieldset{
    border: none;
}
.formstyle legend {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.formstyle input[type="text"],
.formstyle input[type="date"],
.formstyle input[type="datetime"],
.formstyle input[type="email"],
.formstyle input[type="number"],
.formstyle input[type="search"],
.formstyle input[type="time"],
.formstyle input[type="url"],
.formstyle textarea,
.formstyle select {
    font-family: 微軟正黑體, arial, serif;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    margin: 0;
    outline: 0;
    padding: 7px;
    width: 100%;
    box-sizing: border-box; 
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box; 
    background-color: #FFF;
    color:black;
    -webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
    box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
    margin-bottom: 30px;
    
}
.formstyle input[type="text"]:focus,
.formstyle input[type="date"]:focus,
.formstyle input[type="datetime"]:focus,
.formstyle input[type="email"]:focus,
.formstyle input[type="number"]:focus,
.formstyle input[type="search"]:focus,
.formstyle input[type="time"]:focus,
.formstyle input[type="url"]:focus,
.formstyle textarea:focus,
.formstyle select:focus{
    background: #FFFF;
}
.formstyle select{
    -webkit-appearance: menulist-button;
    height:35px;
}



.media.table{
    border-collapse: collapse;
}
.media.th, td {
	font-size:16px;
	border:none;
    padding:10px 0px 10px 0px ;
    text-align: left;
}
.portfolio-link
{ color:#00832C;
}


/****************************************************************************
problem page
******************************************************************************/
/* Style the element that is used to open and close the accordion class */
p.accordion {
 background-color: #00832C;
 color: #fff;
 cursor: pointer;
 padding: 18px;
 width: 100%;
 text-align: left;
 border: none;
 outline: none;
 transition: 0.4s;
 margin-bottom:10px;
}
/* Add a background color to the accordion if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
p.accordion.active, p.accordion:hover {
 background-color: #DBE790;
 color:black;
}
/* Unicode character for "plus" sign (+) */
p.accordion:after {
 content: '\25BC';
 font-size: 15px;
 color: #FFF;
 float: right;
 margin-left: 5px;
}
/* Unicode character for "minus" sign (-) */
p.accordion.active:after {
 content: "\25B2";
}
/* Style the element that is used for the panel class */
div.panel {
 padding: 10px 18px;
 background-color: #DBE790;
 max-height: 0;
 overflow: hidden;
 transition: 0.4s ease-in-out;
 opacity: 0;
 margin-bottom:10px;
}
div.panel.show {
 opacity: 1;
 max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */
 padding-bottom: 10px;
}

.center{ text-align:center}


/******************************************************************
Q&A dropdown 
*******************************************************************/

.checkbox-inline, .radio-inline {
    position: relative;
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 0;
    font-weight: 400;
    vertical-align: middle;
    cursor: pointer;
}

/******************************************************************
sendButton 
*******************************************************************/
.sendButton {
    cursor:pointer;
    -moz-box-shadow:inset 0px 1px 0px 0px #sendButton;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ff685e;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff5044), color-stop(1, #910C22) );
    background:-moz-linear-gradient( center top, #ffc477 5%, #fb9e25 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffc477', endColorstr='#fb9e25');
    background-color:#ffc477;
    -webkit-border-radius:16px;
    -moz-border-radius:16px;
    border-radius:16px;
    border:1px solid #eeb44f;
    color:#ffffff;
    font-size:16px;
    padding:10px 50px;
    font-weight:bold;
}
.sendButton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fb9e25), color-stop(1, #ffc477) );
    background:-moz-linear-gradient( center top, #fb9e25 5%, #ffc477 100% );
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fb9e25', endColorstr='#ffc477');
    background-color:#fb9e25;
}

/******************************************************************
checkbox
*******************************************************************/
/* The container */
.container2 {
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
	border:solid 2px #CCC;
    background-color: #FFF;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #E20012;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
input[type="text"]:disabled {
  background: #e8e8e8;
}