@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, h4, h5, h6, p, button {
            font-family: NeutraText-Demi;
        }


        ul>li>a {
            font-family: NeutraText-Demi;
        }

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



/* VISUALISER CSS */
.div-initial-color{
  display: flex;
  align-items: center;
  margin-top: 15px;
  margin-bottom: 5px;
}



.initial-color{
  width: 25px !important;
  height: 25px;
  border: 2px solid inherit;
  padding: 0 !important;
  margin: 7px 4px 0px 0px;
  border-radius: 0px 20px 20px 20px;
  box-shadow: 1px 1px 2px 1px #ccc;
  cursor: pointer;
}

.active-color{
  width: 45px !important;
  height: 45px;  
  text-align: center;
  border-radius: 0px 25px 25px 25px;
}

.active-color:before{
    content: '\2713 ';
    font-size: 26px;
}

.shade-box-header{
  background-color: #fff !important;
  border-bottom: 1px solid #ebebeb !important;
}
.shade-card{
  border: 0px #fff !important;
}

.shades-tabs .shades-link {
  /* border: 1px solid transparent; */
  border-top-left-radius: .25rem;
  border-top-right-radius: .25rem;
}

.shades-link {
  display: block;
  padding: .5rem 1rem;
}

.div-shades-holder{
  display: flex;
  align-items: center;
  margin-top: 5px;
}

.shade-boxes{
  /* curs */
  /* width: 10vh !important; */
  height: 8vh;  
  border: 1px solid #efefef;
  /* margin: 0px 10px 0px 3px; */
  margin: 10px;
  /*padding: 0 !important;  
  border-radius: 0px 20px 20px 20px; */
  text-align: center;
  
}

.shade-boxes:hover .code-span{
  margin: 20% auto;
  display: block;  
}
.code-span{
  display: none;
  font-size: 6px;
  /* font-weight: bold; */
  /* height: 100%; */
  vertical-align: middle;
  /* margin: 35% auto; */
}
.shade-boxes:hover{
  z-index: 1;
  transform: scale(1.6);
  border-color: #e4e3e3;
  cursor: pointer;
}

.active-shade{
  z-index: 1 !important;
  transform: scale(1.6) !important;
  border-color: #d1d1d1;
}

.active-texture{
  z-index: 1 !important;
  transform: scale(1.5) !important;
  border-color: #d1d1d1;
}

.active-shade .code-span{
  margin: 20% auto;
  display: block;
}

/* VISUALISER CSS */

.common-loader{
  background: url(../images/loader-image.gif) no-repeat center center;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #fafafa;
  z-index: 2;
}

.less-padding-left-right{
  padding: 0px !important;
}

.nav-tabs {
  border-color: none !important;
}



.nav-link.active{
  border-color: #fff !important;
}

/*.line {
  display: block;
    border: none;
    color: white;
    height: 8px;
    background: linear-gradient(to right, #00d1c2, #008fe1);
    width: 75%;
    margin: -20px 0px 0px 10px;
}*/

.header-upload{
  color: #000;
    font-size: 50px;
    font-family: NeutraTextLightAlt;
}



#div-img-uploaded{
  /* width: 200px; */
  height: 100%; 
  position: relative;
  display: inline-block;
  overflow: hidden;
  margin: 0;
}

#img-uploaded {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  transform: translate(-50%, -50%);
}

#img-uploaded:hover{
  cursor: crosshair;
}

.height-auto{
  height: auto;
}

/*********************** custome checkbox css *********************/

.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom checkbox */

.checkmark {
  position: absolute;
  top: 5px;
  left: 3px;
  height: 15px;
  width: 15px;
  background-color: #eee;
  border: 1px solid #cdd2d8;
}

/* On mouse-over, add a grey background color */

.checkbox:hover input~.checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */

.checkbox input:checked~.checkmark {
  background: linear-gradient(#e71a53, #e71a53);
}

/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */

.checkbox input:checked~.checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */

.checkbox .checkmark:after {
  left: 5px;
  top: 0px;
  width: 5px;
  height: 11px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/*********************** custome checkbox css ends *********************/

/********changes on 29-09-20******/
.left-grey-background{
  background-image:none !important;
}
.visualiser-header{
  color: #00205b !important;
}
.top-menu-li a{
  color: #222 !important;
}
.nav_tab li.active a{
  font-family: NeutraText-Demi; 
}
.link-black-color{
  color: #605f5f;
}
.link-black-color.active{
  font-family: NeutraText-Demi; 
}
.link-black-color:hover{
  color: #605f5f;
  text-decoration: none;
}
.color_div{
  background-color: #e7194f!important;
  background-image:none!important;
}
#livingCarouselControls, .carousel{
  border: 0!important;
}
.next-btn{
  background-color: #e7194f!important;
  border-color: #e7194f!important;
  background-image:none!important;
}
.back-btn{
  background-color: #e7194f!important;
  border-color: #e7194f!important;
  background-image:none!important;
}
.next-btn.focus, .next-btn:focus{
  box-shadow: none!important;
}
.back-btn.focus, .back-btn:focus{
  box-shadow: none!important;
}
#sidebar_nav .navbar{
  background-color: transparent!important;
}
#sidebar_nav {
  background-color: transparent!important;
}
.nav-tabs .nav-link{
  color: #34393a !important;
}
.tab-container h4{
  color: #00205b;
  font-family: NeutraText-Demi!important;
}
.nav-tabs .nav-link.active{
  font-family: NeutraText-Demi; 
  color: #34393a !important!important;
}
.user_exits img#img-top-menu{width: auto !important;}
/********changes on 29-09-20******/