.new-design
{
          display: none;
          color: #6B728E;
          background-color: rgba(237, 240, 245, 0.1);
          border-radius: 16px;
          box-shadow: 16px 16px 32px #d9dde9;
          border: 1px solid rgba(237, 240, 245, 0.75);
          width:  80%;
          height: 70vh;
}
.new-design nav
{
          display: flex;
          align-items: center;
          width: 100%;
          height: 10vh;
}
.new-design nav .location
{
          width: 50%;
          cursor: pointer;
          display: flex;
          padding: 16px;
          margin-left: 16px;
          align-items: center;
          position: relative;
}
.new-design nav .location::after
{
          content: "";
          position: absolute;
          top: 80%;
          left: 48px;
          width: 16px;
          height: 4px;
          background-color: #6B728E;
          transition: 0.8s all ease;
}
.new-design nav .location:hover::after
{
          width: 32px;
          left: 44px;
}
.new-design nav .location i
{
          margin-right: 8px;
}
.new-design nav .personal-area
{
          width: 50%;
          height: 100px;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding-right: 32px;
}
.new-design nav .personal-area i
{
          cursor: pointer;
          width: 48px;
          height: 48px;
          padding: 16px;
          background-color: #e4e7ee;
          border-radius: 50%;
          margin-right: 1em;
}
.new-design nav .personal-area .apps-button a
{
          display: grid;
          grid-template-columns: repeat(3,1fr);
          grid-template-rows: repeat(3,1fr);
          width: 48px;
          height: 48px;
          padding: 16px;
          background-color: #e4e7ee;
          border-radius: 50%;
          row-gap: 2px;
          column-gap:2px;
          margin-right: 1em;
}
.new-design nav .personal-area .apps-button a div
{
          border-radius: 50%;
          background-color: gray;
}
.new-design nav .personal-area .profile-img
{
          cursor: pointer;
          width: 64px;
          height: 64px;
}
.new-design nav .personal-area .profile-img img
{
          width: 100%;
          height: 100%;
          border-radius: 50%;
}
.new-design main{
          width: 100%;
          height: 50vh;
}
.new-design main .search-box-area
{
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
}
.new-design main .search-box-area .search-box
{
          margin-top: 1vh;
          height: 3vh;
          width: auto;
          background: rgba(238, 238, 238, 0.1);
          border-radius: 16px;
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          border: 1px solid rgba(238, 238, 238, 0.5);
          display: grid;
          place-items: center;
          grid-template-columns: 10% 90%;
}
.new-design main .search-box-area .search-box input
{
          padding-left: 16px;
          height: 100%;
          max-width: auto;
          width: 500px;
          border: none;
          background-color: transparent;
}
.new-design main .search-box-area .search-box input:focus
{
          outline: none;
}
.new-design main .search-box-area .shortcuts
{
          display: flex;
          align-items: center;
          margin-top: 2vh;
}
.new-design main .search-box-area .shortcuts a
{
          width: 48px;
          height: 48px;
          margin-right: 16px;
          border: 3px solid rgba(238, 238, 238, 0.5);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
}
.new-design main .search-box-area .shortcuts a:nth-child(1) i
{
          color: #FF0000;
}
.new-design main .search-box-area .shortcuts a:nth-child(2) i 
{
          color: #3b5998;
}
.new-design main .search-box-area .shortcuts a:nth-child(3) i 
{
          color: #1DA1F2;
}
.new-design main .search-box-area .shortcuts a:nth-child(4) i 
{
          color: #0077b5;
}
.new-design footer
{
          width: 100%;
          height: 10vh;
          background-color: transparent;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding-right: 32px;
}
.new-design footer a i
{
          color: #6B728E;
          font-size: 20px;
          border: 1px solid rgba(238, 238, 238, 0.5);
          padding: 8px;
          border-radius: 50%;
}
.new-design footer a:nth-child(1) i
{
          margin-right: 16px;
}