/*Universal tags */
input {
    text-align: center;
}

.table-center {
    margin-left: auto;
    margin-right: auto;
  }
/*Universal tags END*/

/*Universal for Desktops */
@media (min-width: 1360px){

    .login-form {
        width: 35%;
        margin: 50px auto;
          font-size: 15px;
    }
    .login-form form {
        margin-bottom: 15px;
        background: #f7f7f7;
        box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        padding: 30px;
    }
    .login-form h2 {
        margin: 0 0 15px;
    }
    .form-control, .btn {
        min-height: 38px;
        border-radius: 2px;
    }
    .btnCreateLobby {        
        font-size: 15px;
        font-weight: bold;
    }

    .formPaddingTop{
        padding-top: 50px;
    }
}
/*END Universal for Desktops */

/*Universal for Mobiles */
@media (max-width: 1366px) and (max-height: 768px) {
  .boardimg {
    max-width: 7em;
  }

  .GridCards {
    min-height: auto;
    max-width: 7em;
    max-height: 22em;
    position: relative;
    justify-content: center;
    display: flex;
    align-items: center;
  
  }
}

/* SET UP FOR GRID  */

  .GridInfo {
    display: inline-block;
    padding: 0.3em;
    background-color: #fdfdfd;
    border: 2px solid rgb(0, 0, 0);
    border-radius: 10px;
    box-shadow: 0px 2px 6px rgba(61, 61, 61, 0.726);
    
  }

  .GridContainer {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-template-rows: repeat(7,1fr);
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-row-gap:  0.6em;
    grid-column-gap:  0.6em;
  }

 .GridText {
   overflow-wrap: break-word;
   word-wrap: break-word;
   hyphens: auto;
}

 .GridCards {
  min-height: auto;
  max-width: 13em;
  max-height: 22em;
  position: relative;

}

  @media (min-width: 400px) {
    .GridContainer { 
      grid-template-columns: repeat(1, 1fr); 
      width: auto;
      height: auto;}
  }

  @media (min-width: 600px) {
    .GridContainer { 
      grid-template-columns: repeat(3, 1fr); 
      width: auto;
      height: auto;}
  }

  @media (min-width: 900px) {
    .GridContainer { 
      grid-template-columns: repeat(4, 1fr); 
      width: auto;
      height: auto;}
  }

  @media (min-width: 1200px) {
    .GridContainer { 
      grid-template-columns: repeat(7, 1fr); 
      height: 220vh;}
  }

  @media (min-width: 1700px) {
    .GridContainer { 
      grid-template-columns: repeat(7, 1fr); 
      width: 80vw;
      height: 220vh;}
  }

  /* SET UP FOR HOMEPAGE-BOARDANIMATION */
  .BoardAnimation {
    transform:
      perspective(900px)
      rotateX(60deg)
      scale(0.7);
    box-shadow: 0px 20px 100px #555;
    transition:0.5s ease all;
  }

  .BoardAnimation:hover {
      transform:
        rotate(0deg)
        scale(1)
        translateY(10px);
    }

  .grow { transition: all .2s ease-in-out; }

  .grow:hover { transform: scale(1.1); }
  
  /* SET UP FOR ERROR PAGE */
  .Errorimg {
    max-width: 500px;
    height: 500px;
    Align-Items: center;
    Justify-Content: center;
    display: flex;
    margin: auto;
  }
  
  .notfound {
    max-width: 460px;
    width: 100%;
    text-align: center;
    line-height: 1.4;
  }

  .notfound h2 {
    font-family: 'Cabin', sans-serif;
    font-size: 33px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 7px;
  }
  
  .notfound p {
    font-family: 'Cabin', sans-serif;
    font-size: 16px;
    color: #000;
    font-weight: 400;
  }
  
  .notfound a {
    font-family: 'Cabin', sans-serif;
    display: inline-block;
    padding: 10px 25px;
    background-color: #8f8f8f;
    border: none;
    border-radius: 40px;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-transition: 0.2s all;
    transition: 0.2s all;
  }
  
  .notfound a:hover {
    background-color: #F27B26;
  }

  #notfound {
    position: relative;
    height: 30vh;
  }
  
  #notfound .notfound {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
    
  .tableGH {
    border-spacing: 0.5rem;
    border-bottom: 1.5px solid #F27B26;
    border-top: 1px solid rgb(219, 219, 219);
    border-left: white;
    border-right: white;
    border-collapse: collapse;
    padding-top: 7px; 
    padding-bottom: 7px;
    table-layout: fixed;
    width: 100%;
  }

  .tableGH tr {
    display: flex;
    flex-direction: column-reverse;
  }

  .tableGH td {
    text-align: left;
    padding: 15px;
  }
  
  .tableGH tr:hover {
    background-color: #f5f5f5;
  }

 .tableGH-scrollbar {
  position: relative;
  height: 300px;
  overflow: auto;
  }
 
 .tableGH-wrapper-scroll-y {
  display: block;
  }

  .Icons1 {
    font-size: 250%;
    width: 100%;
    position: relative;
  }

  .Icons2 {
    font-size: 250%;
    width: 100%;
    position: relative;
  }

  .Icons3 {
    font-size: 250%;
    width: 100%;
    position: relative;
  }

  .Icons4 {
    font-size: 250%;
    width: 100%;
    position: relative;
  }

  .Boardzoom {
    padding: 50px;
    transition:ease-in .2s; 
    width: auto;
    height: auto;
    margin: 0 auto;
  }
  
  .Boardzoom:hover {
    transform: scale(1.5);
  }

  .BoardRotate {
      display: block;
      margin: 15px;
      text-align: center;
      overflow: hidden;
      box-sizing: border-box;
   }

  .BoardRotate img{
    width: 100%;
    height: auto;
    transition: .4s;
    -webkit-transition: .4s;
    -moz-transition: .4s;
}

  .btn-board{
    display:none;
}

  .rt-btn{
    padding: 5px;
    background: rgba(0, 0, 0, 0.4);
    font-size: 11px;
    border: 0;
    outline: 0;
    color: #fff;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    margin: 0 3px;
}
    
  .rt-btn:hover{
    background: #16a085; 
}

  #rt90:checked ~ div + img {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}

  #rt180:checked ~ div + img {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
}

  #rt270:checked ~ div + img {
    transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
}

.StartGamebtn{
  justify-content: center;
  align-content: center;
  text-align: center;
}

.IconRow1 {
  font-size: 150%;
  width: 100%;
  position: relative;
  text-align: center;
}

.IconRow2 {
  font-size: 150%;
  width: 100%;
  position: relative;
  text-align: center;
}

.IconRow3 {
  font-size: 150%;
  width: 100%;
  position: relative;
  text-align: center;
}

.IconRow4 {
  font-size: 150%;
  width: 100%;
  position: relative;
  text-align: center;
}

.IconText1 {
  font-size: 120%;
  width: 100%;
  position: relative;
  text-align: center;
}

.IconText2 {
  font-size: 120%;
  width: 100%;
  position: relative;
  text-align: center;
}

.IconText3 {
  font-size: 120%;
  width: 100%;
  position: relative;
  text-align: center;
}

.IconText4 {
  font-size: 120%;
  width: 100%;
  position: relative;
  text-align: center;
}

.IconCol {
  -webkit-columns: 4 200px;
     -moz-columns: 4 200px;
          columns: 4 200px;
  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
  -webkit-column-rule: 1px dotted #ddd;
     -moz-column-rule: 1px dotted #ddd;
          column-rule: 1px dotted #ddd;
}


@media (min-width: 200px) {
  .IconCol { 
    -webkit-columns: 4 50px;
    -moz-columns: 4 50px;
         columns: 4 50px;
  }
}

@media (min-width: 400px) {
  .IconCol { 
    -webkit-columns: 4 50px;
    -moz-columns: 4 50px;
         columns: 4 50px;
  }
}

@media (min-width: 600px) {
  .IconCol { 
    -webkit-columns: 4 50px;
    -moz-columns: 4 50px;
         columns: 4 50px;
  }
}

@media (min-width: 1000px) {
  .IconCol { 
    -webkit-columns: 4 100px;
    -moz-columns: 4 100px;
         columns: 4 100px;
  }
}

@media (min-width: 1200px) {
  .IconCol { 
    -webkit-columns: 4 230px;
    -moz-columns: 4 230px;
         columns: 4 230px;
  }
}

  /* SET UP FOR GAME END-LOGO ANIMATION */
  .BoardLogo {
    transition: 0.5s ease all;
    width: 30%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .BoardLogo:hover {
    box-shadow: 0px 20px 100px #F27B26;
    border-radius:50%;
    }

  .HighlightsNames {
    max-width:80px;
    overflow-wrap:break-word;
    color: #0c2fa1;
    font-size: 20px;
  }
  
  .DeleteGameBtn {
    margin-bottom: 90px;
    padding-bottom: 10px;
    font-size: 15px;
  }

 .CentreContainer {
  Align-Items: center;
  Justify-Content: center;
  display: flex;
  margin: auto;
  padding-bottom: 2%;
  padding-left: 17%;
 }

 .CentreIcons {
  Align-Items: center;
  Justify-Content: center;
  display: flex;
  margin: auto;
 }

 .LegderButton {
  Align-Items: center;
  Justify-Content: center;
  display: flex;
  font-size: 0.8em;
 }

 .GameContainer {
  width: 90%;  
  overflow: hidden;
  }

 .GameSpacing {
   padding-left: 9%;
   column-width: none;
 }

 .GameCard {
  box-shadow: none;
  border-style: none;
 }

 .GameCentre {
  Align-Items: center;
  Justify-Content: center;
  display: flex;
  padding-bottom: 2%;
 }