/*
 -Using a grid View with 10columns to make a responsive grid viewport
 -Calculate percentage of one column; 100%/10columns = 10%
 -then make a class for each of the 10columns; class="col-" and a number defining how many columns the section should span

*/

.col-1 {
  width: 10%;
}
.col-2 {
  width: 20%;
}
.col-3 {
  width: 30%;
}
.col-4 {
  width: 40%;
}
.col-5 {
  width: 50%;
}
.col-6 {
  width: 60%;
}
.col-7 {
  width: 70%;
}
.col-8 {
  width: 80%;
}
.col-9 {
  width: 90%;
}
.col-10 {
  width: 100%;
}

/*Making all classes float to the left*/
[class*="col-"] {
  float: left;
  padding: 3px;
  margin: 0;
  /* border: 1px solid f1f1f1; */
}

/*Wrapping all rows in a div; number of columns in the div should add up to 12*/
/*like this
    <div class="bodyContents row">
       <div class="col-3">...</div> --spans to 30%
       <div class="col-9">...</div> --spans to 90%
    </div>
*/

/*
  -since all the columns are floating to the left, they are taken out of the flow
  of the page making the other elements in the page appear as if they do not exist.
  Thus, clear the flow as below.
*/

.row::after {
  content: "";
  clear: both;
  display: table;
}

/*
  @media queries
*/

/* for tablets */
@media screen and (max-width: 1024px) {
  .blog {
    width: 100%;
  }

  /* admin dashboard info cards */
  .info-cards {
    flex-direction: column;
    position: relative;
    z-index: 1;
  }

  .grey.views {
    position: absolute;
    left: 60%;
    top: 0;
    border-radius: 0 7px 0 0;
    background: #fb2525;
    color: #fff;
  }

  /* profile page */
  .main {
    margin: auto;
    margin-top: 7%;
    /* margin-left: 29%; */
    font-size: 28px;
    padding: 0 10px;
    width: 90%;
  }

  .card {
    flex-direction: column;
  }

  .main .card table{
    width: 80%;
  }

  .profile {
    /* justify-content: center; */
  }

  .profile-upload-btn {
    position: absolute;
    bottom: 20%;
    right: 40%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  
}

/*works when the screen has mobile display*/
@media screen and (max-width: 600px) {
  .logo {
    max-width: 180px;
  }

  .navigation-links {
    display: none;
    position: relative;
    top: 130px;
    right: 20%;
    box-shadow: 0 3px 7px 3px rgba(0, 0, 0, 0.2);
    z-index: 100;
    background-color: #f1f1f1;
    height: fit-content;
  }

  .active {
    border-radius: 0px;
  }

  .dashboardmoblinks {
    position: relative;
    top: 175px;
    right: 0;
    box-shadow: 0 3px 7px 3px rgba(0, 0, 0, 0.2);
    z-index: 100;
    background-color: #f1f1f1;
  }

  /* #mobilemenulinks{

  } */
  .mobilemenulinks {
    display: block;
  }

  .mobilemenuicon {
    display: block;
  }

  /* .mnav{
    display: none;
  } */

  .light_dark_switch {
    right: 49px;
  }

  .dashboardThemeLinks {
    right: 24px;
  }

  .mobilementuthemebtn {
    display: none;
  }

  .col-3 {
    width: 100%;
  }

  /* .blog-card{
    width: 100%;
    margin-left: 30px;
    margin-right: 30px;
    margin-bottom: 30px;
  } */

  .header {
    height: calc(100vh - 250px);
  }

  .blog-area, .draft-blogs-area {
    width: 100%;
    /* padding: 50px 5vw; */
  }

  /* .small{
      font-size: 14px;
    } */

  .heading .small {
    display: block;
    font-size: 28px;
  }

  .no-fill {
    font-style: italic;
    color: transparent;
    font-size: 42px;
    -webkit-text-stroke: 2px #000;
  }

  .heading {
    line-height: 42px;
  }

  /****Login Page*************/
  .signup_div {
    width: 90%;
    margin-top: 400px;
    /* padding-top: px; */
    height: fit-content;
    background: #000;
    color: #fb2525;
    top: 50%;
  }

  .bodyContents {
    margin-top: 0;
    /*padding: 0; */
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }

  #currentUserName {
    right: 20%;
    position: absolute;
    width: 42px;
  }

  .active.links {
    /* background-color: #4CAF50;
      border: 1px solid #4CAF50;
      border-radius: 0; */
    color: white;
  }

  .col-9 {
    width: 100%;
  }

  /* profile page */
  .main {
    margin: auto;
    margin-top: 7%;
    /* margin-left: 29%; */
    font-size: 28px;
    padding: 0 10px;
    width: 100%;
  }

  .main .card {
    padding: 20px 0 20px 20px;
  }

  .main .card table{
    width: 100%;
  }

  .card {
    flex-direction: column;
  }

  .profile-upload-btn {
    position: absolute;
    bottom: 20%;
    right: 30%;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  /* Dashboard home page */
  .info-cards-card{
    width: 100%;
    padding: 28px 21px;
  }

  .head{
    font-size: 21px;
  }
  
  .blog-area, .draft-blogs-area{
    padding: 0;
  }
}

@media screen and (min-width: 600px) {
  .mobilemenulinks {
    display: none;
  }
  .mobilemenuicon {
    display: none;
  }

  .mnav {
    display: none;
  }

  .dashboardThemeLinks {
    right: 45%;
  }

  .col-3 {
    width: 100%;
  }
  /* .blog-area{
      width: 100%;
      padding: 50px 5vw;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 50px;
  } */
  .col-9 {
    width: 90%;
  }

  
}