:root, :before, :after{
  --body-padding:var(--size-5);
}



.mobile-only{display:none !important; visibility:hidden; content-visibility:hidden;}



.form-container{grid-gap:var(--size-5);}




.white-box{padding:var(--size-5);}



.rancak-main-2column{grid-template-columns:repeat(2,1fr);}
.rancak-main-3column{grid-template-columns:repeat(3,1fr);}



.rancak-sidebar{}



.head-top-page{display:flex; align-items:center; justify-content:space-between;}
.htp-button-list .btn{margin-left:var(--size-1);}



.profile-bio{grid-gap:var(--size-5); grid-template-columns:auto 1fr; align-items:flex-start;}
.profile-coach, .profile-player{grid-template-columns:auto 1fr 1fr;}







@media screen and (min-width:1024px) and (max-width:1279px){
  .rancak-sidebar .mobile-only{display:block !important; visibility:visible; content-visibility:visible;}
  .rancak-sidebar .desktop-only{display:none !important; visibility:hidden; content-visibility:hidden;}
}







@media screen and (min-width:1280px){
  :root, :before, :after{
    --sidebar-width:200px;
  }

  .rancak-sidebar{--icon-size:16px;}
  .sidebar-top{display:grid; grid-gap:var(--size-4); grid-auto-rows:min-content;}
  .logo{padding:var(--size-4); height:92px;}

  .nav-section{padding:var(--size-1) var(--size-4);}
  .nav-box{padding:var(--size-2) var(--size-4); grid-gap:var(--size-2); align-items:center;}
  .nav-profile-frame{width:36px;}
  .nav-info{padding:2px 0;}
  .nav-user .nav-info{padding:1px 0;}
}