:root{
    --gray:#e7e7e7;
    --red1:#e30613;
    --red2:#9e151a;
    --liHeight:333px;
}
html{
    background-color:var(--gray);
}
body{
    background-color:unset;
}
button[type="button"], select[type="select"], #selectalldb, #dic_sortli{
    background-color:white;
}
#showorderformbtn, #couponform>button{
    background-color:var(--red2);
    border:0;
}
#showorderformbtn:hover, #couponform>button:hover{
    background-color:var(--red1);
}
.btn:focus{
    box-shadow:0 0 0 0.2rem rgb(255 0 0 / 25%);
}
.custom-file-label::after{
    background-color:var(--red2);
    color:white;
}
#submitbtn{
    background-color:var(--red2);
    color:white;
    border:0;
}
#submitbtn:hover{
    background-color:var(--red1);
}
.custom-file-input:focus{
    box-shadow:0 0 0 0.2rem rgb(255 0 0 / 25%);
}
.modal-footer>button{
    background-color:var(--red2);
    border:0;
}
.modal-footer>button:hover{
    background-color:var(--red1);
}

.img-fluid{filter:grayscale(1);}
.img-fluid:hover{filter:grayscale(0);}
/*
    code by Iatek LLC 2018 - CC 2.0 License - Attribution required
    code customized by Azmind.com
*/
@media (min-width: 768px) and (max-width: 991px) {
    /* Show 4th slide on md if col-md-4*/
    .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}
@media (min-width: 576px) and (max-width: 768px) {
    /* Show 3rd slide on sm if col-sm-6*/
    .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}
@media (min-width: 576px) {
    .carousel-item {
        margin-right: 0;
    }
    /* show 2 items */
    .carousel-inner .active + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* farthest right hidden item must be also positioned for animations */
    .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* right or prev direction */
    .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
/* MD */
@media (min-width: 768px) {
    /* show 3rd of 3 item slide */
    .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
    .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
/* LG */
@media (min-width: 991px) {
    /* show 4th item */
    .carousel-inner .active + .carousel-item + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item + .carousel-item {
        transition: none;
    }
    /* Show 5th slide on lg if col-lg-3 */
    .carousel-inner .active.col-lg-3.carousel-item + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -25%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* left or forward direction */
    .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction //t - previous slide direction last item animation fix */
    .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
   #imgGallery img{
        max-width:215px;
        max-height:250px;
        padding:8px;
        position:absolute;
    }
    #imgGallery select{
        width:120px;
        height:30px;
        position:absolute;
        margin-left:-100px;
        margin-top:9px;
    }
    #imgGallery input[type="text"]{
        width:120px;
        height:30px;
        position:absolute;
        margin-left:-100px;
        margin-top:9px;
    }
    #imgGallery input{
        width:80px;
        position:absolute;
        margin-top:9px;
        margin-left:20px;
}
#imgGallery2{
    margin: auto;
    overflow: hidden;
    margin-top: 20px;
}
#imgGallery2 ul{
    padding: 0px;
    margin: 0px;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}
#imgGallery2 ul li{
    float:left;
    list-style: none;
    width:20%;
    min-width:210px;
    height:var(--liHeight);
    background: #f2f2f2;
    margin-top:20px;
    margin-right:10px;
    margin-bottom:20px;
    margin-left:10px;
    border:1px solid lightgray;
    border-radius:10px;
    box-sizing: border-box;
}
#imgGallery2 ul li:hover{
    opacity: 0.8;
}
#imgGallery2 ul li .center-block{
    width: 100%;
    height:250px;
    line-height: 50px;
    text-align: center;
    color:white;
    font-size: 20px;
    display: flex;
    justify-content:center;
    align-items:center;
}
@media only screen and (max-width:507px){
    #imgGallery2 ul li{
        margin-left:auto;
        margin-right:auto;
        width:51%!important;
    }
}
@media screen and (max-width:1250px){
    #imgGallery2 ul li{
        width:40%;
    }
}
#closebtn,#copybtn,#selectbtn{
  border-radius: 50%;
  padding: 0.5em;
  width: 30px;
  height: 30px;
  position: relative;
}
#copybtn:hover{
  background-color:lightblue;
}
#closebtn:hover{
  background-color: lightpink;
}
#selectbtn:hover{
  background-color:lightblue;
}
#closebtn::before, #copybtn::before {
  content: " ";
  position: absolute;
  display: block;
  background-color: black;
  width: 2px;
  left: 12px;
  top: 5px;
  bottom: 5px;
}
#closebtn::before{
  transform: rotate(45deg);
}
#closebtn::after, #copybtn::after {
  content: " ";
  position: absolute;
  display: block;
  background-color: black;
  height: 2px;
  top:12px;
  left: 5px;
  right: 5px;
}
#closebtn::after{
  transform: rotate(45deg);
}

#orderform{
    width:100%;
    height:100%;
    opacity:.95;
    top:0;
    left:0;
    position:fixed;
    background-color:#313131;
    overflow:auto;
}
#orderform2{
    position:absolute;
    left:50%;
    top:10%;
    margin-left:-40%;
}
#orderform3{
    width:80vw;
    height:70vh;
    border:2px solid gray;
    border-radius:10px;
    background-color:#fff;
}
#loginpage{
    background-image:url(https://ajandekok.ro/wp-content/uploads/2020/11/login-kep-2-masolas_Rajztabla-1.svg);
    background-position-x:50%;
    background-position-y:50%;
    background-repeat-x:no-repeat;
    background-repeat-y:no-repeat;
    background-size:cover;
    height:100%;
    overflow:hidden;
}
#login{
    background-attachment:scroll;
    background-clip:border-box;
    background-color:#fff;
    background-image:url(https://ajandekok.ro/wp-content/uploads/2021/08/login-ajandekok.ro_Rajztabla-1-2-01.svg);
    background-origin:padding-box;
    background-position-x:50%;
    background-position-y:50%;
    background-repeat:no-repeat;
    background-size:cover;
    height:450px;
    width:345px;
    border:1px solid #ccd0d4;
    top:50px;
    margin:auto;
    position:relative;
}
#listentome{
        background-image:url(https://ajandekok.ro/wp-content/uploads/2020/11/login-kep-2-masolas_Rajztabla-1.svg);
        background-position-x:50%;
        background-position-y:50%;
        background-repeat-x:no-repeat;
        background-repeat-y:no-repeat;
        background-size:cover;
        height:100%;
        overflow:hidden;
    }
#loader {
        border: 4px solid #f3f3f3;
        border-radius: 50%;
        border-top: 4px solid blue;
        border-bottom: 4px solid blue;
        width: 60px;
        height: 60px;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
        margin:auto;
        margin-top:225px;
    }
@-webkit-keyframes spin {
      0% { -webkit-transform: rotate(0deg); }
      100% { -webkit-transform: rotate(360deg); }
    }
@keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
#customerform, #totalprice, #couponform{
      background-color: #f2f2f2;
      padding: 5px 20px 15px 20px;
      border: 1px solid lightgrey;
      border-radius: 10px;
}
.customerform .row .col-50{
  box-sizing: border-box;
}

.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  margin: 0 -16px;
}
.col-50 {
  -ms-flex: 50%; /* IE10 */
  flex: 50%;
  padding: 0 16px;
}
input[type=text], input[type=tel], textarea{
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

label {
  margin-bottom: 10px;
  display: block;
}
@media (max-width: 650px) {
  .row {
    flex-direction: column-reverse;
  }
}
.transporter{
    display:none;
}
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.selectbtncontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.selectbtncontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.selectbtncheckmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  background-color: #eee;
  border-radius:50%;
  border-width: 2px;
  border-style: outset;
  border-color: rgb(118, 118, 118,0);
  border-image: initial;
}
.selectbtncontainer:hover input ~ .selectbtncheckmark {
  background-color: #ccc;
}
.selectbtncontainer input:checked ~ .selectbtncheckmark {
  background-color: var(--red2);
}
.selectbtncheckmark:after,.selectbtncheckmark:before {
  content: "";
  position: absolute;
  display: none;
}
.selectbtncontainer input:checked ~ .selectbtncheckmark:after {
  display: block;
}
.selectbtncontainer input ~ .selectbtncheckmark:before{
  display:block;
}
.selectbtncontainer .selectbtncheckmark:after {
  left: 11px;
  top: 6px;
  width: 5px;
  height: 13px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.selectbtncontainer .selectbtncheckmark:before {
    left:4px;
    top:4px;
    border: 2px solid rgb(118,118,118);
    width:18px;
    height:18px;
}
.col-container {
  display: table;
  width: 100%;
}
.col {
  display: table-cell;
  padding: 16px;
}
#gototopbtn {
  display: none;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #ccc;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 50%;
  width:48px;
  height:48px;
}
#gotodownbtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #ccc;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 50%;
  width:48px;
  height:48px;
}
.file-upload-drop{
    position: absolute;
    width: 100vw;
    height: 100vh;
    left: -10vw;
    top: -26vh;
    z-index:10003;
}
.photonamelabel{
    position:absolute;
    margin-left:0;
    margin-top:233px;
    color:black;
    max-width:205px;
    max-height:35px;
    overflow:hidden;
    font-size:14px;
}
.cancel{
    display:none;
}