* {
  padding: 0;
  margin: 0;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

body {
  margin: 0 auto;
  background-color: #1b1b1b;
  background-size: unset;
  background-repeat: repeat;
  height: 100dvh;
  box-sizing: border-box;
  scrollbar-width: 0px;
  overflow: hidden;
}

body::-webkit-scrollbar{
  display:none;
}

nav {
  display: flex;
  height: 6%;
  background-color: #202c33;
}

.navbar {
  width: 100%;
  display: flex;
  background-color: #202c33;
}

.dpimg {
  cursor: pointer;
  border-radius: 100%;
  width: 5%;
  height: 5%;
  height: auto;
  margin: auto 0px;
  margin-left: 10px;
}

.navbar .personalInfo {
  line-height: 100%;
  display: flex;
  flex-direction: column;
  margin: auto 0px;
  margin-left: 2%;
}

.personalInfo #name {
  color: #e9edef;
  margin-bottom: 4px;
}

#inputMsg{
  width: 100%;
  height: 10dvh;
}

.personalInfo #lastseen {
  color: #8696a0;
  font-size: small;
}

.scrollable {
  overflow-y: scroll;
  color: #fff;
  display: flex;
  height: 88%;
  flex-direction: column;
  background-color: ivory;
  align-items: flex-end;
  position: relative;
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: relative;
  box-sizing: border-box;
  background: #003e33;

}

.scrollable::-webkit-scrollbar{
  display: none;
}

.scrollable .chatting {
  overflow-y: scroll;
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: relative;
  word-wrap: break-word;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  
}

.scrollable .chatting::-webkit-scrollbar {
  display: none;
}

#listUL {
  overflow-y: hidden;
  position: static;
  width: 100%;
  bottom: 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;

}

#listUL li {
  width: 100%;
  text-decoration: none;
  flex-direction: row-reverse;
}

.sent {
  text-align: end;
  float: right;
  width: auto;
  max-width: 45%;
}

.green {
  margin: 5px;
  text-align: end;
  width: max-content;
  max-width: 90dvw;
  padding: 10px;
  background-color: #005c4b;
  border-radius: 15px 15px 0px;
  box-sizing: border-box;
  animation: fade-in 0.7s ease;
}



.green::-webkit-scrollbar{
  display: none;
}
.green::-webkit-scrollbar-track{
  display: none;
}
#sentlabel {
  color: #94bab3;
  display: block;
  text-align: end;
  font-size: x-small;
}

.recieved {
  float: left;
  width: 45%;
  max-width: 45%;
}

.grey {
  max-width: 90dvw;
  margin: 5px;
  text-align: start;
  width: max-content;
  padding: 12px;
  background-color: #202c33;
  border-radius: 0px 15px 15px;
  box-sizing: border-box;
  max-height: 90dvh;
  animation: slide-in-left 0.2s ease;
}

@keyframes slide-in-left{
from{
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
to{
transform: translate3d(0, 0, 0);
}
}
@keyframes fade-in{
  from{
  opacity: 0;
  }
  to{
  opacity: 1;
  }
  }

/* iframe messages */
.ifrmm{
  width: 84dvw;
  border: 4px solid rgb(201, 201, 201);
  overflow: hidden;
  height: 58dvh;
}



.ifrmm::-webkit-scrollbar{
  display: none;
}

.grey .mapview {
  margin: auto;
  display: flex;
  padding: 5px;
  box-sizing: border-box;
}

.add address {
  margin-top: 10px;
  padding-left: 15px;
}

.map {
  margin: auto;
  width: 100%;
  border-radius: 10px;
  box-sizing: border-box;

}

.dateLabel {
  color: #94bab3;
  display: block;
  text-align: end;
  font-size: x-small;
}

.sk .bold {
  color: rgba(219, 154, 33, 0.822);
}

.resumeThumbnail {
  width: 100%;
  border-radius: 10px 10px 0px 0px;
}

.downloadSpace {
  background-color: #1d282f;
  display: flex;
  width: 100%;
}

.downloadSpace .pdfname {
  display: flex;
  width: 100%;
}

.pdfname label {
  margin: auto 0px;
}

.downloadSpace img {
  width: 30px;
  cursor: pointer;
  margin: 5px;
}

.bold {
  font-weight: bold;
}

.alink {
  color: goldenrod;
  transition: all 600ms ease;
  text-decoration: none;
}

.alink:hover {
  text-decoration: none;
  color: green;
}

.social {
  padding: 10px;
}

.social .socialItem {
  width: 100%;
  border-radius: 10px;
  background-color: lightsalmon;
  cursor: pointer;
  display: flex;
  margin-bottom: 10px;
  transition: all 500ms ease-in-out;
}

.social .socialItemI {
  margin: auto;
  padding: 10px;
  flex-direction: column;
}

.social .socialItem:hover {
  background-color: rgba(58, 170, 58, 0.863);
}

#call {
  flex-direction: column;
  text-align: center;
}

.number {
  display: none;
}

.scrollable .fullScreenDP {
  transition: all 700ms ease-in-out;
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  flex-direction: column;
  background-color: #2f2f2fec;
  z-index: 1000;
}

.scrollable .fullScreenDP .insideDP {
  display: flex;
  margin: auto;
  scrollbar-width: 0px;
  box-sizing: border-box;

}


.closeBTN {
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  margin-left: 6%;
  margin-top: 5px;
  cursor: pointer;
}

.btnColor {
  fill: rgba(0, 0, 0, 0.692);
  transition: all 400ms ease-in-out;
}

.closeBTN:hover .btnColor {
  fill: red;
}

.scrollable .fullScreenDP .insideDP .dp {
  width: 90%;
  margin: auto;
  border-radius: 10px;
}

footer {
  position: relative;
  left: 0;
  bottom: 0;
  width: 100%;
  color: white;
  text-align: center;
  height: auto;
  background-color: #202c33;
  text-align: center;
}

.sendBar {
  display: flex;
  height: 100%;
  width: 100%;
  margin: auto;
}

.sendBar svg {
  margin: auto;
  height: 40%;
  min-height: 40%;
}

.sendBar input[type='text'] {
  margin: auto;
  margin: 5px;
  border-radius: 10px;
  padding: 10px;
  color: #fff;
  float: left;
  width: 80%;
  height: 100%;
  outline-color: transparent;
  accent-color: transparent;
  background-color: #2a3942;
  outline: none;
  border-color: transparent;
}

.sendBar input[type='text']::placeholder {
  color: #8696a0;
  opacity: 1;
}

.sendBar input[type='text']:-ms-input-placeholder {
  color: #8696a0;
}

.sendBar input[type='text']::-ms-input-placeholder {
  color: #8696a0;
}

/* Updated styles for the form */
.grey form,
.green form {
  margin: 0;
  padding: 10px;
  width: auto;
  max-width: 80%;
  background-color: #202c33;
  border-radius: 10px;
  box-sizing: border-box;
}

.grey form input,
.green form input {
  width: 100%;
  padding: 8px;
  margin-bottom: 8px;
  border-radius: 5px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

.grey form button,
.green form button {
  width: 100%;
  padding: 8px;
  border: none;
  border-radius: 5px;
  background-color: #005c4b;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;

}


.grey form button:hover,
.green form button:hover {
  background-color: #003e33;

}

@media screen and (min-width: 1024px) {
  body {
    margin: auto;
    width: 50vw;
    box-sizing: border-box;

  }

  .sendBar {
    width: 85%;
  }

  .scrollable {
    -ms-overflow-style: none;
    scrollbar-width: none;
    position: relative;
    overflow: hidden;
  }

  .scrollable .fullScreenDP {
    display: none;
    width: 100%;
    height: 100%;
    overflow-y: scroll;
  }

  .scrollable .fullScreenDP .insideDP {
    display: flex;
    width: 70%;
  }

  .scrollable .fullScreenDP .dp {
    width: 50%;
    margin: auto;
  }

  .scrollable .closeBTN {
    margin-top: 15px;
  }

  #call:hover .number {
    display: block;
    height: auto;
  }
}

#sendbar{
  display: flex;
  flex-direction: row;
  margin: 0px;
}
#inputMsg{
  height: 10dvh;
  margin:0px;
}
.select-start{
  padding: 10px;
  font-weight: 900;
  font-family: Arial, Helvetica, sans-serif;
  background-color: brown;
  color: wheat;
}

.select-start option{
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 900;
  background-color: brown;
  position: fixed;
}