/* login page*/
.password_group{
   position: relative;
}
.password_group #showPassHide{
   color: black;
   position: absolute;
   right: 15px;
   font-size: 15px;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
}
.password_group .fa-eye-slash{
   color: aqua;
}
/* login page*/

/* publish custome style */
.input .browse{
   cursor: pointer;
   width:100px;
   height: 130px;
   padding: 0;
   position: relative;
   top: -6px;
}
/* publish custome style */
#form .form_input.success{
   border: 1px solid green !important;
  
}
#form .form_input.error{
   border: 1px solid red !important;
  
}


/* register page */

/* register page */


.error_div{
   top: -45px;
   visibility: hidden;
   position: relative;
   padding: 15px;
   width: 200px;
}
/* .upload_image_error{
   
} */



.form-group.success input{
   border: 2px solid green;
}

 /* image filed */

 /* spiner / loading style */
 .uploaded_images {
   display: flex;
padding: 0;
   /* flex-wrap: wrap; */
   
 }

 .img {
   position: relative;
   width: 150px;
 }

 .img img {
   width: 100%;
   height: auto;
 }

 .close {
   position: absolute;
   top: 5px;
   right: 5px;
   cursor: pointer;
   
   /* background-color: rgb(214, 34, 34); */
   border-radius: 50%;
   padding: 2px;
 }

 .close span{
   font-weight: bolder;
   font-size: 16px;
   color: white;

}
 
.profile_header{
   display: flex;
   justify-content: space-between;
   /* background-color: #db3434; */
}

.profile_header .red{
   background-color: #bb2929;
   padding: 10px 20px;
   width: 90%;
   text-align: end;
   

}
.profile_header .red a{
   color: white;
   text-decoration: none;
   font-weight: bold;
}
.profile_header .white{
   padding: 10px 20px;
   /* width: 50%; */

}

 .loader {
 border: 8px solid #f3f3f3;
 border-top: 8px solid #db3434;
 border-radius: 50%;
 width: 50px;
 height: 50px;
 animation: spin 2s linear infinite;
 display: none; /* Initially hide the loader */
}

@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}
 /* spiner / loading style */
.content-wrapper p{
   background-color: rgb(255, 140, 0);
   padding: 10px;
   border-radius: 5px;
   text-align: center;
   
}
form{
   height: fit-content;
}
form select{
   border: 1px solid rgb(233, 231, 231) !important;
   height: 45px !important;
}
form input, textarea{
   border: 1px solid rgb(233, 231, 231) !important;
   
}
.col-md-4{
   margin-bottom: 5px;
}
.price-loction{
   display: flex;
}

.multiple{
   display: flex;
   align-items: center;
   overflow: auto;
}
.multiple::-webkit-scrollbar{
   width: 0;
}

.input{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   padding: 0px 10px;
}
.img{
   position: relative;
   width: 100px;
   height: 120px;
   margin-right: 3px;
   
}
.img .close{
   position: absolute;
   right: 2px;
   top: -5px;
   color: black;
   cursor: pointer;
   box-shadow: 0px 3px 2px rgb(233, 231, 231);
   /* font-size: 13px; */
   font-weight: 100;
}
.img .close:hover{
   color: red;
}
.img img{
   border-radius: 5px;
   width: 100px;
   height: 120px;
   object-fit: cover;
}

.submit{
   display: flex;
   text-align: center;
   justify-content: center;
   margin: 0 auto;
}

.files{
   display: none;
}
.uploaded_images{
   display: flex;
   flex-direction: row;
   overflow: auto;
}
.uploaded_images::-webkit-scrollbar{
   width: 10px;
}


.cars{
   /* display: none; */
}
.mobile{
   display: none;
}

.toglle{
   display: block;
}



.card-body, .footer{
   position: fixed;
   bottom: 0;
   width: 100%;

}

.header_{
   margin: 0 auto;
   width: 450px;
   margin-bottom: 10px;
   background-color: #fff;
   padding: 10px;
   border-radius: 15px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
}

.contents_wrapper{
   background-color: rgb(247, 247, 247);
   width: 450px;
   height: auto;
   margin: 0 auto;
   box-shadow: 0px 2px 5px 0px rgb(231, 229, 229);
   border-radius: 15px;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap   ;
   padding: 10px;
   box-sizing: border-box;
   justify-content: center;
   align-items: center;
}
@media only screen and (max-width: 485px) {
   .contents_wrapper{
      width: 300px;
      
   }
   
   .contents_wrapper .category{
      width: 100px;
      height: 100px;
   }
   .header_{
      width: 300px;
      text-align: center;
   }
}
.contents_wrapper .category{
   width: 130px;
   height: 130px;
   margin: 2px;
   background-color: rgb(244, 244, 244);
   border-radius: 5px;
   padding: 10px;
   transition: all .3s;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   color: rgb(115, 113, 113);
   text-align: center;

}
.contents_wrapper a{
   text-decoration: none;
}
.contents_wrapper a:hover{
   text-decoration: none;
}
.contents_wrapper .category:hover{
   box-shadow: 0px 0px 10px 8px rgb(224, 224, 224);
   width: 131px;

}
.contents_wrapper .category i{
   color: rgb(147, 11, 11);
   margin: 0 0 10px 0;
   font-size: 30px;
}
.contents_wrapper .category span{
   font-size: 17px;
}

.warn span{
   font-size: 14px;
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
#signIn{
   background: rgb(206, 2, 2);
}
#signIn:hover{
   opacity: .7;
}
.spinner-border{
   height: 20px;
   width: 20px;
}
/* loader css */
.loader-div{
   display: none;
   background-color: red;
   position: fixed;
   margin: 0px;
   padding: 0px;
   right: 0px;
   top: 0px;
   width: 100%;
   height: 100%;
   background-color: #fff;
   z-index: 30001;
   opacity: 0.8;
}
.loader-img {
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   margin: auto;
}
/* profile css ////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////// */
#container{
   padding: 20px 100px;
}
.top-header{
   display: flex;
   justify-content: space-between;
   margin-bottom: 15px;
}
.avatar-col{
   padding: 30px 3px;
}
.avatar-col img{
   border-radius: 5px;
}
.flex{
   display: flex;
   /* padding: 10px; */
   

}
.verify-your-account-button{
   background-color: #f3f3f3;
   padding: 5px;
   border-radius: 5px;
}
.stat{
   box-shadow: 3px 3px 10px 2px rgb(225, 225, 225);
   background: white;
   padding: 10px;
   width: 130px;
   margin: 0 5px;
   border-radius: 5px;
}
#subscriptions{
   list-style: none;

}
.profile-photo{
   /* background-color: red; */
   display: flex;
   align-items: center;
}
.change_avater{
   /* background-color: rgb(223, 255, 223); */
   height: 120px;
   border-radius: 5px;
   display: flex;
   align-items: center;
   padding: 5px 10px;
   width: 100px;
   flex-direction: column;
   justify-content: center;
   text-align: center;
}
.change_avater .changeAvater{
   display: none;

}
.group{
   display: flex;
}
@media only screen and (max-width: 890px) {
   #container{
      padding: 10px;
   }
   .flex{
      /* background: red; */
      flex-direction: column;
   }
   .stats{
      display: flex;
      flex-direction: row  ;
   }
   .stat{
      
      padding: 5px;
      width: 130px;
      margin: 0 5px;
      border-radius: 5px;
   }
   #subscriptions{
      flex-direction: row;
      
   }
   #subscriptions li{
      flex-direction: row;
      
   }
}