/* CSS fuer Schachraetsel.com */
#schachraetsel_com, #schachraetselsloesung{
	max-width:500px; /* ex 420px */
	width:100%;
}
.square {
    background-size: 100% auto;
    position: absolute;
}
#sr_board_border, #sr_board, #sr_board_border_{
	position:relative;font-family:Arial;color:#3377BB;font-size:12px;
}
#sr_board_border, #sr_board_border_{
	border:1px solid #3377BB;background:#efefef;padding-left:2px;padding-top:2px; border-radius: 3px 3px 3px 3px;
}
#sr_board div{  box-sizing: content-box;	}
#sr_logo{margin-top:5px; width:100%;}
#sr_logo img{ border:0; float:right; }

/* ZugInput+ZugListe*/
#sr_display{ position:absolute; z-index:3; bottom:0px; font-family:arial,sans-serif; box-sizing: content-box; width:100%; }

#sr_input, #zl, #hz, #msgCon{ height: 38px; border: 1px solid #a6a6a6; }
#sr_input, #hz{ width: calc(40% - 3px); float:left;}
#zl, #msgCon{ width: calc(60% - 3px); float:right;  }

#sr_input{  border-top-left-radius:4px; display: flex; justify-content: space-between; align-items: center; }
#sr_input form{ margin:0; padding: 5px; display:flex; align-items: center;}
#sr_input input{ width:60px; height:26px; padding:0 3px !important; margin:0; }
#sr_btnZug{ float:left; padding: 5px; margin:0; cursor: pointer; color:#3377BB; }

.src_nr { display: flex; justify-content: center; width: 20px;  }
.src_abc { line-height: 18px;text-align: center; padding:3px 0 0 0; }
.src_abc, .src_nr{ color: #3377BB; font-family: Arial;font-size: 13px; text-shadow: 1px 1px 2px #fff; }
#schachraetselsloesung .src_abc, #schachraetselsloesung .src_nr {
    color: #3377BB; font-family: Arial;font-size: 10px; text-shadow: 1px 1px 2px #fff;
}
#schachraetselsloesung .src_nr {
	  padding: 0 0 0 2px !important;
}
#schachraetselsloesung .src_abc{
	padding-top: 0;
}
a.src, a.src:hover, a.src:active{
	padding:0; margin:0; color:#3377BB; border:0; text-decoration:none; font-weight:normal; float: right;
}
a.src span{	color:#666;padding:0;}
#zl{ display: flex; align-items: center; border-top-right-radius:4px; color: #666; white-space:nowrap; }
#zl select{ padding:3px; margin:5px; float:left; width: auto; }
#zl span{ float:left; padding:0 5px; }
#zl a{ float:left; margin:5px;}

#hz{ display: flex; justify-content: flex-end; align-items: center; margin:5px 0 0 0; border-bottom-left-radius:4px;}
.hzText{ float:left; margin:0; padding: 5px; display:inline; color: #666;font-weight: normal; }
.hzZahl {float:right; color:#3377BB; border:1px solid #a6a6a6; padding:0 3px;margin:5px; background:#fff; min-width: 15px; font-weight: bold; }

#msgCon{ display: flex; align-items: center; border-bottom-right-radius:4px; margin-top:5px; }
#msg{ display: flex; line-height: 16px; padding-left:5px; }
#msg a{ display:flex; color: #333; font-size: 12px; gap: 5px; padding-top: 2px;}
.src_tryagain_icn{ padding:0 0 0 5px; }
.src_tryagain{ color:#663300;  }

/* success */
.src_sucess{ color:#009900; font-size:12px; }

/* board-colors */
.src_odd{ border:1px solid #a6a6a6;background:#fff;}
.src_even{ border:1px solid #a6a6a6;background:#cbcbcb;}

/* board abc */
.src_abc{
	line-height:18px;
	text-align:center;
}
.matt {
	background-size: 100% auto;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s
	-o-transition: all 0.3s;
	transition: all 0.3s;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    background-repeat: no-repeat;
    margin:7px 0 0 2px;
    overflow:auto;
    /*  background-position:7px 15px; padding: 9px;opacity:0.9;*/
}

/*!
 *  Font Awesome 4.4.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
/* FONT PATH
 * -------------------------- */

@font-face {
  font-family: 'FontAwesome';
  src: url('https://schachraetsel.com/_JS/netschach_fb/fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('https://schachraetsel.com/_JS/netschach_fb/fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), 
  url('https://schachraetsel.com/_JS/netschach_fb/fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), 
  url('https://schachraetsel.com/_JS/netschach_fb/fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), 
  url('https://schachraetsel.com/_JS/netschach_fb/fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), 
  url('https://schachraetsel.com/_JS/netschach_fb/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

.fa {
  display: inline-block;
   font: normal normal normal 14px/1 FontAwesome; /**/
  font-family: FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
	
#gear{
	text-shadow: 0px 0px 20px #fff;
	font-size: 77px;
}

.error{ color:red; padding:0 0 0 20px;}

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}
.fa-spin-slow {
  -webkit-animation: fa-spin 4s infinite linear;
  animation: fa-spin 4s infinite linear;
}
.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
   readers do not read off random characters that represent icons */
#somas{ margin:10px 2px; height:60px; }
#somas .col-xs-4{padding:2px 2px;  }
.share_text{ font-size:12px; height:20px; line-height:20px; color:#fff; padding-left:2px; }
.fa_con{ background-color: #3b5998; padding:2px 4px; margin:1px; width:100%;}
.tw_con{ background-color: #55acee; padding:2px 4px; margin:1px;width:100%;}
.wa_con{ background-color: #5cbe4a; padding:2px 4px; margin:1px;width:100%;}
.fa-facebook-square:before { content: "\f082";}
.fa-facebook:before{content:"\f09a"; font-size:14px; color:#fff; padding:0 7px 0 3px;}
.fa-twitter:before{content:"\f099"; font-size:14px; color:#fff; padding:0 7px 0 3px;}
.fa-whatsapp:before{content:"\f232"; font-size:14px; color:#fff; padding:0 7px 0 3px;}

.fa-gear:before,
.fa-cog:before {
  content: "\f013";
  color:#ababab;
  font-size:100px;
  text-shadow: 0px 0px 20px #fff; /* ffcc99 */
}

.fa-exclamation-circle:before {  content: "\f06a"; font-size:30px; color:red;}

.share_text{ font-size:12px; color:#fff; }