.registrace {padding-top:20px;} .registrace .card {padding:20px;}
.layoutRow {display: flex; flex-direction:column; margin-top: -20px;}
.layoutCol {
  position: relative;
	z-index: 1;
	display: inline-block;
	/*max-width: 50%;*/
	/*width: calc(100% - 2em);*/
	vertical-align: top;
  overflow: hidden;
  padding: 20px 15px 0;
}
.regGrid {display: grid; grid-template-columns: 1fr; grid-template-rows: auto;
      grid-template-areas: 
    "email"
    "verif"
    "image";}
.regGridEmail {grid-area: email;}
.regGridVerif {grid-area: verif; margin-top:10px;}
.regGridImage {grid-area: image; display: inline-block; margin-top:20px;}
.item-d {grid-area: footer;}
.inputField {
  position: relative;
	display: block;
	float: right;
	border: none;
	border-radius: 0;
	font-weight: 400;
	-webkit-appearance: none; /* for box shadows to show on iOS */
  width: 100%;
	padding: 0.35em;
	z-index: 100;
}
.inputLabel {
  display: inline-block;
	float: right;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
  /*width: 100%;*/
	bottom: 8px;
	position: absolute;
	pointer-events: none;
	text-align: left;
	padding: 0 5px;
  z-index: 101;
}
.inputLabel::before {
  content: '';
	position: absolute;
	width: 100%;
	height: 4em;
	top: 100%;
	left: 0;
	-webkit-transform: translate3d(0, -3px, 0);
	transform: translate3d(0, -3px, 0);
	-webkit-transition: -webkit-transform 0.4s;
	transition: transform 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}
.inputLabelContent {
  position: relative;
	display: block;
	/*width: 100%;*/
  padding: 0.5em 0;
	-webkit-transform-origin: 0% 100%;
	transform-origin: 0% 100%;
	-webkit-transition: -webkit-transform 0.4s, color 0.4s;
	transition: transform 0.4s, color 0.4s;
	-webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
	transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
}

.inputField:focus,
.input--filled .inputField {
  outline: none;
  cursor: text;
	opacity: 1;
	-webkit-transition: opacity 0s 0.4s;
	transition: opacity 0s 0.4s;
} 

.inputField:focus + .inputField::before,
.input--filled .inputField::before {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
	-webkit-transform: translate3d(0, -35px, 0);
	transform: translate3d(0, -35px, 0);
}

.inputField:focus + .inputLabel .inputLabelContent,
.input--filled .inputLabelContent {
	-webkit-transform: translate3d(0, -35px, 0) scale3d(0.81, 0.81, 1);
	transform: translate3d(0, -35px, 0) scale3d(0.81, 0.81, 1);
}
.settingsBox p {margin-left:20px; margin-right:20px;}
.settingsBox .uspech, .settingsBox .chyba {margin: 20px 10px;}
.settingsBox .touchIcon {width:calc(50% - 20px); background:var(--bgAlt);}
.settingsBox .touchIcon:hover {background:var(--themeAlt);}
.settingsMce {margin:0 !important; padding:10px 20px; background:var(--bgAlt);}
.specSelect {padding:0 20px 10px;}
.specSelect label {display:block; float:left; width:calc(50% - 10px); padding:90px 10px 10px; border-radius:8px; background:var(--pageBg); cursor:pointer; position:relative; margin:5px; text-align:center;}
.specSelect label::after {top:5px; height:80px; background-size:contain;}
/*.specSelect > input:checked + label::before {display:block; position:absolute; top:5px; left:0; right:0; height:80px; content:''; background: url("/img/profiles/spec_sel.png") center no-repeat; background-size:contain; z-index:-1; pointer-events:none;}*/
.rankSelect {display:flex; flex-direction:column; padding:0 20px 10px;}
.rankSelect label {width:100%; padding:40px 0 10px; margin:5px 0; text-align:center; position:relative; cursor:pointer; background:var(--pageBg); border-radius:8px;}
.rankSelect label span {display:block; margin: 10px auto 0; color:var(--txtAlt); font-size:.95em;}
.rankSelect label::before {top:5px; height:30px;}
.specSelect label:hover, .rankSelect label:hover {background:var(--themeLight);}
.specSelect > input:checked + label, .rankSelect > input:checked + label, .rankSelect > input:checked + label span {color:var(--cardBg);} 
.specSelect > input:checked + label, .rankSelect > input:checked + label {background:var(--theme);}
.specSelect input, .rankSelect input {position:absolute;}

#avatarCrop {width:300px; height:300px; margin:0 auto;}
.uploadAvatar .upload-wrap,
.uploadAvatar .upload-result,
.uploadAvatar.ready .upload-msg {
    display: none;
}
.uploadAvatar.ready .upload-wrap {
    display: block;
}
.uploadAvatar.ready .upload-result {
    display: inline-block;    
}
.upload-wrap {
    width: 300px; height: 350px;  margin: 0 auto;
}
.upload-msg {
    text-align: center;
    padding: 50px;
    font-size: 24px;
    font-weight: 600;
    text-transform: uppercase;
    width: 300px;
    margin: 50px auto;
    color: var(--cardBg);
    background: var(--theme);
    border-radius:8px;
}
button,
a.btn {
    background-color: #189094;
    color: white;
    padding: 10px 15px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 16px;
    text-decoration: none;
    text-shadow: none;
    display: inline-block;
    cursor: pointer;
}
input[type="file"] {
    cursor: pointer;
}
button:focus {
    outline: 0;
}

.file-btn {
    position: relative;
}
.file-btn input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
#uploadBtn:disabled {color:var(--bgAlt); cursor:default;}
#uploadBtn:disabled:hover {color:var(--bgAlt); background:none;}



/* TABLET */
@media only screen and (min-width:750px) {
  .layoutRow {display: flex; flex-direction:row; justify-content:space-between; align-content:stretch; margin:0 20px 25px;}
  .layoutCol {flex-grow: 1;}
  .regGrid {grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "email image"
    "verif image";}
  .regGridVerif {margin-top:0;}
  .settingsBox {margin:0 10px; padding:10px 0;}
  .settingsBox .touchIcon {width:calc((100% / 6) - 20px);}
  .specSelect {padding:20px 5px 5px;}
  .specSelect label {width:calc(100% / 6 - 10px); margin:5px;}
  .rankSelect {display:block; padding:20px 0 10px;}
  .rankSelect label {display:block; float:left; width:calc(25% - 20px); margin:10px; padding:50px 0 20px;}
  .rankSelect label::before {top:10px;}
}
/* WIDESCREEN */
@media only screen and (min-width: 1200px) {
  
}