/*
Courser / Events Administör
*/

.form-table {max-width: 100%}

.tabs{display:flex;flex-wrap:wrap}.tabs label.label_tab{color:#fff;order:1;display:block;padding:1rem 2rem;margin-right:.2rem;cursor:pointer;background:#0d244c;font-weight:700;transition:background ease .2s}.tabs .tab{order:99;flex-grow:1;width:100%;display:none;padding:1rem;background:#fff}.tabs input[type=radio]{display:none}.tabs input[type=radio]:checked+label.label_tab{background:#d0b57e}.tabs input[type=radio]:checked+label.label_tab+.tab{display:block}@media (max-width:45em){.tabs .tab,.tabs label.label_tab{order:initial}.tabs label.label_tab{width:100%;margin-right:0;margin-top:.2rem}}

table td { vertical-align: top}

.cea_page_content{width:100%;padding:1rem;background:#fff;box-sizing: border-box;margin-left: -20px;}

.jq_do_filter {
  vertical-align: 0px;
  margin-right: 15px;
}

.list {
  clear: both;
  border-top: 1px #666666 solid;
}

.list .car {
  background-color: #eeeeee;
  box-sizing: border-box;
  border: 1px #666666 solid;
  padding: 5px;
  width: 24%;
  min-height: 460px;
  float: left;
  margin: 0.5%;
  transition: background-color 0.2s ease-in;
  text-align:center;
}

@media (max-width:45em) {
  .list .car {
    width: 100%;
    margin: 0;
    margin-bottom: 15px;
  }
}

.list .car:hover {
  background-color: #fff;
  border: 1px #000000 solid;
  transition: background-color 0.2s ease-in;
  
}

.car .container_img {
  max-width: 100%;
  height: 225px;
  background: transparent url() no-repeat center;
  background-size: cover;
  transition: background-size 1s ease-in;
}

.list .car:hover .container_img {
  background-size: 110%;
  transition: background-size 1s ease-in;
}

.car .name {
  font-size: 1.2em;
  font-weight: bold;
  margin: 10px 0 5px 0;
}

.car .price {
  font-weight: bold;
}

.car .price_sale {
  font-weight: bold;
  font-size: 1.2em;
  margin-bottom: 0;
}

span.price.old,
.car .price.old {
  font-weight: normal;
  text-decoration: line-through;
  margin-bottom: 0;
}

span.price.old {
  font-size: 0.8em;
}

.car .params,
.car .price {
  margin-bottom: 10px;
}

.car .city {
  font-size: 0.8em;
  margin-bottom: 5px;
}

.price-slider {
  width: 100%;
  margin: auto;
  margin-top: 60px;
  margin-bottom: 60px;
  text-align: center;
  position: relative;
}
.price-slider svg,
.price-slider input[type=range] {
  position: absolute;
  left: 0;
  bottom: 0;
}

.price-slider .labels
{
  position: relative;
}

.price-slider .labels input {
  border-width: 0 !important;
  margin: 0;
  padding: 0;
  width: 55px;
  vertical-align: initial;
}

.price-slider .labels p:first-child {
  position: absolute;
  left: 0;
}

.price-slider .labels p:last-child {
  position: absolute;
  right: 0;
  text-align: right;
}

/*
input[type=number] {
  border: 0px solid #ddd;
  text-align: center;
  font-size: 1.6em;
  -moz-appearance: textfield;
  width: 100px;
  float: left;
}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type=number]:invalid,
input[type=number]:out-of-range {
  border: 2px solid #e60023;
} */
input[type=range] {
  -webkit-appearance: none;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #1da1f2;
}
input[type=range]:focus::-ms-fill-lower {
  background: #1da1f2;
}
input[type=range]:focus::-ms-fill-upper {
  background: #1da1f2;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: #1da1f2;
  border-radius: 1px;
  box-shadow: none;
  border: 0;
}
input[type=range]::-webkit-slider-thumb {
  z-index: 2;
  position: relative;
  box-shadow: 0px 0px 0px #000;
  border: 1px solid #1da1f2;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #a1d0ff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: #1da1f2;
  border-radius: 1px;
  box-shadow: none;
  border: 0;
}
input[type=range]::-moz-range-thumb {
  z-index: 2;
  position: relative;
  box-shadow: 0px 0px 0px #000;
  border: 1px solid #1da1f2;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #a1d0ff;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range]::-ms-fill-lower,
input[type=range]::-ms-fill-upper {
  background: #1da1f2;
  border-radius: 1px;
  box-shadow: none;
  border: 0;
}
input[type=range]::-ms-thumb {
  z-index: 2;
  position: relative;
  box-shadow: 0px 0px 0px #000;
  border: 1px solid #1da1f2;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #a1d0ff;
  cursor: pointer;
}
/*product detail*/
.administor-car-detail {
  width: 100%;
}

.administor-car-photos {
  width: 40%;
}

.administor-car-photos div {
  width: 30.5%;
  height: 120px;
  margin: 0.5%; 
  padding: 0.5%; 
  float: left; 
  overflow:hidden; 
  border: 1px #dedede solid;
}

.administor-car-photos div img {
  max-width: 100%;
}

.administor-car-info div {
  padding: 0 10px;
  margin-bottom: 15px;
}

.administor-car-info div h3 {
  padding: 0;
  margin: 0 0 10px 0;
}

div.administor-seller-info-container {
  background-color: #dedede;
  border: 1px #333333 solid;
  padding: 10px;
}

.administor-seller-info th {
  text-align: left;
  font-weight: bold;
  padding-right: 10px;
  line-height: initial;
}

.buttonback {
  display: inline-block;
  padding: 15px 10px;
  background-color: #0d244c;
  border: 1px #d0b57e solid;
  border-radius: 5px;
  color: #fff;
  text-align: center;
}

.buttonback:hover {
  background-color: #d0b57e;
  border: 1px #d0b57e solid;
  color: #fff;
}

iframe div.administor-car-detail {
}

div.administor-car-detail {
  width: 100%;
  max-width: 100%;
  padding: 0 15px;
}

div.administor-car-detail .row .col {
  width: 50%;
  float: left;
}

@media (max-width:45em) {
  div.administor-car-detail .row .col {
    width: 100%;
    margin: 0;
    margin-bottom: 15px;
  }
}

/* admin drag and drop gallery */
.gallery-container {
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
}

.admprop_photo_container {  
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 columns */
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.admprop_photo_item {
  width: 100%;  /* One-fifth of the row, minus the gap */
  height: 200px;             /* Fixed height */
  overflow: hidden;          /* Ensure oversized images are cropped */
  position: relative;
  border-radius: 8px; 
}

.admprop_photo_item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* This makes sure images are cropped to fill the container */
  object-position: center; /* Ensures the center of the image is displayed */
  display: block;
}

.admprop_photo_control {
  position: absolute;
  bottom:5px; 
  left: 5px;
  margin: 0;
  line-height: 25px;
  width: calc(100% - 10px);
  text-align:center;
}

.admprop_photo_control label {
  background-color: #c00000;
  color: #fff;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  padding: 0 5px;
  border-radius: 3px;
}

.admprop_photo_control a {
  display: inline-block;
  text-decoration:none;  
  font-size: 25px;
  width: 25px;
  height: 25px;
  border: 1px #ccc solid;
  border-radius: 3px;
  background-color: #ffffff;
  line-height: 22px;
}

.admprop_photo_control a:hover {
  background-color: #cccccc;
  border: 1px #000 solid;
}

.admprop_photo_control a:first-child {
  float:left;
}

.admprop_photo_control a:last-child {
  float: right;
}

.gallery-item.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.drop-zone {
  width: 100%;
  height: 200px;
  border: 2px dashed #00f;
  overflow: hidden;          /* Ensure oversized images are cropped */
  position: relative;
  border-radius: 8px;
  display: none;
}