/* Small Devices - Phones */
@media (max-width: 767px) {



  /**************** LOADER ****************/
      
html, body { 
  min-height: 100%;
  font-family: "Inter", serif;
}

/* Typography */
h1 {
  font-size: 28px;
  line-height: 40px;
}

h2 {
  font-size: 24px;
  line-height: 36px;
}

h3 {
  font-size: 20px;
  line-height: 30px;
}

h4 {
  font-size: 17px;
  line-height: 28px;
}

p
{
  font-size: 14px !important;
  line-height: 22px;
}

.bold{
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  color: #18253b;
}

.smallp {
  font-size: 13px;
  font-weight: 400;
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 23px;
  color: #18253b;
}

a{
  font-size: 14px;
  font-weight: 400;
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 27px;
  color: #18253b;
  text-decoration: none;
}

a:hover{
  text-decoration: underline;
  color: #18253b;
}


span{
  font-size: 14px;
  font-weight: 400;
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-style: normal;
  color: #18253b;
}

input, textarea, .inb-tab{
  
  }

sup{

  }


button{
  width:auto;
  height:50px;
  padding: 0px 30px;
  background: #000080;
  color: #e1e7f4;
  border:1px solid #000080;
  border-radius: 25px;
  box-sizing:border-box;
  margin-top:20px;
  clear: both;
  font-size: 15px;
  font-weight: 600;
  line-height: 50px;
}

button:hover{
  background: #00005d;
  color: #FFF;
  border:1px solid #00005d;
}
  

.primary-button{
  width:auto;
  height:50px;
  padding: 0px 20px;
  background: #000080;
  color: #e1e7f4;
  border:1px solid #000080;
  border-radius: 25px;
  box-sizing:border-box;
  margin-top:20px;
  clear: both;
  font-size: 15px;
  font-weight: 600;
  line-height: 50px;
}

.primary-button:hover{
  background: #00005d;
  color: #FFF;
  border:1px solid #00005d;
}

.primary-button svg{
  width:auto;
  height: 19px;
  margin-right: 5px;
  margin-top: auto;
  margin-bottom: auto;
  position: relative;
  display: inline-block;
  fill: #e1e7f4;
}

.secondary-button:hover svg{
  fill: #FFF;
}


.secondary-button{
  width:auto;
  height:50px;
  padding: 0px 20px;
  background: none;
  color: #000080;
  border:1px solid #000080;
  border-radius: 25px;
  box-sizing:border-box;
  margin-top:20px;
  clear: both;
  font-size: 15px;
  font-weight: 600;
  line-height: 50px;
}

.secondary-button:hover{
  background: #000080;
  color: #FFF;
  border:1px solid #000080;
}

.secondary-button svg{
  width:auto;
  height: 19px;
  margin-right: 5px;
  margin-top: auto;
  margin-bottom: auto;
  position: relative;
  display: inline-block;
  fill: #000080;
}

.secondary-button:hover svg{
  fill: #FFF;
}

.spinner-button {
  width:auto;
  height:50px;
  padding: 15px 30px;
  background: #000080;
  color: #e1e7f4;
  border:1px solid #000080;
  border-radius: 25px;
  box-sizing:border-box;
  margin-top:20px;
  clear: both;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  display: flex;
  justify-content: center;

}

.spinner-button:hover{
  background: #000080;
  color: #FFF;
  border:1px solid #000080;
}



.spinner {
  animation: rotate 2s linear infinite;
  width:auto;
  height: 20px;
  margin-right: 10px;
  margin-top: -1px;
  position: relative;
  display: none;
  fill: #e1e7f4;
}

.spinner .path {
  stroke: #e1e7f4;
  stroke-linecap: round;
  animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 1, 150;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -35;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -124;
  }
}

.spinner-button:hover .spinner{
  stroke: #FFF;
}






.text-button{
  width:auto;
  height:50px;
  padding: 0px 30px;
  background: transparent;
  color: #000080;
  border:none;
  border-radius: 0px;
  box-sizing:border-box;
  margin-top:20px;
  clear: both;
  font-size: 15px;
  font-weight: 600;
  line-height: 50px;
}

.text-button:hover{
  background: transparent;
  color: #000080;
  border:none;
}

.text-button svg{
  width:auto;
  height: 19px;
  margin-right: 5px;
  margin-top: auto;
  margin-bottom: auto;
  position: relative;
  display: inline-block;
  fill: #000080;
}

.text-button:hover svg{
  fill: #000080;
}

  


::-moz-selection { background: #0C599B; }
::selection { background: #0C599B; }


.main {
    overflow: hidden;
    display: block;
    position: relative;
    height: auto;
    padding-bottom: 35px;
    background: #FFF;
    margin-top: 60px;
}


.main-user {
    overflow: hidden;
    display: block;
    position: relative;
    height: auto;
    min-height: calc(100vh - 60px);
    padding: 0px;
    background: #f9f9fa;
    padding-bottom: 35px;
    margin-top: 60px;
}



/**************** USER ****************/


.u-container{
  width:100%;
  height: auto;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-top: 35px;
  padding-left:10px;
  padding-right:10px;
}

.page-title{
  width:100%;
  height: auto;
  margin-bottom: 35px;
  padding-left: 5px;
  padding-right: 5px;
}

.page-title h2{
  font-size: 20px;
  font-weight: bold;
  line-height: 25px;
  color: #18253b;
}


.flash-message{
  width: calc(100vw - 20px) !important;
}




.norecords{
  width: 100%;
  height:auto;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  margin-top: 0px;
  margin-bottom: 0px;
  padding-bottom: 50px;
  float: left;
  border:1px solid #e5e7ea;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
  background: #FFF;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.norecords .norecords-text{
  text-align: center;
  margin-top: 15px;
  height: auto;
}

.norecords .norecords-text h4{
  font-size: 20px;
  font-weight: bold;
  line-height: 35px;
  text-align: center;
  color:#89a1d1;
}

.norecords .norecords-text p{
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  color: #c3cfe9;
  margin-top: 15px;
}

.norecords img{
  width: auto;
  height:180px;
  margin-top: 50px;
}

.norecords-nb{
  width: 100%;
  height:auto;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 50px;
  float: left;
  overflow: hidden;
  background: #FFF;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
  
}

.norecords-nb .norecords-text{
  text-align: center;
  margin-top: 15px;
  height: auto;
}

.norecords-nb .norecords-text h4{
  font-size: 20px;
  font-weight: bold;
  line-height: 35px;
  text-align: center;
  color:#89a1d1;
}

.norecords-nb .norecords-text p{
  font-size: 15px;
  line-height: 20px;
  text-align: center;
  color: #c3cfe9;
  margin-top: 15px;
}

.norecords-nb img{
  width: auto;
  height:180px;
  margin-top: 50px;
}





.filter-cell{
  width:100%;
  height:50px;
  margin-top:15px;
}

.filter-cell input{
  width:100%;
  height: 50px;
  line-height: 50px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 15px;
  color:#556071;
}

.filter-cell input:focus{
  width:100%;
  height: 50px;
  line-height: 50px;
  border: 1px solid #18253b;
  border-radius: 10px;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 15px;
  color:#18253b;
}

.filter-cell  select{
  width:100%;
  height: 50px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 15px;
  color:#556071;
}



/*** POPUP ***/


.top-popup {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: opacity 500ms;
  opacity: 0;
  z-index: 2000;
}

.top-popup .top-popup-background{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
  transition: opacity 500ms;
  z-index: -100;
}

.top-popup:target {
  visibility: visible;
  opacity: 1;
}

.top-popup .close {
  width: 20px;
  height: 20px;
  position: absolute;
  top: 25px;
  right: 25px;
  transition: all 200ms;
  text-decoration: none;
  cursor: pointer;
}


.top-popup .close svg{
  width:20px;
  height: auto;
  margin:0px;
  fill: #556071;
}

.top-popup .close:hover svg{
  fill: #18253b;
}




.lr-greska {
  display: block;
  width: 100%;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  font-size: 0.7rem;
  color: #ac5c50;
  line-height: 20px;
  margin-top: 0;
}

.lr-greska::before {
  content: "";
  float: left;
  width: 10px; /* same as padding-left */
  height: 0;
  shape-outside: inset(0); /* modern browsers only */
}








/**************** HEADER ****************/


.header-user{
  width:100%;
  height:60px;
  background:#FFF;
  margin:0px;
  padding:0px;
  top:0;
  left: 0;
  border-bottom: 1px solid #e5e7ea;
  position: fixed;
  z-index: 2000;
}


.header-user .header-container{
  height:60px;
  padding-left:18.5px;
  padding-right:18.5px;
  margin:0px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-user .header-container .header-logo{
  display: flex;
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
}

.header-user .header-container .header-logo img{
  height:25px;
  margin-top: 18.5px;
}


.header-user .header-container .nav-container{
  width:100%;
  display: none;
}

.header-user .header-container .nav-container .nav-list{
  display: flex;
  margin: 0;
  padding: 0;
  height: 100%;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}

.header-user .header-container .nav-container .nav-list{
  align-items: center;
}

.header-user .header-container .nav-container .nav-list:first-of-type {
    margin-left: 2.4rem;
}

.header-user .header-container .nav-container .nav-list a{
  font-size: 15px;
  line-height: 60px;
  font-style: normal;
  color: #556071;
  cursor: pointer;
  text-decoration: none;
  margin: 0 1.2rem;
  display: inline-block;
}

.header-user .header-container .nav-container .nav-list a:hover{
  color: #18253b; 
}



.header-user .header-container .login-container{
  width:auto;
  height:60px;
  display: flex;
}

.header-user .header-container .login-container .login-log{
  width:auto;
  height:60px;
  padding:0px;
  display: flex;
}

.header-user .header-container .login-container .login-log .icon{
  width: 19px;
  height:auto;
  margin-right: 10px;
  position: relative;
}

.header-user .header-container .login-container .login-log .icon svg{
  width: 100%;
  height:auto;
  top:50%;
  transform: translate(0%, -50%);
  fill: #556071;
  position: absolute;
}

.header-user .header-container .login-container .login-reg{
  width:auto;
  height:60px;
  padding: 0px;
  display: none;
}

.header-user .header-container .login-container .login-span{
  width:auto;
  height:60px;
  padding-left: 20px;
  padding-right: 20px;
  display: none;
  line-height: 60px;
}

.header-user .header-container .login-container .login-span span{
  line-height: 60px;
  color: #556071;
}

.header-user .header-container .login-container a{
  font-size: 14px;
  line-height: 60px;
  font-style: normal;
  color: #556071;
  cursor: pointer;
  text-decoration: none;
}

.header-user .header-container .login-container a:hover{
  color: #18253b; 
}

.header-user .header-container .login-container a:hover svg{
  fill: #18253b; 
}






.header-user .header-container .header-user-container{
  width:auto;
  height:60px;
  padding: 0px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}

.header-user .header-container .header-user-container a{
  font-size: 15px;
  line-height: 60px;
  font-style: normal;
  color: #556071;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

.header-user .header-container .header-user-container a:hover{
  color: #18253b; 
}



.header-user .header-container .header-user-container .n-indicator{
  min-width: 10px;
  height: auto;
  padding: 3px 5px;
  line-height: 12px;
  position: absolute;
  margin-top:-32px;
  margin-left:15px;
  background: red;
  color: #FFF;
  text-align: center;
  font-size: 10px;
  border-radius: 50%;
  border: 1.5px solid #FFF;
}

.header-user .header-container .header-user-container .header-user-noti{
  width:auto;
  height:23px;
  line-height: 23px;
  margin-left:15px;
  margin-right: 0px;
  margin-top: 0px;
  padding-left: 15px;
  padding-right: 15px;
  border-left:1px solid #EEE;
  border-right:1px solid #EEE;
  font-size: 22px;
  font-weight: bold;
  color: #646464;
  position: relative;
}


.header-user .header-container .header-user-container .header-user-message{
  width:23px;
  height:23px;
  line-height: 23px;
  margin: 0px;
  padding: 0px;
  font-size: 22px;
  font-weight: bold;
  fill: #556071;
  position: relative;
}

.header-user .header-container .header-user-container .header-user-message svg{
  width:18px;
  height:18px;
  margin: 2.5px;
  fill: #18253b;
}

.header-user .header-container .header-user-container .header-user-message svg:hover{
  fill: #18253b;
}


.header-user .header-container .header-user-container .header-user-car{
  width:23px;
  height:23px;
  line-height: 23px;
  margin-top: 0px;
  font-size: 23px;
  font-weight: bold;
  position: relative;
}

.header-user .header-container .header-user-container .header-user-car svg{
  width:20px;
  height:20px;
  margin:1.5px;
  fill: #18253b;
}

.header-user .header-container .header-user-container .header-user-car svg:hover{
  fill: #18253b;
}



.header-user .header-container .header-user-container .header-user-profile{
  display: none;
}





.header-user .header-container .header-user-container .header-user-hambu{
  width:23px;
  height: 23px;
  margin-left:15px;
}

.header-user .header-container .header-user-container .header-user-hambu svg{
  width:20px;
  height:20px;
  margin:1.5px;
  fill: #18253b;
}

.header-user .header-container .header-user-container .header-user-hambu svg:hover{
  fill: #18253b;
}



.header-user .header-container .opened{
  left:0%;
}

.header-user .header-container .closed{
  left:100% !important;
}



.header-user .header-container .header-user-navigation{
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 2000;
  top: 0;
  background-color: #FFF;
  border-left: 1px solid #e5e7ea;
  overflow-y: scroll;
  transition: 1s;
}



.header-user .header-container .header-user-navigation .user-navigation-head {
  width: 100%;
  height:60px;
  position:relative;
  margin-top:0px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e5e7ea;
}

.header-user .header-container .header-user-navigation .user-navigation-head .header-title {
  width: 100%;
  height:60px;
  line-height: 60px;
  padding: 0 18.5px;
}

.header-user .header-container .header-user-navigation .user-navigation-head .header-title h3{
  line-height: 60px;
}

.header-user .header-container .header-user-navigation .close-icon{
  width:23px;
  height:23px;
  position: relative;
  margin-top:18.5px;
  margin-right:18.5px;
}

.header-user .header-container .header-user-navigation .close-icon svg{
  width:20px;
  height:20px;
  margin:1.5px;
  padding: 0px;
  fill: #556071;
}


.header-user .header-container .header-user-navigation .header-user-profile{
  width:auto;
  height:70px;
  line-height: 40px;
  margin: 0px;
  padding:15px 18.5px;
  position: relative;
  display: flex;
  justify-content: space-between;
  display: block;
  border-bottom: 1px solid #e5e7ea;
}


.header-user .header-container .header-user-navigation .header-user-profile .header-user-profile-content{
  height:40px;
  line-height: 40px;
  margin: 0px;
  padding: 0px;
  font-weight: bold;
  color: #18253b;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.header-user .header-container .header-user-navigation .header-user-profile .header-user-profile-content .user-profile-img{
  width:40px;
  height:40px;
  position: absolute;
  top:0;
  left: 0;
}

.header-user .header-container .header-user-navigation .header-user-profile .header-user-profile-content .user-profile-img img{
  width:40px;
  height:40px;
  margin-bottom:0px;
  margin-right: 10px;
  border-radius: 50%;
  border: none;
}


.header-user .header-container .header-user-navigation .header-user-profile .header-user-profile-content span{
  line-height: 40px !important;
  padding-left: 50px;
}



.header-user .header-container .header-user-navigation .user-navigation-content {
  width: 100%;
  height:auto;
  position:absolute;
  margin-top:0px;
}


.header-user .header-container .header-user-navigation .user-navigation-content a{
  font-size: 15px;
  line-height: 50px;
  font-style: normal;
  color: #556071;
  cursor: pointer;
  text-decoration: none;
}

.header-user .header-container .header-user-navigation .user-navigation-content a:hover{
  color: #18253b; 
}

.header-user .header-container .header-user-navigation .user-navigation-content .credits-link{
  width: 90%;
  height:50px;
  text-align: left;
  margin-left:5%;
  margin-top: 15px;
  padding: 0 5%;
  background: #e5e7ea;
  display: flex;
}

.header-user .header-container .header-user-navigation .user-navigation-content .credits-link .icon{
  width: 20px;
  height:auto;
  margin-right: 15px;
  position: relative;
}

.header-user .header-container .header-user-navigation .user-navigation-content .credits-link .icon svg{
  width: 100%;
  height:auto;
  top:50%;
  transform: translate(0%, -50%);
  fill: #18253b;
  position: absolute;
}

.header-user .header-container .header-user-navigation .user-navigation-content .link{
  width: 90%;
  height:50px;
  text-align: left;
  margin-left:5%;
  display: flex;
}

.header-user .header-container .header-user-navigation .user-navigation-content .link .icon{
  width: 18px;
  height:auto;
  margin-right: 15px;
  position: relative;
}

.header-user .header-container .header-user-navigation .user-navigation-content .link .icon svg{
  width: 100%;
  height:auto;
  top:50%;
  transform: translate(0%, -50%);
  fill: #18253b;
  position: absolute;
}

.header-user .header-container .header-user-navigation .user-navigation-content .info-span{
  width: 100%;
  height:40px;
  margin-top:15px;
  padding-left: 5%;
  text-align: left;
  background: #e5e7ea;
  line-height: 40px;
}

.header-user .header-container .header-user-navigation .user-navigation-content .info-span span{
  font-size: 12px;
  color: #646464;
  text-transform: uppercase;
}









/**************** USER - PROMOTIONS ACTIVE AND INACTIVE ****************/

.prom-content{
  width:100%;
  height:auto;
  position: relative;
  display: block;
  margin-top: 0px;
  padding: 0px;
}

.prom-content .prom-content-tabs{
  width:100%;
  height:50px;
  margin:0px;
  margin-bottom: -1px;
  padding: 0px;
  z-index: 10;
  position: relative;
}

.prom-content .prom-content-tabs a{
  display: inline-block;
  text-decoration: none;
}

.prom-content .prom-content-tabs a:hover{
  color: #000;
}

.prom-content .prom-content-tabs .prom-tab{
  width:auto;
  height:50px;
  line-height: 50px;
  position: relative;
  margin-left:0px;
  margin-right: 10px;
  margin-bottom: 0px;
  padding-left:20px;
  padding-right:20px;
  display: flex;
  cursor: pointer;
  background: #E5E7EA;
  border-top: 1px solid #E5E7EA;
  border-bottom: none;
  border-left: 1px solid #E5E7EA;
  border-right: 1px solid #E5E7EA;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.prom-content .prom-content-tabs .prom-tab:hover{
  background: #f9f9fa;
}

.prom-content .prom-content-tabs .prom-tab .icon{
  width: 18px;
  height:auto;
  margin-right: 10px;
  position: relative;
}

.prom-content .prom-content-tabs .prom-tab .icon svg{
  width: 100%;
  height:auto;
  top:50%;
  transform: translate(0%, -50%);
  fill: #18253b;
  position: absolute;
}

.prom-content .prom-content-tabs .pr-active{
  width:auto;
  height:50px;
  line-height: 50px;
  background: #FFF;
  border-top: 1px solid #E5E7EA;
  border-bottom: none;
  border-left: 1px solid #E5E7EA;
  border-right: 1px solid #E5E7EA;

}

.prom-content .prom-content-content{
  width:100%;
  height:auto;
  position: relative;
  margin-left:0px;
  margin-right: 0px;
  margin-top: 0px;
  padding: 20px 10px;
  border: 1px solid #E5E7EA;
  border-top-left-radius: 0px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}

.prom-content .prom-content-content a{
  width:100%;
  height:auto;
  text-align: center;
}

.prom-content .prom-content-content a button{
  margin-top: 0px;
  margin-bottom: 20px;
}

.prom-content .prom-content-content .prom-item{
  width:calc(50% - 5px);
  height:auto;
  position: relative;
  margin-left:0px;
  margin-right: 0px;
  margin-top: 0px;
  padding: 0px;
  border: 1px solid #E5E7EA;
  border-radius: 10px;
  background: #FFFFFF;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  overflow: hidden;
}

.prom-content .prom-content-content .prom-item a{
  text-decoration: none;
  color: #18253b;
}

.prom-content .prom-content-content .prom-item a:hover{
  text-decoration: underline;
  color: #18253b;
}

.prom-content .prom-content-content .prom-item .prom-item-car{
  width:100%;
  height:auto;
  position: relative;
  margin:0px;
  position: 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}


.prom-content .prom-content-content .prom-item .prom-item-car .prom-item-photo{
  width:100%;
  height:auto;
  position: relative;
  margin: 0px;
  padding:0px;

}

.prom-content .prom-content-content .prom-item .prom-item-car .prom-item-photo img{
  width:100%;
  height:auto;
}

.prom-content .prom-content-content .prom-item .prom-item-car .prom-item-title{
  width:auto;
  height: auto;
  min-height:40px;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
  padding-top: 5px;
  line-height: 20px;
}

.prom-content .prom-content-content .prom-item .prom-item-car .prom-item-title h5{
  line-height: 20px;
  font-weight: bold !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;        /* Limit to 2 lines */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}


.prom-content .prom-content-content .prom-item .prom-item-type{
  width:100%;
  height:auto;
  position: relative;
  margin:0px;
  padding:5px 10px;
  line-height: 20px;
}

.prom-content .prom-content-content .prom-item .prom-item-type h4{
  line-height: 20px;
}

.prom-content .prom-content-content .prom-item .prom-item-duration{
  width:100%;
  height:auto;
  position: relative;
  margin:0px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0px;
  padding-bottom: 10px;
  line-height: 20px;
  text-align: left;
}

.prom-content .prom-content-content .prom-item .prom-item-duration h4{
  line-height: 80px;
}

.prom-content .prom-content-content .prom-item .prom-item-duration .h-zavrsene{
  margin-right: 50px;
}

.prom-content .prom-content-content .prom-item .prom-item-action{
  width:100%;
  height:auto;
  position: relative;
  margin:0px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0px;
  padding-bottom: 10px;
  line-height: 20px;
  text-decoration: underline;
}

.user-promotions-nav a{
  width:auto;
  height:auto;
  margin-right: 15px;
  padding:15px;
  background: #EEEEEE;
  line-height: 50px;
  text-decoration: none;
}

.user-promotions-nav a:hover{

  background: #646464;
  color: #FFF;
}










/**************** USER - ADD CREDITS****************/

.add-content{
  width:100%;
  height:auto;
  position: relative;
  display: block;
  margin-top: 0px;
  padding: 0px;
}


.add-content .add-content-tabs{
  width:100%;
  height:50px;
  margin:0px;
  margin-bottom: -1px;
  padding: 0px;
  z-index: 10;
  position: relative;
  display: flex;
}

.add-content .add-content-tabs a{
  display: inline-block;
  text-decoration: none;
}

.add-content .add-content-tabs a:hover{
  color: #000;
}

.add-content .add-content-tabs .credits-tab{
  width:auto;
  height:50px;
  line-height: 50px;
  position: relative;
  margin-left:0px;
  margin-right: 10px;
  margin-bottom: 0px;
  padding-left:10px;
  padding-right:10px;
  display: flex;
  cursor: pointer;
  background: #E5E7EA;
  border-top: 1px solid #E5E7EA;
  border-bottom: none;
  border-left: 1px solid #E5E7EA;
  border-right: 1px solid #E5E7EA;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}


.add-content .add-content-tabs .credits-tab:hover{
  background: #f9f9fa;
}

.add-content .add-content-tabs .credits-tab .icon{
  width: 18px;
  height:auto;
  margin-right: 10px;
  position: relative;
}

.add-content .add-content-tabs .credits-tab .icon svg{
  width: 100%;
  height:auto;
  top:50%;
  transform: translate(0%, -50%);
  fill: #18253b;
  position: absolute;
}

.add-content .add-content-tabs .cr-active{
  width:auto;
  height:50px;
  line-height: 50px;
  background: #FFF;
  border-top: 1px solid #E5E7EA;
  border-bottom: none;
  border-left: 1px solid #E5E7EA;
  border-right: 1px solid #E5E7EA;

}

.add-content .add-content-content{
  width:100%;
  height:auto;
  position: relative;
  margin-left:0px;
  margin-right: 0px;
  margin-top: 0px;
  padding: 20px 10px;
  border: 1px solid #E5E7EA;
  border-top-left-radius: 0px;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  background: #FFFFFF;
}

.add-content .add-content-content h3{
  font-size: 18px;
}

.add-content .add-content-content .content-dscr{
  margin-top:15px;
}


.add-content .add-content-content button{
  margin-top: 50px;
  margin-bottom: 0px;
}

.add-content .add-content-content .cr-active{
  display: block !important;
}


.add-content .add-content-content .credits-wire{
  width:100%;
  margin-top: 0px;
  padding: 10px;
  display: none;
}

.add-content .add-content-content .credits-wire img{
  width:100%;
  margin-top: 50px;
}

.popup-fileupl {
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50vh;
  transform: translateY(-50%);
  padding: 20px;
  background: #fff;
  border-top: 1px solid #E5E7EA;
  border-radius: 10px;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup-fileupl h3 {
  width: calc(100% - 40px);
  line-height: 30px;
  font-size: 18px;
}

.popup-fileupl .content {
  width: 100%;
  margin-top: 20px;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  gap: 20px;
}

.popup-fileupl .content a{
  width: 270px;
  height:50px;
  float: left;
  text-decoration: none;
}

.popup-fileupl .content a:hover{
  color: #FFF;
}

.popup-fileupl .content button{
  margin:0px;
}

.popup-fileupl .popup-fileupl-form{
    width: 100%;
    height: auto;
    margin-top: 30px;
  }

.popup-fileupl .popup-fileupl-form label{
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: center;
    background-color: #FFF;
    color:#556071;
    border: 2px dashed #e5e7ea;
    cursor: pointer;
    position: relative;
  }

.popup-fileupl .popup-fileupl-form .disabled-label {
    pointer-events: none;
    opacity: 0.8;
  }
.popup-fileupl .popup-fileupl-form label:hover{
  border: 2px dashed #18253b;
  color:#18253b;
}






.add-content .add-content-content .credits-credit{
  width:100%;
  margin-top: 0px;
  padding: 10px;
  display: none;
}

.add-content .add-content-content .form-group{
  margin-top:30px;
}

.add-content .add-content-content .credits-credit .credits-select-amount{
  width:100%;
  height:auto;
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.add-content .add-content-content .credits-credit .credits-select-amount .credits-select-item{
  width:calc(50% - 5px);
  height: auto;
  margin: 0px;
}

.add-content .add-content-content .credits-credit .credits-select-amount .credits-select-item label{
  width:100%;
  height:70px;
  position:relative;
  padding: 15px 10px;
  box-sizing: border-box;
  border: 1px solid #E5E7EA;
  border-radius: 10px;
  cursor: pointer;
}

.add-content .add-content-content .credits-credit .credits-select-amount .credits-select-item label:hover{
  border: 1px solid #000080;
  background: #f9fcff;
}

.add-content .add-content-content .credits-credit .credits-select-amount .credits-select-item input[type="radio"]:checked + label {
  border: 1px solid #000080;
  background: #000080;
  color:#FFF !important;
}

.add-content .add-content-content .credits-credit .credits-select-amount .credits-select-item input[type="radio"]:checked + label h3 {
  color:#FFF !important;
}

.add-content .add-content-content .credits-credit .credits-select-amount .credits-select-item input[type="radio"]:checked + label svg {
  fill:#FFF !important;
}

.add-content .add-content-content .credits-credit .credits-select-amount .credits-select-item .credit-icon{
  width: 25%;
  height:40px;
  margin: 0px;
  padding-right: 10px;
  position: relative;
  border-right: 1px solid #E5E7EA;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.add-content .add-content-content .credits-credit .credits-select-amount .credits-select-item .credit-price{
  width: 75%;
  height:70px;
  margin: 0px;
  padding:15px 10px;
  top:0;
  right: 0;
  position: absolute;

}

.add-content .add-content-content .credits-credit .credits-select-amount .credits-select-item .credit-price h3{
  line-height: 20px;
  font-size: clamp(12px, 3vw, 15px);
  font-weight: 600;
  text-align: left;
}

.add-content .add-content-content .credits-credit .credits-select-amount .credits-select-item .icon{
  width: 25px;
  height:25px;
  margin:0px;
  position: absolute;
  top:50%;
  transform: translate(0%, -50%);
}

.add-content .add-content-content .credits-credit .credits-select-amount .credits-select-item .icon svg{
  width: 100%;
  height:auto;
  top:50%;
  transform: translate(0%, -50%);
  fill: #18253b;
  position: absolute;
}


.add-content .add-content-content .credits-credit .credits-select-amount .credits-select-item input{
  width: 30px;
  height: 30px;
  position: absolute;
  display: none;
}

.add-content .add-content-content .credits-credit .credits-select-amount  input:checked .credits-select-item {
  background-color: #2196F3;
}

.add-content .add-content-content .credits-credit .credits-select-amount .credits-select-item p{
  line-height: 20px;
  margin-left:10px;
  display: inline-block;
}

.add-content .add-content-content .credits-credit .credits-select-amount .credits-select-item h3{
  line-height: 30px;
  margin-left:10px;
  margin-top: 0px;
  text-align: center;
  display: inline-block;
}

.add-content .add-content-content .payment-content {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;

}

.add-content .add-content-content .payment-amount-content {
  width: 100%;
  padding: 10px;
}

.add-content .add-content-content .payment-form-content {
  width: 100%;
  padding: 10px;
}

.add-content .add-content-content .payment-form-content input{
  width:100%;
  height: 50px;
  line-height: 30px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.add-content .add-content-content .payment-form-content label{
  width:100%;
  line-height: 30px;
  margin-top: 10px;
  padding-left: 10px;
  font-size: 14px;
  color:#556071;
}


.add-content .add-content-content .payment-form-content input:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.add-content .add-content-content .payment-form-content input[type="text"]:valid {
  background-color: #FFF;
  background: #FFF;
}

.add-content .add-content-content .payment-form-content input:not(:placeholder-shown) {
  border: 1px solid #18253b;
  color:#18253b;
}

.add-content .add-content-content .payment-form-content button{
  margin-top: 20px;
  margin-bottom: 0px;
}

.add-content .add-content-content #payment-form {
  width: 100%;
  margin: 0px;
  padding: 0px;
  font-size: 14px;
}

/* Container styling */
#card-number, #card-expiry, #card-cvc {
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding: 10px;
  height: 50px;
  line-height: 30px;
  margin-bottom: 12px;
  background: #FFF;
  transition: all 0.3s ease;
  color:#556071;
}

/* Focus state */
.StripeElement--focus {
  border-color: #18253b !important;
  box-shadow: 0 0 0 1px #18253b;
}

/* Complete state */
.StripeElement--complete {
  border-color: #18253b !important;
}

/* Invalid state */
.StripeElement--invalid {
  border-color: #e3342f !important;
}


.add-content .add-content-content .credits-credit .personal-info-card{
  width:450px;
  height: 350px;
  position:relative;
  margin-top: 50px;
  float:left;
  padding: 0px;
  box-sizing: border-box;
}

.add-content .add-content-content .credits-credit .personal-info-card h3{
  font-size: 1.1rem;
  font-weight: bold;
}

.add-content .add-content-content .credits-credit .personal-info-card p{
  margin-top:15px;
}

.add-content .add-content-content .credits-credit .personal-info-card .form-cell{
  width:430px;
  height:50px;
  margin:10px;
  float: left;
  position:relative;
  box-sizing: border-box;
}


.add-content .add-content-content .credits-credit .personal-info-card input{
  width:100%;
  height: 50px;
  border: 1px solid #EEE;
  border-radius: 5px;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 0.8rem;
  color:#646464;
}



.add-content .add-content-content .credits-credit .card-info{
  width:450px;
  height: 200px;
  position:relative;
  margin-top: 50px;
  padding: 0px;
  float:left;
  box-sizing: border-box;
}

.add-content .add-content-content .credits-credit .card-info h3{
  font-size: 1.1rem;
  font-weight: bold;
}

.add-content .add-content-content .credits-credit .card-info p{
  margin-top:15px;
}

.add-content .add-content-content .credits-credit .card-info .form-cell{
  width:430px;
  height:50px;
  margin:10px;
  float: left;
  position:relative;
  box-sizing: border-box;
}


.add-content .add-content-content .credits-credit .card-info input{
  width:100%;
  height: 50px;
  border: 1px solid #EEE;
  border-radius: 5px;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 0.8rem;
  color:#646464;
}




.add-content .add-content-content .credits-sms{
  width:100%;
  margin-top: 30px;
  display: none;
}

.add-content .add-content-content .credits-sms .telecom{
  width:100%;
  height:280px;
  margin-top: 50px;
}


.add-content .add-content-content .credits-sms .telecom img{
  height:40px;
  margin-top:0px;
  margin-bottom: 20px;
}

.add-content .add-content-content .credits-sms .telecom h3{
  line-height: 30px;
}

.add-content .add-content-content .credits-sms .telecom p{
  line-height: 20px;
}

.add-content .add-content-content .credits-sms .telecom .telecom-option{
  width:430px;
  height:120px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 30px;
  border: 1px solid #EEE;
  float: left;
  box-sizing: border-box;
}

.add-content .add-content-content .credits-sms .telecom .telecom-option-left{
  width:120px;
  height:120px;
  margin: 0px;
  padding: 15px;
  float: left;
  box-sizing: border-box;
  text-align: center;
  line-height: 20px;
  border-right: 1px solid #EEE;
}

.add-content .add-content-content .credits-sms .telecom .telecom-option-left svg{
  margin-top: 5;
  margin-bottom: 15px;
}


.add-content .add-content-content .credits-sms .telecom .telecom-option-right{
  width:308px;
  height:120px;
  margin: 0px;
  padding: 15px;
  float: left;
  box-sizing: border-box;
  line-height: 20px;
}

.add-content .add-content-content .credits-sms .telecom .telecom-option-right p{
  margin-top:25px;
}

.add-content .add-content-content .credits-sms .credits-sms-confirm{
  width:100%;
  height:250px;
  margin-top: 50px;
}

.add-content .add-content-content .credits-sms .credits-sms-confirm input{
  width:100%;
  height: 50px;
  border: 1px solid #EEE;
  border-radius: 5px;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 0.8rem;
  color:#646464;
}

.add-content .add-content-content .credits-sms .credits-sms-confirm p{
  line-height: 30px;
}








/**************** USER - BLOCKED USERS ****************/


.bloc-content{
  width:100%;
  height:auto;
  position: relative;
  margin-top:0px;
  float: left;
  padding: 0px;
}

.bloc-content .blocked-users{
  width:100%;
  height:auto;
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
  padding: 20px 10px;
  background: #FFF;
  border-radius: 10px;
  border: 1px solid #E5E7EA;
  overflow: hidden;
}

.bloc-content .blocked-users a{
  display: block;
}

.bloc-content .blocked-users .user-item{
  width: 270px;
  height:auto;
  position: relative;
  margin:20px;
  padding-bottom: 0px;
  float: left;
  box-sizing: border-box;
  overflow: hidden;
}

.bloc-content .blocked-users .user-item .remove{
  width: 30px;
  height: 30px;
  position: absolute;
  top:0;
  right: 0;
  background: #EEE;
  text-align: center;
  z-index: 1000;
  cursor: pointer;
}

.bloc-content .blocked-users .user-item .remove span{
  font-size: 16px;
  line-height: 30px;
}

.bloc-content .blocked-users .user-item-dscr {
  width:100%;
  height:150px;
  padding: 0px;
  border:1px solid #E5E7EA;
  position: relative;
  border-radius: 10px;
  text-align: center;
}


.bloc-content .blocked-users .user-item-dscr h3{
  font-size: 18px;
  font-weight: bold;
  line-height: 40px;
  height: 40px;
  margin-top:50px;
}

.bloc-content .blocked-users .user-item-dscr .actions {
  width:auto;
  height:40px;
  margin-top: 0px;
  margin-left:auto;
  margin-right: auto;
  padding: 0px;
  display: flex;
  justify-content: center;
  text-align: center;
}


.bloc-content .blocked-users .user-item-dscr .actions .block{
  line-height: 50px;
  border:none;
  margin:0px;
  padding: 0px;
  color: red;
  background: none;
}

.bloc-content .blocked-users .user-item-dscr .actions .block:hover{
  line-height: 50px;
  border:none;
  background: #FFF;
  text-decoration: underline;
  color: red;
}


.bloc-content .blocked-users .user-item-img{
  width:100px;
  height:100px;
  position: relative;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -50px;
  z-index: 10;
}

.bloc-content .blocked-users .user-item-img img{
  width: 100%;
  height:auto;
  position:absolute;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  border-radius: 50%;
  border: 1px solid #EEE;
  background-color: #EEE;
}









/**************** USER - EDIT CAR ****************/


.editc-content{
  width:100%;
  height:auto;
  position: relative;
  display: block;
  margin:0px;
  padding: 20px;
  background: #FFF;
  border-radius: 10px;
  border: 1px solid #E5E7EA;
}

.editc-content .car-edit {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

}

.editc-content .car-edit h3{
  width:100%;
  height: 30px;
  line-height: 30px;
  margin-top: 20px;
  font-size: 18px;
}


.editc-content .car-edit p{
  width: 100%;
  margin-top: 20px;
}

.editc-content .car-edit .form-space{
  width: 100%;
  height: 20px;
}

.editc-content .car-edit  .filter-cell{
  width:100% !important;
  height: auto !important;
  position: relative;
  margin-top: 20px;
}

.editc-content .car-edit  .filter-cell label{
  width:100%;
  line-height: 30px;
  padding-left: 10px;
  font-size: 14px;
  color:#556071;
}

.editc-content .car-edit  .filter-cell label .tooltip-icon {
    width: 11.5px;
    height: 11.5px;
    color:#556071;
    border:1px solid #556071;
    text-align: center;
    font-size: 9px;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    display: inline-block;
    margin-top: 5px;
    margin-left:5px;
    line-height: 10px;

}

.editc-content .car-edit  .filter-cell label .tooltip-text {
    display: none;
    position: absolute;
    background-color: #556071;
    color: #fff;
    padding: 10px;
    font-size: 12px;
    line-height: 15px;
    border-radius: 10px;
    top: 20px;
    left: 10px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    width: 400px; /* Set maximum width */
    white-space: normal; /* Allow text to wrap */
}

.editc-content .car-edit  .filter-cell label .tooltip-icon:hover + .tooltip-text {
    display: block;
    opacity: 1;
}

.editc-content .car-edit .filter-cell input{
  width:100%;
  height: 50px;
  line-height: 30px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.editc-content .car-edit .filter-cell input:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.editc-content .car-edit .filter-cell input[type="text"]:valid {
  background-color: #FFF;
  background: #FFF;
}

.editc-content .car-edit .filter-cell input:not(:placeholder-shown) {
  border: 1px solid #18253b;
  color:#18253b;
}

.editc-content .car-edit .filter-cell select{
  width:100%;
  height: 50px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.editc-content .car-edit .filter-cell select:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

/* Default state when 'none' is selected */
.editc-content .car-edit .filter-cell select:has(option:checked[value="none"]) {
  border: 1px solid #e5e7ea;
  color: #556071;
}

/* When a valid option is selected */
.editc-content .car-edit .filter-cell select:has(option:checked:not([value="none"])) {
  border: 1px solid #18253b;
  color: #18253b;
}



.editc-content .car-edit .novi-greska{
  width:100%;
  height: 20px;
  line-height: 20px;
  margin-top: 0px;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 0.7rem;
  background:;
  color:#ac5c50;
  position: absolute;
  bottom:-20px;
}

.editc-content .car-edit .in-greska{
  border: 1px solid #ac5c50 !important;
  
}

.editc-content .car-edit .in-greska::placeholder{
  
}


.editc-content .car-edit .filter-cell-pr{
  width:60% !important;
  height:50px;
  display: flex;
  justify-content:flex-start;
  flex-wrap: wrap;
  position: relative;
}

.editc-content .car-edit .filter-cell-pr .euro-icon{
  height: 30px;
  position: absolute; 
  left: 10px; 
  font-size: 14px; 
  line-height: 30px;
  margin-top: 41px;
}


.editc-content .car-edit .filter-cell-normal{
  display: none;
}


.editc-content .car-edit .filter-cell-electro{
  display: none;
}

.editc-content .car-edit .filter-cell-lapo{
  width:calc(50% - 5px) !important;
  height:50px;
  display: flex;
  justify-content:flex-start;
  flex-wrap: wrap;
}

.editc-content .car-edit .filter-cell-third{
  width:32% !important;
  height:50px;
  display: flex;
  justify-content:flex-start;
  flex-wrap: wrap;
}





.editc-content .car-edit .filter-cell-price{
  width:calc(40% - 10px) !important;
  height:50px;
  display: flex;
  justify-content:flex-start;
  flex-wrap: wrap;
}

.editc-content .car-edit .filter-cell-price .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

.editc-content .car-edit .filter-cell-price .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.editc-content .car-edit .filter-cell-price .slider {
    position: absolute;
    cursor: pointer;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7ea;
    transition: 0.3s;
    border-radius: 25px;
}

.editc-content .car-edit .filter-cell-price .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    top:50%;
    transform: translate(0%,-49%);
    background-color: #FFF;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.editc-content .car-edit .filter-cell-price input:checked + .slider {
    background-color: #000080;
}

.editc-content .car-edit .filter-cell-price input:checked + .slider:before {
    transform: translate(24px,-49%);
    background: #FFF;
}

.editc-content .car-edit .filter-cell-textarea{
  width:100%;
  height:auto;
  margin-top:15px;
  overflow: hidden;
}

.editc-content .car-edit .filter-cell-textarea label{
  width:100%;
  line-height: 30px;
  padding-left: 10px;
  font-size: 14px;
  color:#556071;
}

.editc-content .car-edit .filter-cell-textarea textarea{
  width:100%;
  min-height: 100px;
  line-height: 30px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.editc-content .car-edit .filter-cell-textarea textarea:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.editc-content .car-edit .filter-cell-textarea textarea:valid {
  background-color: #FFF;
  background: #FFF;
}

.editc-content .car-edit .filter-cell-textarea textarea:not(:placeholder-shown) {
  border: 1px solid #18253b;
  color:#18253b;
}

.editc-content .car-edit .filter-cell-textarea .quill-toolbar{
 
  border-top: 1px solid #e5e7ea;
  border-bottom: 0px solid #e5e7ea;
  border-left: 1px solid #e5e7ea;
  border-right: 1px solid #e5e7ea;
  border-top-left-radius: 10px;;
  border-top-right-radius: 10px;
  color:#556071;
  background: #f9f9fa;
}

.editc-content .car-edit .filter-cell-textarea .quill-textarea{
  min-height: 100px;
  height: auto;
  border-top: 0px solid #e5e7ea;
  border-bottom: 1px solid #e5e7ea;
  border-left: 1px solid #e5e7ea;
  border-right: 1px solid #e5e7ea;
  border-bottom-left-radius: 10px;;
  border-bottom-right-radius: 10px;
  font-size: 14px;
  color:#556071;
  background: #f9f9fa;
}


.editc-content .car-edit .filter-cell-textarea .quill-textarea p{
  font-size: 14px;
}

.editc-content .car-edit .filter-cell-textarea .quill-textarea:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.editc-content .car-edit .filter-cell-textarea .quill-textarea:valid {
  background-color: #FFF;
  background: #FFF;
}


.editc-content .car-edit .filter-cell-textarea .ql-toolbar{
  display: flex;
}

.editc-content .car-edit .filter-cell-textarea .ql-formats{
  display: flex;
}

.editc-content .car-edit .filter-cell-textarea .ql-formats button{
  margin: 0px;
}


.editc-content .car-edit .new-car-checkboxes-button{
  width:100%;
  height:60px;
  line-height: 60px;
  position: relative;
  display: block;
  margin:0px;
  padding: 0px;
  border-bottom: 1px solid #e5e7ea;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

.editc-content .car-edit .new-car-checkboxes-button p{
  line-height: 20px;
  margin-top: 20px;
  color: #556071;
}


.editc-content .car-edit .new-car-checkboxes-button .icon{
  width: 15px;
  height:15px;
  margin-top: 22.5px;
  margin-left: 10px;
  position: relative;
}

.editc-content .car-edit .new-car-checkboxes-button .icon svg{
  width: 100%;
  height:auto;
  top:50%;
  transform: translate(0%, -50%);
  fill: #556071;
  position: absolute;
}

.editc-content .car-edit .new-car-checkboxes-button:hover p{
  color: #18253b;
}

.editc-content .car-edit .new-car-checkboxes-button:hover svg{
  fill: #18253b;
}

.editc-content .car-edit .new-car-checkboxes{
  width:100%;
  height:auto;
  position: relative;
  margin: 0px;
  padding: 10px;
  border-bottom: 1px solid #e5e7ea;
}

.checkboxes-security {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    display: none;
}

.checkboxes-security.show {
    max-height:2000px;
    display: flex;
}

.checkboxes-comfort {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    display: none;
}

.checkboxes-comfort.show {
    max-height:2000px;
    display: flex;
}

.checkboxes-multimedia {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    display: none;
}

.checkboxes-multimedia.show {
    max-height:2000px;
    display: flex;
}

.checkboxes-performance {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    display: none;
}

.checkboxes-performance.show {
    max-height:2000px;
    display: flex;
}

.editc-content .car-edit .new-car-checkboxes .checkboxes-row{
  width:100%;
  height:auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap:10px;
}
.editc-content .car-edit .new-car-checkboxes .checkboxes-row .checkboxes-col{
  width:calc(50% - 7.5px);
  height:auto;
  min-height: 50px;
}

.editc-content .car-edit .new-car-checkboxes input[type="checkbox"] {
  display: none;
}

.editc-content .car-edit .new-car-checkboxes label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding-left: 35px;
  padding-right: 5px;
  font-size: 14px;
  color: #18253b;
  user-select: none;
  margin:0px;
  min-height: 50px;
}

.editc-content .car-edit .new-car-checkboxes label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1px solid #18253b;
  border-radius: 4px;
  background-color: #fff;
  transition: all 0.3s ease;
  padding-left: 5px;
}

.editc-content .car-edit .new-car-checkboxes input[type="checkbox"]:checked + label::before {
  background-color: #000080;
  border: 1px solid #000080;
}

.editc-content .car-edit .new-car-checkboxes input[type="checkbox"]:checked + label::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-60%) rotate(45deg);
  width: 6px;
  height: 12px;
  border: solid #FFF;
  border-width: 0 2px 2px 0;
  transition: all 0.3s ease;
}

.editc-content .car-edit .new-car-checkboxes label:hover::before {
  background-color: #f9fcff;
  border: 1px solid #000080;
}


.editc-content .car-edit .info-slika p{
  font-size: 14px;
}






.editc-content .car-edit .photo-edit{
  width:100%;
  height:auto;
  position: relative;
  border: 2px #e5e7ea dashed;
  text-align: center;
  padding: 20px;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.editc-content .car-edit .photo-edit .image-container .image-container-image  img{
  width:213px;
  height:auto;
  position: relative;
}

.editc-content .car-edit .photo-edit .image-container {
  position: relative;
  margin: 0px;
  width: 213px;
  height: 182px;
}

.editc-content .car-edit .photo-edit .image-container .image-container-image .img-hover{
  width: 213px;
  height: 142px;
  top:0;
  left: 50%;
  -webkit-transform: translate(-50%, 0%);
  transform: translate(-50%, 0%);
  opacity:0;
  position: absolute;
  z-index: 100;
  margin: 0px;
  padding: 0px;
  background: #000;
}



.editc-content .car-edit .photo-edit .image-container .image-container-image:hover .img-hover {
  opacity: 1;
}

.editc-content .car-edit .photo-edit .image-container .image-container-action{
  width:213px;
  height: 30px;
  position: relative;
  margin-top: 5px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.editc-content .car-edit .photo-edit .image-container .image-container-action .action-featured{
  width:100px;
  height: 30px;
  text-align: center;
}



.editc-content .car-edit .photo-edit .image-container .image-container-action .action-featured input{
  display: none;
}


.editc-content .car-edit .photo-edit .image-container .image-container-action .action-featured label{
  width:100%;
  height: 30px;
  background: #FFFFFF;
  border: 1px solid #000080;
  line-height: 30px;
  color: #000080;
  font-size: 14px;
  border-radius: 15px;
  left: 0px;
  cursor: pointer;
}

.editc-content .car-edit .photo-edit .image-container .image-container-action .action-featured label:hover{
  background: #000080;
  border: 1px solid #000080;
  color: #FFF;
}

.editc-content .car-edit .photo-edit .image-container .image-container-action .action-featured input:checked + label{
  background: #000080;
  color:#FFF;
}


.editc-content .car-edit .photo-edit .image-container .image-container-action .action-trash{
  width:30px;
  height: 30px;
  text-align: center;
  background: #FFFFFF;
  color: #000080;
}

.editc-content .car-edit .photo-edit .image-container .image-container-action .action-trash .trash-icon{
  width:30px;
  height: 30px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #000080;
  line-height: 30px;
  border-radius: 15px;
  color: #000080;
  position: relative;
}

.editc-content .car-edit .photo-edit .image-container .image-container-action .action-trash .trash-icon svg{
  width:auto;
  height: 15px;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill:  #000080;
}


.editc-content .car-edit .photo-edit .image-container .image-container-action .action-trash .trash-icon:hover{
  background: #000080;
  border: 1px solid #000080;
}

.editc-content .car-edit .photo-edit .image-container .image-container-action .action-trash .trash-icon:hover svg{
  fill: #FFF;
}



.editc-content .car-edit .photo-edit .image-container .file-upload-btn {
    width: 213px;
    height: 142px;
    background-color: #FFF;
    color:#556071;
    border: 2px dashed #e5e7ea;
    cursor: pointer;
    position: relative;
  }

.editc-content .car-edit .photo-edit .image-container .file-upload-btn .btn-content{
    width: 213px;
    height: 60px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    line-height: 30px;
    position: absolute;
    top:50%;
    margin-top: -30px;
  }

.editc-content .car-edit .photo-edit .image-container .file-upload-btn .btn-content svg{
    width: 20px;
    height: 20px;
    margin: 5px;
    fill: #556071;
  }

.editc-content .car-edit .photo-edit .image-container .file-upload-btn .btn-content span{
    width: 100%;
    height: 30px;
    color: #556071;
    font-size: 14px;
  }

.editc-content .car-edit .photo-edit .image-container .file-upload-btn:hover{
  border: 2px dashed #556071;
  color:#18253b;
}

.editc-content .car-edit .photo-edit .image-container .file-upload-btn:hover svg{
  fill:#18253b;
}

.editc-content .car-edit .photo-edit .image-container .file-upload-btn:hover span{
  color:#18253b;
}

.editc-content .car-edit .photo-edit .image-container #imagesInput {
    display: none;
  }

.editc-content .car-edit .photo-edit .image-container .file-name-display {
    margin-top: 10px;
    font-size: 14px;
    color: #555;
  }












  /**************** USER - CAR LIST ****************/

.car-list-content{
  width:100%;
  height:auto;
  position: relative;
  margin-top:0px;
  float: left;
  padding: 0px 10px;
}

.car-list-content .li-active{
  display: block !important;
}

.car-list-content .content-request{
  width:100%;
  height:auto;
  position: relative;
  margin-top:10px;
  margin-bottom: 10px;
  float: left;
  padding: 10px;
  background: #F8FBFE;
  border: 1px #c3cfe9 solid;
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.car-list-content .content-request .request-icon{
  width:50px;
  height: 50px;
  margin-right: auto;
  margin-left: auto;
  margin-top: 0px;
  margin-bottom: 20px;
  position: relative;

}

.car-list-content .content-request .request-icon svg{
  width:auto;
  height: 40px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  fill: #18253B;
}

.car-list-content .content-request .request-info{
  width:auto;
  height:auto;
  position: relative;
  margin:0px;
  padding-left: 10px;
  border-left: 1px #c3cfe9 solid;
}

.car-list-content .content-request .request-info h2{
  font-size: 18px;
  line-height: 25px;
  font-weight: 500;
  color: #18253B;
}

.car-list-content .content-request .request-action{
  width:auto;
  height:auto;
  position: relative;
  margin-top: 20px;
  padding:0px;
  float: right;
  display: flex;
  justify-content: flex-end;
}

.car-list-content .content-request .request-action a{
  display: flex;
  text-decoration: none;
}



.car-list-content .content-request .request-action .request-button{
  width: 40px;
  height: 40px;
  margin: 5px;
  padding: 0px;
  position: relative;
}

.car-list-content .content-request .request-action .review-button{
  margin: 0px;
  height: 40px;
  line-height: 40px;
  padding: 0px 20px;
  position: relative;
}


.car-list-content .content-request .request-action button svg{
  width: 16px;
  height: auto;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  fill: #000080;

}

.car-list-content .content-request .request-action button:hover svg{
  fill: #ffffff;
}


.car-list-content .content-review{
  width:100%;
  height:auto;
  position: relative;
  margin-top:10px;
  margin-bottom: 10px;
  float: left;
  padding: 30px;
  background: #FFF;
  border: 1px #EEE solid;
  border-radius: 10px;
}


.car-list-content .content-review .reviews-header{
  width:50%;
  height: auto;
  margin:0px;
  padding: 0px;
  position: relative;
  display: flex;
  justify-content: space-between;
}


.car-list-content .content-review .reviews-header h3{
  font-size: 18px;
  line-height: 40px;
}

.car-list-content .content-review .reviews-header i{
  font-size: 30px;
  line-height: 40px;
}

.car-list-content .content-review .reviews-header .reviews-positive{
  width:45%;
  height: 60px;
  margin: 0px;
  padding: 10px;
  position: relative;  
  text-align: center;
  background: #e3f3e7;
  color: #5B7261;
  border: 1px solid #5B7261;
  border-radius: 5px;
  display: flex;
  cursor: pointer;
}


.car-list-content .content-review .reviews-header .reviews-positive:hover{
  width:45%;
  height: 60px;
  margin: 0px;
  padding: 10px;
  position: relative;  
  text-align: center;
  background: #5B7261;
  color: #e3f3e7;
  border: 1px solid #5B7261;
  border-radius: 5px;
  display: flex;
}



.car-list-content .content-review .reviews-header .reviews-negative{
  width:45%;
  height: 60px;
  margin: 0px;
  padding: 10px;
  position: relative;  
  text-align: center;
  background: #f1cdcd;
  color: #725252;
  border: 1px solid #725252;
  border-radius: 5px;
  display: flex;
  cursor: pointer;
}

.car-list-content .content-review .reviews-header .reviews-negative:hover{
  width:45%;
  height: 60px;
  margin: 0px;
  padding: 10px;
  position: relative;  
  text-align: center;
  background: #725252;
  color: #f1cdcd;
  border: 1px solid #725252;
  border-radius: 5px;
  display: flex;
}



.car-list-content .content-review .reviews-note{
  width:100%;
  min-height: 250px;
  margin-top:30px;
  padding: 0px;
  position: relative;
}


.car-list-content .content-review .reviews-note textarea{
  width:100%;
  min-height: 250px;
  border-radius: 5px;
  border: 1px solid #EEE;
  padding: 10px;
}






.car-list-content .content-header{
  width:100%;
  height:60px;
  position: relative;
  margin-top:0px;
  margin-bottom: 10px;
  float: left;
  padding: 0px;
  background: #FFF;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}

.car-list-content .content-header .navigation{
  width:auto;
  height:40px;
  margin-top:10px;
  margin-bottom: 10px;
  margin-left:20px;
  padding: 0px;
  display: flex;
  justify-content: space-between;
}

.car-list-content .content-header .navigation .navigation-button{
  width:auto;
  height:40px;
  margin: 0px;
  line-height: 40px;
  padding-right: 20px;
  padding-left: 0px;
  cursor: pointer;
}

.car-list-content .content-header .navigation .li-active{
  text-decoration: underline;
  font-weight: bold;
}


.car-list-content .content-header .search{
  width:auto;
  height:40px;
  margin-top:10px;
  margin-bottom: 10px;
  margin-right: 20px;
  padding: 0px;
  position: relative;
  display: flex;
}

.car-list-content .content-header .search .search-input{
  width:auto;
  height:40px;
  margin:0px;
  padding: 0px;
  position: relative;
  display: none;
}


.car-list-content .content-header .search .search-input input{
  width:250px;
  height: 40px;
  line-height: 30px;
  border-right: 0px;
  border-left: 1px solid #e5e7ea;
  border-top: 1px solid #e5e7ea;
  border-bottom: 1px solid #e5e7ea;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.car-list-content .content-header .search .search-input input:focus{
  border-right: 0px;
  border-left: 1px solid #e5e7ea;
  border-top: 1px solid #e5e7ea;
  border: 1px solid #18253b;
  color:#18253b;
}

.car-list-content .content-header .search .search-input input[type="text"]:valid {
  background-color: #FFF;
  background: #FFF;
}

.car-list-content .content-header .search .search-input input:not(:placeholder-shown) {
  border-right: 0px;
  border-left: 1px solid #18253b;
  border-top: 1px solid #18253b;
  border-bottom: 1px solid #18253b;
  color:#18253b;
}

.car-list-content .content-header .search .search-input .search-icon{
  width: 40px;
  height: 40px;
  margin: 0px;
  padding: 0px;
  background: #000080;
  border-right: 1px solid #e5e7ea;
  border-left: 0px;
  border-top: 1px solid #e5e7ea;
  border-bottom: 1px solid #e5e7ea;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  position: relative;
  cursor: pointer;
}



.car-list-content .content-header .search .search-input .search-icon svg{
  width: 20px;
  height: 20px;
  fill:#FFF;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



.car-list-content .content-header .sortby{
  width:auto;
  height: 30px;
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 0px;
  position: relative;
  display: inline-block;
}

.car-list-content .content-header .sortby .sort-button {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0px;
  margin: 0px;
  position: relative;
}

.car-list-content .content-header .sortby .sort-button:hover{
  background: none;
  border: none;
}

.car-list-content .content-header .sortby .sort-button svg {
  width: 18px;
  height:18px;
  fill: #556071;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
}

.car-list-content .content-header .sortby .sort-button:hover svg{
  fill: #18253b;
}

.car-list-content .content-header .sortby .sort-list {
  width: 300px;
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  padding: 8px;
  margin: 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.car-list-content .content-header .sortby .sort-list li {
  width: 100%;
  padding: 8px 16px;
  cursor: pointer;
  color: #18253b;
}

.car-list-content .content-header .sortby .sort-list li.active {
  background-color: #e5e7ea;
}

.car-list-content .content-header .sortby .sort-list li:hover {
  background-color: #e5e7ea;
}

.car-list-content .content-header .sortby.active .sort-list {
  display: block;
}

.car-list-content .content-header .sortby  select{
width:100%;
height: 30px;
border: 1px solid #e5e7ea;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
font-size: 14px;
color:#556071;
}

.car-list-content .content-header .sortby select:focus{
border: 1px solid #18253b;
color:#18253b;
}

.car-list-content .content-header .sortby select:has(option:checked[value="none"]) {
border: 1px solid #e5e7ea;
color: #556071;
}

.car-list-content .content-header .sortby select:has(option:checked:not([value="none"])) {
border: 1px solid #18253b;
color: #18253b;
}









.car-list-content .list-active{
  display: none;
}

.car-list-content .list-expired{
  display: none;
}

.car-list-content .list-reviews{
  display: none;
}





.car-list-content .list-item-car{
  width: 100%;
  height:auto;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  margin-top: 10px;
  margin-bottom: 10px;
  float: left;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
  background: #FFF;
}

.car-list-content .list-item-car .list-item-img{
  width: 100%;
  overflow: hidden;
  height: auto; 
  position: relative;
  float: left;
}

.car-list-content .list-item-car .list-item-img img{
  width: 100%;
  height: auto;
  display: block; /* removes inline gap from img */
  position:relative;
  top: 0;
  left: 0;
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
}


.car-list-content .list-item-car .list-item-img-3{
  display: none;
}




.car-list-content .list-item-car-add{
  width: 100%;
  height:auto;
  min-height: 200px;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  margin-top: 13px;
  margin-bottom: 13px;
  float: left;
  border:3px #e5e7ea dashed;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
  background: ;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.car-list-content .list-item-car-add svg{
  width: auto;
  height: 20px;
  margin-right: 15px;
  fill: #556071;
}

.car-list-content .list-item-car-add h3{
  color: #556071;
}

.car-list-content .list-item-car-add:hover{
  border:3px #646464 dashed;
}

.car-list-content .list-item-car-add:hover svg{
  fill: #18253b;
}

.car-list-content .list-item-car-add:hover h3{
  color: #18253b;
}

.car-list-content .list-item-car .list-item{
  width: 100%;
  height:436px;
  position: relative;
}


.car-list-content .list-item-car .list-item-hover{
  width: 100%;
  height:436px;
  top: -436px;
  background-color: rgba(0, 0, 93, 0.85);
  position: absolute;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  vertical-align: center;
  flex-wrap: wrap;
  padding: 10px;
}

.car-list-content .list-item-car .list-item-hover .item-hover-left{
  width: calc(50% - 10px);
  height:170px;
  padding-top: 0px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-right: auto;
  margin-left: auto;
}

.car-list-content .list-item-car .list-item-hover .item-hover-right{
  width: calc(50% - 10px);
  height:170px;
  padding-bottom: 0px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-right: auto;
  margin-left: auto;
}

.car-list-content .list-item-car .list-item-hover form{
  width: 100%;
}

.car-list-content .list-item-car .list-item-hover form button{
  width: 100%;
  border-radius: 25px;
}

.car-list-content .list-item-car .list-item:hover .list-item-hover{
  top:0;
}

.car-list-content .list-item-car .list-item-hover a{
  width: 100%;
  height: 50px;
}


.car-list-content .list-item-car .list-item-hover button{
  width: 100%;
  height:50px;
  background: none;
  margin-top: 0px;
  margin-bottom: 0px;
  color: #FFF;
  border: 1px solid #FFF;
  line-height: 20px;
  padding: 15px 25px;
  position: relative;
}

.car-list-content .list-item-car .list-item-hover button svg{
  width:auto;
  height: 18px;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  fill: #FFF;
}

.car-list-content .list-item-car .list-item-hover button a{
  color: #FFF;
}

.car-list-content .list-item-car .list-item-hover button:hover{
  width: 100%;
  height:50px;
  background: none;
  color: #00005d;
  border: 1px solid #FFF;
  background: #FFF;
}

.car-list-content .list-item-car .list-item-hover button:hover svg{
  fill: #00005d;
}

.car-list-content .list-item-car .list-item-hover button:hover a{
  color: #646464;
}



.car-list-content .list-item-car .list-item-dscr {
  width:100%;
  height: 200px;
  position: relative;
  float: left;
  padding: 15px;
  box-sizing: border-box;
}

.car-list-content .list-item-car .list-item-dscr .dscr-title{
  width:100%;
  min-height: 50px;
}

.car-list-content .list-item-car .list-item-dscr h3{
  font-size: 20px;
  line-height: 25px;
  font-weight: bold;
}

.car-list-content .list-item-car .list-item-dscr h4{
  font-size: 17px;
  line-height: 25px;
  font-weight: 500;
  color: #556071;
}

.car-list-content .list-item-car .list-item-dscr .price{
  font-size: 20px !important;
  font-weight: bold;
  text-align: left;
  margin-top:15px;
}

.car-list-content .list-item-car .list-item-dscr .details{
  width:100%;
  height: 50px;
  position: relative;
  float: left;
  background: #F8FBFE;
  margin-top:15px;
  padding: 15px;
  border-radius: 10px;
  display: none;
  justify-content: space-around;

}

.car-list-content .list-item-car .list-item-dscr .details .details-item{
  width: auto;
  height: 18px;
  float: left;
  line-height: 18px;
  color: #000000;
  display: flex;
  gap: 10px;
}

.car-list-content .list-item-car .list-item-dscr .details .details-item svg{
  width: auto;
  height: 18px;
  fill:#18253B;
}

.car-list-content .list-item-car .list-item-dscr .details p{
  line-height: 18px;
  font-size: 15px;
  color:#18253B;
}


.car-list-content .list-item-car .list-item-dscr .vendor {
  width:250px;
  height: auto;
  position: absolute;
  bottom: 15px;
  margin-top:15px;
  margin-left: 5px;
  padding: 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap:15px;
}


.car-list-content .list-item-car .list-item-dscr .vendor .vendor-item{
  width:auto;
  height: 16px;
  margin: 0px;
  padding: 0px;
  line-height: 16px;
  font-size: 14px;
  display: flex;
  gap: 8px;
}


.car-list-content .list-item-car .list-item-dscr .vendor .vendor-item svg{
  width: auto;
  height: 16px;
  fill:#18253B;
}

.car-list-content .list-item-car .list-item-dscr .vendor p{
  line-height: 16px;
  font-size: 14px;
  color:#18253B;
}


  /**************** .car-list-content .list-item-car{
  width: 300px;
  height:438px;
  position: relative;
  margin:0px;
  padding-bottom:0px;
  float: left;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.car-list-content .list-item-img{
  width:300px !important;
  height:200px !important;
  position: relative;
  overflow: hidden;
}



.car-list-content .list-item-img img{
  width: 100%;
  height:auto;
  position:absolute;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}

.car-list-content .list-item-car .list-item-img-3{
  display: none;
}



.car-list-content .list-item-car-add{
  width: 300px;
  height:438px;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  margin-top: 13px;
  margin-bottom: 13px;
  float: left;
  border:3px #e5e7ea dashed;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
  background: ;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.car-list-content .list-item-car-add svg{
  width: auto;
  height: 20px;
  margin-right: 15px;
  fill: #556071;
}

.car-list-content .list-item-car-add h3{
  color: #556071;
}

.car-list-content .list-item-car-add:hover{
  border:3px #646464 dashed;
}

.car-list-content .list-item-car-add:hover svg{
  fill: #18253b;
}

.car-list-content .list-item-car-add:hover h3{
  color: #18253b;
}

.car-list-content .list-item-car .list-item{
  width: 100%;
  height:auto;
  position: relative;
}


.car-list-content .list-item-car .list-item-hover{
  width: 100%;
  height:250px;
  top: -250px;
  background-color: rgba(0, 0, 93, 0.85);
  position: absolute;
  z-index: 1000;
  display: none;
  justify-content: space-between;
  flex-wrap: wrap;
}

.car-list-content .list-item-car .list-item-hover .item-hover-left{
  width: 100%;
  height:125px;
  padding-top: 50px;
  display: flex;
  justify-content: center;
  gap: 25px;
}

.car-list-content .list-item-car .list-item-hover .item-hover-right{
  width: 100%;
  height:125px;
  padding-bottom: 50px;
  display: flex;
  justify-content: center;
  gap: 25px;
}

.car-list-content .list-item-car .list-item-hover form{
  width: auto;
}

.car-list-content .list-item-car .list-item-hover form button{
  width: auto;
  border-radius: 25px;
}

.car-list-content .list-item-car .list-item:hover .list-item-hover{
  top:0;
}

.car-list-content .list-item-car .list-item-hover button{
  width: auto;
  height:50px;
  background: none;
  margin-top: 5px;
  margin-bottom: 5px;
  color: #FFF;
  border: 1px solid #FFF;
  line-height: 20px;
  padding: 15px 25px;
  position: relative;
}

.car-list-content .list-item-car .list-item-hover button svg{
  width:auto;
  height: 18px;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  fill: #FFF;
}

.car-list-content .list-item-car .list-item-hover button a{
  color: #FFF;
}

.car-list-content .list-item-car .list-item-hover button:hover{
  width: auto;
  height:50px;
  background: none;
  color: #00005d;
  border: 1px solid #FFF;
  background: #FFF;
}

.car-list-content .list-item-car .list-item-hover button:hover svg{
  fill: #00005d;
}

.car-list-content .list-item-car .list-item-hover button:hover a{
  color: #646464;
}



.car-list-content .list-item-car .list-item-dscr{
  width:100%;
  margin-top: 0px;
  padding: 5px;
}


.car-list-content .list-item-car .list-item-dscr .dscr-title{
  width:100%;
  min-height: 50px;
  margin-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
}

.car-list-content .list-item-car .list-item-dscr .dscr-title h3{
  font-size: 18px;
  line-height: 25px;
  font-weight: bold;
}

.car-list-content .list-item-car .list-item-dscr .dscr-title h4{
  font-size: 16px;
  line-height: 25px;
  font-weight: 500;
  color: #556071;
}

.car-list-content .list-item-car .list-item-dscr .price{
  font-size: 18px;
  font-weight: bold;
  text-align: right;
  line-height: 50px;
  margin-top:15px;
  padding-left: 5px;
  padding-right: 5px;
}

.car-list-content .list-item-car .list-item-dscr .details{
  width:100%;
  height: 70px;
  position: relative;
  float: left;
  background: #F8FBFE;
  margin-top:15px;
  padding: 15px;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;

}

.car-list-content .list-item-car .list-item-dscr .details .details-item{
  width: auto;
  height: 40px;
  float: left;
  line-height: 18px;
  color: #000000;
  position: relative;

}

.car-list-content .list-item-car .list-item-dscr .details .details-item svg{
  width: auto;
  height: 18px;
  position: absolute;
  top:0px;
  left:50%;
  transform: translate(-50%,0%);
  fill:#18253B;
}

.car-list-content .list-item-car .list-item-dscr .details p{
  line-height: 18px;
  font-size: 13px;
  margin-top: 22px;
  color:#18253B;
  text-align: center;
}

.car-list-content .list-item-car .list-item-dscr .details p:after{
  display: none;
}

.car-list-content .list-item-car .list-item-dscr .details p:before{
  display: none;
}

.car-list-content .list-item-car .list-item-dscr .vendor{
  width:100%;
  height: 30px;
  margin-left:0px;
  margin-top: 20px;
  padding-bottom: 10px;
  padding-left: 5px;
  padding-right: 5px;
  position: none;
  display: flex;
  justify-content: space-between;
}

.car-list-content .list-item-car .list-item-dscr .vendor .vendor-item{
  width:auto;
  height: 30px;
  padding: 0px;
  display: flex;
  justify-content: flex-start;
  gap: 5px;
}

.car-list-content .list-item-car .list-item-dscr .vendor .vendor-item svg{
  width:auto;
  height: 15px;
  margin-top:7.5px;
  fill: #556071;
}

.car-list-content .list-item-car .list-item-dscr .vendor .vendor-item p{
  line-height: 15px;
  font-size: 14px;
  margin-top: 7.5px;
  color: #556071;
}

.car-list-content .list-item-car .list-item-dscr .vendor .vendr-item-review{
  display: none;
}

USER - CAR LIST ****************/












/**************** USER - ADD NEW CAR ****************/


.newc-content{
  width:100%;
  height:auto;
  position: relative;
  display: block;
  margin:0px;
  padding: 0px;
}


/* new-car-header */
.newc-content .new-car-header {
  width:100%;
  height:auto;
  padding: 0px;
  margin: 0px;
  position: relative;
  display: flex;
  justify-content: space-between;
  counter-reset: step;
  z-index: 100;
}

.newc-content .new-car-header::before,
.prog {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  width: 100%;
  background-color: #e5e7ea;
  z-index: -1;
}

.newc-content .new-car-header .prog {
  background-color: #000080;
  width: 0%;
  transition: 0.3s;
}

.newc-content .new-car-header .prog-step {
  width: 50px;
  height: 50px;
  background-color: #e5e7ea;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.newc-content .new-car-header .prog-step svg{
  width: auto;
  height: 20px;
  fill: #18253b;
}

.newc-content .new-car-header .prog-step::before {

}

.newc-content .new-car-header .prog-step::after {
  content: attr(data-title);
  position: absolute;
  top: calc(100% + 0.5rem);
  font-size: 0.85rem;
  color: #646464;
}

.newc-content .new-car-header .prog-step-active {
  background-color: #000080;
  color: #FFF;
}

.newc-content .new-car-header .prog-step-active svg{
  fill: #FFF;
}

.newc-content .new-car-content{
  width:100%;
  height: auto;
  margin-top: 50px;
  padding: 20px;
  background: #FFF;
  border-radius: 10px;
  border: 1px solid #E5E7EA;
}

.newc-content .new-car-content .car-info{
  width:100%;
  height: auto;
  margin-top: 0px;
  display: none;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 2%;
  transform-origin: top;
  animation: animate 0.5s;
}

.newc-content .new-car-content .car-info-active {
  display: flex;
}

.newc-content .new-car-content .car-step-buttons {
  display: flex;
  justify-content: flex-start;
  gap: 1.5rem;
  line-height: 20px;
  margin-top: 20px;
}

.newc-content .new-car-content .cbtn{
  text-decoration: none;
}





.newc-content .new-car-content h3{
  width:100%;
  height: 30px;
  line-height: 30px;
  margin-top: 20px;
  font-size: 18px;
}

.newc-content .new-car-content p{
  width:100%;
  line-height: 30px;
}

.newc-content .new-car-content .form-space{
  width: 100%;
  height: 20px;
}

.newc-content .new-car-content .filter-cell{
  width:100% !important;
  height: auto !important;
  position: relative;
  margin-top: 20px;
}

.newc-content .new-car-content .filter-cell label{
  width:100%;
  line-height: 30px;
  padding-left: 10px;
  font-size: 14px;
  color:#556071;
}


.newc-content .new-car-content .filter-cell label .tooltip-icon {
    width: 11.5px;
    height: 11.5px;
    color:#556071;
    border:1px solid #556071;
    text-align: center;
    font-size: 9px;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    display: inline-block;
    margin-top: 5px;
    margin-left:5px;
    line-height: 10px;

}

.newc-content .new-car-content .filter-cell label .tooltip-text {
    display: none;
    position: absolute;
    background-color: #556071;
    color: #fff;
    padding: 10px;
    font-size: 12px;
    line-height: 15px;
    border-radius: 10px;
    top: 20px;
    left: 10px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    width: 400px; /* Set maximum width */
    white-space: normal; /* Allow text to wrap */
}

.newc-content .new-car-content .filter-cell label .tooltip-icon:hover + .tooltip-text {
    display: block;
    opacity: 1;
}

.newc-content .new-car-content .filter-cell input{
  width:100%;
  height: 50px;
  line-height: 30px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.newc-content .new-car-content .filter-cell input:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.newc-content .new-car-content .filter-cell input[type="text"]:valid {
  background-color: #FFF;
  background: #FFF;
}

.newc-content .new-car-content .filter-cell input:not(:placeholder-shown) {
  border: 1px solid #18253b;
  color:#18253b;
}

.newc-content .new-car-content .filter-cell  select{
  width:100%;
  height: 50px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.newc-content .new-car-content .filter-cell select:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

/* Default state when 'none' is selected */
.newc-content .new-car-content .filter-cell select:has(option:checked[value="none"]) {
  border: 1px solid #e5e7ea;
  color: #556071;
}

/* When a valid option is selected */
.newc-content .new-car-content .filter-cell select:has(option:checked:not([value="none"])) {
  border: 1px solid #18253b;
  color: #18253b;
}


.newc-content .new-car-content .novi-greska{
  width:100%;
  height: 20px;
  line-height: 20px;
  margin-top: 0px;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 0.7rem;
  background:;
  color:#ac5c50;
  position: absolute;
  bottom:-20px;
}

.newc-content .new-car-content .in-greska{
  border: 1px solid #ac5c50 !important;
  
}

.newc-content .new-car-content .in-greska::placeholder{
  
}


.newc-content .new-car-content .novi-greska-slika{
  width:100%;
  height: 20px;
  line-height: 30px;
  margin-top: 0px;
  padding-left: 0px;
  box-sizing: border-box;
  font-size: 14px;
  color:#cf5959;
  position:relative;
}

.newc-content .new-car-content .filter-cell-pr{
  width:60% !important;
  height:50px;
  display: flex;
  justify-content:flex-start;
  flex-wrap: wrap;
  position: relative;
}

.newc-content .new-car-content .filter-cell-pr .euro-icon{
  height: 30px;
  position: absolute; 
  left: 10px; 
  font-size: 14px; 
  line-height: 30px;
  margin-top: 41px;
}


.newc-content .new-car-content .filter-cell-normal{
  display: none;
}


.newc-content .new-car-content .filter-cell-electro{
  display: none;
}

.newc-content .new-car-content .filter-cell-lapo{
  width:calc(50% - 5px) !important;
  height:50px;
  display: flex;
  justify-content:flex-start;
  flex-wrap: wrap;
}

.newc-content .new-car-content .filter-cell-third{
  width:32% !important;
  height:50px;
  display: flex;
  justify-content:flex-start;
  flex-wrap: wrap;
}





.newc-content .new-car-content .filter-cell-price{
  width:calc(40% - 10px) !important;
  height:50px;
  display: flex;
  justify-content:flex-start;
  flex-wrap: wrap;
}

.newc-content .new-car-content .filter-cell-price .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 25px;
}

.newc-content .new-car-content .filter-cell-price .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.newc-content .new-car-content .filter-cell-price .slider {
    position: absolute;
    cursor: pointer;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7ea;
    transition: 0.3s;
    border-radius: 25px;
}

.newc-content .new-car-content .filter-cell-price .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    top:50%;
    transform: translate(0%,-49%);
    background-color: #FFF;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.newc-content .new-car-content .filter-cell-price input:checked + .slider {
    background-color: #000080;
}

.newc-content .new-car-content .filter-cell-price input:checked + .slider:before {
    transform: translate(24px,-49%);
    background: #FFF;
}

.newc-content .new-car-content .filter-cell-textarea{
  width:100%;
  height:auto;
  margin-top:15px;
}

.newc-content .new-car-content .filter-cell-textarea label{
  width:100%;
  line-height: 30px;
  padding-left: 10px;
  font-size: 14px;
  color:#556071;
}

.newc-content .new-car-content .filter-cell-textarea textarea{
  width:100%;
  min-height: 100px;
  line-height: 30px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.newc-content .new-car-content .filter-cell-textarea textarea:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.newc-content .new-car-content .filter-cell-textarea textarea:valid {
  background-color: #FFF;
  background: #FFF;
}

.newc-content .new-car-content .filter-cell-textarea textarea:not(:placeholder-shown) {
  border: 1px solid #18253b;
  color:#18253b;
}

.newc-content .new-car-content .filter-cell-textarea .quill-toolbar{
 
  border-top: 1px solid #e5e7ea;
  border-bottom: 0px solid #e5e7ea;
  border-left: 1px solid #e5e7ea;
  border-right: 1px solid #e5e7ea;
  border-top-left-radius: 10px;;
  border-top-right-radius: 10px;
  color:#556071;
  background: #f9f9fa;
}

.newc-content .new-car-content .filter-cell-textarea .quill-textarea{
  min-height: 100px;
  height: auto;
  border-top: 0px solid #e5e7ea;
  border-bottom: 1px solid #e5e7ea;
  border-left: 1px solid #e5e7ea;
  border-right: 1px solid #e5e7ea;
  border-bottom-left-radius: 10px;;
  border-bottom-right-radius: 10px;
  font-size: 14px;
  color:#556071;
  background: #f9f9fa;
}


.newc-content .new-car-content .filter-cell-textarea .quill-textarea p{
  font-size: 14px;
}

.newc-content .new-car-content .filter-cell-textarea .quill-textarea:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.newc-content .new-car-content .filter-cell-textarea .quill-textarea:valid {
  background-color: #FFF;
  background: #FFF;
}


.newc-content .new-car-content .filter-cell-textarea .ql-toolbar{
  display: flex;
}

.newc-content .new-car-content .filter-cell-textarea .ql-formats{
  display: flex;
}

.newc-content .new-car-content .filter-cell-textarea .ql-formats button{
  margin: 0px;
}

@keyframes animate {
  from {
    transform: scale(1, 0);
    opacity: 0;
  }
  to {
    transform: scale(1, 1);
    opacity: 1;
  }
}

.newc-content .new-car-content .new-car-checkboxes-button{
  width:100%;
  height:60px;
  line-height: 60px;
  position: relative;
  display: block;
  margin:0px;
  padding: 0px;
  border-bottom: 1px solid #e5e7ea;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

.newc-content .new-car-content .new-car-checkboxes-button p{
  line-height: 20px;
  margin-top: 20px;
  color: #556071;
}


.newc-content .new-car-content .new-car-checkboxes-button .icon{
  width: 15px;
  height:15px;
  margin-top: 22.5px;
  margin-left: 10px;
  position: relative;
}

.newc-content .new-car-content .new-car-checkboxes-button .icon svg{
  width: 100%;
  height:auto;
  top:50%;
  transform: translate(0%, -50%);
  fill: #556071;
  position: absolute;
}

.newc-content .new-car-content .new-car-checkboxes-button:hover p{
  color: #18253b;
}

.newc-content .new-car-content .new-car-checkboxes-button:hover svg{
  fill: #18253b;
}

.newc-content .new-car-content .new-car-checkboxes{
  width:100%;
  height:auto;
  position: relative;
  margin: 0px;
  padding: 10px;
  border-bottom: 1px solid #e5e7ea;
}

.checkboxes-security {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    display: none;
}

.checkboxes-security.show {
    max-height:2000px;
    display: flex;
}

.checkboxes-comfort {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    display: none;
}

.checkboxes-comfort.show {
    max-height:2000px;
    display: flex;
}

.checkboxes-multimedia {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    display: none;
}

.checkboxes-multimedia.show {
    max-height:2000px;
    display: flex;
}

.checkboxes-performance {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out;
    display: none;
}

.checkboxes-performance.show {
    max-height:2000px;
    display: flex;
}

.newc-content .new-car-content .new-car-checkboxes .checkboxes-row{
  width:100%;
  height:auto;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap:10px;
}
.newc-content .new-car-content .new-car-checkboxes .checkboxes-row .checkboxes-col{
  width:calc(50% - 7.5px);
  height:auto;
  min-height: 50px;
}

.newc-content .new-car-content .new-car-checkboxes input[type="checkbox"] {
  display: none;
}

.newc-content .new-car-content .new-car-checkboxes label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding-left: 35px;
  padding-right: 5px;
  font-size: 14px;
  color: #18253b;
  user-select: none;
  margin:0px;
  min-height: 50px;
}

.newc-content .new-car-content .new-car-checkboxes label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1px solid #18253b;
  border-radius: 4px;
  background-color: #fff;
  transition: all 0.3s ease;
  padding-left: 5px;
}

.newc-content .new-car-content .new-car-checkboxes input[type="checkbox"]:checked + label::before {
  background-color: #000080;
  border: 1px solid #000080;
}

.newc-content .new-car-content .new-car-checkboxes input[type="checkbox"]:checked + label::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-60%) rotate(45deg);
  width: 6px;
  height: 12px;
  border: solid #FFF;
  border-width: 0 2px 2px 0;
  transition: all 0.3s ease;
}

.newc-content .new-car-content .new-car-checkboxes label:hover::before {
  background-color: #f9fcff;
  border: 1px solid #000080;
}


.newc-content .new-car-content .info-slika p{
  font-size: 14px;
}


.newc-content .new-car-content .drag-drop{
  width:100%;
  min-height:200px;
  position: relative;
  border: 2px #e5e7ea dashed;
  text-align: center;
  padding: 20px;
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}


.newc-content .new-car-content .drag-drop:hover{

  border: 2px #000080 dashed;

}



.newc-content .new-car-content .hidden-photo-input{
  display: none;
}

.newc-content .new-car-content .drag-drop h4{
  text-align: center !important;
  line-height: 35px;
  color:#556071;
  margin-top: 45px;
}

.newc-content .new-car-content .drag-drop .image-preview {
  width:auto;
  height: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
}

.newc-content .new-car-content .drag-drop .image-container {
  position: relative;
  margin: 0px;
  width: 213px;
  height: 182px;
}

.newc-content .new-car-content .drag-drop .image-container .image-container-image {
  width:213px;
  height:142px;
  position: relative;
}

.newc-content .new-car-content .drag-drop .image-container .image-container-image  img{
  width:213px;
  height:auto;
  position: relative;
}

.newc-content .new-car-content .drag-drop .image-container .image-container-action{
  width:213px;
  height: 30px;
  position: relative;
  margin-top: 5px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 15px;
}

.newc-content .new-car-content .drag-drop .image-container .image-container-action .action-featured{
  width:100px;
  height: 30px;
  text-align: center;
}

.newc-content .new-car-content .drag-drop .image-container .image-container-action .action-featured input{
  display: none;
}

.newc-content .new-car-content .drag-drop .image-container .image-container-action .action-featured label{
  width:100%;
  height: 30px;
  background: #FFFFFF;
  border: 1px solid #000080;
  line-height: 30px !important;
  color: #000080;
  font-size: 14px;
  border-radius: 15px;
  box-sizing: border-box;
  cursor: pointer;
}

.newc-content .new-car-content .drag-drop .image-container .image-container-action .action-featured label:hover{
  background: #000080;
  border: 1px solid #000080;
  color: #FFF;
}

.newc-content .new-car-content .drag-drop .image-container .image-container-action .action-featured input:checked + label{
  background: #000080;
  color:#FFF;
}

.newc-content .new-car-content .drag-drop .image-container .image-container-action .action-trash{
  width:30px;
  height: 30px;
  text-align: center;
  background: #FFFFFF;
  color: #000080;
}

.newc-content .new-car-content .drag-drop .image-container .image-container-action .action-trash .trash-icon{
  width:30px;
  height: 30px;
  text-align: center;
  background: #FFFFFF;
  border: 1px solid #000080;
  line-height: 30px;
  border-radius: 15px;
  color: #000080;
  position: relative;
}

.newc-content .new-car-content .drag-drop .image-container .image-container-action .action-trash .trash-icon svg{
  width:auto;
  height: 15px;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill:  #000080;
}


.newc-content .new-car-content .drag-drop .image-container .image-container-action .action-trash .trash-icon:hover{
  background: #000080;
  border: 1px solid #000080;
}

.newc-content .new-car-content .drag-drop .image-container .image-container-action .action-trash .trash-icon:hover svg{
  fill: #FFF;
}















/**************** USER - CAR PROMOTION ****************/


.promc-content{
  width:100%;
  height:auto;
  position: relative;
  margin-top:0px;
  float: left;
  padding: 0px;
}

.promc-content .car-promotion{
  width:100%;
  height:auto;
  position: relative;
  display: block;
  padding: 20px;
  background: #FFF;
  border-radius: 10px;
  border: 1px solid #E5E7EA;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 40px;
}

.promc-content .car-promotion form{
  order: 2;
}

.promc-content .car-promotion .prom-select{
  width: 100%;
  height: auto;

}

.promc-content .car-promotion .prom-select h3{
  width:100%;
  line-height: 30px;
  margin-top: 0px;
  font-size: 18px;
}

.promc-content .car-promotion .prom-select p{
  width: 100%;
  font-size: 14px;
}

.promc-content .car-promotion .prom-select .prom-select-type{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}


.promc-content .car-promotion .prom-select .prom-select-type .prom-select-item{
  width: 100%;
  height: auto;
}

.promc-content .car-promotion .prom-select .prom-select-type .prom-select-item input{
  display: none;
}

.promc-content .car-promotion .prom-select .prom-select-type .prom-select-item label{
  width:100%;
  height: auto;
  min-height: 102px;
  position:relative;
  padding: 15px;
  box-sizing: border-box;
  border: 1px solid #E5E7EA;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
}


.promc-content .car-promotion .prom-select .prom-select-type .prom-select-item label .select-item-icon{
  width: 100px;
  height:auto;
  margin: 0px;
  padding-right: 10px;
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.promc-content .car-promotion .prom-select .prom-select-type .prom-select-item label .select-item-text{
  width: 100%;
  height:auto;
  margin: 0px;
  padding-left: 20px;
  position: relative;
  border-left: 1px solid #E5E7EA;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.promc-content .car-promotion .prom-select .prom-select-type .prom-select-item label .select-item-radio{
  width: 50px;
  height:auto;
  margin: 0px;
  padding-right: 10px;
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}


.promc-content .car-promotion .prom-select .prom-select-type .prom-select-item label .select-item-icon .icon{
  width: 35px;
  height:35px;
  margin:0px;
  position: absolute;
  top:50%;
  transform: translate(0%, -50%);
}

.promc-content .car-promotion .prom-select .prom-select-type .prom-select-item label .select-item-icon .icon svg{
  width: 100%;
  height:auto;
  top:50%;
  transform: translate(0%, -50%);
  fill: #18253b;
  position: absolute;
}


.promc-content .car-promotion .prom-select .prom-select-type .prom-select-item label .select-item-radio .icon{
  width: 25px;
  height:25px;
  margin:0px;
  padding: 2px;
  position: absolute;
  border: 1px solid #000080;
  border-radius: 50%;
  top:50%;
  transform: translate(0,-50%);
}

.promc-content .car-promotion .prom-select .prom-select-type .prom-select-item label .select-item-radio .icon svg{
  width:100%;
  height:100%;
  display: none;
  fill: #000080;

}

.promc-content .car-promotion .prom-select .prom-select-type .prom-select-item  label:hover{
  border: 1px solid #000080;
  background: #f9fcff;
}

.promc-content .car-promotion .prom-select .prom-select-type .prom-select-item  label:hover svg{
  display: block !important;
}

.promc-content .car-promotion .prom-select .prom-select-type .prom-select-item  input[type="radio"]:checked + label {
  border: 1px solid #000080;
  background: #000080;
  color:#FFF !important;
}

.promc-content .car-promotion .prom-select .prom-select-type .prom-select-item  input[type="radio"]:checked + label .select-item-radio .icon{
  border: 1px solid #FFF;
}

.promc-content .car-promotion .prom-select .prom-select-type .prom-select-item  input[type="radio"]:checked + label h3 {
  color:#FFF !important;
}

.promc-content .car-promotion .prom-select .prom-select-type .prom-select-item  input[type="radio"]:checked + label p {
  color:#FFF !important;
}

.promc-content .car-promotion .prom-select .prom-select-type .prom-select-item  input[type="radio"]:checked + label svg {
  fill:#FFF !important;
  display: block;
}

.promc-content .car-promotion .prom-basic,
.promc-content .car-promotion .prom-premium,
.promc-content .car-promotion .prom-verified {
  display: none;
}

:root:has(input[name="promotion_type"]:checked[value="basic"]) .prom-basic {
  display: block;
}

:root:has(input[name="promotion_type"]:checked[value="premium"]) .prom-premium {
  display: block;
}

:root:has(input[name="promotion_type"]:checked[value="verified"]) .prom-verified {
  display: block;
}

.promc-content .car-promotion .filter-cell{
  height: auto !important;
  position: relative;
  margin-top: 20px;
}

.promc-content .car-promotion .filter-cell label{
  width:100%;
  line-height: 30px;
  padding-left: 10px;
  font-size: 14px;
  color:#556071;
}


.promc-content .car-promotion .filter-cell label .tooltip-icon {
    width: 11.5px;
    height: 11.5px;
    color:#556071;
    border:1px solid #556071;
    text-align: center;
    font-size: 9px;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    display: inline-block;
    margin-top: 5px;
    margin-left:5px;
    line-height: 10px;

}

.promc-content .car-promotion .filter-cell label .tooltip-text {
    display: none;
    position: absolute;
    background-color: #556071;
    color: #fff;
    padding: 10px;
    font-size: 12px;
    line-height: 15px;
    border-radius: 10px;
    top: 20px;
    left: 10px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    width: 400px; /* Set maximum width */
    white-space: normal; /* Allow text to wrap */
}

.promc-content .car-promotion .filter-cell label .tooltip-icon:hover + .tooltip-text {
    display: block;
    opacity: 1;
}

.promc-content .car-promotion .filter-cell input{
  width:100%;
  height: 50px;
  line-height: 30px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.promc-content .car-promotion .filter-cell input:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.promc-content .car-promotion .filter-cell input[type="text"]:valid {
  background-color: #FFF;
  background: #FFF;
}

.promc-content .car-promotion .filter-cell input:not(:placeholder-shown) {
  border: 1px solid #18253b;
  color:#18253b;
}

.promc-content .car-promotion .filter-cell  select{
  width:100%;
  height: 50px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.promc-content .car-promotion .filter-cell select:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

/* Default state when 'none' is selected */
.promc-content .car-promotion .filter-cell select:has(option:checked[value="none"]) {
  border: 1px solid #e5e7ea;
  color: #556071;
}

/* When a valid option is selected */
.promc-content .car-promotion .filter-cell select:has(option:checked:not([value="none"])) {
  border: 1px solid #18253b;
  color: #18253b;
}

.promc-content .car-promotion .prom-action{
  width: 100%;
  height: auto;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}

.promc-content .car-promotion .prom-action .prom-costs{
  width: 100%;
  margin-top: 0px;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  order: 1;
}

.promc-content .car-promotion .prom-action .prom-conf-button{
  order: 2;
  margin-top: 10px;
}

.promc-content .car-promotion .prom-action .prom-costs p{
  line-height: 50px;
}

.promc-content .car-promotion .prom-action .prom-costs h4{
  font-size: 18px;
  line-height: 50px;
}

.promc-content .car-promotion .prom-credits{
  width: 100%;
  height: auto;
  margin: 0px;
  padding: 0px;
  position: relative;
  order: 1;
}


.promc-content .car-promotion .prom-credits a{
  text-decoration: none;
  width: auto;
}

.promc-content .car-promotion .prom-credits-amount{
  width: 100%;
  height: auto;
  padding:10px;
  position: relative;
  background: #F8FBFE;
  border: 1px #c3cfe9 solid;
  border-radius: 10px;
}


.promc-content .car-promotion .prom-credits .credit-icon{
  width: 35%;
  height:80px;
  margin: 0px;
  padding-right: 10px;
  position: relative;
  border-right: 1px solid #E5E7EA;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.promc-content .car-promotion .prom-credits .credit-price{
  width: 65%;
  height:60px;
  margin: 0px;
  padding-top: 20px;
  padding-left: 20px;
  top:0;
  right: 0;
  position: absolute;
}

.promc-content .car-promotion .prom-credits .credit-price h3{
  line-height: 30px;
  font-size: 22px;
  font-weight: bold;
}

.promc-content .car-promotion .prom-credits .credit-price h4{
  line-height: 30px;
  font-size: 16px;
  font-weight: 600;
}

.promc-content .car-promotion .prom-credits .icon{
  width: 35px;
  height:35px;
  margin:0px;
  position: absolute;
  top:50%;
  transform: translate(0%, -50%);
}

.promc-content .car-promotion .prom-credits .icon svg{
  width: 100%;
  height:auto;
  top:50%;
  transform: translate(0%, -50%);
  fill: #18253b;
  position: absolute;
}














/**************** SINGLE ****************/



.single-container{
  width:100%;
  margin-top: 0px;
  margin-left:auto;
  margin-right:auto;
  padding: 0px;
}

.single-container .back-button {
  display: none;
}


.single-container .single-head{
  width:100%;
  height:auto;
  position: relative;
  margin-top: 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

}

.single-container .single-head .single-img{
  width:100%;
  height:auto;
  position: relative;
  overflow: hidden;
  float: left;
}


.single-container .single-head .single-dscr {
  width:100%;
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
  right: 0;
}

.single-container .single-head .single-dscr .single-condition{
  width:100%;
  height: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}

.single-container .single-head .single-dscr .single-condition .condition{
  font-size: 16px;
  line-height: 30px;
  font-style: italic;
  text-align: left;
  margin-top:0px;
  color: #556071;
}


.single-container .single-head .single-dscr .single-condition .share-save{
  width: 70px;
  height: 30px;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}


.single-container .single-head .single-dscr .single-condition .single-save{
  width:30px;
  height: 30px;
  line-height: 30px;
  margin: 0px;
  float: left;
}

.single-container .single-head .single-dscr .single-condition .single-save input{
   width:100%;
   height: 100%;
   display: none;
}

.single-container .single-head .single-dscr .single-condition .single-save label{
  width:30px;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
}

.single-container .single-head .single-dscr .single-condition .single-save label svg{
  width:25px;
  height: 25px;
  margin:2.5px;
  cursor: pointer;
  fill: #556071;
}

.single-container .single-head .single-dscr .single-condition .single-save label .st0{
  display: none;
}

.single-container .single-head .single-dscr .single-condition .single-save label:hover{
}


.single-container .single-head .single-dscr .single-condition .single-save label:hover svg{
  fill: #000080;
}

.single-container .single-head .single-dscr .single-condition .single-save label:hover .st0{
  display: block;
}

.single-container .single-head .single-dscr .single-condition .single-save input:checked + label svg{
  fill: #000080;
}

.single-container .single-head .single-dscr .single-condition .single-save input:checked + label .st0{
  display: block;
}


.single-container .single-head .single-dscr .single-condition .single-share{
  width:30px;
  height: 30px;
  margin: 0px;
}

.single-container .single-head .single-dscr .single-condition .single-share svg{
  width:25px;
  height: 25px;
  margin:2.5px;
  cursor: pointer;
  fill: #556071;
}

.single-container .single-head .single-dscr .single-condition .single-share svg .st0{
  display: none;
}

.single-container .single-head .single-dscr .single-condition .single-share:hover svg{
  fill: #000080;
}

.single-container .single-head .single-dscr .single-condition .single-share:hover svg .st0{
  display: block;
}

.single-container .single-head .single-dscr .single-title{
  width:100%;
  height: auto;
  margin: 0px;
  padding: 0px;
}

.single-container .single-head .single-dscr .single-title h1{
  font-size: 25px;
  line-height: 40px;

}

.single-container .single-head .single-dscr .single-title h2{
  font-size: 25px;
  line-height: 40px;
  font-weight: 500;
  color: #556071;
}

.single-container .single-head .single-dscr .single-price-share{
  width: 100%;
  height: 40px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.single-container .single-head .single-dscr .single-price-share .price{
  width: auto;
  height: 40px;
}

.single-container .single-head .single-dscr .single-price-share .price p{
  font-size: 25px !important;
  font-weight: bold;
  text-align: left;
  line-height: 40px;
  margin-top:0px;
}








.single-container .single-head .single-dscr .single-actions{
  width:100%;
  height: auto;
  margin-top: 30px;
  padding: 0px;
  list-style: square;
  line-height: 30px;
  float: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap:10px;
}


.single-container .single-head .single-dscr .single-actions a{
  width: calc(50% - 5px);
  margin-top: 0;
  display: block; /* Make <a> behave like block */
  text-align: center; /* Optional: center content inside <a> */
}

.single-container .single-head .single-dscr .single-actions a button{
  width: 100%;
  margin-top: 0;
  display: block; /* Make <a> behave like block */
  text-align: center; /* Optional: center content inside <a> */
}


.single-container .single-head .single-dscr .single-actions button{
  width: calc(50% - 5px);
  overflow: hidden;
  margin-top: 0px;
}


.single-container .single-head .single-dscr .seller{
  width:100%;
  height:140px;
  background: #FFF;
  margin-top: 30px;
  padding: 0px;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  float: left;
}

.single-container .single-head .single-dscr .seller .seller-img{
  width:138px;
  height: 138px;
  background: #FFF;
  float: left;
  position: relative;
  border-right:1px #e5e7ea solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  overflow: hidden;
}

.single-container .single-head .single-dscr .seller .seller-img img{
  width: auto;
  height:100%;
}

.single-container .single-head .single-dscr .seller .seller-dscr{
  width:calc(100% - 138px);
  height: 100px;
  margin-top: 20px;
  padding-left: 15px;
  height: auto;
  float: right;
}

.single-container .single-head .single-dscr .seller .seller-dscr h3{
  line-height: 40px;
  font-size: 18px;
  font-weight: bold;
}

.single-container .single-head .single-dscr .seller .seller-dscr p{
  line-height: 30px;
}

.single-container .single-head .single-dscr .seller .seller-dscr svg{
  width: auto;
  height: 15px;
  margin-top: 0px;
  fill: #18253b;
}

.single-container .details-featured{
  width: calc(100% - 40px);
  height: auto;
  background: #FFF;
  margin-top:15px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  border: 1px solid #E5E7EA;
  padding: 20px;
  float: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.single-container .details-featured .details-item{
  width: 50%;
  height: 76px;
  float: left;
  text-align: center;
  line-height: 30px;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  justify-content: flex-start;
  gap:5px;
}

.single-container .details-featured .details-item .icon{
  width: 36px;
  height: 36px;
  margin:0px;
  padding: 0px;
}

.single-container .details-featured .details-item .icon svg{
  width: auto;
  height: 30px;
  margin-top:3px;
  padding: 0px;
  fill: #18253b;
}


.single-container .details-featured .details-item .detail{
  width: auto;
  height: 25px;
  margin:0px;
  padding: 0px;
}

.single-container .details-featured .details-item .detail .naz{
  width: auto;
  font-size: 14px;
  font-style: italic;
  line-height: 18px;
  color: #556071;
  text-align: left;
}

.single-container .details-featured .details-item .detail .fil{
  font-size: 15px;
  font-weight: bold;
  line-height: 18px;
  color: #18253b;
  text-align: left;
}


.single-container .details{
  width: calc(100% - 40px);
  height: auto;
  margin-top:0px;
  margin-right: auto;
  margin-left: auto;
  list-style: square;
  float: none;
  line-height: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: start;
  flex-wrap: wrap;
  gap: 4%;
}

.single-container .details h3{
  width: 100%;
  font-size: 22px;
  font-weight: bold;
  margin-top:0px;
  margin-top: 40px;
  line-height: 60px;
}

.single-container .details .opi{
  width: 100%;
  font-size: 18px !important;
  font-weight: bold;
  margin-bottom:15px;
  line-height: 29px;
}

.single-container .details .naz{
  font-size: 14px;
  font-style: italic;
  margin-top:0px;
  color:#556071;
  line-height: 29px;
}

.single-container .details .fil{
  font-size: 14px;
  font-weight: bold;
  margin-top:0px;
  line-height: 29px;
  text-align: right;
}

.single-container .details .detail-row{
  width: 100%;
  height: 29px;
  line-height: 29px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #E5E7EA;
}

.single-container .details .detail-row-bor{
  border-bottom: 1px solid #E5E7EA;
}


.single-container .details .container{
  width:100%;
  height: auto;
  background: #FFF;
  margin-top:30px;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #E5E7EA;
  float: left;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4%;
}


.single-container .details .car-desc{
  width:100%;
  height: auto;
}

.single-container .details .car-desc p{
  font-size: 14px;
  color: #18253b;
  line-height: 24px;
}

.single-container .details .car-desc li{
  font-size: 14px;
  line-height: 24px;

}

.single-container .details .car-desc span{
  font-size: 14px;
  line-height: 24px;
}




.single-container .features{
  width: calc(100% - 40px);
  height: auto;
  margin-top:0px;
  margin-right: auto;
  margin-left: auto;
  border-radius: 5px;
  list-style: square;
  float: none;
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  flex-wrap: wrap;
  gap: 4%;
}

.single-container .features h3{
  width: 100%;
  font-size: 22px;
  font-weight: bold;
  margin-top:0px;
  margin-top: 40px;
  line-height: 60px;
}

.single-container .features p{
  font-size: 14px;
}

.single-container .features .opi{
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  margin-bottom:20px;
  line-height: 30px;
}


.single-container .features .features-row{
  width: 100%;
  height: auto;
  line-height: 25px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.single-container .features .features-row svg{
  height: 14px;
  margin-right: 10px;
  fill: #000080;
}

.single-container .features .car-security{
  width:100%;
  height: auto;
  background: #FFF;
  margin-top:30px;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #E5E7EA;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4%;
}

.single-container .features .car-multimedia{
  width:100%;
  height: auto;
  background: #FFF;
  margin-top:30px;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #E5E7EA;
  float: left;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4%;
}

.single-container .features .car-comfort{
  width:100%;
  height: auto;
  background: #FFF;
  margin-top:30px;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #E5E7EA;
  float: left;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4%;
}

.single-container .features .car-performance{
  width:100%;
  height: auto;
  background: #FFF;
  margin-top:30px;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #E5E7EA;
  float: left;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 4%;
}

.single-related{
  width:calc(100% - 40px);
  height: auto;
  margin-top:0px;
  margin-left:auto;
  margin-right: auto;
  clear: both; /* This pushes it below previous floats */
}


.single-related-scroll{
  width:100%;
  height: 418px;
  margin:0px;
  position: relative;
}

.single-related-scroll .sr-btn{
  display: none !important;
}


/* POPUPS SINGLE */

.hidden-popup{
  display: none;
}

.popup-message{
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50vh;
  transform: translateY(-50%);
  padding: 20px;
  background: #fff;
  border-top: 1px solid #E5E7EA;
  border-radius: 10px;
  position: relative;
  transition: all 5s ease-in-out;
}


.popup-message form{
  width:100%;
  min-height: 150px;
}

.popup-message label{
  width:100%;
  line-height: 30px;
  padding-left: 10px;
  font-size: 14px;
  color:#556071;
}

.popup-message textarea{
  width:100%;
  min-height: 100px;
  line-height: 30px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

..popup-message textarea:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.popup-message textarea:valid {
  background-color: #FFF;
  background: #FFF;
}

.popup-message textarea:not(:placeholder-shown) {
  border: 1px solid #18253b;
  color:#18253b;
}

.popup-message h3 {
  width: calc(100% - 40px);
  line-height: 30px;
  font-size: 18px;
}

.popup-message p {
  line-height: 20px;
}

.popup-message .content {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.popup-message .content button{
}



.popup-call {
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50vh;
  transform: translateY(-50%);
  padding: 20px;
  background: #fff;
  border-top: 1px solid #E5E7EA;
  border-radius: 10px;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup-call h3 {
  width: calc(100% - 40px);
  line-height: 30px;
  font-size: 18px;
}

.popup-call h3 a{
  line-height: 30px;
  font-size: 18px !important;
  font-weight: bold !important;
  text-decoration: underline;
}


.popup-buy {
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50vh;
  transform: translateY(-50%);
  padding: 20px;
  background: #fff;
  border-top: 1px solid #E5E7EA;
  border-radius: 10px;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup-buy h3 {
  width: calc(100% - 40px);
  line-height: 30px;
  font-size: 18px;
}

.popup-buy .content {
  width: 100%;
  margin-top: 20px;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  gap: 20px;
}

.popup-buy .content a{
  width: 270px;
  height:50px;
  float: left;
  text-decoration: none;
}

.popup-buy .content a:hover{
  color: #FFF;
}

.popup-buy .content button{
  margin:0px;
}


.popup-share {
  width: 90%;
  height: auto;
  min-height: 70px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50vh;
  transform: translateY(-50%);
  padding: 20px;
  background: #fff;
  border-top: 1px solid #E5E7EA;
  border-radius: 10px;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup-share h3 {
  width: calc(100% - 40px);
  line-height: 30px;
  font-size: 18px;
}

.popup-share .content {
  width: 100%;
  margin-top: 20px;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.popup-share .content a{
  width: 50px;
  height:50px;
  margin-right: 10px;
  float: left;
  text-decoration: none;
}

.popup-share .content a:hover{
  color: #FFF;
}

.popup-share .content svg{
  width: 30px;
  height:30px;
  fill:#556071;
  margin: 10px;
  padding: 0px;
}

.popup-share .content svg:hover{
  width: 30px;
  height:30px;
  fill: #18253b;
  margin: 10px;
  padding: 0px;
}


.popup-finish{
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50vh;
  transform: translateY(-50%);
  padding: 20px;
  background: #fff;
  border-top: 1px solid #E5E7EA;
  border-radius: 10px;
  position: relative;
  transition: all 5s ease-in-out;
  z-index: 2000;
}


.popup-finish form{
  width:100%;
  min-height: 150px;
}

.popup-finish label{
  width:100%;
  line-height: 30px;
  padding-left: 10px;
  font-size: 14px;
  color:#556071;
}

.popup-finish select{
  width:100%;
  height: 50px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.popup-finish select:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

/* Default state when 'none' is selected */
.popup-finish select:has(option:checked[value="none"]) {
  border: 1px solid #e5e7ea;
  color: #556071;
}

/* When a valid option is selected */
.popup-finish select:has(option:checked:not([value="none"])) {
  border: 1px solid #18253b;
  color: #18253b;
}

.popup-finish textarea{
  width:100%;
  min-height: 100px;
  line-height: 30px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

..popup-finish textarea:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.popup-finish textarea:valid {
  background-color: #FFF;
  background: #FFF;
}

.popup-finish textarea:not(:placeholder-shown) {
  border: 1px solid #18253b;
  color:#18253b;
}

.popup-finish h3 {
  width: calc(100% - 40px);
  line-height: 30px;
  font-size: 18px;
}

.popup-finish p {
  line-height: 20px;
}

.popup-finish .content {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.popup-finish .content button{
}



.popup-delete {
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50vh;
  transform: translateY(-50%);
  padding: 20px;
  background: #fff;
  border-top: 1px solid #E5E7EA;
  border-radius: 10px;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup-delete h3 {
  width: calc(100% - 40px);
  line-height: 30px;
  font-size: 18px;
}

.popup-delete .content {
  width: 100%;
  margin-top: 20px;
  overflow: hidden;
  display: flex;
  justify-content: flex-start;
  gap: 20px;
}

.popup-delete .content a{
  width: 270px;
  height:50px;
  float: left;
  text-decoration: none;
}

.popup-delete .content a:hover{
  color: #FFF;
}

.popup-delete .content button{
  margin:0px;
}








/**************** SINGLE Gallery ****************/



.swiper {
    width: 100%;
    height: auto;
    border-radius: 0px !important;
    overflow: hidden;
}

.swiper-slide img {
    width: 100%;
    height: auto;
    cursor: pointer;
    border-radius: 0px !important;
    transition: transform 0.3s ease-in-out;
}

.swiper-slide img:hover {
    transform: scale(1.05);
}

.custom-prev {
    left: 5px;
}

.custom-next {
    right: 5px;
}

.custom-prev, .custom-next {
    width: 25px;
    height: 50px;
    cursor: pointer;
    position: absolute;
    top:50%;
    transform: translate(0%,-50%);
    z-index: 1000;
}

.custom-prev button, .custom-next button{
    width: 25px;
    height: 50px;
    margin:0px;
    padding: 0px;
    border: none !important;
    border-radius: 5px !important;
    background: rgba(0, 0, 0, 0.6);
}


.custom-prev button:hover, .custom-next button:hover{
    background: rgba(0, 0, 0, 0.6);
    border: none !important;
}



.custom-prev svg, .custom-next svg {
    height: 20px;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0px;
    padding: 0px;
    fill: #FFF;
}

.custom-prev:hover svg, .custom-next:hover svg {
    fill: #FFF;
}

/* Thumbnails */
.thumbnail-gallery {
    margin-top: 10px;
    height: 75px;
    display: none !important;
}

.thumbnail-gallery img{
    width: auto;
    height: 75px;
    border-radius: 0px;
}

.thumbnail-gallery .swiper-slide {
    width: auto !important;
    height: 75px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.3s;
    border-radius: 0px;
}

.thumbnail-gallery .swiper-slide-thumb-active {
    opacity: 1;
    border: ;
}


.hidden {
    display: none !important;
}

.fullscreen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Centering the Swiper container */
.fullscreen .fullscreen-swiper {
    width: 90%;
    max-width: 1200px;
    height: auto;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Make images fit inside the fullscreen */
.fullscreen .fullscreen-swiper img {
    width: 100%;
    height: auto;
    max-height: 90vh;
    object-fit: contain;
    cursor: grab;
}

/* Close button - positioned at the top right */
.fullscreen .close-btn {
    width: 50px;
    position: absolute;
    top: 0px;
    right:20px;
    font-size: 30px;
    color: white;
    cursor: pointer;
    z-index: 1000;
    background: none;
    border: none;
}

/* Close button - positioned at the top right */
.fullscreen .close-btn svg{
    height: 35px;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0px;
    padding: 0px;
    fill: #FFF;
}

.fullscreen .custom-prev {
    left: 0px;
}

.fullscreen .custom-next {
    right: 0px;
}

.fullscreen .custom-prev, .custom-next {
    width: 25px;
    height: 50px;
    cursor: pointer;
    position: absolute;
    top:50%;
    transform: translate(0%,-50%);
    z-index: 1000;
}

.fullscreen .custom-prev button, .custom-next button{
    width: 25px;
    height: 50px;
    margin:0px;
    padding: 0px;
    border: none !important;
    background: rgba(0, 0, 0, 0.6);
}


.fullscreen .custom-prev button:hover, .custom-next button:hover{
    background: rgba(0, 0, 0, 0.6);
    border: none !important;
}



.fullscreen .custom-prev svg, .custom-next svg {
    height: 20px;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0px;
    padding: 0px;
    fill: #FFF;
}

.fullscreen .custom-prev:hover svg, .custom-next:hover svg {
    fill: #FFF;
}













/**************** USER - CAR STATISTIC ****************/

.stat-content{
  width:100%;
  height:auto;
  position: relative;
  margin-top:0px;
  float: none;
  padding-right: 0px;
  padding-left: 0px;
}

.stat-content .car-statistic{
  width:100%;
  height:auto;
  position: relative;
  display: block;
  padding: 20px;
  background: #FFF;
  border:1px #e5e7ea solid;
  border-radius: 10px;
}

.stat-content .car-statistic .views-container{
  width:100%;
  height:auto;
  margin-top: 20px;
  margin-bottom: 15px;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.stat-content .car-statistic .views-content{
  width:100%;
  margin: 0px;
  padding:15px;
  text-align: left;
  background: #F8FBFE;
  border: 1px #c3cfe9 solid;
  border-radius: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.stat-content .car-statistic .views-content .icon{
  width:auto;
  height: auto;
  padding-left: 10px;
  padding-right: 25px;
}

.stat-content .car-statistic .views-content .icon svg{
  width:25px;
  height: 25px;
  
  fill: #18253b;
}

.stat-content .car-statistic .views-content .text{
  width:auto;
  padding-left: 15px;
  border-left: 1px solid #E5E7EA;
}

.stat-content .car-statistic .stat-numb{
  font-size: 23px;
  line-height: 37px;
  font-weight: bold;
}

.stat-content .car-statistic p{
  font-size: 13px;
  line-height: 24px;
}












/**************** USER - CREDITS****************/

.credits-content{
  width: 100%;
  height: auto;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  align-content: flex-start;
  margin:0px;
  padding: 0px;
}

.credits-content .credits-side{
  width:100%;
  height:auto;
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  margin-right: 0px;
  margin-bottom: 20px;
  padding: 20px;
  text-align: center;
  background: #FFF;
  border-radius: 10px;
  border: 1px solid #E5E7EA;
}

.credits-content .credits-side .credits-icon{
  width:70px;
  height:70px;
  position: relative;
  display: block;
  margin-right: 10px;
  padding: 20px;
  border: 1px solid #E5E7EA;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
}

.credits-content .credits-side .credits-icon i{
  font-size: 28px;

}


.credits-content .credits-side .credits-amount{
  width: calc(100% - 80px);
  height: 70px;
  text-align: left;
}

.credits-content .credits-side .credits-amount h3{
  line-height: 70px;
  font-size: 30px;
}

.credits-content .credits-side .credits-button{
  width:312px;
  height: 50px;
  margin-top: 20px;
}

.credits-content .credits-side .credits-button button{
  width:312px;
  height: 50px;
  margin: 0px;
}

.credits-content .credits-list{
  width:618px;
  height:auto;
  position: relative;
  display: block;
  margin: 0px;
  padding:20px;
  background: #FFF;
  border-radius: 10px;
  border: 1px solid #E5E7EA;
}


.credits-content .credits-list h3{
  line-height: 50px;
  font-size: 18px;
}




.credits-content .credits-list .credits-item{
  width:100%;
  height:50px;
  line-height: 50px;
  margin:0px;
  border-top:1px #EEE solid;
  display: flex;
  justify-content: space-between;
}

.credits-content .credits-list .credits-item p{
  margin:0px;
  line-height: 50px;
}

.credits-content .credits-list .credits-item .credits-item-left{
  width:30%;
  height:50px;
  line-height: 50px;
  margin:0px;
  padding: 0px;
  text-align: left;
  overflow: scroll;
}


.credits-content .credits-list .credits-item .credits-item-center{
  width:40%;
  height:50px;
  line-height: 50px;
  margin:0px;
  padding: 0px;
  text-align: left;
  overflow: scroll;
}


.credits-content .credits-list .credits-item .credits-item-right{
  width:30%;
  height:50px;
  line-height: 50px;
  margin:0px;
  padding: 0px;
  text-align: right;
  overflow: scroll;
}

.credits-content .credits-list .credits-list-load{
  width:100%;
  height: 50px;
  margin-top: 20px;
  position: relative;
}


.credits-content .credits-list .credits-list-load button{
  position: absolute;
  min-width: 60%;
  bottom:0;
  left: 50%;
  overflow: hidden;
  transform: translate(-50%,0%);
}















/**************** USER - MESSAGES ****************/



.messages-container{
  width:100%;
  height: 100%;
  min-height: 0px;
  display: block;
  position: absolute;
  margin-right:auto;
  margin-left:auto;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top:50%;
  left:50%;
  border-radius: 0px;
  outline: 1px solid #E5E7EA;
  background: #FFF;
}



.messages-list{
  width: 100%;
  height: 100%;
  float: left;
  border-right:1px solid #E5E7EA;
}

.messages-list .messages-search-box{
  width: 100%;
  height: 40px;
  margin-top: 20px;
  margin-left:0px;
  margin-right: 0px;
  padding: 0px;
  padding-left:10px;
  padding-right: 10px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.messages-list .messages-search-box form{
  width: 100%;
  display: flex;
}

.messages-list .messages-search-box input{
  width: 338px;
  height: 40px;
  margin: 0px;
  padding: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border: 1px solid #E5E7EA;
  background: #FFF;
  float:left;
  position: relative;
  opacity: 1;
  font-size: 14px;
  line-height: 20px;
  color:#556071;
}


.messages-list .messages-search-box input:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.messages-list .messages-search-box input[type="text"]:valid {
  background-color: #FFF;
  background: #FFF;
}

.messages-list .messages-search-box input:not(:placeholder-shown) {
  border: 1px solid #18253b;
  color:#18253b;
}


.messages-list .messages-search-box .search-icon{
  width: 40px;
  height: 40px;
  margin: 0px;
  padding: 0px;
  color:#e1e7f4;
  background: #000080;
  float: left;
  border: none;
  border-radius: 0;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  position: relative;
}


.messages-list .messages-search-box .search-icon::hover{
  background: #00005d;
  color: #FFF;
}

.messages-list .messages-search-box .search-icon svg{
  width: 20px;
  height: 20px;
  margin: 0px;
  padding: 0px;
  fill:#e1e7f4;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

.messages-list .messages-search-box .search-icon:hover svg{
  fill:#FFF;
}




.messages-list .inbox-tabs {
  width: 100%;
  height: 40px;
  padding: 0px;
  margin-top:20px;
  margin-bottom:0px;
  margin-left:0px;
  margin-right:0px;
  padding:0px;
  position: relative;
  display: flex;
  justify-content: space-between;
}



.messages-list .inb-tab {
  width: auto;
  background: #FFF;
  color: #556071;
  border-bottom:0px solid #000080;
  font-size: 15px;
  line-height: 40px;
  height: 40px;
  position: relative;
  top: 0;
  padding: 0 15px;
  float: left;
  display: block;
  text-align: center;
  box-sizing: border-box;
  border-radius: 0px;
  -webkit-transition: all 150ms ease 0s;
  transition: all 150ms ease 0s;
}


.messages-list .inb-tab:hover {
  color: #000080;
  border-bottom:2px solid #000080;
  cursor: pointer;
}


.messages-list .inb-tab.i-active {
  color: #000080;
  border-bottom:2px solid #000080;
  font-weight: 700;
  z-index: 6;
}

.i-active{
  display: block !important;
}



.messages-list .inbox-content{
  position: relative;
  height:calc(100% - 120px);
  width: 100%;
  overflow-y: scroll;
  padding-left: 0px;
}

.messages-list .inbox-content::-webkit-scrollbar {
  display: none;
}

.messages-list .inbox-content .messages-list-container{
  display:none;
}





.messages {
  width: 100%;
  margin-top:0px;
  position: relative;
  height:100%;
  overflow-y: auto;
  padding-left: 0px;
  border-top: 1px solid #E5E7EA;
}

.messages .no-messages{
  width: 100%;
  height: calc(100vh - 192px);
  margin-top: 0px;
  display: flex;
  flex-direction: column;        /* stack vertically */
  justify-content: center;       /* center vertically */
  align-items: center;           /* center horizontally */
  gap: 35px;                        /* no extra spacing */
  box-sizing: border-box;
  padding: 0px;
}


.messages .no-messages img{
  width: auto;
  height: 100px;
}

.messages .no-messages p{
  width: 100%;
  text-align: center;
  font-size: 18px !important;
}

.messages::-webkit-scrollbar {
  width: 10px;
  right:0;
}

.messages .mess-tab{
  width: 100%;
  height: 100px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid #E5E7EA;
  position: relative;
  padding-right: 10px;
  padding-left: 0px;
  cursor: pointer;
  display: block;
}

.messages .m-active {
  background-color: #fff !important;
}

.messages .i-unread {
  background: #d3d3d3;
}

.mess-tab img {
    width: 50px;
    height: 50px;
    margin:25px 10px;
    border-radius: 50%;
    border: 1px solid #E5E7EA;
    float:left;
}


.messages .mess-tab .mess-tab-info{
  width: calc(100% - 70px);
  height: 100px;
  margin:0px;
  padding: 0px;
  position: relative;
  float:left;
}

.messages .mess-tab .mess-tab-info .mess-tab-info-left{
  width: 66%;
  height: 100px;
  margin:0px;
  padding-top:15px;
  padding-bottom:15px;
  padding-left:0px;
  padding-right: 0px;
  position: relative;
  float:left;
}

.messages .mess-tab .mess-tab-info .mess-tab-info-right{
  width: 33%;
  height: 100px;
  margin:0px;
  padding-top:15px;
  padding-bottom:15px;
  padding-left:0px;
  padding-right: 10px;
  position: relative;
  float:left;
  text-align: right;
}

.messages .mess-tab .mess-tab-info h3{
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
}

.messages .mess-tab .mess-tab-info h5{
  font-size: 13px;
  line-height: 15px;
  margin-top: 5px;
  color: #556071;
}

.messages .mess-tab .mess-tab-info p{
  font-size: 14px;
  line-height: 15px;
  margin-top: 10px;
}

.messages .mess-tab .mess-tab-info span{
  font-size: 11px;
}

.messages .mess-tab .mess-tab-info svg{
  width:18px;
  height: auto;
}

.messages .mess-tab .mess-tab-info input{
   display: none;
}

.messages .mess-tab .mess-tab-info label{
   cursor: pointer;
   z-index: 2000;
   position: relative;
   margin-top: 10px;
}

.messages .mess-tab .mess-tab-info .st0{
  opacity: 0;
}


.messages .mess-tab .mess-tab-info input:checked + label > svg .st0{
   opacity: 1;
}









.m-active{
  display: block !important;
}

.mess-content{
  width:100%;
  height: auto;
  position: absolute;
  z-index: 2000;
  float: left;
  display: none;
}

.mess-content.active{
  display: block;
}

.mess-content .default-message{
  width:100%;
  height: auto;
  position:absolute;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  line-height: 150px;
  text-align: center;
}

.mess-content .default-message img{
  height: 200px;
  width: auto;
}

.message-container{
  width: 100%;
  height: calc(100vh - 63px);
  min-height: 300px;
  background-color: #f9f9fa;
  float:left;
  position: relative;
  border-radius: 10px;
}


.message-container .message-container-header{
  width: 100%;
  height: auto;
  background-color: #FFF;
  border-bottom: 1px solid #E5E7EA;
  border-top-right-radius: 10px;
  position:relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}


.message-container .message-container-header .back-to-messages{
  display: block;
  width: 40px;
  position: relative;
  order: 1;
}


.message-container .message-container-header .back-to-messages button {
  width: 40px;
  height: 40px;
  margin-top: 10px;
  padding: 0;
  border: none;
  outline: none;
  background: #FFF;
  position: relative;
}



.message-container .message-container-header .back-to-messages button svg {
  width: 20px;
  height: auto;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  fill: #18253B;
}

.message-container .message-container-header .message-container-header-actions button:hover{
  color: #000;
}


.message-container .message-container-header .message-container-header-contact{
  width:auto;
  height:60px;
  line-height: 60px;
  float:none;
  order: 2;
}

.message-container .message-container-header .message-container-header-contact img{
  width:40px;
  height: 40px;
  margin:10px;
  border-radius: 50%;
  border: 1px solid #E5E7EA;
  float:left;
}

.message-container .message-container-header .message-container-header-contact h3{
  float:left;
  line-height: 60px;
  font-size: 18px;
}

.message-container .message-container-header .message-container-header-product{
  width:100%;
  height:auto;
  line-height: 35px;
  padding: 10px;
  margin-left:0px;
  border-left: 0px solid #E5E7EA;
  float:none;
  order: 4;
  background: #E5E7EA;
}

.message-container .message-container-header .message-container-header-actions{
  width:40px;
  height:60px;
  line-height: 60px;
  margin-right: 15px;
  float:none;
  order: 3;
}

.message-container .message-container-header .message-container-header-actions button {
  width: 40px;
  height: 40px;
  margin-top: 10px;
  padding: 0;
  border: none;
  outline: none;
  background: #FFF;
  position: relative;
}



.message-container .message-container-header .message-container-header-actions button svg {
  width: 20px;
  height: auto;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  fill: #18253B;
}

.message-container .message-container-header .message-container-header-actions button:hover{
  color: #000;
}

.message-container .message-container-header .message-container-header-actions i{
  font-size: 20px;
  font-weight: 400;
}












.message-container .message-container-content {
  width: 100%;
  height: calc(100% - 213px);
  max-height: calc(100% - 213px);
  background-color: #f9f9fa;
  margin-bottom: 0px;
  padding-top:20px;
  padding-bottom: 30px;
  padding-left: 10px;
  padding-right: 10px;
  overflow-y: scroll;
  position: relative;
}



.message {
  position: relative;
  width: 100%;
  height:auto;
  overflow: auto;
}

.message {
  clear: both;
}

.message .message-content {
  width: auto;
  max-width: 80%;
  position: relative;
  background-color: #fff;
  margin-left:5px;
  margin-right: 5px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
  color: #000;
  background-color: #FFF;

}



.message .message-content p{
  font-size: 16px;
  margin-bottom: 10px;
}

.message .message-content span{
  font-size: 11px;
  color: #646464;
}




.user-message .message-content{
  float: right;
}

.contact-message .message-content{
  float: left;
}


.message .message-text {
  text-align: left;
}







.message-container .message-container-footer {
  position: relative;
  width: 100%;
  height: auto;
  background: #FFF;
  border-bottom-right-radius: 10px;
  padding: 10px;
  bottom: 0px;
  right: 0;
}

.message-container .message-container-footer .send-message-text {
  position: relative;
  display: block;
  width: calc(100% - 70px);
  height: 80px;
  background-color:#EEE;
  padding: 5px 95px 5px 10px;
  font-size: 14px;
  resize: vertical;
  outline: none;
  border: 1px solid #EEE;
}

.message-container .message-container-footer .send-message-button {
  display: block;
  position: absolute;
  width: 50px;
  height: 50px;
  left:auto;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
  border: none;
  outline: none;
  background: #000080;
  padding: 0;
}



.message-container .message-container-footer .send-message-button svg {
  width: 20px;
  height: auto;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  fill: #FFF;
}

.message-container .message-container-footer .inb-tab.upload-file input[type="file"] {
  position: fixed;
  display: none;
  top: -1000px;
}

.message-container .message-container-footer .upload-file {
  display: block;
  position: absolute;
  left:745px;
  height: 20px;
  font-size: 20px;
  top: 0;
  bottom: 0;
  margin: auto;
  opacity: 0.25;
}

.message-container .message-container-footer .upload-file:hover {
  opacity: 1;
}













/**************** USER - FRONT PROFILE   ****************/


.profile-front-container{
  width:100%;
  height: auto;
  display: flex;
  padding-right: 20px;
  padding-left: 20px;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}

.profile-front-container .profile-front-info{
  width: 100%;
  height: auto;
  position: relative;
  margin-top: 35px;
  margin-right: auto;
  margin-left: auto;
  padding: 20px;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  background: #FFF;
  float: left;
}

.profile-front-container .profile-front-info .profile-front-info-user{
  width: 100%;
  height: 100px;
  position: relative;
  margin: 0px;
  float: left;
  vertical-align: center;
}

.profile-front-container .profile-front-info .profile-front-info-user .info-username{
  width: calc(100% - 120px);
  height: 100px;
  position: relative;
  margin-left: 20px;
  float: left;
  line-height: 100px;
}

.profile-front-container .profile-front-info .profile-front-info-user .info-username h4{
  line-height: 100px;
}

.profile-front-container .profile-front-info .profile-front-info-user img{
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 50%;
  border:1px #e5e7ea solid;
  float: left;
}

.profile-front-container .profile-front-info .profile-front-info-cont{
  width: 100%;
  height: auto;
  position: relative;
  margin: 0px;
  float: left;
  background: ;
  padding: 0px;
  text-align: center;
}

.profile-front-container .profile-front-info .profile-front-info-cont p{
  line-height: 50px;
  text-align: center;
}

.profile-front-container .profile-front-info .profile-front-info-cont .profile-fr-reviews svg{
  width: auto;
  height: 15px;
  margin-top: 0px;
  fill: #18253b;
}

.profile-front-container .profile-front-info .profile-front-info-cont .info-cont-location{
  width: 100%;
  height: 50px;
  margin-top:15px;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  text-align: center;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.profile-front-container .profile-front-info .profile-front-info-cont .info-cont-location .icon{
  width:auto;
  height: auto;
}

.profile-front-container .profile-front-info .profile-front-info-cont .info-cont-location .icon svg{
  width: auto;
  height: 20px;
  margin-top: 15px;
  margin-bottom: 15px;
  fill: #18253b;
}

.profile-front-container .profile-front-info .profile-front-info-cont .st0 {
    transition: opacity 0.3s ease;
    opacity: 1;
}

.profile-front-container .profile-front-info .profile-front-info-cont .st0.active {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.profile-front-container .profile-front-info .profile-front-info-cont .block{
  width:auto;
  height:50px;
  padding: 0px 30px;
  background: transparent;
  color: red;
  border:none;
  border-radius: 0px;
  box-sizing:border-box;
  margin-top:0px;
  clear: both;
  font-size: 15px;
  font-weight: 600;
  line-height: 50px;
}

.profile-front-container .profile-front-info .profile-front-info-cont .block:hover{
  background: transparent;
  color: red;
  border:none;
  text-decoration: underline;
}

.profile-front-container .profile-front-info .profile-front-info-cont .block svg{
  width:auto;
  height: 19px;
  margin-right: 5px;
  margin-top: auto;
  margin-bottom: auto;
  position: relative;
  display: inline-block;
  fill: red;
}

.profile-front-container .profile-front-info .profile-front-info-cont .block:hover svg{
  fill: red;
}







.profile-front-container .profile-front-content{
  width:100%;
  height:auto;
  position: relative;
  margin-top:35px;
  float: left;
  padding: 0px
}

.profile-front-container .profile-front-content .li-active{
  display: block !important;
}

.profile-front-container .profile-front-content .profile-front-content-header{
  width:100%;
  height:60px;
  position: relative;
  margin-top:0px;
  margin-bottom: 10px;
  float: left;
  padding: 0px;
  background: #FFF;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
}

.profile-front-container .profile-front-content .profile-front-content-header .header-navigation{
  width:auto;
  height:40px;
  margin-top:10px;
  margin-bottom: 10px;
  margin-left:20px;
  padding: 0px;
  display: flex;
  justify-content: space-between;
}

.profile-front-container .profile-front-content .profile-front-content-header .header-navigation .navigation-button{
  width:auto;
  height:40px;
  margin: 0px;
  padding: 0px;
  line-height: 40px;
  padding-left: 0px;
  padding-right: 20px;
  cursor: pointer;
  overflow: hidden;
}

.profile-front-container .profile-front-content .profile-front-content-header .header-navigation .li-active{
  text-decoration: underline;
  font-weight: bold;
}


.profile-front-container .profile-front-content .profile-front-content-header .search{
  width:auto;
  height:40px;
  margin-top:10px;
  margin-bottom: 10px;
  margin-right: 20px;
  padding: 0px;
  position: relative;
  display: flex;
}

.profile-front-container .profile-front-content .profile-front-content-header .search .search-input{
  width:auto;
  height:40px;
  margin:0px;
  padding: 0px;
  position: relative;
  display: none;
}


.profile-front-container .profile-front-content .profile-front-content-header .search .search-input input{
  width:250px;
  height: 40px;
  line-height: 30px;
  border-right: 0px;
  border-left: 1px solid #e5e7ea;
  border-top: 1px solid #e5e7ea;
  border-bottom: 1px solid #e5e7ea;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.profile-front-container .profile-front-content .profile-front-content-header .search .search-input input:focus{
  border-right: 0px;
  border-left: 1px solid #e5e7ea;
  border-top: 1px solid #e5e7ea;
  border: 1px solid #18253b;
  color:#18253b;
}

.profile-front-container .profile-front-content .profile-front-content-header .search .search-input input[type="text"]:valid {
  background-color: #FFF;
  background: #FFF;
}

.profile-front-container .profile-front-content .profile-front-content-header .search .search-input input:not(:placeholder-shown) {
  border-right: 0px;
  border-left: 1px solid #18253b;
  border-top: 1px solid #18253b;
  border-bottom: 1px solid #18253b;
  color:#18253b;
}

.profile-front-container .profile-front-content .profile-front-content-header .search .search-input .search-icon{
  width: 40px;
  height: 40px;
  margin: 0px;
  padding: 0px;
  background: #000080;
  border-right: 1px solid #e5e7ea;
  border-left: 0px;
  border-top: 1px solid #e5e7ea;
  border-bottom: 1px solid #e5e7ea;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  position: relative;
  cursor: pointer;
}



.profile-front-container .profile-front-content .profile-front-content-header .search .search-input .search-icon svg{
  width: 20px;
  height: 20px;
  fill:#FFF;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



.profile-front-container .profile-front-content .profile-front-content-header .sortby{
  width:auto;
  height: 30px;
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 0px;
  position: relative;
  display: inline-block;
}

.profile-front-container .profile-front-content .profile-front-content-header .sortby .sort-button {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0px;
  margin: 0px;
  position: relative;
}

.profile-front-container .profile-front-content .profile-front-content-header .sortby .sort-button:hover{
  background: none;
  border: none;
}

.profile-front-container .profile-front-content .profile-front-content-header .sortby .sort-button svg {
  width: 18px;
  height:18px;
  fill: #556071;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
}

.profile-front-container .profile-front-content .profile-front-content-header .sortby .sort-button:hover svg{
  fill: #18253b;
}

.profile-front-container .profile-front-content .profile-front-content-header .sortby .sort-list {
  width: 300px;
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  padding: 8px;
  margin: 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.profile-front-container .profile-front-content .profile-front-content-header .sortby .sort-list li {
  width: 100%;
  padding: 8px 16px;
  cursor: pointer;
  color: #18253b;
}

.profile-front-container .profile-front-content .profile-front-content-header .sortby .sort-list li.active {
  background-color: #e5e7ea;
}

.profile-front-container .profile-front-content .profile-front-content-header .sortby .sort-list li:hover {
  background-color: #e5e7ea;
}

.profile-front-container .profile-front-content .profile-front-content-header .sortby.active .sort-list {
  display: block;
}

.profile-front-container .profile-front-content .profile-front-content-header .sortby  select{
width:100%;
height: 30px;
border: 1px solid #e5e7ea;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
font-size: 14px;
color:#556071;
}

.profile-front-container .profile-front-content .profile-front-content-header .sortby select:focus{
border: 1px solid #18253b;
color:#18253b;
}

.profile-front-container .profile-front-content .profile-front-content-header .sortby select:has(option:checked[value="none"]) {
border: 1px solid #e5e7ea;
color: #556071;
}

.profile-front-container .profile-front-content .profile-front-content-header .sortby select:has(option:checked:not([value="none"])) {
border: 1px solid #18253b;
color: #18253b;
}







.profile-front-container .profile-front-content .list-active{
  display: none;
}

.profile-front-container .profile-front-content .list-expired{
  display: none;
}

.profile-front-container .profile-front-content .list-reviews{
  display: none;
}


.profile-front-container .profile-front-content .list-item-car{
  width: 100%;
  height:auto;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  margin-top: 10px;
  margin-bottom: 10px;
  float: left;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
  background: #FFF;
}

.profile-front-container .profile-front-content .list-item-car .list-item-img{
  width: 100%;
  overflow: hidden;
  height: auto; /* or remove if not needed */
  position: relative;
  float: left;
}

.profile-front-container .profile-front-content .list-item-car .list-item-img img{
  width: 100%;
  height: auto;
  display: block; /* removes inline gap from img */
  position:relative;
  top: 0;
  left: 0;
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
}


.profile-front-container .profile-front-content .list-item-car .list-item-img-3{
  display: none;
}




.profile-front-container .profile-front-content .list-item-car-add{
  width: 100%;
  height:auto;
  min-height: 200px;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  margin-top: 13px;
  margin-bottom: 13px;
  float: left;
  border:3px #e5e7ea dashed;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
  background: ;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.profile-front-container .profile-front-content .list-item-car-add svg{
  width: auto;
  height: 20px;
  margin-right: 15px;
  fill: #556071;
}

.profile-front-container .profile-front-content .list-item-car-add h3{
  color: #556071;
}

.profile-front-container .profile-front-content .list-item-car-add:hover{
  border:3px #646464 dashed;
}

.profile-front-container .profile-front-content .list-item-car-add:hover svg{
  fill: #18253b;
}

.profile-front-container .profile-front-content .list-item-car-add:hover h3{
  color: #18253b;
}

.profile-front-container .profile-front-content .list-item-car .list-item{
  width: 100%;
  height:250px;
  position: relative;
}


.profile-front-container .profile-front-content .list-item-car .list-item{
  width: 100%;
  height:436px;
  position: relative;
}


.profile-front-container .profile-front-content .list-item-car .list-item-hover{
  width: 100%;
  height:436px;
  top: -436px;
  background-color: rgba(0, 0, 93, 0.85);
  position: absolute;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  vertical-align: center;
  flex-wrap: wrap;
  padding: 10px;
}

.profile-front-container .profile-front-content .list-item-car .list-item-hover .item-hover-left{
  width: calc(50% - 10px);
  height:170px;
  padding-top: 0px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-right: auto;
  margin-left: auto;
}

.profile-front-container .profile-front-content .list-item-car .list-item-hover .item-hover-right{
  width: calc(50% - 10px);
  height:170px;
  padding-bottom: 0px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-right: auto;
  margin-left: auto;
}

.profile-front-container .profile-front-content .list-item-car .list-item-hover form{
  width: 100%;
}

.profile-front-container .profile-front-content .list-item-car .list-item-hover form button{
  width: 100%;
  border-radius: 25px;
}

.profile-front-container .profile-front-content .list-item-car .list-item:hover .list-item-hover{
  top:0;
}

.profile-front-container .profile-front-content .list-item-car .list-item-hover a{
  width: 100%;
  height: 50px;
}


.profile-front-container .profile-front-content .list-item-car .list-item-hover button{
  width: 100%;
  height:50px;
  background: none;
  margin-top: 0px;
  margin-bottom: 0px;
  color: #FFF;
  border: 1px solid #FFF;
  line-height: 20px;
  padding: 15px 25px;
  position: relative;
}

.profile-front-container .profile-front-content .list-item-car .list-item-hover button svg{
  width:auto;
  height: 18px;
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  fill: #FFF;
}

.profile-front-container .profile-front-content .list-item-car .list-item-hover button a{
  color: #FFF;
}

.profile-front-container .profile-front-content .list-item-car .list-item-hover button:hover{
  width: 100%;
  height:50px;
  background: none;
  color: #00005d;
  border: 1px solid #FFF;
  background: #FFF;
}

.profile-front-container .profile-front-content .list-item-car .list-item-hover button:hover svg{
  fill: #00005d;
}

.profile-front-container .profile-front-content .list-item-car .list-item-hover button:hover a{
  color: #646464;
}





.profile-front-container .profile-front-content .list-item-car .list-item-dscr {
  width:100%;
  height: 200px;
  position: relative;
  float: left;
  padding: 15px;
  box-sizing: border-box;
}

.profile-front-container .profile-front-content .list-item-car .list-item-dscr .dscr-title{
  width:100%;
  min-height: 50px;
}

.profile-front-container .profile-front-content .list-item-car .list-item-dscr h3{
  font-size: 20px;
  line-height: 25px;
  font-weight: bold;
}

.profile-front-container .profile-front-content .list-item-car .list-item-dscr h4{
  font-size: 17px;
  line-height: 25px;
  font-weight: 500;
  color: #556071;
}

.profile-front-container .profile-front-content .list-item-car .list-item-dscr .price{
  font-size: 20px !important;
  font-weight: bold;
  text-align: left;
  margin-top:15px;
}

.profile-front-container .profile-front-content .list-item-car .list-item-dscr .details{
  width:100%;
  height: 50px;
  position: relative;
  float: left;
  background: #F8FBFE;
  margin-top:15px;
  padding: 15px;
  border-radius: 10px;
  display: none;
  justify-content: space-around;

}

.profile-front-container .profile-front-content .list-item-car .list-item-dscr .details .details-item{
  width: auto;
  height: 18px;
  float: left;
  line-height: 18px;
  color: #000000;
  display: flex;
  gap: 10px;
}

.profile-front-container .profile-front-content .list-item-car .list-item-dscr .details .details-item svg{
  width: auto;
  height: 18px;
  fill:#18253B;
}

.profile-front-container .profile-front-content .list-item-car .list-item-dscr .details p{
  line-height: 18px;
  font-size: 15px;
  color:#18253B;
}


.profile-front-container .profile-front-content .list-item-car .list-item-dscr .vendor {
  width:250px;
  height: auto;
  position: absolute;
  bottom: 15px;
  margin-top:15px;
  margin-left: 5px;
  padding: 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap:15px;
}


.profile-front-container .profile-front-content .list-item-car .list-item-dscr .vendor .vendor-item{
  width:auto;
  height: 16px;
  margin: 0px;
  padding: 0px;
  line-height: 16px;
  font-size: 14px;
  display: flex;
  gap: 8px;
}


.profile-front-container .profile-front-content .list-item-car .list-item-dscr .vendor .vendor-item svg{
  width: auto;
  height: 16px;
  fill:#18253B;
}

.profile-front-container .profile-front-content .list-item-car .list-item-dscr .vendor p{
  line-height: 16px;
  font-size: 14px;
  color:#18253B;
}




.profile-front-container .profile-front-content .list-reviews .reviews-container{
  width:100%;
  height:auto;
  position: relative;
  margin-top:10px;
  padding: 20px;
  background: #FFF;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  float: left;
}

.profile-front-container .profile-front-content .list-reviews .reviews-header{
  width:100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  padding: 0px;
  position: relative;
  display: flex;
  justify-content: space-between;
}


.profile-front-container .profile-front-content .list-reviews .reviews-header h3{
  font-size: 17px;
  line-height: 30px;
}

.profile-front-container .profile-front-content .list-reviews .reviews-header i{
  font-size: 25px;
  line-height: 40px;
}

.profile-front-container .profile-front-content .list-reviews .reviews-header .reviews-positive{
  width:45%;
  height: 120px;
  margin: 0px;
  padding: 10px;
  position: relative;  
  text-align: center;
  background: #F8FBF8;
  color: #008030;
  border: 1px solid #008030;
  border-radius: 5px;
}

.profile-front-container .profile-front-content .list-reviews .reviews-header .reviews-negative{
  width:45%;
  height: 120px;
  margin: 0px;
  padding: 10px;
  position: relative;  
  text-align: center;
  background: #F5E7E4;
  color: #800600;
  border: 1px solid #800600;
  border-radius: 5px;
}


.profile-front-container .profile-front-content .list-reviews .list-item-review{
  width:100%;
  height: auto;
  margin-top: 30px;
  padding: 0px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  border-radius: 5px;
}

.profile-front-container .profile-front-content .list-reviews .positive-review{ 
  background: #F8FBF8;
  color: #008030;
  border: 1px solid #008030;
}

.profile-front-container .profile-front-content .list-reviews .negative-review{ 
  background: #F5E7E4;
  color: #800600;
  border: 1px solid #800600;
}


.profile-front-container .profile-front-content .list-reviews .list-item-review .item-review-left{
  width:100px;
  height: 100px;
  padding:10px;
  position: relative;
  box-sizing: border-box;
}

.profile-front-container .profile-front-content .list-reviews .list-item-review .item-review-left img{
  width:80px;
  height: 80px;
  padding:00px;
  border-radius: 50%;
  border:1px solid #EEe;
}

.profile-front-container .profile-front-content .list-reviews .list-item-review .item-review-center{
  width:70%;
  height: auto;
  padding:10px;
  position: relative;
  box-sizing: border-box;
}

.profile-front-container .profile-front-content .list-reviews .list-item-review .item-review-center .username{
  line-height: 50px;
  font-size: 18px;
}

.profile-front-container .profile-front-content .list-reviews .list-item-review .item-review-center .review-text{
  line-height: 20px;
  font-size: 14px;
}

.profile-front-container .profile-front-content .list-reviews .list-item-review .item-review-right{
  width:15%;
  height: auto;
  padding:10px;
  line-height: 50px;
  text-align: right;
  box-sizing: border-box;
  display: none;
}

.profile-front-container .profile-front-content .list-reviews .list-item-review .item-review-right p{
  font-size: 14px;
}
















/**************** USER Settings ****************/



.user-settings-container{
  width:100%;
  height: auto;
  display: flex;
  padding-right: 10px;
  padding-left: 10px;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
}


.user-settings-container .user-settings-info{
  width: 100%;
  height: auto;
  position: relative;
  margin-top: 35px;
  margin-right: auto;
  margin-left: auto;
  padding: 15px;
  background: #FFF;
  border-radius: 10px;
  border: 1px solid #E5E7EA;
  display: block;

}

.user-settings-container .user-settings-info a{
  text-decoration: none !important;
  font-size: 16px;
}

.user-settings-container .user-settings-info a:hover{
  color: black;
}

.user-settings-container .user-settings-info .info-nav-item{
  width:100% !important;
  height: 50px;
  margin:0px;
  padding: 0 10px;
  line-height: 50px;
  border-bottom: 1px solid #E5E7EA;
  text-align: left;
  display: flex;
  justify-content: flex-start;
  gap: 10px;
}

.user-settings-container .user-settings-info .info-nav-item svg{
  width:auto;
  height: 20px;
  margin-top: 15px;
  fill: #18253b;
}

.user-settings-container .user-settings-info .info-nav-item.active{
  font-weight: bold;
}



.user-settings-container .user-settings-content{
  width:100%;
  height:auto;
  position: relative;
  margin-top:35px;
  float: left;
  padding: 20px;
  background: #FFF;
  border-radius: 10px;
  border: 1px solid #E5E7EA;
}

.user-settings-container .user-settings-content .user-content-info{
  width: 100%;
  height: 50px;
  padding-bottom: 20px;
  background: ;
  border-bottom: 1px solid #E5E7EA;
  border-radius: 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  gap: 20px;
}

.user-settings-container .user-settings-content .user-content-info svg{
  width:auto;
  height: 30px;
  margin-top: 0px;
  fill: #18253b;
}

.user-settings-container .user-settings-content .user-content-info h3{
  line-height: 30px;
  font-size: 17px;
}

.user-settings-container .user-settings-content .user-content-container{
  width:100%;
  height: auto;
  position:relative;
  padding: 0px;
  box-sizing: border-box;
  overflow: hidden;
}



.user-settings-container .user-settings-content .user-2fa-container{
  width:100%;
  height: auto;
  position:relative;
  padding: 0px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}


.user-settings-container .user-settings-content .twofa-half{
  width:100% !important;
  height: auto;
  position:relative;
  padding: 0px;
  box-sizing: border-box;
  overflow: hidden;
  float: left;
}

.user-settings-container .user-settings-content .user-content-container h3{
  font-size: 17px;
  font-weight: bold;
}

.user-settings-container .user-settings-content .user-content-container p{
    margin-top: 30px;

}

.user-settings-container .user-settings-content .user-content-container .form-cell{
  width:100%;
  height:auto;
  margin-top:20px;
  margin-right:0%;
  float: left;
  position:relative;
  box-sizing: border-box;
}

.user-settings-container .user-settings-content .user-content-container .form-cell-verify{
  width:100%;
  height:auto;
  margin-top:20px;
  margin-right:0%;
  float: left;
  position:relative;
  box-sizing: border-box;
  display: flex;
  gap:10px;
}


.user-settings-container .user-settings-content .user-content-container .form-cell-right{
  width:100%;
  height:auto;
  margin-top:20px;
  margin-right:0px;
  float: left;
  position:relative;
  box-sizing: border-box;
}

.user-settings-container .user-settings-content .user-content-container .form-cell p{
  width:100%;
  line-height: 50px;
  margin:0px;
  padding-left: 0px;
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: bold;
  color:#000;
}

.user-settings-container .user-settings-content .user-content-container .form-cell-verify p{
  width:100%;
  line-height: 50px;
  margin:0px;
  padding-left: 0px;
  box-sizing: border-box;
  font-size: 1rem;
  font-weight: bold;
  color:#000;
}

.user-settings-container .user-settings-content .user-content-container .form-cell-right p{
  width:100%;
  line-height: 50px;
  margin:0px;
  padding-left: 0px;
  box-sizing: border-box;
  font-size: 1rem;
  color:#000;
}

.user-settings-container .user-settings-content .user-content-container .form-cell-verify svg{
   width: 20px;
   height: auto;
   padding: 0px;
   margin:0px;
   fill: #18253b;
}

.user-settings-container .user-settings-content .user-content-container .password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.user-settings-container .user-settings-content .user-content-container .password-wrapper input {
    width: 100%;
    padding-right: 40px; /* Add space for the eye icon */
}

.user-settings-container .user-settings-content .user-content-container .toggle-password {
    position: absolute;
    right: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.user-settings-container .user-settings-content .user-content-container .toggle-password svg {
    width: 100%;
    height: 100%;
    fill:#556071;
}
.user-settings-container .user-settings-content .user-content-container .toggle-password:hover svg {
    fill: #18253b;
}

.user-settings-container .user-settings-content .user-content-container .toggle-password.visible svg {
    fill: #18253b !important;
}

.user-settings-container .user-settings-content .user-content-container .lr-greska {
  display: block;
  width: 100%;
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  font-size: 0.7rem;
  color: #ac5c50;
  line-height: 20px;
  margin-top: 0;
}

.user-settings-container .user-settings-content .user-content-container .lr-greska::before {
  content: "";
  float: left;
  width: 10px; /* same as padding-left */
  height: 0;
  shape-outside: inset(0); /* modern browsers only */
}

.user-settings-container .user-settings-content .user-content-container  .in-greska{
  border: 1px solid #ac5c50 !important;
}


.user-settings-container .user-settings-content .user-content-container label{
  width:100%;
  line-height: 30px;
  padding-left: 10px;
  font-size: 14px;
  color:#556071;
}

.user-settings-container .user-settings-content .user-content-container label .tooltip-icon {
    width: 11.5px;
    height: 11.5px;
    color:#556071;
    border:1px solid #556071;
    text-align: center;
    font-size: 9px;
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
    position: absolute;
    display: inline-block;
    margin-top: 5px;
    margin-left:5px;
    line-height: 10px;

}

.user-settings-container .user-settings-content .user-content-container label .tooltip-text {
    display: none;
    position: absolute;
    background-color: #556071;
    color: #fff;
    padding: 10px;
    font-size: 12px;
    line-height: 15px;
    border-radius: 10px;
    top: 20px;
    left: 10px;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    width: 400px; /* Set maximum width */
    white-space: normal; /* Allow text to wrap */
}

.user-settings-container .user-settings-content .user-content-container label .tooltip-icon:hover + .tooltip-text {
    display: block;
    opacity: 1;
}

.user-settings-container .user-settings-content .user-content-container input{
  width:100%;
  height: 50px;
  line-height: 30px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.user-settings-container .user-settings-content .user-content-container input:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.user-settings-container .user-settings-content .user-content-container input[type="text"]:valid {
  background-color: #FFF;
  background: #FFF;
}

.user-settings-container .user-settings-content .user-content-container input:not(:placeholder-shown) {
  border: 1px solid #18253b;
  color:#18253b;
}

.user-settings-container .user-settings-content .user-content-container  select{
  width:100%;
  height: 50px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.user-settings-container .user-settings-content .user-content-container select:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

/* Default state when 'none' is selected */
.user-settings-container .user-settings-content .user-content-container select:has(option:checked[value="none"]) {
  border: 1px solid #e5e7ea;
  color: #556071;
}

/* When a valid option is selected */
.user-settings-container .user-settings-content .user-content-container select:has(option:checked:not([value="none"])) {
  border: 1px solid #18253b;
  color: #18253b;
}




/* When a valid option is selected */
.user-settings-container .user-settings-content .user-content-container .kod-button{
  margin-top: 30px;
}


.user-settings-container .user-settings-content .user-content-container .novi-greska{
  width:100%;
  height: 20px;
  line-height: 20px;
  margin-top: 0px;
  padding-left: 15px;
  box-sizing: border-box;
  font-size: 0.7rem;
  background:;
  color:#cf5959;
}

.user-settings-container .user-settings-content .user-content-container .form-cell-photo{
  width:100%;
  height:130px;
  margin-top:30px;
  margin-bottom:0px;
  float: left;
  position:relative;
  box-sizing: border-box;
}

.user-settings-container .user-settings-content .user-content-container .form-cell-photo input{
  border: 1px solid #e5e7ea;
  border-radius: 0px;
  margin: 0px;
}

.user-settings-container .user-settings-content .user-content-container .form-cell-photo-img{
  width:130px;
  height:130px;
  top: 0;
  left: 0;
  position:absolute;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  box-sizing: border-box;
}

.user-settings-container .user-settings-content .user-content-container .form-cell-photo-img img{
  width: 130px;
  height:auto;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}


.user-settings-container .user-settings-content .user-content-container .form-cell-photo-upload{
  width: calc(100% - 145px;);
  height:50px;
  top: 50px;
  left: 145px;
  position:absolute;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}

.user-settings-container .user-settings-content .user-content-container .form-cell-photo-upload .custom-photo-label {
  width:auto;
  height:40px;
  padding: 0px 10px;
  background: none;
  color: #000080 !important;
  border:1px solid #000080;
  border-radius: 25px;
  box-sizing:border-box;
  margin-top:0px;
  clear: both;
  font-size: 13px;
  font-weight: 600;
  line-height: 40px !important;
  text-align: center;
  overflow: hidden;
}

.user-settings-container .user-settings-content .user-content-container .form-cell-photo-upload .custom-photo-label:hover{
  background: #000080;
  color: #FFF !important;
  border:1px solid #000080;
}

.user-settings-container .user-settings-content .user-content-container .form-cell-photo-upload #photo-preview {
  width:60px;
  height:60px;
  top: 0;
  left: 0;
  position:relative;
  border-radius: 5px;
  box-sizing: border-box;
}

.user-settings-container .user-settings-content .user-content-container .form-cell-photo-upload #photo-preview img {
  max-width: 100%;
  height: auto;
  margin: 0px;
  border-radius: 10px;
  border: 1px solid #e5e7ea;
}

.user-settings-container .user-settings-content .user-content-container .form-cell-photo-upload .remove-photo-btn {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: #000;
  color: white;
  border: none;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  line-height: 11px;
  padding: 2px;
  margin:0px;
  font-size: 11px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
}


.user-settings-container .user-settings-content .user-content-container .form-cell-checkbox{
  width:100%;
  height:auto;
  margin-top:30px;
  margin-right:0%;
  float: left;
  position:relative;
  box-sizing: border-box;

}

.user-settings-container .user-settings-content .user-content-container .form-cell-checkbox-right{
  width:100%;
  height:auto;
  margin-top:30px;
  margin-right:0px;
  float: left;
  position:relative;
  box-sizing: border-box;
}

.user-settings-container .user-settings-content .user-content-container .checkbox-header{
  width:100%;
  height:30px;
  margin:0;
  padding: 0 20px;
  float: left;
  position:relative;
  line-height:30px;
  background: #FFF;
}

.user-settings-container .user-settings-content .user-content-container .checkbox-header p{
  margin:0px;
}

.user-settings-container .user-settings-content .user-content-container .checkbox-row{
  width:100%;
  height:50px;
  margin:0;
  padding: 0 20px;
  float: left;
  position:relative;
  display: flex;
  justify-content: space-between;
  vertical-align: middle;
  line-height: 50px;
  border-top: 1px solid #EEE;
}

.user-settings-container .user-settings-content .user-content-container .checkbox-row input[type="checkbox"] {
  display: none;
}

.user-settings-container .user-settings-content .user-content-container .checkbox-row label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding-left: 35px;
  font-size: 14px;
  color: #18253b;
  user-select: none;
  margin:10px;
}

.user-settings-container .user-settings-content .user-content-container .checkbox-row label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1px solid #18253b;
  border-radius: 4px;
  background-color: #fff;
  transition: all 0.3s ease;
}

.user-settings-container .user-settings-content .user-content-container .checkbox-row input[type="checkbox"]:checked + label::before {
  background-color: #000080;
  border: 1px solid #000080;
}

.user-settings-container .user-settings-content .user-content-container .checkbox-row input[type="checkbox"]:checked + label::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-60%) rotate(45deg);
  width: 6px;
  height: 12px;
  border: solid #FFF;
  border-width: 0 2px 2px 0;
  transition: all 0.3s ease;
}

.user-settings-container .user-settings-content .user-content-container .checkbox-row label:hover::before {
  background-color: #f9fcff;
  border: 1px solid #000080;
}



.user-settings-container .user-settings-content .save-button{
  margin-top:50px;
}

.user-settings-container .user-settings-content .confirm-button{
  margin-top:0px;
}















/**************** USER - SAVED CARS ****************/

.save-content{
  width:100%;
  height:auto;
  position: relative;
  margin-top:0px;
  float: left;
  padding: 0px;
}

.save-content .saved-cars{
  width:100%;
  height:auto;
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap:23px;
  padding: 25px;
  background: #FFF;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  overflow: hidden;
}





.save-content .saved-cars .car-item{
  width: 300px;
  height:auto;
  position: relative;
  margin:0px;
  padding-bottom:0px;
  float: left;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.save-content .saved-cars .car-item .remove{
  width: 30px;
  height: 30px;
  position: absolute;
  top:0;
  right: 0;
  text-align: center;
  z-index: 1000;
  cursor: pointer;
}

.save-content .saved-cars .car-item .remove form{
  width: 30px;
  height: 30px;
}

.save-content .saved-cars .car-item .remove button{
  width: 100%;
  height: 30px;
  margin:0px;
  padding: 0px;
  font-size: 16px;
  line-height: 30px; 
  background: #000080;
  color: #e1e7f4;
  border:1px solid #000080;
  border-radius: 0px;
  position: relative;
}

.save-content .saved-cars .car-item .remove button:hover{
  background: #00005d;
  color: #FFF;
  border:1px solid #00005d;
}


.save-content .saved-cars .car-item .remove button svg{
  width:auto;
  height: 16px;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: #e1e7f4;
}

.save-content .saved-cars .car-item .remove button:hover svg{
  fill: #FFF;
}

.save-content .saved-cars .car-item-img{
  width:300px;
  height:200px;
  position: relative;
  overflow: hidden;
}

.save-content .saved-cars .car-item-img img{
  width: 100%;
  height:auto;
  position:absolute;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}


.save-content .saved-cars .car-item-dscr {
  width:100%;
  margin-top: 0px;
  padding: 5px;
}


.save-content .saved-cars .car-item-dscr .car-item-title{
  width:100%;
  min-height: 50px;
  margin-top: 10px;
  padding: 0px;
}

.save-content .saved-cars .car-item-dscr .car-item-title h3{
  font-size: 18px;
  line-height: 25px;
  font-weight: bold;
}

.save-content .saved-cars .car-item-dscr .car-item-title h4{
  font-size: 16px;
  line-height: 25px;
  font-weight: 500;
  color: #556071;
}

.save-content .saved-cars .car-item-dscr .price{
  font-size: 18px;
  font-weight: bold;
  text-align: right;
  line-height: 50px;
  margin-top:15px;
}


.save-content .saved-cars .car-item-dscr .details{
  width:100%;
  height: auto;
  max-height: 60px;
  overflow: hidden;
  position: relative;
  float: left;
  background: #FFF;
  margin-top:15px;
  padding: 5px;
  border-radius: 10px;
  display: flex;
  justify-content: flex-start;
  column-gap: 15px;
  row-gap: 5px;
  flex-wrap: wrap;
  vertical-align: center;
  order: 3;
}

.save-content .saved-cars .car-item-dscr .details .details-item{
  width: auto;
  height: 20px;
  float: left;
  line-height: 18px;
  color: #000000;
  position: relative;
  display: flex;
  vertical-align: center;
  align-items: center;
  gap:5px;

}

.save-content .saved-cars .car-item-dscr .details .details-item svg{
  width: auto;
  height: 15px;
  position: relative;
  top:0px;
  left:0%;
  transform: translate(0%,0%);
  fill:#18253B;
}

.save-content .saved-cars .car-item-dscr .details p{
  line-height: 15px;
  font-size: 14px !important;
  margin-top: 0px;
  color:#18253B;
  text-align: center;
  margin-left: 0px;
}

.save-content .saved-cars .car-item-dscr .details p:after{
  display: none;
}

.save-content .saved-cars .car-item-dscr .details p:before{
  display: none;
}

.save-content .saved-cars .car-item-dscr .car-item-vendor{
  width:100%;
  height: 30px;
  margin:0px;
  padding: 0px;
  display: flex;
  justify-content: space-between;
  position: relative;
}

.save-content .saved-cars .car-item-dscr .car-item-vendor .vendor-name{
  width:auto;
  height: 30px;
  padding: 0px;
  display: flex;
  justify-content: flex-start;
  gap: 5px;
}

.save-content .saved-cars .car-item-dscr .car-item-vendor .vendor-name svg{
  width:auto;
  height: 15px;
  margin-top:7.5px;
  fill: #556071;
}

.save-content .saved-cars .car-item-dscr .car-item-vendor .vendor-name p{
  line-height: 15px;
  font-size: 14px;
  margin-top: 7.5px;
  color: #556071;
}

.save-content .saved-cars .car-item-dscr .car-item-vendor .vendor-location{
  width:auto;
  height: 30px;
  padding: 0px;
  display: flex;
  justify-content: flex-start;
  gap: 5px;
}

.save-content .saved-cars .car-item-dscr .car-item-vendor .vendor-location svg{
  width:auto;
  height: 15px;
  margin-top:7.5px;
  fill: #556071;
}

.save-content .saved-cars .car-item-dscr .car-item-vendor .vendor-location p{
  line-height: 15px;
  font-size: 14px;
  margin-top: 7.5px;
  color: #556071;
}
















/**************** USER - SAVED USERs ****************/

.save-content{
  width:100%;
  height:auto;
  position: relative;
  margin-top:0px;
  float: left;
  padding: 0px;
}

.save-content .saved-users{
  width:100%;
  height:auto;
  position: relative;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 20px;
  background: #FFF;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  overflow: hidden;
}




.save-content .saved-users .user-item{
  width: 270px;
  height:auto;
  position: relative;
  margin:20px;
  padding-bottom: 0px;
  float: left;
  box-sizing: border-box;
  overflow: hidden;
}

.save-content .saved-users .user-item .remove{
  width: 30px;
  height: 30px;
  position: absolute;
  top:0;
  right: 0;
  text-align: center;
  z-index: 1000;
  cursor: pointer;
}

.save-content .saved-users .user-item .remove button{
  width: 100%;
  height: 30px;
  margin:0px;
  padding: 0px;
  font-size: 16px;
  line-height: 30px; 
  background: #000080;
  color: #e1e7f4;
  border:1px solid #000080;
  border-top-right-radius: 10px !important;
  border-radius: 0px;
  position: relative;
}

.save-content .saved-users .user-item .remove button:hover{
  background: #00005d;
  color: #FFF;
  border:1px solid #00005d;
}


.save-content .saved-users .user-item .remove button svg{
  width:auto;
  height: 16px;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  fill: #e1e7f4;
}

.save-content .saved-users .user-item .remove button:hover svg{
  fill: #FFF;
}


.save-content .saved-users .user-item-img{
  width:100px;
  height:100px;
  position: relative;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: -50px;
  z-index: 10;
}

.save-content .saved-users .user-item-img img{
  width: 100%;
  height:auto;
  position:absolute;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  border-radius: 50%;
  border: 1px solid #EEE;
  background-color: #EEE;
}

.save-content .saved-users .user-item-dscr {
  width:100%;
  height:170px;
  padding: 0px;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  position: relative;
  text-align: center;
}


.save-content .saved-users .user-item-dscr h3{
  font-size: 18px;
  font-weight: bold;
  line-height: 40px;
  height: 40px;
  margin-top:50px;
}

.save-content .saved-users .user-item-dscr .actions {
  width:100px;
  height:40px;
  margin-top: 10px;
  margin-left:auto;
  margin-right: auto;
  padding: 0px;
  display: flex;
  justify-content: space-between;
  text-align: center;
}


.save-content .saved-users .user-item-dscr .actions .call{
  width:40px;
  height:40px;
  padding: 0px;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  border-radius: 50%;
  border:1px #e5e7ea solid;
}


.save-content .saved-users .user-item-dscr .actions .mess{
  width:40px;
  height:40px;
  padding: 0px;
  line-height: 40px;
  text-align: center;
  font-size: 15px;
  border-radius: 50%;
  border:1px #e5e7ea solid;
}














/**************** HOMEPAGE ****************/





/* PART I */

.search-container{
    height: auto;
    min-height: 300px;
    display: block;
    position: relative;
    background-position: center;
    background-size: cover;
    background-image: url(img/hero.jpg) !important;
    background-repeat: no-repeat;
    padding:0px;
    z-index: 10;
}

.search-container .search-box-container{
  max-width: calc(100% - 20px);
  height: 300px;
  margin-left:auto;
  margin-right:auto;
  padding:0px;
  position: relative;
}

.search-container .search-box-container .search-box-content{
  width:100%;
  height:auto;
  margin: 0px;
  padding: 0px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  position: absolute;
  box-sizing: border-box;
}

.search-container .search-box-container .search-box-content .sr-active{
  display: flex !important;
}



.search-container .search-box-container .search-box{
  width:100%;
  height:auto;
  margin-left: 0px;
  padding: 10px;
  position: relative;
  border: 1px solid #E5E7EA;
  border-radius: 10px;
  background:#FFF;
  box-sizing: border-box;
}


.search-container .search-box-container .search-box .search-form{
  width:100%;
  height: auto;
  margin:0px;
  position: relative;
  display: none;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.search-container .search-box-container .search-box .search-form .form-cell{
  width:calc(50% - 5px);
  height:45px;
  margin:0px;
  padding: 0px;
  position:relative;
  box-sizing: border-box;
}

.search-container .search-box-container .search-box .search-form .form-cell  select{
  width:100%;
  height: 45px;
  border-bottom: 1px solid #e5e7ea;
  border-radius: 0px;
  padding-left: 10px;
  padding-right: 35px;
  box-sizing: border-box;
  font-size: 14px;
  color:#18253b;
}

.search-container .search-box-container .search-box .search-form .form-cell select:focus{
  border-bottom: 1px solid #18253b;
  color:#18253b;
}

.search-container .search-box-container .search-box .search-form .form-cell select:has(option:checked[value="none"]) {
  border-bottom: 1px solid #e5e7ea;
  color: #18253b;
}

.search-container .search-box-container .search-box .search-form .form-cell select:has(option:checked:not([value="none"])) {
  border-bottom: 1px solid #18253b;
  color: #18253b;
}

.search-container .search-box-container .search-box .search-button{
  width: 100%;
  height:100px;
  margin-top: 10px;
  margin-left: 0px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
}

.search-container .search-box-container .search-box .search-button .search-button-left{
  width: 100%;
  height:40px;
  line-height:40px;
  text-align: center;
  display: block;
}

.search-container .search-box-container .search-box .search-button .search-button-left a{
  width: auto !important;          /* shrink to text width */
  display: inline-flex !important;  /* keep explicit display + content width */
  line-height: 40px;
  color:#556071;
  font-size: 14px;
  text-align: center;
  align-items: center;              /* works with inline-flex */
  justify-content: center;          /* center text inside */
  white-space: nowrap;              /* prevent wrapping so width = text */
}


.search-container .search-box-container .search-box .search-button .search-button-left a:hover{
  color:#18253b;
}

.search-container .search-box-container .search-box .search-button .search-button-right{
  width: 100%;
  height:50px;
  text-align: center;
}

.search-container .search-box-container .search-box .search-button .search-button-right button{
  width: 100%;
  height: 50px;
  margin:0px;
  line-height: 50px;
  text-align: center;
  display: block;
}






/* PART II */

.best-offer-container{
  width: 100%;
  height:auto;
  position: relative;
  margin-top:0px;
}

.best-offer-container .best-offer{
  width: 100%;
  height:auto;
  position: relative;
  margin-top:35px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 10px;
  padding-left: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap:10px;
}

.best-offer-container .best-offer .best-offer-title{
  width:100%;
  height: 35px;
  margin-bottom: 20px;
}

.best-offer-container .best-offer .best-offer-title h2{
  font-size: 25px;
  font-weight: bold;
  line-height: 35px;
}

.best-offer-container .best-offer .view-all-button{
  width:100%;
  height: 50px;
  text-align: center;
  margin-top: 20px;
}

.best-offer-container .best-offer .view-all-button .search-all{
  line-height: 50px;
  color:#556071;
}

.best-offer-container .best-offer .view-all-button .search-all:hover{
  color:#18253b;
}

.best-offer-container .best-offer a{
  width: calc(50% - 5px);
  display: inline-block;
}

.best-offer-container .best-offer .car-item{
  width: 100%;
  height:auto;
  position: relative;
  margin:0px;
  padding-bottom:0px;
  float: left;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.best-offer-container .best-offer .car-item .car-item-spons{
  width: auto;
  height:auto;
  top:5px;
  left: 10px;
  position: absolute;
  z-index: 1000;
}

.best-offer-container .best-offer .car-item .car-item-spons p{
  font-size: 10px !important;
  color:#FFF;
  line-height: 15px;
}

.best-offer-container .best-offer .car-item-img{
  width:100%;
  height:auto;
  min-height:0;
  position: relative;
  overflow: hidden;
}


.best-offer-container .best-offer .car-item-img .item-img-shadow {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    height: 70px;
    top: 0; /* Align it to the top */
    left: 0;
    right: 0;
    opacity: 0.9;
}

.best-offer-container .best-offer .car-item-img img{
  width: 100%;
  height:auto;
  position:relative;
  top: 0%;
  display: block;
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
}


.best-offer-container .best-offer .car-item-dscr {
  width:100%;
  margin-top: 0px;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
}


.best-offer-container .best-offer .car-item-dscr .car-item-title{
  width:100%;
  min-height: 40px;
  margin-top: 0px;
  padding-left: 5px;
  padding-right: 5px;
  order: 1;
}

.best-offer-container .best-offer .car-item-dscr .car-item-title h3{
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.best-offer-container .best-offer .car-item-dscr .car-item-title h4{
  font-size: 11px;
  line-height: 20px;
  font-weight: 500;
  color: #556071;
}

.best-offer-container .best-offer .car-item-dscr .car-item-price{
  width: 100%;
  order: 2;
  margin-top: 5px;
}

.best-offer-container .best-offer .car-item-dscr .price{
  font-size: 18px;
  font-weight: bold;
  text-align: right;
  line-height: 20px;
  margin-top:0px;
  padding-left: 5px;
  padding-right: 5px;
}

.best-offer-container .best-offer .car-item-dscr .details{
  width:100%;
  height: auto;
  min-height: 20px;
  max-height: 50px;
  overflow: hidden;
  position: relative;
  float: left;
  background: #FFF;
  margin-top:5px;
  padding: 5px;
  border-radius: 10px;
  display: flex;
  justify-content: flex-start;
  column-gap: 10px;
  row-gap: 2px;
  flex-wrap: wrap;
  vertical-align: center;
  order: 3;
}

.best-offer-container .best-offer .car-item-dscr .details .details-item{
  width: auto;
  height: 20px;
  float: left;
  line-height: 18px;
  color: #000000;
  position: relative;
  display: flex;
  vertical-align: center;
  align-items: center;

}

.best-offer-container .best-offer .car-item-dscr .details .details-item svg{
  width: auto;
  height: 13px;
  position: relative;
  top:0px;
  left:0%;
  transform: translate(0%,0%);
  fill:#18253B;
}

.best-offer-container .best-offer .car-item-dscr .details p{
  line-height: 13px;
  font-size: 12px !important;
  margin-top: 0px;
  color:#18253B;
  text-align: center;
  margin-left: 3px;
}

.best-offer-container .best-offer .car-item-dscr .details p:after{
  display: none;
}

.best-offer-container .best-offer .car-item-dscr .details p:before{
  display: none;
}

.best-offer-container .best-offer .car-item-dscr .car-item-vendor{
  width:100%;
  height: 20px;
  margin:0px;
  padding-left: 5px;
  padding-right: 5px;
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  order: 4;
  position: relative;
}

.best-offer-container .best-offer .car-item-dscr .car-item-vendor .vendor-name{
  width:auto;
  height: 20px;
  padding: 0px;
  display: flex;
  justify-content: flex-start;
  gap: 5px;
}

.best-offer-container .best-offer .car-item-dscr .car-item-vendor .vendor-name svg{
  width:auto;
  height: 13px;
  margin-top:3.5px;
  fill: #556071;
}

.best-offer-container .best-offer .car-item-dscr .car-item-vendor .vendor-name p{
  line-height: 13px;
  font-size: 11px !important;
  margin-top: 3.5px;
  color: #556071;
}

.best-offer-container .best-offer .car-item-dscr .car-item-vendor .vendor-location{
  width:auto;
  height: 20px;
  padding: 0px;
  display: flex;
  justify-content: flex-start;
  gap: 5px;
}

.best-offer-container .best-offer .car-item-dscr .car-item-vendor .vendor-location svg{
  width:auto;
  height: 13px;
  margin-top:3.5px;
  fill: #556071;
}

.best-offer-container .best-offer .car-item-dscr .car-item-vendor .vendor-location p{
  line-height: 13px;
  font-size: 11px !important;
  margin-top: 3.5px;
  color: #556071;
}



.new-offer-container{
  width: 100%;
  height:auto;
  position: relative;
  margin-top:0px;
}

.new-offer-container .new-offer{
  width: 100%;
  height:auto;
  position: relative;
  margin-top:35px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 10px;
  padding-left: 10px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap:10px;
}

.new-offer-container .new-offer .new-offer-title{
  width:100%;
  height: 30px;
  margin-bottom: 20px;
}

.new-offer-container .new-offer .new-offer-title h2{
  font-size: 25px;
  font-weight: bold;
  line-height: 30px;
}

.new-offer-container .new-offer .view-all-button{
  width:100%;
  height: 30px;
  text-align: center;
  margin-top: 20px;
}

.new-offer-container .new-offer .view-all-button .search-all{
  line-height: 30px;
  color:#556071;
}

.new-offer-container .new-offer .view-all-button .search-all:hover{
  color:#18253b;
}

.new-offer-scroll-wrapper {
  position: relative;
  width: 100%;
}

/* horizontal row with snap + smooth scroll (mobile) */
.new-offer-list {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;              /* enable X scroll */
  overflow-y: hidden;            /* hide Y overflow */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  gap: 20px;
  padding-bottom: 10px;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

.new-offer-list::-webkit-scrollbar { height: 8px; }
.new-offer-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

/* ARROW BUTTONS */
.newo-scroll-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  border: none;
  cursor: pointer;
  z-index: 5;
  display: none !important;
}
.newo-scroll-btn.left  { left: -25px; display: none; } /* hidden initially */
.newo-scroll-btn.right { right: -25px; }
.newo-scroll-btn:hover { background-color: #f9f9fa; }
.newo-scroll-btn svg{
  width: 20px;
  height: 20px;
  fill: #18253B;
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* IMPORTANT: item width = calc(50% - 5px) inside the scroller */
.new-offer-container .new-offer .new-offer-list > a {
  flex: 0 0 calc(50% - 5px);     /* basis & no grow/shrink */
  width: calc(50% - 5px) !important;
  display: block;
  scroll-snap-align: start;
}




.new-offer-container .new-offer .car-item{
  width: 100%;
  height:auto;
  position: relative;
  margin:0px;
  padding-bottom:0px;
  float: left;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.new-offer-container .new-offer .car-item .car-item-spons{
  width: auto;
  height:auto;
  top:5px;
  left: 10px;
  position: absolute;
  z-index: 1000;
}

.new-offer-container .new-offer .car-item .car-item-spons p{
  font-size: 10px !important;
  color:#FFF;
  line-height: 15px;
}

.new-offer-container .new-offer .car-item-img{
  width:100%;
  height:auto;
  min-height:0;
  position: relative;
  overflow: hidden;
}


.new-offer-container .new-offer .car-item-img .item-img-shadow {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 100;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    height: 70px;
    top: 0; /* Align it to the top */
    left: 0;
    right: 0;
    opacity: 0.9;
}

.new-offer-container .new-offer .car-item-img img{
  width: 100%;
  height:auto;
  position:relative;
  top: 0%;
  display: block;
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
}


.new-offer-container .new-offer .car-item-dscr {
  width:100%;
  margin-top: 0px;
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
}


.new-offer-container .new-offer .car-item-dscr .car-item-title{
  width:100%;
  min-height: 40px;
  margin-top: 0px;
  padding-left: 5px;
  padding-right: 5px;
  order: 1;
}

.new-offer-container .new-offer .car-item-dscr .car-item-title h3{
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.new-offer-container .new-offer .car-item-dscr .car-item-title h4{
  font-size: 11px;
  line-height: 20px;
  font-weight: 500;
  color: #556071;
}

.new-offer-container .new-offer .car-item-dscr .car-item-price{
  width: 100%;
  order: 2;
  margin-top: 5px;
}

.new-offer-container .new-offer .car-item-dscr .price{
  font-size: 18px;
  font-weight: bold;
  text-align: right;
  line-height: 20px;
  margin-top:0px;
  padding-left: 5px;
  padding-right: 5px;
}

.new-offer-container .new-offer .car-item-dscr .details{
  width:100%;
  height: auto;
  min-height: 20px;
  max-height: 50px;
  overflow: hidden;
  position: relative;
  float: left;
  background: #FFF;
  margin-top:5px;
  padding: 5px;
  border-radius: 10px;
  display: flex;
  justify-content: flex-start;
  column-gap: 10px;
  row-gap: 2px;
  flex-wrap: wrap;
  vertical-align: center;
  order: 3;
}

.new-offer-container .new-offer .car-item-dscr .details .details-item{
  width: auto;
  height: 20px;
  float: left;
  line-height: 18px;
  color: #000000;
  position: relative;
  display: flex;
  vertical-align: center;
  align-items: center;

}

.new-offer-container .new-offer .car-item-dscr .details .details-item svg{
  width: auto;
  height: 13px;
  position: relative;
  top:0px;
  left:0%;
  transform: translate(0%,0%);
  fill:#18253B;
}

.new-offer-container .new-offer .car-item-dscr .details p{
  line-height: 13px;
  font-size: 12px !important;
  margin-top: 0px;
  color:#18253B;
  text-align: center;
  margin-left: 3px;
}

.new-offer-container .new-offer .car-item-dscr .details p:after{
  display: none;
}

.new-offer-container .new-offer .car-item-dscr .details p:before{
  display: none;
}

.new-offer-container .new-offer .car-item-dscr .car-item-vendor{
  width:100%;
  height: 20px;
  margin:0px;
  padding-left: 5px;
  padding-right: 5px;
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
  order: 4;
  position: relative;
}

.new-offer-container .new-offer .car-item-dscr .car-item-vendor .vendor-name{
  width:auto;
  height: 20px;
  padding: 0px;
  display: flex;
  justify-content: flex-start;
  gap: 5px;
}

.new-offer-container .new-offer .car-item-dscr .car-item-vendor .vendor-name svg{
  width:auto;
  height: 13px;
  margin-top:3.5px;
  fill: #556071;
}

.new-offer-container .new-offer .car-item-dscr .car-item-vendor .vendor-name p{
  line-height: 13px;
  font-size: 11px !important;
  margin-top: 3.5px;
  color: #556071;
}

.new-offer-container .new-offer .car-item-dscr .car-item-vendor .vendor-location{
  width:auto;
  height: 20px;
  padding: 0px;
  display: flex;
  justify-content: flex-start;
  gap: 5px;
}

.new-offer-container .new-offer .car-item-dscr .car-item-vendor .vendor-location svg{
  width:auto;
  height: 13px;
  margin-top:3.5px;
  fill: #556071;
}

.new-offer-container .new-offer .car-item-dscr .car-item-vendor .vendor-location p{
  line-height: 13px;
  font-size: 11px !important;
  margin-top: 3.5px;
  color: #556071;
}



.home-market-container{
  width: 100%;
  height:auto;
  position: relative;
  margin-top:0px;
}

.home-market-container .home-market{
  width: 100%;
  height:auto;
  position: relative;
  margin-top:35px;
  margin-bottom: 35px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}



.home-market-container .home-market .home-market-title{
  width:100%;
  height: 35px;
  margin-bottom: 20px;
}

.home-market-container .home-market .home-market-title h2{
  font-size: 25px;
  font-weight: bold;
  line-height: 35px;
}


.home-market-container .home-market .view-all-button{
  width:100%;
  height: 50px;
  text-align: center;
  margin-top: 20px;
}

.home-market-container .home-market .view-all-button .search-all{
  line-height: 50px;
  color:#556071;
}

.home-market-container .home-market .view-all-button .search-all:hover{
  color:#18253b;
}

.home-market-container .home-market .home-market-text{
  width:100%;
  height: auto;
  margin-bottom: 35px;
}

.home-market-container .home-market .home-market-text h2{
  font-size: 25px;
  font-weight: bold;
  line-height: 35px;
  margin-bottom: 25px;
}

.home-market-scroll-wrapper {
  position: relative;
  width: 100%;
}

.market-scroll-btn {
  display: none !important;
}

.home-market-container .home-market .home-market-list{
  width:100%;
  height: auto;
  margin:0px;
  padding: 0px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;   /* ✅ Horizontal scroll */
  overflow-y: hidden;
  gap: 20px;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.home-market-container .home-market .home-market-list.dragging {
  cursor: grabbing;
}

.home-market-container .home-market .home-market-list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* Scrollbar thumb */
.home-market-container .home-market .home-market-list::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

/* Optional: hide scrollbar track if you want minimal look */
.home-market-container .home-market .home-market-list::-webkit-scrollbar-track {
  background: transparent;
}

.home-market-container .home-market .market-item{
  width: 200px;
  height:246px;
  margin-bottom: 35px;
  position: relative;
  float: left;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.home-market-container .home-market .market-item-dscr {
  width:100%;
  height:50px;
  line-height: 30px;
  padding: 10px;
  text-align: center;
}


.home-market-container .home-market .market-item-dscr h3{
  font-size: 18px;
  font-weight: bold;
  line-height: 30px;
}


.home-market-container .home-market .market-item-img{
  width:200px;
  height:200px;
  position: relative;
  overflow: hidden;
  border-bottom:1px #e5e7ea solid;
}

.home-market-container .home-market .market-item-img img{
  width: 100%;
  height:auto;
  position:absolute;
  top: 50%;
  -webkit-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}






.home-brand-container{
  width: 100%;
  height:auto;
  position: relative;
  background: #f9f9fa;
  margin-top: 50px;
  padding-top: 50px;
  padding-bottom: 50px;
}

.home-brand-container .home-brand{
  width: 100%;
  height:auto;
  position: relative;
  margin-top:0px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
  display: flex;
  justify-content: space-around;
  gap: 20px;
  flex-wrap: wrap;
}

.home-brand-container .home-brand-title{
  width:100%;
  height: auto;
  margin-bottom: 20px;
}

.home-brand-container .home-brand .home-brand-title h2{
  font-size: 25px;
  font-weight: bold;
  line-height: 35px;
}

.home-brand-container .home-brand .view-all-button{
  width:100%;
  height: 50px;
  text-align: center;
  margin-top: 20px;
}

.home-brand-container .home-brand .view-all-button .search-all{
  line-height: 50px;
  color:#556071;
}

.home-brand-container .home-brand .view-all-button .search-all:hover{
  color:#18253b;
}

.home-brand-container .home-brand .brand-items{
  width: 100%;
  height:auto;
  position: relative;
  margin-top: 0px;
  padding: 0px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;   /* ✅ Horizontal scroll */
  overflow-y: hidden;
  gap: 10px;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.home-brand-container .home-brand .brand-items.dragging {
  cursor: grabbing;
}

.home-brand-container .home-brand .brand-items::-webkit-scrollbar {
  display: none;
}

.home-brand-container .home-brand .brand-items .brand-item{
  width: 145px;
  height:145px;
  position: relative;
  padding:0px;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
}

.home-brand-container .home-brand .brand-items .brand-item-img{
  width:100px;
  height:100px;
  margin:22.5px;
  position: relative;
  overflow: hidden;
}

.home-brand-container .home-brand .brand-items .brand-item-img img{
  width: 100px;
  height:auto;
  position:absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0.7;
}


.home-brand-container .home-brand .brand-items .brand-item:hover img{
  opacity: 1;
}
















/**************** SEARCH ****************/



.search-page-container{
  width: 100%;
  height: auto;
  display: block;
  padding: 0px;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  padding-left: 20px;
  padding-right: 20px;
}


.search-page-container .search-filter{
  display: none;
}


.search-filter-mob{
  width:100%;
  height:100%;
  overflow-y: auto;
  margin-top: 0px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  padding: 25px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  position: fixed;
  background: #FFF;
  z-index: 2000;
  display: none;
  justify-content: space-between;
}

.search-filter-mob.active{
  display: flex;
}

.search-filter-mob .clear-filters-button{
  margin-left: 10px;
}

.search-filter-mob .close-filter-button{
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    z-index: 2001;
    fill: #18253b;
    color: #18253b;
    padding: 0px !important;
    margin:0px;
    height: 20px;
    line-height: 20px !important;

}

.search-filter-mob .filter-info{
  width:100%;
  height:auto;
  position: relative;
  margin:0px;
}

.search-filter-mob .filter-info h2{
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;

}

.search-filter-mob .filter-info p{
  font-size: 1rem;
  font-weight: 400;
  margin-top:15px;
  text-align: center;
}

.search-filter-mob .filter-cell{
  width:100%;
  height:auto;
  margin-top:15px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.search-filter-mob .filter-cell-checkboxes input[type="checkbox"],
.search-filter-mob .filter-cell-checkboxes input[type="radio"] {
 display: none; 
}

.search-filter-mob .filter-cell-checkboxes label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
  padding-left: 35px;
  padding-right: 5px;
  font-size: 14px;
  color: #18253b;
  user-select: none;
  margin: 0;
  min-height: 50px;
}

.search-filter-mob .filter-cell-checkboxes label::before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1px solid #18253b;
  border-radius: 4px;
  background-color: #fff;
  transition: all 0.3s ease;
}

.search-filter-mob .filter-cell-checkboxes input[type="checkbox"]:checked + label::before,
.search-filter-mob .filter-cell-checkboxes input[type="radio"]:checked + label::before {
  background-color: #000080;
  border: 1px solid #000080;
}

.search-filter-mob .filter-cell-checkboxes input[type="checkbox"]:checked + label::after,
.search-filter-mob .filter-cell-checkboxes input[type="radio"]:checked + label::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 50%;
  transform: translateY(-60%) rotate(45deg);
  width: 6px;
  height: 12px;
  border: solid #FFF;
  border-width: 0 2px 2px 0;
  transition: all 0.3s ease;
}

.search-filter-mob .filter-cell-checkboxes label:hover::before {
  background-color: #f9fcff;
  border: 1px solid #000080;
}

.search-filter-mob .filter-cell-checkboxes {
  width: 100%;
  padding-left: 0px;
  padding-right: 10px;
  gap: 6px 12px;
}



.filter-cell-checkboxes svg{
  width: 25px;
  height: 25px;
  margin-right: 10px;
}

.filter-cell-checkboxes .color-swatch{
  display:inline-block; 
  width:20px; 
  height:20px; 
  border: 1px solid #e5e7ea; 
  border-radius:5px; 
  margin-right:8px;
  vertical-align:middle;
}

.search-filter-mob .filter-cell-button{
  width:100%;
  height: 50px;
  margin-top: 0px;
  line-height: 50px;
  padding-left: 10px;
  font-size: 14px;
  border-top: 1px solid #e5e7ea;
  position: relative;
}

.search-filter-mob .filter-cell-button.first-cell{
  margin-top: 15px;
}

.search-filter-mob .filter-cell-button p{
  font-size: 14px;
  color:#18253b !important;
  line-height: 50px;
  padding-right: 30px;
  white-space: nowrap;    /* single line */
  overflow: hidden;       /* hide overflow */
  text-overflow: ellipsis;/* show … when too long */
}

.search-filter-mob .filter-cell-button svg{
  width:15px;
  height: 15px;
  position: absolute;
  right: 10px;
  top:17.5px;
  fill: #18253b !important;
}

.search-filter-mob .filter-cell-button .icon-minus {
 display: none; 
}

.search-filter-mob .filter-cell-button.open .icon-plus {
 display: none; 
}

.search-filter-mob .filter-cell-button.open .icon-minus {
 display: inline; 
}

/* Panels hidden by default, show when .show */
.search-filter-mob .filter-cell-price,
.search-filter-mob .filter-cell-year,
.search-filter-mob .filter-cell-mileage,
.search-filter-mob .filter-cell-gearbox,
.search-filter-mob .filter-cell-fuel,
.search-filter-mob .filter-cell-bodytype,
.search-filter-mob .filter-cell-engine,
.search-filter-mob .filter-cell-power,
.search-filter-mob .filter-cell-user-type,
.search-filter-mob .filter-cell-doors,
.search-filter-mob .filter-cell-color,
.search-filter-mob .filter-cell-seats,
.search-filter-mob .filter-cell-drivetrain,
.search-filter-mob .filter-cell-emision,
.search-filter-mob .filter-cell-zupanija {
  display: none !important;
  margin-top: 0;
}

.search-filter-mob .filter-cell-price.show,
.search-filter-mob .filter-cell-year.show,
.search-filter-mob .filter-cell-mileage.show,
.search-filter-mob .filter-cell-gearbox.show,
.search-filter-mob .filter-cell-fuel.show,
.search-filter-mob .filter-cell-bodytype.show,
.search-filter-mob .filter-cell-engine.show,
.search-filter-mob .filter-cell-power.show,
.search-filter-mob .filter-cell-user-type.show,
.search-filter-mob .filter-cell-doors.show,
.search-filter-mob .filter-cell-color.show,
.search-filter-mob .filter-cell-seats.show,
.search-filter-mob .filter-cell-drivetrain.show,
.search-filter-mob .filter-cell-emision.show,
.search-filter-mob .filter-cell-zupanija.show {
  display: flex !important;
}



.search-filter-mob .filter-cell label{
  width:100%;
  line-height: 30px;
  padding-left: 10px;
  font-size: 14px;
  color:#18253b;
}

.search-filter-mob .filter-cell input{
  width:100%;
  height: 50px;
  line-height: 30px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.search-filter-mob .filter-cell input:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.search-filter-mob .filter-cell input[type="text"]:valid {
  background-color: #FFF;
  background: #FFF;
}

.search-filter-mob .filter-cell input:not(:placeholder-shown) {
  border: 1px solid #18253b;
  color:#18253b;
}

.search-filter-mob .filter-cell  select{
  width:100%;
  height: 50px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.search-filter-mob .filter-cell select:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.search-filter-mob .filter-cell select:has(option:checked[value="none"]) {
  border: 1px solid #e5e7ea;
  color: #556071;
}

.search-filter-mob .filter-cell select:has(option:checked:not([value="none"])) {
  border: 1px solid #18253b;
  color: #18253b;
}

.search-filter-mob .filter-cell .half{
  width:48%;
  height: 50px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
}


.search-page-container .search-list{
  width:100%;
  height:auto;
  margin-top: 50px;
  margin-left: 0px;
  float: left;
}

.search-page-container .search-list .search-list-header{
  width:100%;
  height:auto;
  display: flex;
  justify-content: space-between;

}

.search-page-container .search-list .search-list-header h2{
  width: calc(100% - 80px);
  font-size: 25px;
  line-height: 50px;
}



.search-page-container .search-list .search-list-header .filter{
  width:30px;
  height: 30px;
  margin-top: 10px;
  position: relative;
  display: inline-block;
}

.search-page-container .search-list .search-list-header .filter-numb{
  width:12px;
  height: 12px;
  font-size: 12px;
  line-height: 12px;
  position: absolute;
  background: #FFF;
  border-radius: 5px;
  z-index: 1000;
  text-align: center;
  top:0;
  right: 0;
  color: #18253b;
}

.search-page-container .search-list .search-list-header .filter .filter-button {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0px;
  margin: 0px;
  position: relative;
}

.search-page-container .search-list .search-list-header .filter .filter-button:hover{
  background: none;
  border: none;
}

.search-page-container .search-list .search-list-header .filter .filter-button svg {
  width: 20px;
  height:20px;
  fill: #556071;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
}

.search-page-container .search-list .search-list-header .filter .filter-button:hover svg{
  fill: #18253b;
}


.search-page-container .search-list .search-list-header .sortby{
  width:auto;
  height: 30px;
  margin-top: 10px;
  position: relative;
    display: inline-block;
}

.search-page-container .search-list .search-list-header .sortby .sort-button {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0px;
  margin: 0px;
  position: relative;
}

.search-page-container .search-list .search-list-header .sortby .sort-button:hover{
  background: none;
  border: none;
}

.search-page-container .search-list .search-list-header .sortby .sort-button svg {
  width: 20px;
  height:20px;
  fill: #556071;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
}

.search-page-container .search-list .search-list-header .sortby .sort-button:hover svg{
  fill: #18253b;
}

.search-page-container .search-list .search-list-header .sortby .sort-list {
  width: 300px;
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1000;
  padding: 8px;
  margin: 0;
  list-style: none;
  background-color: #fff;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.search-page-container .search-list .search-list-header .sortby .sort-list li {
  width: 100%;
  padding: 8px 16px;
  cursor: pointer;
  color: #18253b;
}

.search-page-container .search-list .search-list-header .sortby .sort-list li.active {
  background-color: #e5e7ea;
}

.search-page-container .search-list .search-list-header .sortby .sort-list li:hover {
  background-color: #e5e7ea;
}

.search-page-container .search-list .search-list-header .sortby.active .sort-list {
  display: block;
}

.search-page-container .search-list .search-list-header .sortby  select{
width:100%;
height: 30px;
border: 1px solid #e5e7ea;
border-radius: 10px;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
font-size: 14px;
color:#556071;
}

.search-page-container .search-list .search-list-header .sortby select:focus{
border: 1px solid #18253b;
color:#18253b;
}

.search-page-container .search-list .search-list-header .sortby select:has(option:checked[value="none"]) {
border: 1px solid #e5e7ea;
color: #556071;
}

.search-page-container .search-list .search-list-header .sortby select:has(option:checked:not([value="none"])) {
border: 1px solid #18253b;
color: #18253b;
}





.search-page-container .search-list .list-item-car{
  width: 100%;
  height:auto;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  margin-top: 10px;
  margin-bottom: 10px;
  float: left;
  border:1px #e5e7ea solid;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
  background: #FFF;
}

.search-page-container .search-list .list-item-car .list-item-img{
  width: 100%;
  overflow: hidden;
  height: auto; 
  position: relative;
  float: left;
}

.search-page-container .search-list .list-item-car .list-item-img img{
  width: 100%;
  height: auto;
  display: block; /* removes inline gap from img */
  position:relative;
  top: 0;
  left: 0;
  -webkit-transform: translate(0%, 0%);
  transform: translate(0%, 0%);
}


.search-page-container .search-list .list-item-car .list-item-img-3{
  display: none;
}




.search-page-container .search-list .list-item-car-add{
  width: 100%;
  height:auto;
  min-height: 200px;
  position: relative;
  margin-left:auto;
  margin-right:auto;
  margin-top: 13px;
  margin-bottom: 13px;
  float: left;
  border:3px #e5e7ea dashed;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: hidden;
  background: ;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.search-page-container .search-list .list-item-car-add svg{
  width: auto;
  height: 20px;
  margin-right: 15px;
  fill: #556071;
}

.search-page-container .search-list .list-item-car-add h3{
  color: #556071;
}

.search-page-container .search-list .list-item-car-add:hover{
  border:3px #646464 dashed;
}

.search-page-container .search-list .list-item-car-add:hover svg{
  fill: #18253b;
}

.search-page-container .search-list .list-item-car-add:hover h3{
  color: #18253b;
}

.search-page-container .search-list .list-item-car .list-item{
  width: 100%;
  height:250px;
  position: relative;
}


.search-page-container .search-list .list-item-car .list-item-hover{
  display: none;
}





.search-page-container .search-list .list-item-car .list-item-dscr {
  width:100%;
  height: auto;
  min-height: 250px;
  position: relative;
  float: left;
  padding: 15px;
  box-sizing: border-box;
}

.search-page-container .search-list .list-item-car .list-item-dscr .dscr-title{
  width:100%;
  min-height: 50px;
}

.search-page-container .search-list .list-item-car .list-item-dscr h3{
  font-size: 20px;
  line-height: 25px;
  font-weight: bold;
}

.search-page-container .search-list .list-item-car .list-item-dscr h4{
  font-size: 17px;
  line-height: 25px;
  font-weight: 500;
  color: #556071;
}

.search-page-container .search-list .list-item-car .list-item-dscr .price{
  font-size: 20px !important;
  font-weight: bold;
  text-align: left;
  margin-top:15px;
}

.search-page-container .search-list .list-item-car .list-item-dscr .details{
  width:100%;
  height: auto;
  max-height: 60px;
  overflow: hidden;
  position: relative;
  float: left;
  background: #FFF;
  margin-top:15px;
  padding: 5px;
  border-radius: 10px;
  display: flex;
  justify-content: flex-start;
  column-gap: 15px;
  row-gap: 5px;
  flex-wrap: wrap;
  vertical-align: center;
  order: 3;
}

.search-page-container .search-list .list-item-car .list-item-dscr .details .details-item{
  width: auto;
  height: 20px;
  float: left;
  line-height: 18px;
  color: #000000;
  position: relative;
  display: flex;
  vertical-align: center;
  align-items: center;
  gap:5px;

}

.search-page-container .search-list .list-item-car .list-item-dscr .details .details-item svg{
  width: auto;
  height: 15px;
  position: relative;
  top:0px;
  left:0%;
  transform: translate(0%,0%);
  fill:#18253B;
}

.search-page-container .search-list .list-item-car .list-item-dscr .details p{
  line-height: 15px;
  font-size: 14px !important;
  margin-top: 0px;
  color:#18253B;
  text-align: center;
  margin-left: 0px;
}

.search-page-container .search-list .list-item-car .list-item-dscr .details p:after{
  display: none;
}

.search-page-container .search-list .list-item-car .list-item-dscr .details p:before{
  display: none;
}




.search-page-container .search-list .list-item-car .list-item-dscr .vendor {
  width:250px;
  height: auto;
  position: absolute;
  bottom: 15px;
  margin-top:15px;
  margin-left: 5px;
  padding: 0px;
  box-sizing: border-box;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap:15px;
}


.search-page-container .search-list .list-item-car .list-item-dscr .vendor .vendor-item{
  width:auto;
  height: 16px;
  margin: 0px;
  padding: 0px;
  line-height: 16px;
  font-size: 14px;
  display: flex;
  gap: 8px;
}


.search-page-container .search-list .list-item-car .list-item-dscr .vendor .vendor-item svg{
  width: auto;
  height: 16px;
  fill:#18253B;
}

.search-page-container .search-list .list-item-car .list-item-dscr .vendor p{
  line-height: 16px;
  font-size: 14px;
  color:#18253B;
}







.search-page-container .search-list .pagination-bottom{
  width:100%;
  height: 35px;
  margin-top: 30px;
  margin-bottom: 30px;
  position: relative;
  float: left;
}


.search-page-container .search-list .pagination-bottom .back{
  width: 35px;
  height: 35px;
  line-height: 35px;
  position: absolute;
  left: 0px;
  border: 1px solid #EEE;
  border-radius: 5px;
  text-align: center;
}

.search-page-container .search-list .pagination-bottom .next{
  width: 35px;
  height: 35px;
  line-height: 35px;
  position: absolute;
  right: 0px;
  border: 1px solid #EEE;
  border-radius: 5px;
  text-align: center;
}

.search-page-container .search-list .pagination i{
   padding: 10px;
}

.search-page-container .search-list .pagination-bottom .pagination-.inb-tab{
  width: auto;
  height: 35px;
  line-height: 35px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.search-page-container .search-list .pagination-bottom .pagination-.inb-tab a{
  margin-left: 20px;
  margin-right: 20px;
  text-decoration: none;
}


























/**************** LOGIN ****************/

.login{
  width:100%;
  height: 100vh;
  display: block;
  position: relative;
  margin:0px;
  padding: 0px;
}

.login-content{
  width:100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
}

.login-content .login-left{
  width:100%;
  height: 100%;
  position: relative;
}

.login-content .login-left .login-photo{
  width:100%;
  height: 100%;
  position: absolute;
  top:0px;
  left: 0px;
  background: #001A66;
  z-index: -10;
  overflow: hidden;
}

.login-content .login-left .login-photo img{
  width:auto;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  right: -10%;
}


.login-content .login-left .login-quote{
  display: none;
}

.login-content .login-left .login-quote img{
  width:60%;
  height: auto;
}

.login-content .login-left .login-quote h1{
  display: none;

}

.login-content .login-left .login-quote span{
  display: none;
}



.login-content .login-right {
  width: 100%;
  height: 100%;
  position: absolute;
  background: none;
  display: flex;
  flex-direction: column;        /* stack vertically */
  justify-content: center;       /* center vertically */
  align-items: center;           /* center horizontally */
  gap: 35px;                        /* no extra spacing */
  box-sizing: border-box;
  padding: 20px;
}

.login-content .login-right .login-logo{
  width: calc(100% - 40px);
  height: auto;
  position: relative;  
  top:0%;
  left: 0%;
  transform: translate(0%, 0%);
  text-align: center;
  display: block;
}


.login-content .login-right .login-logo img{
  width: calc(100% - 30px);
  height: auto;
  position: relative;
  top:0;
  left: 0%;
  transform: translate(0%, 0%);
}

.login-content .login-right .login-form{
  width: 100%;
  height: auto;
  position: relative;  
  top:0%;
  left: 0%;
  transform: translate(0%, 0%);
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  background: #FFF;
  box-sizing: border-box;
  padding: 20px;
}

.login-content .login-right .login-form h3{
  font-size: 20px;
}

.login-content .login-right .login-form a{
  line-height: auto;
  color:#556071;
  font-size: 14px;
  margin-top:15px;
  text-align: left;
}

.login-content .login-right .login-form a:hover{
  color:#18253b;
}


.login-content .login-right .login-form .form-cell{
  width:100%;
  height:auto;
  margin-top:30px;
  margin-right:0%;
  float: left;
  position:relative;
}

.login-content .login-right .login-form .form-cell-right{
  width:100%;
  height:auto;
  margin-top:30px;
  margin-right:0px;
  float: left;
  position:relative;
  box-sizing: border-box;
}

.login-content .login-right .login-form label{
  width:100%;
  line-height: 30px;
  padding-left: 10px;
  font-size: 14px;
  color:#556071;
}

.login-content .login-right .login-form input{
  width:100%;
  height: 50px;
  line-height: 30px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.login-content .login-right .login-form input:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.login-content .login-right .login-form input[type="text"]:valid {
  background-color: #FFF;
  background: #FFF;
}

.login-content .login-right .login-form input:not(:placeholder-shown) {
  border: 1px solid #18253b;
  color:#18253b;
}


.login-content .login-right .login-form .password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.login-content .login-right .login-form .password-wrapper input {
    width: 100%;
    padding-right: 40px; /* Add space for the eye icon */
}

.login-content .login-right .login-form .toggle-password {
    position: absolute;
    right: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.login-content .login-right .login-form .toggle-password svg {
    width: 100%;
    height: 100%;
    fill:#556071;
}

.login-content .login-right .login-form .toggle-password:hover svg {
    fill: #18253b;
}

.login-content .login-right .login-form .toggle-password.visible svg {
    fill: #18253b !important;
}

.login-content .login-right .lr-greska{
  width:100%;
  height: 20px;
  line-height: 20px;
  margin-top: 0px;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 0.7rem;
  background:;
  color:#ac5c50;
  position: absolute;
  bottom:-20px;
  left: 0;
}

.login-content .login-right .in-greska{
  border: 1px solid #ac5c50 !important;
}



.login-content .login-right .login-form .login-regi{
  width: 100%;
}



.login-content .login-right .login-form .login-regi button{
  width: 100%;
  margin-top:30px;
}

.login-content .login-right .login-form .login-regi a{
 width: 100%;
 text-align: center;
 display: block;
 line-height: 30px;
}










/**************** REGISTER ****************/



.register{
  width:100%;
  height: 100vh;
  display: block;
  position: relative;
  margin:0px;
  padding: 0px;
}

.register-content{
  width:100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
}

.register-content .register-left{
  width:100%;
  height: 100%;
  position: relative;
}

.register-content .register-left .register-photo{
  width:100%;
  height: 100%;
  position: absolute;
  top:0px;
  left: 0px;
  background: #001A66;
  z-index: -10;
  overflow: hidden;
}

.register-content .register-left .register-photo img{
  width:auto;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  right: -10%;
}


.register-content .register-left .register-quote{
  display: none;
}





.register-content .register-right{
  width:100%;
  height: 100%;
  position: absolute;
  background: none;
}


.register-content .register-right .register-right-content{
  width: calc(100% - 40px);
  height: auto;
  max-height: 90%;
  position: absolute;  
  overflow: scroll;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}



.register-content .register-right .register-form{
  width:100%;
  height: auto;
  position: relative;  
  border: 1px solid #e5e7ea;
  border-radius:10px;
  background: #FFF;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 20px;
}

.register-content .register-right .register-form .register-form-title{
  width:100%;
  height: 40px;
  display: flex;
  justify-content: flex-start;
  gap: 15px;
}

.register-content .register-right .register-form .register-form-title svg{
  width:auto;
  height: 25px;
  margin-top: 7.5px;
  fill: ;
}

.register-content .register-right .register-form .register-form-title h3{
  font-size: 20px;
  line-height: 40px;
}



.register-content .register-right .register-form a{
  line-height: auto;
  color:#556071;
  font-size: 14px;
  margin-top:15px;
  text-align: left;
}

.register-content .register-right .register-form a:hover{
  color:#18253b;
}

.register-content .register-right .register-form .form-cell{
  width:100%;
  height:auto;
  float: left;
  position:relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.register-content .register-right .register-form .form-cell-lapo{
  width:100%;
  height:auto;
  float: left;
  position:relative;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.register-content .register-right .register-form .form-cell-checkbox{
  width:100%;
  height:20px;
  margin-top:5%;
  margin-right:0%;
  float: left;
  position:relative;
  box-sizing: border-box;
  font-size: 0.8rem;
  vertical-align: middle;
}

.register-content .register-right .register-form .form-cell-checkbox input{
  width:15px;
  height: 15px;
  margin-right: 10px;
  margin-top:2.5px;
  display: block;
  float:left;
}

.register-content .register-right .register-form .form-cell-checkbox p{
   font-size: 0.8rem;
   line-height: 20px;
   display: block;
   float: left;
}

.register-content .register-right .register-form .form-cell label{
  width:100%;
  line-height: 30px;
  padding-left: 10px;
  font-size: 14px;
  color:#556071;
}

.register-content .register-right .register-form .form-cell input{
  width:100%;
  height: 50px;
  line-height: 30px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.register-content .register-right .register-form .form-cell input:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.register-content .register-right .register-form .form-cell input[type="text"]:valid {
  background-color: #FFF;
  background: #FFF;
}

.register-content .register-right .register-form .form-cell input:not(:placeholder-shown) {
  border: 1px solid #18253b;
  color:#18253b;
}

.register-content .register-right .register-form .form-cell .half{
  width:100%;
  height: 50px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
}

.register-content .register-right .register-form .form-cell  select{
  width:100%;
  height: 50px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.register-content .register-right .register-form .form-cell select:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.register-content .register-right .register-form .form-cell select:has(option:checked[value="none"]) {
  border: 1px solid #e5e7ea;
  color: #556071;
}

.register-content .register-right .register-form .form-cell select:has(option:checked:not([value="none"])) {
  border: 1px solid #18253b;
  color: #18253b;
}

.register-content .register-right .password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.register-content .register-right .password-wrapper input {
    width: 100%;
    padding-right: 40px; /* Add space for the eye icon */
}

.register-content .register-right .toggle-password {
    position: absolute;
    right: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.register-content .register-right .toggle-password svg {
    width: 100%;
    height: 100%;
    fill:#556071;
}

.register-content .register-right .toggle-password:hover svg {
    fill: #18253b;
}

.register-content .register-right .toggle-password.visible svg {
    fill: #18253b !important;
}

.register-content .register-right .lr-greska{
  width:100%;
  height: 20px;
  line-height: 20px;
  margin-top: 0px;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 0.7rem;
  background:;
  color:#ac5c50;
  position: absolute;
  bottom:-20px;
  left: 0;
}

.register-content .register-right .in-greska{
  border: 1px solid #ac5c50 !important;
}

.register-content .register-right .register-form .regi-regi{
  width: 100%;
}



.register-content .register-right .register-form .regi-regi button{
  width: 100%;
  margin-top:30px;
}

.register-content .register-right .register-form .regi-regi a{
 width: 100%;
 text-align: center;
 display: block;
 line-height: 30px;
}









/**************** FORGOT Password ****************/


.fpass{
  width:100%;
  height: 100vh;
  display: block;
  position: relative;
  margin:0px;
  padding: 0px;
}

.fpass-content{
  width:100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
}

.fpass-content .fpass-left{
  width:100%;
  height: 100%;
  position: relative;
}

.fpass-content .fpass-left .fpass-photo{
  width:100%;
  height: 100%;
  position: absolute;
  top:0px;
  left: 0px;
  background: #001A66;
  z-index: -10;
  overflow: hidden;
}

.fpass-content .fpass-left .fpass-photo img{
  width:auto;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  right: -10%;
}


.fpass-content .fpass-left .fpass-quote{
  display: none;
}



.fpass-content .fpass-right{
  width:100%;
  height: 100%;
  position: absolute;
  background: none;
}


.fpass-content .fpass-right .fpass-email-content{
  width:calc(100% - 40px);
  height: auto;
  position: absolute;  
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.fpass-content .fpass-right .fpass-email-content .email-form{
  width:100%;
  height: auto;
  position: relative;  
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  background: #FFF;
  box-sizing: border-box;
  padding: 20px;
}

.fpass-content .fpass-right .fpass-email-content .email-form-status{
  width:100%;
  height: auto;
  position:relative;
  padding: 20px;
  background: #F8FBFE;
  border: 1px #c3cfe9 solid;
  border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
  line-height: 50px;
  display: flex;
  justify-content: flex-start;
  white-space: pre-line;
}

.fpass-content .fpass-right .fpass-email-content .email-form-status h3{
  font-size: 18px;
  line-height: 25px;
  font-weight: 500;
  color: #18253B;
  padding-left: 20px;
}

.fpass-content .fpass-right .fpass-email-content .email-form-status .icon{
  width:50px;
  height: 50px;
  position: relative;

}

.fpass-content .fpass-right .fpass-email-content .email-form-status .icon svg{
  width:auto;
  height: 40px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  fill: #18253B;
}

.fpass-content .fpass-right .fpass-email-content .email-form h3{
  font-size: 20px;
}

.fpass-content .fpass-right .fpass-email-content .email-form .form-cell{
  width:100%;
  height:auto;
  margin-top:30px;
  margin-right:0%;
  position:relative;
  box-sizing: border-box;
}



.fpass-content .fpass-right .fpass-email-content .email-form label{
  width:100%;
  line-height: 30px;
  padding-left: 10px;
  font-size: 14px;
  color:#556071;
}

.fpass-content .fpass-right .fpass-email-content .email-form input{
  width:100%;
  height: 50px;
  line-height: 30px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.fpass-content .fpass-right .fpass-email-content .email-form input:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.fpass-content .fpass-right .fpass-email-content .email-form input[type="text"]:valid {
  background-color: #FFF;
  background: #FFF;
} 

.fpass-content .fpass-right .fpass-email-content .email-form input:not(:placeholder-shown) {
  border: 1px solid #18253b;
  color:#18253b;
}



.fpass-content .fpass-right .fpass-email-content .lr-greska{
  width:100%;
  height: 20px;
  line-height: 20px;
  margin-top: 0px;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 0.7rem;
  background:;
  color:#ac5c50;
  position: absolute;
  bottom:-20px;
  left: 0;
}

.fpass-content .fpass-right .fpass-email-content .in-greska{
  border: 1px solid #ac5c50 !important;
}



.fpass-content .fpass-right .fpass-reset-content{
  width: calc(100% - 20px);
  height: auto;
  position: absolute;  
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.fpass-content .fpass-right .fpass-reset-content .reset-form{
  width:100%;
  height: auto;
  position: relative;  
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  background: #FFF;
  box-sizing: border-box;
  padding: 20px;
}

.fpass-content .fpass-right .fpass-reset-content .reset-form-status{
  width:100%;
  height: auto;
  position:relative;
  padding: 20px;
  background: #F8FBFE;
  border: 1px #c3cfe9 solid;
  border-radius: 10px;
  border-radius: 10px;
  margin-bottom: 20px;
  box-sizing: border-box;
  line-height: 50px;
  display: flex;
  justify-content: flex-start;
  white-space: pre-line;
}

.fpass-content .fpass-right .fpass-reset-content .reset-form-status h3{
  font-size: 18px;
  line-height: 25px;
  font-weight: 500;
  color: #18253B;
  padding-left: 20px;
}

.fpass-content .fpass-right .fpass-reset-content .reset-form-status .icon{
  width:50px;
  height: 50px;
  position: relative;

}

.fpass-content .fpass-right .fpass-reset-content .reset-form-status .icon svg{
  width:auto;
  height: 40px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  fill: #18253B;
}

.fpass-content .fpass-right .fpass-reset-content .reset-form h3{
  font-size: 20px;
}

.fpass-content .fpass-right .fpass-reset-content .reset-form .form-cell{
  width:100%;
  height:auto;
  margin-top:30px;
  margin-right:0%;
  position:relative;
  box-sizing: border-box;
}



.fpass-content .fpass-right .fpass-reset-content .reset-form label{
  width:100%;
  line-height: 30px;
  padding-left: 10px;
  font-size: 14px;
  color:#556071;
}

.fpass-content .fpass-right .fpass-reset-content .reset-form input{
  width:100%;
  height: 50px;
  line-height: 30px;
  border: 1px solid #e5e7ea;
  border-radius: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color:#556071;
}

.fpass-content .fpass-right .fpass-reset-content .reset-form input:focus{
  border: 1px solid #18253b;
  color:#18253b;
}

.fpass-content .fpass-right .fpass-reset-content .reset-form input[type="text"]:valid {
  background-color: #FFF;
  background: #FFF;
} 

.fpass-content .fpass-right .fpass-reset-content .reset-form input:not(:placeholder-shown) {
  border: 1px solid #18253b;
  color:#18253b;
}


.fpass-content .fpass-right .fpass-reset-content .reset-form .lr-greska{
  width:100%;
  height: 20px;
  line-height: 20px;
  margin-top: 0px;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 0.7rem;
  background:;
  color:#ac5c50;
  position: absolute;
  bottom:-20px;
  left: 0;
}

.fpass-content .fpass-right .fpass-reset-content .reset-form .in-greska{
  border: 1px solid #ac5c50 !important;
}


.fpass-content .fpass-right .fpass-reset-content .reset-form .password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.fpass-content .fpass-right .fpass-reset-content .reset-form .password-wrapper input {
    width: 100%;
    padding-right: 40px; /* Add space for the eye icon */
}

.fpass-content .fpass-right .fpass-reset-content .reset-form .toggle-password {
    position: absolute;
    right: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

.fpass-content .fpass-right .fpass-reset-content .reset-form .toggle-password svg {
    width: 100%;
    height: 100%;
    fill:#556071;
}

.fpass-content .fpass-right .fpass-reset-content .reset-form .toggle-password:hover svg {
    fill: #18253b;
}

.fpass-content .fpass-right .fpass-reset-content .reset-form .toggle-password.visible svg {
    fill: #18253b !important;
}


.fpass-content .fpass-right .fpass-email-content .email-form button{
  width: 100%;
  margin-top:30px;
}



.fpass-content .fpass-right .fpass-reset-content .reset-form button{
  width: 100%;
  margin-top:30px;
}




/**************** NEW Password ****************/

.newp{
  width:100%;
  height: 100vh;
  display: block;
  position: relative;
  margin:0px;
  padding: 0px;
}

.newp-content{
  width:100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: flex-start;
}

.newp-content .newp-left{
  width:100%;
  height: 100%;
  position: relative;
}

.newp-content .newp-left .newp-photo{
  width:100%;
  height: 100%;
  position: absolute;
  top:0px;
  left: 0px;
  background: #303069;
  z-index: -10;
  overflow: hidden;
}

.newp-content .newp-left .newp-photo img{
  width:auto;
  height: 100%;
  opacity: 0.1;
  position: absolute;
  right: -10%;
}


.newp-content .newp-left .newp-quote{
  display: none;
}



.newp-content .newp-right{
  width:50%;
  height: 100%;
  position: relative;
  background: #f8f9fb;
}



.newp-content .newp-right .newp-form{
  width:calc(100% - 40px);
  height: auto;
  position: absolute;  
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border:1px solid #EEE;
  border-radius: 5px;
  background: #FFF;
  box-sizing: border-box;
  padding: 20px;
}

.newp-content .newp-right .newp-form h3{
  font-size: 1.1rem;
  font-weight: bold;
}

.newp-content .newp-right .newp-form p{
  font-size: 0.8rem;
  margin-top: 20px;
}

.newp-content .newp-right .newp-form .form-cell{
  width:100%;
  height:50px;
  margin-top:30px;
  margin-right:0%;
  float: left;
  position:relative;
  box-sizing: border-box;
}

.newp-content .newp-right .newp-form .form-cell-right{
  width:100%;
  height:50px;
  margin-top:30px;
  margin-right:0px;
  float: left;
  position:relative;
  box-sizing: border-box;
}

.newp-content .newp-right .newp-form input{
  width:100%;
  height: 50px;
  border: 1px solid #EEE;
  border-radius: 5px;
  padding-left: 10px;
  box-sizing: border-box;
  font-size: 0.8rem;
  color:#646464;
}

.newp-content .newp-right .newp-form button{
  width: 100%;
  height:50px;
  background: #FFF;
  color: #646464;
  border:1px solid #646464;
  border-radius: 5px;
  box-sizing:border-box;
  margin-top:30px;
}

.newp-content .newp-right .newp-form button:hover{
  background: #646464;
  color: #FFF;
  border:1px solid #646464;
}

.newp-content .newp-right .newp-form a{
  line-height: 50px;
  color:#646464;
  margin-top:15px;
  text-align: center;
}




















/**************** FOOTER ****************/

footer{
  width:100%;
  height:auto;
  position: relative;
  border-top: 1px solid #e5e7ea;
  margin-top: 0px;

  overflow: hidden;
}


footer .footer-content{
  width: 100%;
  height:auto;
  margin:0px;
  padding-left: 18.5px;
  padding-right: 18.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

footer .footer-content h4{
  line-height: 20px;
  font-size: 16px;
  margin-bottom: 30px;
}

footer .footer-content .footer-content-left{
  width: auto;
  height: auto;
  position: relative;
  margin-bottom: 20px;
}

footer .footer-content .footer-content-left .footer-logo{
  width: 100%;
  height: auto;
  position: relative;
  margin-top: 50px;
  margin-bottom:10px;
}

footer .footer-content .footer-content-left .footer-logo img{
  width:250px;
  height: auto;
  margin:0px;
  padding: 0px;
}


footer .footer-content .footer-content-center{
  width: 100%;
  height: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  position: relative;
}

footer .footer-content .footer-content-center .footer-nav a{
  font-size: 15px;
  line-height: 15px;
  margin-bottom: 20px;
  font-style: normal;
  color: #556071;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}

footer .footer-content .footer-content-center .footer-nav a:hover{
  color: #18253b; 
  text-decoration: underline;
}


footer .footer-content .footer-content-right{
  width: auto;
  height: auto;
  position: relative;

}

footer .footer-content .footer-content-right .footer-social{
  width: 100%;
  height: auto;
  margin-top: 20px;
  margin-bottom: 50px;
  padding: 0px;
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 20px;

}

footer .footer-content .footer-content-right .footer-social .footer-social-item{
  width: 20px;
  height: 20px;
  margin:0px; 
  padding: 0px;
}

footer .footer-content .footer-content-right .footer-social .footer-social-item svg{
  width: 25px;
  height: auto;
  margin:0px; 
  padding: 0px;
  fill: #18253b; 
}

footer .footer-content .footer-content-right .footer-social .footer-social-item:hover svg{
  fill: #18253b; 
}

footer .footer-content .footer-content-right .footer-apps{
  width: 100%;
  height: auto;
  margin-bottom: 50px;
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

footer .footer-content .footer-content-right .footer-apps .footer-apps-item{
  width: 115px;
  height: 40px;
  margin:0px;
  padding: 0px;
}

footer .footer-content .footer-content-right .footer-apps .footer-apps-item svg{
  width: 115px;
  height: 40px;
  margin:0px;
  padding: 0px;
}

footer .footer-content .footer-content-right .footer-apps .footer-apps-item .st1{
  fill: #FFF;
}

footer .footer-content .footer-content-right .footer-apps .footer-apps-item .st0{
  fill: #18253b; 
}

footer .footer-content .footer-content-right .footer-apps .footer-apps-item:hover .st0{
  fill: #18253b; 
}



footer .footer-cr{
  width: 100%;
  height: 50px;
  margin:0px;
  padding-left: 18.5px;
  padding-right: 18.5px;
  position: relative;
  background: #e5e7ea;
}

footer .footer-cr-content{
  width: 100%;
  height:50px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

footer .footer-cr-content p{
  font-size: 13px;
  line-height: 50px;
}


footer .footer-cr-content .footer-cr-content-left{
  width: 45%;
  height: 50px;
  position: relative;
  float:left;
  line-height: 50px;
  color: #556071;
  text-align: left;
}

footer .footer-cr-content .footer-cr-content-right{
  width: 45%;
  height: 50px;
  position: relative;
  float:left;
  line-height: 50px;
  color: #556071;
  text-align: right;
}









}