@charset "UTF-8";
/* タイトル
---------------------------*/
h1 {
  margin: 0px 0px 12px 0px;
  border-bottom: 1px solid #CCCCCC;
}

/* メイン
---------------------------*/
#main-contents {
  float: left;
  width: 980px;
}

/*---------------------------
タイトル
---------------------------*/
h1 {
  border-bottom: 1px solid #CCCCCC;
  font-size: 1.7em;
  margin: 0 0 12px;
  padding-bottom: 5px;
}

h2#ttl-image {
  width: 980px;
  height: 200px;
  background: url(/static/images/product/network/lancable/pc/index/ttl_banner_lancable_pc.jpg?20260408) 0 0 no-repeat;
  position: relative;
}

h2#ttl-image .text {
  position: absolute;
  color: #fff;
  top: 110px;
  left: 53px;
  line-height: 1.4;
  font-size: 0.87em;
}

/* ------------------------
別ページバナー
------------------------ */
#other-page-banner {
  margin: 30px 0 50px;
  display: flex;
  justify-content: space-around;
  padding: 0 6px;
}

#other-page-banner a.lan-select {
  width: 46%;
  display: inline-block;
}

#other-page-banner a.lan-hikaku {
  width: 46%;
  display: inline-block;
}

#other-page-banner a:link, #other-page-banner a:visited {
  color: #1c64b3;
  text-decoration: none;
}

#other-page-banner a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

#other-page-banner a img {
  width: 100%;
  vertical-align: bottom;
}

#other-page-banner a:-webkit-any-link {
  cursor: pointer;
}

/* -------------------------
検索結果
----------------------------*/
#results-area {
  margin: 2% 0 0;
}

#results-area h3.cable-name {
  color: #fff;
  margin: 0 0 2%;
  padding: 2% 1% 2% 2%;
  font-size: 1.3rem;
}

/* -------------------------
絞り込み
--------------------------- */
#form-area {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #b2b2b2;
}

#form-area h3 {
  background-color: #3B3B3B;
  color: #fff;
  padding: 15px 20px;
  font-size: 1.2em;
}

#form-area #condition-search {
  width: 100%;
}

#form-area #condition-search .restrict-form {
  width: 100%;
  text-align: center;
}

#form-area #condition-search .restrict-form dl.restrict-param {
  width: 95%;
  margin: 0 auto;
  padding: 0;
  text-align: left;
}

#form-area #condition-search .restrict-form dl.restrict-param dt.select-param {
  display: table-cell;
  width: 128px;
  margin: 0;
  padding: 25px 0;
  box-sizing: border-box;
  color: #06388e;
  font-size: 1em;
  font-weight: bold;
  line-height: 1.4;
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid #ececec;
}

#form-area #condition-search .restrict-form dl.restrict-param div.dd-area {
  display: table-cell;
  width: 832px;
  margin: 0;
  padding: 25px 0 11px 25px;
  box-sizing: border-box;
  vertical-align: middle;
  border-bottom: 1px solid #ececec;
}

#form-area #condition-search .restrict-form dl.restrict-param div.dd-area dd {
  font-size: 0.9rem;
  padding: 0;
}

#form-area #condition-search .restrict-form dl.restrict-param div.dd-area dd.selectlist {
  width: 180px;
  margin-right: 2.5%;
  margin-bottom: 1.3%;
  display: inline-block;
  vertical-align: top;
  line-height: 20px;
  font-size: 0.9em;
  font-weight: bold;
}

#form-area #condition-search .restrict-form dl.restrict-param div.dd-area dd.slider-box {
  width: 97%;
  margin: -6px auto 16px -12px;
  display: block;
}

#form-area #condition-search .restrict-form dl.restrict-param div.dd-area dd.slider-box div.box-upper {
  display: block;
  padding: 0 15px 20px;
}

#form-area #condition-search .restrict-form dl.restrict-param div.dd-area dd.slider-box div.box-upper div.select-limits {
  display: inline-block;
  width: 145px;
  text-align: center;
  vertical-align: middle;
}

#form-area #condition-search .restrict-form dl.restrict-param div.dd-area dd.slider-box div.box-upper div.select-limits input {
  text-align: right;
  padding: 4%;
  vertical-align: middle;
  border: 1px solid #333;
  border-radius: 0.3em;
  width: 70px;
}

#form-area #condition-search .restrict-form dl.restrict-param div.dd-area dd.slider-box div.box-upper div.slider-outer {
  display: inline-block;
  width: 400px;
  margin: 10px auto;
  vertical-align: middle;
}

#form-area #condition-search .restrict-form dl.restrict-param div.dd-area dd.slider-box div.box-upper div.slider-outer div#slider {
  width: 93%;
  margin: 10px;
  vertical-align: middle;
}

#form-area #condition-search .restrict-form dl.restrict-param div.dd-area dd.slider-box div.box-lower {
  display: block;
  padding: 0 15px;
  font-size: 0.8rem;
}

#form-area #condition-search .restrict-form dl.clfx {
  display: block;
}

/* メニュー
---------------------------*/
#cate-area {
  background: #D5EFF0;
  padding: 24px 13px 25px 13px;
}

#cate-area h3 {
  padding: 5px 8px 5px 8px;
  border-left: 6px solid #049A9B;
  font-size: 1.2em;
  margin-bottom: 5px;
}

#cate-area ul {
  padding: 5px 0px 20px 0px;
  border-bottom: 1px dotted #587070;
  margin-bottom: 24px;
}

#cate-area ul:last-child {
  padding: 5px 0px 20px 0px;
  border-bottom: none;
  margin-bottom: 20px;
}

ul.cable li {
  float: left;
  width: 390px;
  height: 114px;
  position: relative;
  margin: 0 8px 5px 0;
}

ul.cable li:hover {
  opacity: 0.6;
  transition: 0.6;
}

ul.cable li:nth-child(2n) {
  margin: 0 0px 5px 0;
}

ul#type li.std {
  background: url(/static/images/product/network/lancable/pc/index/btn_standard_pc.png) 0 0 no-repeat;
}

ul#type li.flat {
  background: url(/static/images/product/network/lancable/pc/index/btn_flat_pc.png) 0 0 no-repeat;
}

ul#type li.fine {
  background: url(/static/images/product/network/lancable/pc/index/btn_gokuboso_pc.png) 0 0 no-repeat;
}

ul#type li.poe {
  background: url(/static/images/product/network/lancable/pc/index/btn_poe_pc.png) 0 0 no-repeat;
}

ul#type li.stp {
  background: url(/static/images/product/network/lancable/pc/index/btn_stp_pc.png) 0 0 no-repeat;
}

ul#type li.cross {
  background: url(/static/images/product/network/lancable/pc/index/btn_cross_pc.png) 0 0 no-repeat;
}

ul#type li.winding {
  background: url(/static/images/product/network/lancable/pc/index/btn_makitori_pc.png) 0 0 no-repeat;
}

ul#type li.optical {
  background: url(/static/images/product/network/lancable/pc/index/btn_fiber_pc.png) 0 0 no-repeat;
}

ul#etc li.industrial {
  background: url(/static/images/product/network/lancable/pc/index/btn_sangyo_pc.png) 0 0 no-repeat;
}

ul#etc li.handmade {
  background: url(/static/images/product/network/lancable/pc/index/btn_jisaku_pc.png) 0 0 no-repeat;
}

ul.cable li a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

ul.cable li .text-box {
  position: absolute;
  top: 20px;
  left: 125px;
  color: #000;
  width: 225px;
  margin-right: 20px;
}

ul.cable li .text-box h4 {
  margin-bottom: 10px;
}

ul.cable li .text-box p {
  line-height: 1.2;
  font-size: 0.8em;
}

table.cat {
  background: #fff;
  border-left: 1px solid #B0B0B0;
  border-top: 1px solid #B0B0B0;
  border-collapse: collapse;
  margin-bottom: 24px;
  line-height: 1.4;
}

table.cat tr td a img {
  margin-top: 0.2em;
}

table.cat th,
table.cat td {
  background: #fff;
  border-right: 1px solid #B0B0B0;
  border-bottom: 1px solid #B0B0B0;
  font-weight: normal;
  font-size: 0.9em;
}

table.cat th {
  width: 85px;
  text-align: left;
  padding-left: 8px;
  background: #F0F0F0;
}

table.cat td {
  width: 208px;
  text-align: center;
  padding: 10px 10px 10px 10px;
}

table.cat tr.tokucho td {
  text-align: left;
}

table.cat tr.kikaku td {
  font-size: 1.2em;
  font-weight: bold;
  color: #fff;
}

table.cat tr.kikaku td.cat8 {
  background: #B5000B;
}

table.cat tr.kikaku td.cat7a {
  background: #22B8B9;
}

table.cat tr.kikaku td.cat7 {
  background: #1D8EC6;
}

table.cat tr.kikaku td.cat6a {
  background: #9352a8;
}

table.cat tr.kikaku td.cat6e {
  background: #3761B7;
}

table.cat tr.kikaku td.cat6 {
  background: #18A350;
}

table.cat tr.kikaku td.cat5e {
  background: #7DC219;
}

.kanren-banner {
  margin: 10px 0 20px 0;
}

.kanren-banner li {
  float: right;
  margin: 0 0 0 10px;
}

.kanren-banner li:hover {
  opacity: 0.6;
  transition: 0.6;
}

.hikaku-banner {
  margin: 40px 0 20px 0;
  text-align: center;
}

.hikaku-banner a:nth-of-type(1) {
  margin: 0 10px 0 0;
}

.hikaku-banner a:nth-of-type(2) img {
  width: 420px;
  vertical-align: -5px;
}

.hikaku-banner a:nth-of-type(1) img {
  width: 335px;
  vertical-align: -7px;
  border-radius: 0.5em 0.7em 0.7em 0.7em;
}

.erabikata-banner {
  margin: 10px 0 20px 0;
  text-align: center;
}

/* ラインナップ一覧
#ichiran h3{
	padding: 8px 8px 8px 8px;
	border-left: 6px solid #0060b1;
	border-bottom: 1px solid #0060b1;
	font-size:1.2em;
	margin-bottom: 20px;
}
#ichiran h4{
	padding: 0px 8px 0px 70px;
	font-size:1.2em;
	line-height: 40px;
	margin-bottom: 10px;
	height: 40px;
}
#ichiran h4#pc{
	background:url(/static/images/product/network/lancable/index/icn_pc_pc.png) 0 0 no-repeat #acddf4;
}
#ichiran h4#sp{
	background:url(/static/images/product/network/lancable/index/icn_sp_tab_pc.png) 0 0 no-repeat #acddf4;
}
#ichiran h4#camera{
	background:url(/static/images/product/network/lancable/index/icn_camera_pc.png) 0 0 no-repeat #acddf4;
}
#ichiran h4#game{
	background:url(/static/images/product/network/lancable/index/icn_game_pc.png) 0 0 no-repeat #acddf4;
}
#ichiran h4#mac{
	background:url(/static/images/product/network/lancable/index/icn_mac_pc.png) 0 0 no-repeat #acddf4;
}
#ichiran h4#video{
	background:url(/static/images/product/network/lancable/index/icn_vd-camera_pc.png) 0 0 no-repeat #acddf4;
}
#ichiran h4#recorder{
	background:url(/static/images/product/network/lancable/index/icn_recorder_pc.png) 0 0 no-repeat #acddf4;
}
#ichiran ul{
	margin: 0 0 60px 0;
}
#ichiran ul li{
	width:263px;
	height:160px;
	position:relative;
	margin: 0 12px 12px 0;
	float:left;
}

#ichiran ul li:hover {
	opacity:0.6;
	transition:0.6;
}
#ichiran ul li:nth-child(3n){
	margin: 0 0 13px 0;
}
#ichiran ul li a{
	position:absolute;
	top: 0;
	left:0;
	width: 100%;
	height: 100%;
}
#ichiran ul li.hdmi{
	background:url(/static/images/product/network/lancable/index/btn_hdmi_pc.jpg) 0 0 no-repeat #acddf4;
}
#ichiran ul li.hdmi-mini{
	background:url(/static/images/product/network/lancable/index/btn_hdmi-mini_pc.jpg) 0 0 no-repeat #acddf4;
}
#ichiran ul li.hdmi-micro{
	background:url(/static/images/product/network/lancable/index/btn_hdmi-micro_pc.jpg) 0 0 no-repeat #acddf4;
}
#ichiran ul li.dp{
	background:url(/static/images/product/network/lancable/index/btn_dp_pc.jpg) 0 0 no-repeat #acddf4;
}
#ichiran ul li.mdp{
	background:url(/static/images/product/network/lancable/index/btn_mdp_pc.jpg) 0 0 no-repeat #acddf4;
}
#ichiran ul li.vga{
	background:url(/static/images/product/network/lancable/index/btn_vga_pc.jpg) 0 0 no-repeat #acddf4;
}
#ichiran ul li.dvi{
	background:url(/static/images/product/network/lancable/index/btn_dvi_pc.jpg) 0 0 no-repeat #acddf4;
}
#ichiran ul li.mhl{
	background:url(/static/images/product/network/lancable/index/btn_mhl_pc.jpg) 0 0 no-repeat #acddf4;
}
#ichiran ul li.rca{
	background:url(/static/images/product/network/lancable/index/btn_rca_pc.jpg) 0 0 no-repeat #acddf4;
}
#ichiran ul li.rca-s{
	background:url(/static/images/product/network/lancable/index/btn_rca_s_pc.jpg) 0 0 no-repeat #acddf4;
}
#ichiran ul li.video-d{
	background:url(/static/images/product/network/lancable/index/btn_video_d_pc.jpg) 0 0 no-repeat #acddf4;
}
#ichiran ul li.video-s{
	background:url(/static/images/product/network/lancable/index/btn_video_s_pc.jpg) 0 0 no-repeat #acddf4;
}
#ichiran ul li h5{
	position:absolute;
	top: 20px;
	left:15px;
	color:#000;
}
---------------------------*/
/* 新規追加 */
/* 検索条件選択 */
div#form-area {
  margin: 0 0 5.8%;
}

div#form-area dd.selectlist input {
  vertical-align: middle;
  margin: 0 5px 0 0;
}

div#form-area dd.selectlist input[type="checkbox"] {
  display: none;
}

div#form-area dd.selectlist input[type="checkbox"]:checked + .checkbox-icon::before {
  opacity: 1;
  z-index: 2;
}

div#form-area dd.selectlist input[type="checkbox"]:checked + .checkbox-icon::after {
  z-index: 1;
}

div#form-area dd.selectlist input + .checkbox-icon {
  position: relative;
  vertical-align: 1px;
  padding: 0 0 0 25px;
}

div#form-area dd.selectlist input + .checkbox-icon::after {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
}

div#form-area dd.selectlist input + .checkbox-icon::before {
  position: absolute;
  content: "";
  display: block;
  top: 50%;
  left: 6px;
  margin-top: -8px;
  width: 5px;
  height: 9px;
  border-right: 3px solid #ff8900;
  border-bottom: 3px solid #ff8900;
  transform: rotate(45deg);
  opacity: 0;
}

div#form-area dd.selectlist input + .checkbox-icon.two-line::before {
  margin-top: 2px;
}

div#form-area dd.selectlist input + .checkbox-icon::after {
  left: 0;
  margin-top: -10px;
  width: 15px;
  height: 15px;
  border: 2px solid #ccc;
  background-color: #fff;
}

div#form-area dd.selectlist input + .checkbox-icon.two-line::after {
  margin: 0;
}

div#form-area dd.selectlist input[type=checkbox] {
  display: none;
}

div#form-area dd.selectlist span.no-cnt {
  color: #ccc;
}

div#form-area dd.selectlist span#sp-id-5-val {
  letter-spacing: -0.04em;
}

div#form-area dd.slider-box div.box-lower p {
  margin: 0 0 1%;
}

div#form-area dd.slider-box div.box-lower a {
  display: inline-block;
  background-color: #E8E8E8;
  padding: 1% 0;
  border-radius: 2em;
  margin: 0 0.5% 0 0;
  width: 7.8%;
  text-align: center;
}

div#form-area dd.selectlist label {
  margin: 0;
  display: inline-block;
}

div#form-area dd.selectlist label span.colorbox {
  font-size: 1.4em;
  vertical-align: middle;
}

div#form-area dd.selectlist div.cable-style-img img {
  width: 70%;
}

div#form-area span.popup {
  display: inline-block;
  color: #3B9ED6;
  font-size: 0.8rem;
}

div#form-area span.popup:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin: 0 2px 0 0;
  width: 15px;
  height: 15px;
  background: url(/static/images/product/input/keyboard/icn_help_bl.png);
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-size: auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
  top: -1px;
}

div#form-area div#condition-search .restrict-form dl.more-condition {
  display: none;
}

div#form-area div#control-area {
  position: relative;
  margin: 30px 0;
  text-align: center;
  position: relative;
}

div#form-area div#control-area div#btnMoreCondition a {
  background: url(/static/images/product/network/lancable/btn_open.png) no-repeat 0 0;
  background-size: auto;
  display: inline-block;
  width: 180px;
  background-size: 180px 37.8px;
  height: 37.8px;
}

div#form-area div#control-area div#btnMoreCondition a span {
  display: none;
}

div#form-area div#control-area div#btnLessCondition {
  display: none;
}

div#form-area div#control-area div#btnLessCondition a {
  background: url(/static/images/product/network/lancable/btn_close.png) no-repeat 0 0;
  background-size: auto;
  display: inline-block;
  width: 180px;
  background-size: 180px 37.8px;
  height: 37.8px;
}

div#form-area div#control-area div#btnLessCondition a span {
  display: none;
}

div#form-area div#control-area div#btnReset {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

div#form-area div#control-area div#btnReset a {
  background: url(/static/images/product/network/lancable/btn_release.png) no-repeat 0 0;
  background-size: auto;
  display: inline-block;
  width: 130px;
  background-size: 130px 29.85px;
  height: 29.85px;
}

div#form-area div#control-area div#btnReset a span {
  display: none;
}

div#form-area div.cable-style-img {
  margin: 5px 0 0;
}

/* 検索結果 */
h2#disp-results-cnt {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  width: 100%;
  text-align: center;
  position: relative;
  margin: 15px 0 0;
}

h2#disp-results-cnt span#results-text {
  display: inline-block;
  vertical-align: middle;
}

h2#disp-results-cnt span#results-cnt {
  display: inline-block;
  font-size: 1.7em;
  font-weight: bold;
  color: #ff3100;
  margin: -5px 0.2% 0;
}

h2#disp-results-cnt span#results-cnt span.ken {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  text-align: center;
  position: relative;
  margin: 15px 0 0;
}

div#disp-restricted-params {
  text-align: center;
  font-size: 1.1rem;
  font-weight: bold;
  margin: 1% 0 0;
}

div#list-order-area {
  text-align: right;
}

div#list-order-area select {
  background-color: #FFF;
  border: 1px solid #898989;
  border-radius: 0.3em;
  padding: 0.6% 1.3%;
  width: 14%;
}

/* ケーブル シリーズエリア */
div.cable-series {
  border: 1px solid #DDD;
  padding: 2%;
  margin: 0 0 7.5%;
}

div.cable-series div.tr:nth-of-type(2) {
  margin: 0 0 4%;
}

div.cable-series div.image {
  width: 200px;
  display: inline-block;
  vertical-align: top;
}

div.cable-series div.image span.shikiri {
  display: inline-block;
  width: 100%;
  margin: 10px 0 0;
}

div.cable-series div.image span img {
  width: 100%;
}

div.cable-series div.specs {
  width: 705px;
  display: inline-block;
  padding: 0 0 0 2.5%;
  vertical-align: top;
}

div.cable-series div.specs h4 {
  font-size: 1.2rem;
  margin: 0 0 1.6%;
  line-height: 1.3;
}

div.cable-series div.specs h5 {
  margin: 0 0 3.5%;
  font-size: 1rem;
}

div.cable-series div.specs h5 img {
  vertical-align: 0px;
}

div.cable-series div.specs h5 a span {
  display: inline-block;
  width: 22%;
  vertical-align: -7px;
  margin: 0 0 0 5px;
}

div.cable-series div.specs h5 a span img {
  width: 100%;
}

div.cable-series div.specs h5 span {
  display: inline-block;
  width: 22%;
  vertical-align: -7px;
  margin: 0 0 0 5px;
}

div.cable-series div.specs h5 span img {
  width: 100%;
}

div.cable-series div.specs div.special-area {
  margin: 0 0 1.4%;
}

div.cable-series div.specs div.special-area span.ico {
  display: inline-block;
  padding: 1.8% 3% 1.6%;
  margin: 0 0.3% 0.8% 0;
  font-size: 0.93rem;
  font-weight: bold;
  border-radius: 0.35em;
  border: 1px solid transparent;
}

div.cable-series div.specs div.structure-area {
  font-size: 0.85rem;
}

div.cable-series div.cable-color-block h5.cable-color span.color-ind {
  font-size: 2.3em;
  display: inline-block;
  vertical-align: middle;
}

div.cable-series div.cable-color-block div.list-area {
  white-space: nowrap;
  margin: 0 0 2%;
}

div.cable-series div.cable-color-block div.list-area table {
  border-top: 1px solid #D5D5D5;
  border-left: 1px solid #D5D5D5;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 0 12px;
}

div.cable-series div.cable-color-block div.list-area table.length-ptn-1 td {
  min-width: 87px;
  width: 116px;
}

div.cable-series div.cable-color-block div.list-area table.length-ptn-2 td {
  width: 141px;
}

div.cable-series div.cable-color-block div.list-area table.length-ptn-3 td {
  width: 115px;
}

div.cable-series div.cable-color-block div.list-area table.length-ptn-4 td {
  width: 96px;
}

div.cable-series div.cable-color-block div.list-area table.length-ptn-5 td {
  width: 116px;
}

div.cable-series div.cable-color-block div.list-area table.length-ptn-6 td {
  width: 115px;
}

div.cable-series div.cable-color-block div.list-area table tr th {
  border-right: 1px solid #D5D5D5;
  border-bottom: 1px solid #D5D5D5;
  background-color: #EEEEEE;
  padding: 11px 9px;
  font-size: 0.83rem;
}

div.cable-series div.cable-color-block div.list-area table tr th:nth-of-type(1) {
  width: 115px;
}

div.cable-series div.cable-color-block div.list-area table tr th.title-av {
  background-color: #f8e1a6;
}

div.cable-series div.cable-color-block div.list-area table tr th.title-na {
  background-color: #ccc;
}

div.cable-series div.cable-color-block div.list-area table tr td {
  border-right: 1px solid #D5D5D5;
  border-bottom: 1px solid #D5D5D5;
  padding: 11px 9px;
  text-align: center;
}

div.cable-series div.cable-color-block div.list-area table tr td.hinban {
  white-space: wrap;
  font-weight: bold;
  font-size: 0.9em;
  font-stretch: condensed;
  font-family: 'Helvetica Neue', 'Helvetica', 'sans-serif';
}

div.cable-series div.cable-color-block div.list-area table tr td.hinban img {
  display: none;
}

div.cable-series div.cable-color-block div.list-area table tr td.hinban .product-icon img {
  display: inline-block;
  margin: 2px 2px 0;
}

div.cable-series div.cable-color-block div.list-area table tr td.data-av {
  background-color: #fdf2d7;
}

div.cable-series div.cable-color-block div.list-area table tr td.data-na {
  background-color: #e5e5e5;
}

div.cable-series div.cable-color-block div.list-area table tr td.price {
  white-space: wrap;
  font-size: 0.85rem;
}

div.cable-series div.cable-color-block div.list-area table tr td.sanwach-price {
  white-space: wrap;
  font-size: 0.85rem;
  color: #FF0000;
}

/* 戻るボタン
---------------------------*/
.return {
  text-align: right;
  font-size: 0.8em;
  line-height: 1.3;
}

/* ローディング スピナー
---------------------------*/
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#loading-spinner {
  position: fixed;
  top: 50%;
  left: 43.5%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #c0c0c0;
  opacity: 0.2;
}