/* input {
            border: none!important;
            
            background-color: rgba(0,0,0,0.0)!important;
        }
        textarea {
            border:none!important;
        } */
/* header */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}

.font {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif !important;
}
#user-btn {
  display: none;
}
#login-btn {
  display: none;
}
/* #logout-btn{
          display: none;
        } */
#signup-btn {
  display: none;
}
#user_pic {
  border-radius: 50%;
  height: 2em;
  width: 2em;
}
.dropdown-menu {
  top: 122% !important;
  margin: 0.125rem -56px 0 !important;
}

.bottom_nav {
  background-color: #fce4ec !important;
  padding-top: 30px;
}

/* cards */
#backimg {
  width: 100%;
  height: 576px;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100% 500px;
}
#to {
  position: absolute;
  width: 150px !important;
  border: none !important;
  background-color: rgba(0, 0, 0, 0) !important;
}
#name {
  position: absolute;
  width: 230px !important;
  border: none !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

#from {
  position: absolute;
  width: 165px !important;
  border: none !important;
  background-color: rgba(0, 0, 0, 0) !important;
}
#message {
  position: absolute;
  width: 300px !important;
  border: none !important;
  background-color: rgba(0, 0, 0, 0) !important;
}
#picture {
  position: absolute;
  background-color: rgba(0, 0, 0, 0) !important;
  z-index: 1;
  border: none;
}

#imgPreview {
  z-index: 100;
  /* position: absolute; */
  /* border-radius: 50%!important; */
  width: 98px;
  height: 107px;
}

@media screen and (min-width: 1301px) {
  #to {
    left: 577px;
    top: 46px;
  }
  #from {
    right: 45px;
    top: 440px;
  }
  #message {
    right: 140px;
    top: 26%;
  }
  #picture {
    top: 7.5%;
    right: 6.5%;
  }
  #imgPreview {
    top: 4.5%;
    right: 6%;
  }
  #name {
    top: 440px;
    left: 120px;
  }
}
@media screen and (max-width: 1300px) and (min-width: 1269px) {
  #to {
    left: 487px;
    top: 46px;
  }
}
@media screen and (max-width: 1300px) and (min-width: 1240px) {
  /* 1240 min */
  #to {
    left: 477px;
    top: 46px;
  }
  #from {
    right: 15px;
    top: 440px;
  }
  #message {
    right: 40px;
    top: 26%;
  }
  #picture {
    top: 7.5%;
    right: 6.5%;
  }
  #imgPreview {
    top: 4.5%;
    right: 6%;
  }
  #name {
    top: 440px;
    left: 90px;
  }
}
@media screen and (max-width: 1239px) and (min-width: 1124px) {
  /* message and name works completely */
  #to {
    left: 466px;
    top: 45px;
  }
  #from {
    right: 15px;
    top: 440px;
  }
  #message {
    right: 40px;
    top: 26%;
  }
  #picture {
    top: 7.5%;
    right: 6.5%;
  }
  #imgPreview {
    top: 4.5%;
    right: 6%;
  }
  #name {
    top: 440px;
    left: 90px;
  }
}
@media screen and (max-width: 1213px) and (min-width: 1170px) {
  #to {
    left: 450px;
    top: 45px;
  }
}
@media screen and (max-width: 1169px) and (min-width: 1144px) {
  #to {
    left: 440px;
    top: 45px;
  }
  #from {
    right: 7px;
    top: 440px;
  }
  #picture {
    top: 7.5%;
    right: 6.5%;
  }
  #imgPreview {
    top: 4.5%;
    right: 6%;
  }
}
@media screen and (max-width: 1143px) and (min-width: 1124px) {
  #to {
    left: 430px;
    top: 45px;
  }
  #from {
    right: 3px;
    top: 440px;
  }
  #picture {
    top: 7.5%;
    right: 6.5%;
  }
  #imgPreview {
    top: 4.5%;
    right: 6%;
  }
}
@media screen and (max-width: 1123px) and (min-width: 1100px) {
  #to {
    left: 420px;
    top: 45px;
  }
  #from {
    right: 2px;
    top: 440px;
  }
  #message {
    right: 30px;
    top: 26%;
  }
  #picture {
    top: 7.5%;
    right: 6.5%;
  }
  #imgPreview {
    top: 4.5%;
    right: 6%;
  }
  #name {
    top: 440px;
    left: 80px;
  }
}
@media screen and (max-width: 1099px) and (min-width: 1070px) {
  #to {
    left: 410px;
    top: 45px;
  }
  #from {
    right: 0px;
    top: 440px;
  }
  #message {
    right: 10px;
    top: 26%;
  }
  #picture {
    top: 7.5%;
    right: 6.5%;
  }
  #imgPreview {
    top: 4.5%;
    right: 6%;
  }
  #name {
    top: 440px;
    left: 75px;
  }
}
@media screen and (max-width: 1069px) and (min-width: 768px) {
  #to {
    left: 400px;
    top: 45px;
  }
  #from {
    right: -20px;
    top: 440px;
  }
  #message {
    right: 4px;
    top: 26%;
  }
  #picture {
    top: 7.5%;
    right: 6.5%;
  }
  #imgPreview {
    top: 4.5%;
    right: 6%;
  }
  #name {
    top: 440px;
    left: 75px;
  }
}
@media screen and (max-width: 1045px) and (min-width: 1024px) {
  #to {
    left: 390px;
    top: 45px;
  }
}
@media screen and (max-width: 1023px) and (min-width: 992px) {
  #to {
    left: 378px;
    top: 45px;
  }
}
/* Calendar */
.del {
  display: none;
}
.delBut {
  margin-left: 5cm;
  margin-bottom: 0.5rem;
}