/* Flipper
----------------------------------- */
#flipper-component {
  background-color: #fff;}

/* Header
----------------------------------- */
#header {
	border-bottom: solid 1px #999;}

/* Footer Button Icon
----------------------------------- */
#pdf-btn .icon {
	background-size: auto;
	display: block;
	background-repeat: no-repeat;
	background-image: url(../../customdesign/pdficon.png);
	background-position: 0 0; }

#fusenlist-btn .icon {
	background-size: auto;
	display: block;
	background-repeat: no-repeat;
	background-image: url(../../customdesign/fusenicon.png);
	background-position: 0 0; }

#footer {
	background-color: transparent;
	background-image: url(../../customdesign/operationBar.png);
	height: 44px;}

.footer-space {
  bottom: 45px;}

.footer-btn {
  display: table;
  padding: 2px 0px;}

#footer .icon {
	background-size: auto;
	display: block;
	background-repeat: no-repeat;
	background-position: 0 0;}

#search-btn {
	padding:0 !important;
}

#search-btn .icon {
	background-image: url(../../customdesign/searchButton.png);
	border: solid 1px #999;
	border-left: solid 0px;
	width:48px;
	height:30px;}

#list-btn .icon {
	background-image: url(../../customdesign/index.png);
	width: 64px;
	height: 43px;}

#fliplmax-btn .icon {
	background-image: url(../../customdesign/flipLL.png);
	width: 64px;
	height: 43px;}

#flipl-btn .icon {
	background-image: url(../../customdesign/flipL.png);
	width: 64px;
	height: 43px;}

#flipr-btn .icon {
	background-image: url(../../customdesign/flipR.png);
	width: 64px;
	height: 43px;}

#fliprmax-btn .icon {
	background-image: url(../../customdesign/flipRR.png);
	width: 64px;
	height: 43px;}

#zoomin-btn .icon {
	background-image: url(../../customdesign/zoomIn.png);
	width: 64px;
	height: 43px;}

#zoomout-btn .icon {
	background-image: url(../../customdesign/zoomOut.png);
	width: 64px;
	height: 43px;}

#print-btn .icon {
	background-image: url(../../customdesign/printButton.png);
	width: 64px;
	height: 43px;}

#fusen-btn .icon {
	background-image: url(../../customdesign/fusenButton.png);
	width: 64px;
	height: 43px;}

#tegaki-btn .icon {
	background-image: url(../../customdesign/penButton.png);
	width: 64px;
	height: 43px;}

#share-btn .icon {
	background-image: url(../../customdesign/shareButton03.png);
	width: 64px;
	height: 43px;}

#text .icon {
	background-image: url(../../customdesign/textButton.png);
	width: 64px;
	height: 43px;}

/* Viewer Button
----------------------------------- */

.viewer-btn {
  background-image: none;
  background-color: transparent;
  width: 40px;
  height: 40px;
  opacity: 1; }
  .viewer-btn .icon {
    width: 40px;
    height: 40px;}

.viewer-btn-outer {
  width: 40px; }

#viewer-flipl {
	background-image: url(../../customdesign/floatFlipL.png);
	width: 40px;
	height: 40px;}
  #viewer-flipl .icon {
	background-image: none;}

#viewer-flipr {
	background-image: url(../../customdesign/floatFlipR.png);
	width: 40px;
	height: 40px;}
  #viewer-flipr .icon {
	background-image: none;}

/* Save Button & Delete Button
----------------------------------- */
.save-btn {
  border: solid 1px #eee;
  background-color: #ddd;
  color: #333; }
  .save-btn.hover {
    background-color: #ccc; }
  .save-btn.active {
    background-color: #ccc; }
  .save-btn.disabled {
    background-color: #ccc; }

.cancel-btn {
  border: solid 1px #eee;
  background-color: #ddd;
  color: #333; }
  .cancel-btn.hover {
    background-color: #ccc; }
  .cancel-btn.active {
    background-color: #ccc; }
  .cancel-btn.disabled {
    background-color: #ccc; }


/* Tegaki & Fusen
----------------------------------- */
  .color-box-bg.hover, .color-box-bg.active {
    border: solid 5px #82D3E8; }

.delete-btn, .all-delete-btn {
  background-color: #82D3E8; }
  .delete-btn.hover, .all-delete-btn.hover {
    background-color: #35BADB; }
  .delete-btn.active, .all-delete-btn.active {
    background-color: #35BADB; }
  .delete-btn.disabled, .all-delete-btn.disabled {
    background-color: #35BADB; }

/*----------------------------------- */
/* Color Button
/*----------------------------------- */
.color-btn.hover {
  background-color: transparent;
  opacity: 0.7;}

.color-btn.active {
  background-color: #35BADB;}

.color-item.hover {
  background-color: #82D3E8;}

.color-item.active {
  background-color: #35BADB;}