body {
    background-color: #ecf0f1 !important;
}

#watch_list_area{
	width: 904px;
	overflow: hidden;
}

#select_company{

}

#set_first_company{
	width: 234px;
	display: table-cell;

}

#set_second_company{
	width: 670px;
	display: table-cell;
}

#set_company{
	overflow: hidden;
	 display:table;
}

.set_title{
	font-size: 25px;
	font-weight: bold;
	text-align: left;
}

#set_company_button_area{
	margin-right: 20px;
	margin-top: 20px;
	margin-bottom: 10px;
}

#watch_company{
	width: 500px;
	float: left;
}

#select_symbol_area{
	margin-top: 20px;
	overflow: hidden;
}

#select_symbol_combobox_area{
	height: 50px;
	float: left;
	vertical-align: middle;
	line-height: 50px;
	padding-left: 20px;
}

#alert_setting_area{
	height: 50px;
	float: left;
	vertical-align: middle;
	line-height: 50px;
	padding-left: 20px;
}

.alert_line{
	font-size: 22px;
	font-weight: bold;
	background-color: #f08080 !important;
	margin: 10px;
}

.alert_value{
	color: red;
}

#main_data_area{
	margin-top: 30px;
}
/*
#rate_list_table{
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
}
*/
.sheath_list_table_class{
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
}
/*
#watch_list_table{
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	width: 880px;
}
*/

#add_message_area{
	margin-top: 10px;
	margin-bottom: 10px;
}

.company_box{
	width: 200px;
	height: 50px;
	margin-left: 10px;
	margin-right: 10px;
	border-style: solid;
	border-radius: 30px;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	vertical-align: middle;
	line-height: 50px;
	display: inline-block;
}

.select_company_box{
	background-color: #98fb98;
	color: #ffffff;
}

.ban_select_company_box{
	background-color: #dcdcdc;
	color: #ffffff;
}

.no_set_company_box{
	background-color: #dcdcdc;
	color: #ffffff;
}

.set_company_box{
	background-color: #b22222;
	color: #ffffff;
}

.border_area{
	border: solid 1px #87cefa;
}

.header_area_left{
	width: 30%;
	height: 50px;
	background-color: #87cefa;
	color: #ffffff;
	float: left;
	text-align: center;
	font-size: 20px;
	font-weight: bold;
	vertical-align: middle;
	line-height: 50px;
}

.header_area_top{
	height: 50px;
	background-color: #87cefa;
	color: #ffffff;
	font-size: 20px;
	font-weight: bold;
	vertical-align: middle;
	line-height: 50px;
	padding-left: 10px;
}

th.company_name{
	width: 100px;
}

input.input_value_area{
	width: 120px;
	height: 40px;
}

.input_button{
	border-radius: 10px;
}

.ok_button{
	background-color: #00bfff;
}

.clear_button{
	background-color: #98fb98;
}

.delete_button{
	background-color: #800000;
}

.company_title_name_area {
	width: 30%;
	height: 50px;
	background-color: #87cefa;
	color: #ffffff;
	float: left;
	text-align: left;
	font-size: 20px;
	font-weight: bold;
	vertical-align: middle;
	line-height: 50px;
	padding-left: 15px;
}

.company_title_button_area {
	background-color: #87cefa;
	float: left;
	width: 70%;
	text-align: right;
	vertical-align: middle;
	height: 50px;
}

.company_show_hide_button{
	/*
	line-height: 15px;
	margin-right: 20px;
	*/
	color: black;
	margin-top: 2px;
}

#switchArea {
  line-height    : 50px;                /* 1行の高さ          */
  letter-spacing : 0;                   /* 文字間             */
  text-align     : center;              /* 文字位置は中央     */
  font-size      : 27px;                /* 文字サイズ         */

  position       : relative;            /* 親要素が基点       */
  margin         : auto;                /* 中央寄せ           */
  width          : 150px;               /* ボタンの横幅       */
  background     : none;                /* デフォルト背景色   */
}

 /* === チェックボックス ==================================== */
#switchArea input[type="checkbox"] {
  display        : none;            /* チェックボックス非表示 */
}

 /* === チェックボックスのラベル（標準） ==================== */
#switchArea label {
  display        : block;               /* ボックス要素に変更 */
  box-sizing     : border-box;          /* 枠線を含んだサイズ */
  height         : 50px;                /* ボタンの高さ       */
  border         : 2px solid #999999;   /* 未選択タブのの枠線 */
  border-radius  : 30px;                /* 角丸               */
}

 /* === チェックボックスのラベル（ONのとき） ================ */
#switchArea input[type="checkbox"]:checked +label {
  border-color   : #78bd78;             /* 選択タブの枠線     */
}

 /* === 表示する文字（標準） ================================ */
#switchArea label span:after{
  content        : "OFF";               /* 表示する文字       */
  padding        : 0 0 0 36px;          /* 表示する位置       */
  color          : #999999;             /* 文字色             */
}

 /* === 表示する文字（ONのとき） ============================ */
#switchArea  input[type="checkbox"]:checked + label span:after{
  content        : "ON";                /* 表示する文字       */
  padding        : 0 36px 0 0;          /* 表示する位置       */
  color          : #78bd78;             /* 文字色             */
}

 /* === 丸部分のSTYLE（標準） =============================== */
#switchArea #swImg {
  position       : absolute;            /* 親要素からの相対位置*/
  width          : 42px;                /* 丸の横幅           */
  height         : 42px;                /* 丸の高さ           */
  background     : #999999;             /* カーソルタブの背景 */
  top            : 4px;                 /* 親要素からの位置   */
  left           : 4px;                 /* 親要素からの位置   */
  border-radius  : 26px;                /* 角丸               */
  transition     : .2s;                 /* 滑らか変化         */
}

 /* === 丸部分のSTYLE（ONのとき） =========================== */
#switchArea input[type="checkbox"]:checked ~ #swImg {
  transform      : translateX(90px);    /* 丸も右へ移動       */
  background     : #78bd78;             /* カーソルタブの背景 */
}

#switchAreaMail {
  line-height    : 50px;                /* 1行の高さ          */
  letter-spacing : 0;                   /* 文字間             */
  text-align     : center;              /* 文字位置は中央     */
  font-size      : 27px;                /* 文字サイズ         */

  position       : relative;            /* 親要素が基点       */
  margin         : auto;                /* 中央寄せ           */
  width          : 150px;               /* ボタンの横幅       */
  background     : none;                /* デフォルト背景色   */
}

 /* === チェックボックス ==================================== */
#switchAreaMail input[type="checkbox"] {
  display        : none;            /* チェックボックス非表示 */
}

 /* === チェックボックスのラベル（標準） ==================== */
#switchAreaMail label {
  display        : block;               /* ボックス要素に変更 */
  box-sizing     : border-box;          /* 枠線を含んだサイズ */
  height         : 50px;                /* ボタンの高さ       */
  border         : 2px solid #999999;   /* 未選択タブのの枠線 */
  border-radius  : 30px;                /* 角丸               */
}

 /* === チェックボックスのラベル（ONのとき） ================ */
#switchAreaMail input[type="checkbox"]:checked +label {
  border-color   : #78bd78;             /* 選択タブの枠線     */
}

 /* === 表示する文字（標準） ================================ */
#switchAreaMail label span:after{
  content        : "OFF";               /* 表示する文字       */
  padding        : 0 0 0 36px;          /* 表示する位置       */
  color          : #999999;             /* 文字色             */
}

 /* === 表示する文字（ONのとき） ============================ */
#switchAreaMail  input[type="checkbox"]:checked + label span:after{
  content        : "ON";                /* 表示する文字       */
  padding        : 0 36px 0 0;          /* 表示する位置       */
  color          : #78bd78;             /* 文字色             */
}

 /* === 丸部分のSTYLE（標準） =============================== */
#switchAreaMail #swImgMail {
  position       : absolute;            /* 親要素からの相対位置*/
  width          : 42px;                /* 丸の横幅           */
  height         : 42px;                /* 丸の高さ           */
  background     : #999999;             /* カーソルタブの背景 */
  top            : 4px;                 /* 親要素からの位置   */
  left           : 4px;                 /* 親要素からの位置   */
  border-radius  : 26px;                /* 角丸               */
  transition     : .2s;                 /* 滑らか変化         */
}

 /* === 丸部分のSTYLE（ONのとき） =========================== */
#switchAreaMail input[type="checkbox"]:checked ~ #swImgMail {
  transform      : translateX(90px);    /* 丸も右へ移動       */
  background     : #78bd78;             /* カーソルタブの背景 */
}

.input-nomargin
{
	margin: 0 !important;
}


@media (min-width: 1200px) {
  .container {
    width: 1200px !important;
  }
}

/* ページトップ */
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 80%;
}
#page-top a {
    background: #666;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 25px 0;
    text-align: center;
    display: block;
    border-radius: 10px;
}
#page-top a:hover {
    text-decoration: none;
    background: #999;
}

.anime-show {
animation : anime 1s ease;
}
.anime-reverse {
animation : anime-reverse 0.8s ease;
}

@keyframes anime {
0% {
filter:opacity(0);
margin-top:-32px
}
100% {
filter:opacity(1);
margin-top:0px;
}
}
@keyframes anime-reverse {
0% {
filter:opacity(1);
}
100% {
filter:opacity(0);
}
}

.blink-cell-up {

  	animation-name: blinkAnimeUp;
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
	animation-iteration-count: 2;

  	-moz-animation-name: blinkAnimeUp;
	-moz-animation-duration: 0.5s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: 2;

	-webkit-animation-name: blinkAnimeUp;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: 2;

	-o-animation-name: blinkAnimeUp;
	-o-animation-duration: 0.5s;
	-o-animation-timing-function: ease-out;
	-o-animation-iteration-count: 2;

	-ms-animation-name: blinkAnimeUp;
	-ms-animation-duration: 0.5s;
	-ms-animation-timing-function: ease-out;
	-ms-animation-iteration-count: 2;
}
@keyframes blinkAnimeUp{
   0% { background-color: transparent }
   50% { background-color: #33FFFF }
   100% { background-color: transparent }
}

.blink-cell-down {

  	animation-name: blinkAnimeDown;
	animation-duration: 0.5s;
	animation-timing-function: ease-out;
	animation-iteration-count: 2;

  	-moz-animation-name: blinkAnimeDown;
	-moz-animation-duration: 0.5s;
	-moz-animation-timing-function: ease-out;
	-moz-animation-iteration-count: 2;

	-webkit-animation-name: blinkAnimeDown;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-timing-function: ease-out;
	-webkit-animation-iteration-count: 2;

	-o-animation-name: blinkAnimeDown;
	-o-animation-duration: 0.5s;
	-o-animation-timing-function: ease-out;
	-o-animation-iteration-count: 2;

	-ms-animation-name: blinkAnimeDown;
	-ms-animation-duration: 0.5s;
	-ms-animation-timing-function: ease-out;
	-ms-animation-iteration-count: 2;
}
@keyframes blinkAnimeDown{
   0% { background-color: transparent }
   50% { background-color: #ff5d74 }
   100% { background-color: transparent }
}

.navbar-inverse {
    color: white !important;
    background-color: #20C2D3 !important;
}

.navbar-inverse .navbar-brand {
    color: white !important;
}

.navbar-inverse .navbar-nav>li>a {
    color: white !important;
}

.navbar-inverse .navbar-brand:focus, .navbar-inverse .navbar-brand:hover {
    color: #000000 !important;
    background-color: transparent;
}

.navbar-inverse .navbar-nav>li>a:focus, .navbar-inverse .navbar-nav>li>a:hover {
    color: #000000 !important;
    background-color: transparent;
}

.pointer-watch-list
{
	cursor: w-resize;
}

table.display td.pointer-watch-list:hover {
    background-color: #afafaf;
}

#saya_trader_btns .btn
{
	min-width: 138px;
	margin: 4px;
}

table.display thead th
{
	text-align: center;
	font-weight: bold;
	color: #999 !important;
	border-bottom: 1px solid #ccc !important;
	border-right: none !important;
}
table thead tr {
	border-top: 1px solid black !important;
    background: #f5f5f5 !important;
}

table.display
{
	font-family: Arial !important;
}

table.display td {
	border: none !important;
}

#main_data_area table.display td,
#sheath_data_area table.display td
{
	height: 35px !important;
}

.half-unit {
    background-color: #ffffff !important;
    text-align: center;

}

.half-unit dtitle {
    color: black !important;
    font-weight: bold;
    font-size: 11px;
}

.half-unit:hover {
    background-color: #ffffff !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

input[type=text], textarea, input[type=email], input[type=password]
{
	background-color: #ecf0f1 !important;
}

.half-unit bold {
    color: black !important;
}

.add-list-cell
{
	text-align: center;
}

.add-list-cell .btn
{
	width: 80%;
}

#search_sheath_area .add-list-cell .btn
{
	width: 100%;
}
#search_sheath_area
{
	margin-top: 20px;
}