Tilepage.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');

*{
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: "Poppins" , sans-serif;
}
body{
  
  background-color: #ffffff;
}
::selection{
  color: #fff;
  background: #11101d;
}
.sidebar{
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 78px;
  background: rgba(4,4,49,0.966);;
  padding: 6px 14px;
  z-index: 99;
  transition: all 0.5s ease;
}
.sidebar.active{
  width: 240px
}
.sidebar .logo_content .logo{
  color: #fff;
  display: flex;
}
.sidebar.active{
  width: 240px
}
.sidebar .logo_content .logo{
  color: #fff;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s ease;
}
.sidebar.active .logo_content .logo{
  opacity: 1;
  pointer-events: none;
}
.logo_content .logo i{
  font-size: 28px;
  margin-right: 5px;
}

.sidebar #btn{
  cursor: pointer;
  position: absolute;
  color: #fff;
  top: 6px;
  left: 50%;
  font-size: 28px;
  height: 50px;
  width: 50px;
  text-align: center;
  line-height: 50px;
  transform: translateX(-50%);
}
.sidebar.active #btn{
  left: 90%;
}
/* .sidebar ul{
  margin-top: 100px;
} */
.sidebar ul li{
  position: relative;
  height: 50px;
  width: 100%;
  margin: 0 5px;
  list-style: none;
  line-height: 50px;
  margin: 15px 0;
}
.sidebar ul li .tooltip{
  position: absolute;
  left: 125px;
  top: 0;
  transform: translate(-50% , -50%);
  border-radius: 6px;
  height: 35px;
  width: 130px;
  background: #fff;
  line-height: 35px;
  text-align: center;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  transition: 0s;
  opacity: 0;
  pointer-events: none;
  display: block;
}
.sidebar.active ul li .tooltip{
  display: none;
}
.sidebar ul li:hover .tooltip{
  transition: all 0.5s ease;
  opacity: 1;
  top: 50%
}


.sidebar ul li a{
  color: #fff;
  display: flex;
  align-items: center;
  text-decoration: none;
  border-radius: 12px;
  white-space: nowrap;
  transition: all 0.4s ease;
}
.sidebar ul li a:hover{
  color: #11101d;
  background: #bac0e2;
}
.sidebar ul li i{
  font-size: 18px;
  font-weight: 400;
  height: 50px;
  min-width: 50px;
  border-radius: 12px;
  line-height: 50px;
  text-align: center;
}
.sidebar .links_name{
  font-size: 15px;
  font-weight: 400;
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}
.sidebar.active .links_name{
  transition: 0s;
  opacity: 1;
  pointer-events: auto
}


.sidebar .profile_content .profile{
  color: #fff;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: all 0.5s ease;
}
.sidebar.active .profile_content .profile{
  opacity: 1;
  pointer-events: none;
}

.sidebar.active .profile_content .profile img{
  margin-left: 25%;
  margin-top: 170%;
}

.sidebar.active ~ .main-content{
  margin-left: 240px;
}

.main-content{
  margin-left: 70px;
}


.searchbar{
 display: flex;
border: 2px solid rgb(219, 221, 218);;
width: 700px;
height: 50px;
margin-top: 22px;
background:rgb(219, 221, 218);;
border-radius: 10px;
margin-left: 30px;
}
.searchbtn{
 margin:13px;
}

.searchbar .input_search{
 outline: none;
 width: 290px;
border: 0;
font-size: 20px;
margin: 10px;
background:rgb(219, 221, 218);;
}
::placeholder{
color:#000;
padding: 0 8px;
}

#filebtn{
 cursor: pointer; 
 font-size: 17px;
 border-radius: 12px;
 border: 0px;

 padding-left: 37px;
 padding-right: 37px;
 padding-top: 5px;
 padding-bottom: 12px;
 
 margin: 10px;
 
}
.filedropdown{
 float: right;
 margin-right: 40px;
 margin-top: -12px;

}

.fileimg{
  position: relative;
  right: 13px;
  top: 4px;
}

.filedropdown ul{
 
 margin: -7px -24px;
 background-color: #fff;
 border: 1px solid #e9eaed;
 transform: perspective(1000px) rotateX(0deg);
}
.filedropdown ul.active{
 transform: perspective(1000px) rotateX(-90deg);
}

.filedropdown #filemenu li.divider{
 border-bottom: 1px solid #e9eaed;
}

#filemenu li{
 padding: 12px 17px;
 cursor: pointer;
}
#filemenu li:hover{
 /* background: #bac0e2; */
 background: rgb(192, 186, 186);
}
.filedropdown #filemenu li span{
 /* .upload{ */
     color: #000;
     margin: 0 10px ;
}
.filedropdown #filemenu li i{
 color: #000;
}

.filedropdown  #filemenu:after {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 margin: 0 auto;
 width: 0;
 height: 0;
 border-left: 10px solid transparent;
 border-right: 10px solid transparent;
 border-bottom: 10px solid #fff;
 margin-top: -10px;
}

.file-input{
 float: right;
 margin: -70px -30px;
}
.add-file {
 opacity: 0;
 width: 0.1px;
 height: 0.1px;
 position: absolute;
}
.file-input label {
   display: block;
   width: 140px;
   height: 45px;
   border-radius: 9px;
  background: darkturquoise;
   display: flex;
   align-items: center;
   justify-content: center;
   color: black;
   cursor: pointer;
   transition: transform .2s ease-out;
   font-size: 17px;
   font-family: 'Roboto', sans-serif;
   border: none;
}

.tiles{
 margin: 34px 40px;
}
.cont{
 width: 100%;
}
::-webkit-scrollbar {
 width: 20px;
 
 }
 
 /* Track */
 ::-webkit-scrollbar-track {
 box-shadow: inset 0 0 18px grey; 
 border-radius: 10px;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
 background: rgba(4, 4, 49, 0.966); 
 border-radius: 10px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
  background: rgba(22, 113, 155, 0.966);
 }


 
/* popup card */
.bg-modal{
  width: 100%;
  height: 300%;
  background-color: white;
  /* opacity: 0.87; */
  position: absolute;
  top: 0;
  justify-content: center;
  align-items: center;
  display: none;
}
.bg-modal1{
  width: 100%;
  height: 100%;
  background-color: white;
  /* opacity: 0.87; */
  position: absolute;
  top: 0;
  justify-content: center;
  align-items: center;
  display: none;
}
.modal-content{
  width: 570px;
  height: 328px;
  background-color: white;
  box-shadow: 1px 4px 15px 0px grey;
  border-radius: 4px;
  margin-left: -43px;
}
.modal-content1{
  width: 535px;
  height: 275px;
  background-color: white;
  box-shadow: 1px 4px 15px 0px grey;
  border-radius: 4px;
}
.modal-content h1, .modal-content1 h1{
  margin-top: 15px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}
.modal-content h5, .modal-content1 h5{
  font-family: 'Montserrat', sans-serif;
      font-size: 20px;
      margin-top: 30px;
      margin-bottom: 4%;
      text-align: center;
}
.modal-content ::placeholder, .modal-content1 ::placeholder{
  color: black;
}
.modal-content input, .modal-content1 input {
    height: 50px;
    width: 380px;
    background-color: rgb(160, 154, 154);
    outline: none;
    border: none;
    font-size: 15px;
    padding-left: 10px;
}
.modal-content form, .modal-content1 form{
    text-align: center;
}
.modal-content .popupbtn, .modal-content1 .popupbtn{
  margin-top: 47px;
  text-align: center;
}

.modal-content .popup-del, .modal-content1 .popup-del{
  width: 125px;
  height: 50px;
  background-color: #282858;
  color: white;
  border: 2px solid #282858;
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: bolder;
  border-radius: 5px;
  cursor: pointer;
}

.modal-content .popup-cancel, .modal-content1 .popup-cancel {
  width: 125px;
  height: 50px;
  background-color: rgb(160, 154, 154);
  color: black;
  border: 2px rgb(160, 154, 154);
  font-size: 18px;
  font-family: 'Montserrat', sans-serif;
  font-weight: bolder;
  margin-left: 40px;
  border-radius: 5px;
  cursor: pointer;
}


 @media(max-width:991px){
  body{
    /* overflow: visible; */
    width: 200vw;
  }
  .searchbar{
    width: 350px;
    height: 50px;
    margin-top: 22px;
    margin-left: 30px;
  }
  .searchbar .input_search {
    /* outline: none;
    border: 0px; */
    font-size: 20px;
    margin: 10px;
    background: rgb(219, 221, 218);
}
#filebtn {
  cursor: pointer;
  font-size: 17px;
  border-radius: 12px;
  border: 0px;
  padding: 5px 37px 12px;
  margin-right: -20px;
    float: right;
    margin-left: 46px;
}
.filedropdown{
  margin-right: 12px;
}
/* .file-input label{
  margin-left: 20%
} */
.file-input{
  margin: -70px -70px;
}

#setting{
  height: 210vh;
}
.filebtn{
  display: flex;
  margin-left: 30px;
}
.bg-modal1 {
  width: 180%;
    height: 158%;
}
.modal-content1{
  margin-left: -5px;
}
.sidebar.active .profile_content .profile img {
  margin-top: 340%;
 }
 .sidebar.active .links_name {
  font-size: 20px;
 }
 .sidebar ul li i {
   font-size: 24px;
 }
 .sidebar ul {
   margin-top: 238px;
 }
 .sidebar ul li {
  height: 73px;
 }
}
@media(min-width:992px) and (max-width:1024px){
  #setting{
height: 120vh;
}
}
@media only screen and (max-width: 991px) and (orientation:landscape) {
  /* For landscape layouts only */
    #setting{
      height: 350vh;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
  #setting{
    height: 170vh;
  }
}
@media only screen and (min-width: 320px) and (max-width: 376px){
  .searchbar .input_search {
    width: 128px;
  }
  .searchbar {
    width: 186px;
  }
  }

#preview {
  padding: 20px;
  margin: 20px;
}

.container {
    width: 100%;
    height: 100%;
}

.floatingDiv {
  float:left;
}

.tooltip {
  position: relative;
  display: inline;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
  font-size: 11px;
}

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  margin-top: 10px;
}
.logo img{
  width: 300px;
    margin-top: -70px;
    margin-left: -50px;
}
.profile_content{
  margin-top: -100px;
}