.registrace {padding-top:20px;} .registrace .card {padding:20px;}
.layoutRow {display:flex; flex-direction:column; gap:16px; margin:16px 0;}
.layoutCol {display:flex; flex-direction:column; gap:6px; min-width:0; padding:0 15px;}
.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;}
.settingsBox p {margin-left:20px; margin-right:20px;}
.settingsBox .uspech, .settingsBox .chyba {margin: 20px 10px;}
.settingsBox .touchIcon {width:calc(50% - 20px); background:var(--pageBg);}
.settingsBox .touchIcon:hover {background:var(--hoverBg);}
.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(--hoverBg);}
.specSelect > input:checked + label, .rankSelect > input:checked + label, .rankSelect > input:checked + label span {color:var(--selectedTxt);} 
.specSelect > input:checked + label, .rankSelect > input:checked + label {background:var(--selectedBg);}
.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;
}
input[type="file"] {cursor:pointer;}

.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:1; padding:0;}
  .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) {
  
}