@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
.data-div{
  display:inline-block;
  text-align: left;
  float :left;
  border-radius: 25px;
 position: relative;
  padding: 12px;
  width: 48%;
  height: auto; 
  margin:12px;
 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.xdata-div{
  display:inline-block;
  text-align: left;
  float :left;
  border-radius: 25px;
 position: relative;
  width: 23%;
  height: auto; 
  margin:12px;
 
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

}
.data-div:hover , .xdata-div:hover{
  border-style: none solid;
  border-width: 4px;
}
.data-div > i , .xdata-div > i  {
  right: 0;
   color:green;
  top: -4px;
  clear: right;
  position: absolute;
  font-size: 20px;
}


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  font-family: 'Josefin Sans', sans-serif;
}

body{
   background-color: #f3f5f9;
}

.wrapper{
 
  position: relative;
}

.wrapper .sidebar{
  width: 200px;
  height: 100%;
  background: #4b4276;
  padding: 30px 0px;
  position: fixed;
}

.wrapper .sidebar h2{
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 30px;
}

.wrapper .sidebar ul li{
  padding: 15px;
  border-bottom: 1px solid #bdb8d7;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  border-top: 1px solid rgba(255,255,255,0.05);
}    

.wrapper .sidebar ul li a{
  color: #bdb8d7;
  display: block;
}
.wrapper .sidebar ul li a.active {
  color: black;
  display: block;
}

.wrapper .sidebar ul li a .fas{
  width: 25px;
}

.wrapper .sidebar ul li:hover{
  background-color: #594f8d;
}
    
.wrapper .sidebar ul li:hover a{
  color: #fff;
}
 
.wrapper .sidebar .social_media{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}

.wrapper .sidebar .social_media a{
  display: block;
  width: 40px;
  background: #594f8d;
  height: 40px;
  line-height: 45px;
  text-align: center;
  margin: 0 5px;
  color: #bdb8d7;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.wrapper .main_content{
 
  margin-left: 200px;
}

.wrapper .main_content .header{
  padding: 20px;
  background: #fff;
  color: #717171;
  border-bottom: 1px solid #e0e4e8;
  text-align: right;
  position: sticky;
  top: 0;
  z-index: 2;
}


.wrapper .main_content .info{
  margin: 20px;
  color: #717171;
  line-height: 25px;
}

.wrapper .main_content .info div{
  margin-bottom: 20px;
}
.panelOptions{

  margin-left: 10%;

}
.panelOptions a{
  position: relative;
  display: inline-block;
  float: left;
  border: 20px;
      border-top-color: currentcolor;
      border-right-color: currentcolor;
      border-bottom-color: currentcolor;
      border-left-color: currentcolor;
  border-radius: 10px;
  border-color: black;
  background-color: rgb(252, 252, 252);
  padding: 20px;
  text-align: center;
  height: auto;
  margin: 10px;
  width: 40%;
  box-shadow: 5px 10px 8px 10px #888888;
}
.card{
 
  position: relative;
  display: flex;
  justify-content: center;

    

}
h5{
  position: relative;
}
.flex{
  position: relative;
display: flex;
flex-wrap: wrap;
clear: both;
width: 100%;
}
.details{
  text-align: right;
word-wrap : break-word;
}
.orderDate{
  text-align: center;
    /* vertical-align: middle; */
    width: 100%;
    padding: 20px;
    color:red;
}
.xdata {
float: left;
}
.msgData{
  display: block;
text-align: center;
padding: 10px;
width: 100%;
color: blueviolet;
font-size: 20px;
background-color: rgb(247, 243, 243);
}
.msgDetails{
  text-align: left;
  word-wrap: break-word;
}
.xdiv {
  border-style: solid;
  border-color: #fff;
  margin: 20px;
  
}
.xdiv :nth-child(odd){
  color: #200a0a;
}
.xdiv :nth-child(even){
  background-color: rgb(247, 243, 243);
  color: indigo;
}
.btn{
  background-color: #ae7ad28c;
  padding: 0px 10px 0px 10px;
  color: currentColor;
  font-size: 17px;
  text-align: center;
  border-style: ridge;
  border-radius: 20px;
  box-shadow: 0px 2px 0px 0px #d0a560, 0px 0px 4px 0px #eca140;
  margin: 12px 10px 0px 10px;
}
.read, .unread{
  background-color: #ae7ad28c;
padding: 0px 10px 0px 10px;
color: currentColor;
font-size: 17px;
text-align: center;
border-style: ridge;
border-radius: 20px;
box-shadow: 0px 2px 0px 0px #d0a560, 0px 0px 4px 0px #eca140;
margin: 12px 10px 0px 10px;
}
.userPass{
  position: relative;
  text-align: right;
  width: 55%;
  margin-top: 20px;
}
.userPass > input[type="text"],.userPass > input[type="password"],.loginIdPass > input[type="text"],.loginIdPass > input[type="password"]{
  padding: 12px;
  border-style: solid;
  border-color: #e1c9f4bf;
  border-radius: 5px;
}
.loginIdPass > input[type="text"]:focus,.loginIdPass > input[type="password"]:focus{
 border-color:black;
	
}

.userPass > input[type="submit"],.loginIdPass > input[type="submit"]{

  padding: 5px;
  border-radius: 5px;
}
.fLogin{
  height: auto;
  /* position: absolute; */
  margin: auto;
  /* top: 30%; */

  /* overflow: auto; */
  /* left: 40%; */
  padding: 0px 20px 20px 20px;
  background-color: #ffffff;
  box-shadow: 0px 4px 0px 4px white, 0px 4px 4px 4px black;
  border-style: hidden;
  border-radius: 7px;
  width: fit-content;
}
.loginForm{
  height: 100px;
  left: 0;
  position: relative;
  background-color: #a118ee;
  right: 0;
  margin: auto;
}
.loginIdPass{
  position: relative;
  text-align: right;
 
  margin-top: 20px;
}
/* FOR RATE CALC*/

.row {
  display: flex;
}
.space-between {
  justify-content: space-between;
}
.space-evenly {
  justify-content: space-evenly;
}
.space-around {
  justify-content: space-around;
}
.align-items-center {
  align-items: center;
}
.text-center {
  text-align: center;
}
.center {
  margin-left: auto;
  margin-right: auto;
}

.sqft-container,
.cft-container {
  display: flex;
  flex-direction: column;
}
.sqft-container > *,
.cft-container > * {
  margin-bottom: 12px;
}

.form-group {
  display: inline-flex;
  margin: 8px 12px;
  align-items: baseline;
}
.form-group > *:not(:last-child) {
  margin-right: 12px;
}

.form-group > input {
  border: 1px solid #e4e4e4;
  border-radius: 3px;
  background-color: #fff;
  display: inline-block;
  max-width: 200px;
  width: 100%;
  padding: 8px 12px;
  font-size: 1em;
  outline: 0px;
}
.form-group > input:focus {
  border-color: #3d3d3d;
}

button {
  border: 0px;
  color: #fff;
  background-color: #806ed8;
  border-radius: 3px;
  padding: 12px 8px;
  cursor: pointer;
}
button > i {
  margin-bottom: -2px;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}
.info{
  text-align: center;
}
/*search BAr*/


@media screen and (max-width: 1200px) {
  body {
    
  }
  .data-div{
    display:inline-block;
    border-radius: 25px;
    padding: 12px;
    width: 45%;
  }
  .xdata-div{
    width: 47%;
  }
  
}