/* @font-face {
  font-family: NeutraText-Bold;
  src: url(../fonts/NeutraText-Bold.otf);
}

@font-face {
  font-family: NeutraText-Demi;
  src: url(../fonts/NeutraText-Demi.otf);
}

@font-face {
  font-family: NeutraTextLightAlt;
  src: url(../fonts/NeutraTextLightAlt.otf);
}

@font-face {
  font-family: NeutraTextLightItalicAlt;
  src: url(../fonts/NeutraTextLightItalicAlt.otf);
} */

/* h1, h2, h3, h5, h6, p, button {
  font-family: NeutraText-Demi;
} */

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

* {
    font-family: "Raleway", sans-serif !important;
}

@media (min-width: 1200px) {
    .container {
        max-width: 100% !important;
    }

    .picker {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .picker ::-webkit-scrollbar {
        display: none;
    }

    .color-category-section a{
        text-decoration: none !important;
        color:green !important;
    }
}

.text_gradient{
  background: linear-gradient(#e71a53, #e71a53);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#sidebar {
  background-color: #fff;
  border-color: 1px solid #ccc;
  padding-right: 0;
  right: 0;
  float: right;
  height: max-content;
  border: 1px solid #f3f1f1;
  height: auto;  
}

/* a:active{
font-size: 18px
} */

ul>li>a {
  background-color: transparent !important;
  font-family: NeutraText-Demi;
}

.left-grey-background{

  /* The image used */
  background-image: url("../images/background%20image.png");
  /* Center and scale the image nicely */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

body {

  /* Full height */
  height: 100%;
  width: 100%;

  
}

body,
html {
  height: 100%;
  margin: 0;
  font-family: NeutraText-Demi !important;

  -webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

box-sizing: border-box;
}

input[type="text"],
select.form-control {
    background: transparent;
    border: none;
    border-bottom: 1px solid black;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
}

label{
  font-family: NeutraTextLightAlt;
  font-size: 16px;
} 


/* label.lbl {
  background: linear-gradient(#3182DF, #62E1BA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: NeutraText-Demi;
} */

.lbl-row{
  margin-top: 8%;
  margin-left: 2%;
  font-family: NeutraText-Demi;
}



/* CAROUSEL CSS STARTS HERE */
.carousel-inner > .carousel-item > img {
    width:640px;
    height: 47vh;
  }

  .carousel-item-next.carousel-item-left,
    .carousel-item-prev.carousel-item-right {
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
     }
     .carousel-item-next,
     .active.carousel-item-right {
       -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
     }
     .carousel-item-prev,
     .active.carousel-item-left {
     -webkit-transform: translate3d(0, +100%, 0);
            transform: translate3d(0, +100, 0);
     }
  /* CAROUSEL CSS ENDS HERE */

.next-btn:focus
  {outline:0;}

  .back-btn:focus
  {outline:0;}
 
  .next-btn {
    background-color: #00e5b8; /* For browsers that do not support gradients */
    background-image: linear-gradient(#e71a53, #e71a53); /* Standard syntax (must be last) */
    border-radius: 5px 25px 25px 20px !important;
    cursor: pointer;
    box-shadow: 0px 0px 13px 2px rgba(145, 126, 145, 0.72);
}

.back-btn {
    background-color: #00e5b8; /* For browsers that do not support gradients */
    background-image: linear-gradient(#e71a53, #e71a53); /* Standard syntax (must be last) */
    border-radius: 20px 5px 20px 20px !important;
    margin-right: 10px;
    cursor: pointer;
    box-shadow: 1px 1px 6px 1px #ccc;
}

.back-btn_1 {
  background: linear-gradient(#e71a53, #e71a53);
  border-radius: 25px 5px 25px 20px !important;
  position: absolute;
  cursor: pointer;
}

.next-btn_1 {
  background: linear-gradient(#e71a53, #e71a53);
  border-radius: 5px 25px 25px 20px !important;
  position: absolute;
  cursor: pointer;
}

.next-btn_2 {
  background: linear-gradient(#e71a53, #e71a53);
  border-radius: 5px 25px 25px 20px !important; 
  position: absolute;
  cursor: pointer;
}

.btn-primary {
  color: #fff;
  border: none;
}

.thumb-img{
  cursor: pointer;
}

.icons-container{
  display: flex;
  align-items: center;
}

.icon-size{
  width: 45%;
  fill: #000;
  /* height: 25px; */
  /* margin-top: 40%; */
}



/* MODAL BOX CSS STARTS HERE*/
.modal-content {
  width:100%;
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 100%; /* Could be more or less, depending on screen size */
  border-radius: 5px 50px 50px 50px !important;
  background: -webkit-linear-gradient(top, white, white 70%, #DA3558 30%, #DA3558);
}

.save_project-btn {
 
  background: linear-gradient(#e7194f, #e7194f);
  border-radius: 5px 25px 25px 20px !important;
}

.colour-shade-box{
  height: 100%;
  /* width:  */
}
/* MODAL BOX CSS ENDS HERE*/
.carousel .carousel-control-prev-icon{
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

.color_div {
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, #e7194f, #e7194f, #e7194f); /* Standard syntax (must be last) */
  font-size: 15px;
  width: 80px;
  height: 80px;
  display: inline-block;
  position: relative;
}

.pp {
  position: absolute;
  bottom: -2px;
  left: 16px;
    color: #ffffff;
}

.horizontal_line {
    width: 90%;
    border-top-color: black;
    border-top: 3px solid rgb(0, 0,0) !important;
    position: absolute;
    bottom: 7px;
    left: 45px;
}


.texture-tabs>li>a {
  font-size: 14px;
  background-color: transparent !important;
  font-family: NeutraText-Demi;
}


/**********************************************/
/*.active_tab_line {
  display: block;
  border: none;
  height: 5px;
  width: 75%;
  background: linear-gradient(#00d1c2, #008fe1);
  margin: -19px 0px 0px 10px;
}*/

.visualiser-texture_div {
  position: relative;
  float: left; 
  width: 100%;
  display: block;
}

.texture_div {
  margin: 8px;
  display: inline-block;
  position: relative;
  width: 45px;
  height: 45px;
}

#textures_img{
  width: 45px;
  height: 45px;
  border-radius: 2px;
}




.preloader{
  /* position:absolute; */
  /* top:0; */
  left:0;
  /* right:0; */
  /* bottom:0; */
  /* margin:auto; */
  /* width:100vw; */
  height:100vh;
  background:#1D1D1D;
  display: block;
}
#bar{
  background-color: #ff6c00;
  width: 0%;
  height: 5px;
  /* position: absolute; */
  top:50%;
}

#img-top-menu{
  cursor: pointer;
  position: relative;
}
.header-upload{
  cursor: pointer;
}

#Container3d{    
  width: 100%;
  height: 555px;
}

#Container3d_kitchen{    
  width: 945px;
  height: 555px;
}

#Container3d_bedroom{    
  width: 945px;
  height: 555px;
}


/* ############ share buttons CSS ############## */

/* The actual popup */
.share_popup_div .popupShare {
  visibility: hidden;
  width: 120px;
  background-color: transparent;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 80%;
  margin-left: -52px;
  margin-bottom: -95px;
  cursor: pointer;
}

/* Popup arrow */
.share_popup_div .popupShare::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color:transparent;
}

/* Toggle this class - hide and show the popup */
.share_popup_div .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}


/* ###### Grey navigation bar ####### */

.link-black-color{
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  opacity: 0.5;
}

.link-black-color:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  opacity: 1;
}

.vis {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  opacity: 1;
}


/* ###### Avatar CSS ###### */

.avatar-upload .avatar-edit {
  position: absolute;
  z-index: 1;
  top: 0px;
}

.avatar-upload .avatar-edit input+label {
  display: inline-block;
  width: 26px;
  height: 26px;
  margin-bottom: 0;
  border-radius: 100%;
  background: #FFFFFF;
  border: 1px solid transparent;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  font-weight: normal;
  transition: all 0.2s ease-in-out;
}

.avatar-upload .avatar-edit input+label:hover {
  background: #f1f1f1;
  border-color: #d6d6d6;
}

.avatar-upload .avatar-edit input+label:after {
  content: "\f040";
  font-family: 'FontAwesome';
  color: #757575;
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  text-align: center;
  margin: auto;
}

.avatar-upload .avatar-preview {
  width: 50px;
  height: 50px;
  position: relative;
  border-radius: 6px 45px 45px 40px;
  border: 4px solid rgb(216, 212, 212);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
}

/* ###### Avatar CSS Ends Here ###### */

.nav-tabs .nav-link.active{
  color : #34393a !important;
  border : 0;
  border-bottom: 0 !important;
  transform: scale(1.3);
}

.nav-tabs{
  color : white !important;
  border : 0;
  border-bottom: 0 !important
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover{
  border : 0;
  border-bottom: 0 !important
}


.carousel-control-next {
  right: -50px !important
}

.carousel-control-prev {
  left: -50px !important
}


.download-preview {
  cursor: pointer;
}

.top-menu-li a {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  color: #222 !important
}

.light-switch {
  background-color: #f2f4f6;
  text-align: center;
  line-height: 3rem;
  width: 100%;
  -moz-box-shadow:    1px 1px 6px 1px #ccc;
  -webkit-box-shadow: 1px 1px 6px 1px #ccc;
  box-shadow:         1px 1px 6px 1px #ccc;
}

.light-switch>li>a {
  color: #b9bbbd !important;
  font-family: NeutraText-Demi;
  border-radius: 0 !important;
  font-size: 1.1rem;
}

.light-switch>li>a:active {
  background-color: #e9255b !important;
}

.light-switch>li>a:focus {
  background-color: #e9255b !important;
  color: #F2F4F6 !important;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  background-color: #e9255b !important;
  color: #F2F4F6 !important;
}
.btnbold{
  opacity: 0.7;
  font-size:17px;
 
}
.hidebbbttt {
  display: none;
}
.setimgclass{width: 23%;}

/* For visualiser heading tag CSS starts here */

.visualiser-header {
  color: #fff;
  margin: 0 0 0 16px;
  font-size: 35px;
}
/* For visualiser heading tag CSS ends here */


.color-images{
/* background-color: orange; */
width: 100% !important;
}

.color-picker{
/* background-color: grey; */
width: 100%;
}



/* Medium and larger screens */
@media (min-width: 1024px) {
  .color-images {
    width: 70%;
  }
  .color-picker {
    width: 30%;
  }
}

.carousel-inner > .carousel-item > img {
  height: 100%;
}

.rooms-picker .active{
  font-weight: 800;
  }