@import url("seting.css");
 @import url("menu.css");
 html {
 	scroll-behavior: smooth;
 	padding-top: 60px;
 }
 ul{
 	list-style: none;
 }
 body,html{
  min-width: 340px;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
  height: 100%;
}
p{font-size: 17px;}
.div-box{
  position: relative;
  height: 100%;
  width: 100%;
}
.div-box .div-box-colum {
 top:0;
 right:0;
 bottom:0;
 left:0;


 -webkit-box-orient:vertical;
 -webkit-box-direction:normal;
 -ms-flex-direction:column;

 padding:0;
 margin:0;

 position:absolute;

 display:-webkit-box!important;
 display:-ms-flexbox!important;
 display: inline-flex;

}

.div-box .div-box-content {

 -webkit-box-sizing:border-box;
 box-sizing:border-box;
 width:100%;
 -webkit-overflow-scrolling:touch;
 overflow:scroll;
 overflow-x:hidden;
 overflow-y:auto;
 display:block!important

}

.div-box .div-box-panels>.div-box-content {
 position:absolute;
 left:0;
 right:0;
 top:0;
 bottom:0
}

.div-box .div-box-panels {

 position:relative;
 height:100%;
 -webkit-box-flex:1;
 -ms-flex-positive:1;
 flex-grow:1;
 overflow:hidden;

}

/*----------------------------------------*/
.bg-line{
  background: url(../images/bg-lin.png);
 background-size: cover;
 background-position: bottom right;
}
.bg-success {
 background: url(../images/form.png);
 background-size: cover;
 background-color: var(--linkColor7) !important;
}
h1{
  color: var(--linkColor6);
  font-size: 22px;
}
h2{
 color: var(--linkColor3);
 font-size: var(--font-size4);
}
h3{
 color: var(--linkColor7);
 font-size: 12px;
}
h4{
  font-size: var(--font-size4);
  color: var(--linkColor3);
  line-height: 2;
}
.link-home{line-height: 3;}
.link-home i.fa-home{
  color: var(--linkColor7);
}
.link-home samp{
  font-size: var(--font-sizeSupTotle);
  color: var(--linkColor5) !important;
  padding: 0 10px;
}
.div-box-haeder{
  max-height: 55px;
}
.div-box-haeder img{
  width: 70%;
}
@media (max-width: 768px){
  .div-box-haeder img{
    width: 100%;
  }
  .brand{
    width: 149px;
  }
}
.req{
  position: absolute;
  background-color: #cc0909;
  top: 16px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.req.right{
  right: 30px;
}
.lable-val{
  display: none;
}
.form-group {
  /* margin: 0; */
  margin-bottom: 25px;
  position: relative;
  width: 100%;
}
@media (min-width: 768px){
  .youtube-md {
    max-width: 88.666667%;
  }
}
/* .general > div{ position: relative;margin-bottom: 25px; } */
 /* input[type=text], input[type=date],.general select{ */
  input,.general select,textarea{
  display: block;
  outline: none;
  width: 100%;
  padding: .375rem .75rem;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  background-color: #fff;
  background-clip: padding-box;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
  border: 1px solid #cdcfd1;
}
input,.general select{
  height: calc(1.5em + .75rem + 2px);
}
.inline select,
.inline input[type=time]
{
  display: inline-block;
  color: var(--linkColor3);
}
.inline label{
  color: var(--linkColor3);
  font-size: var(--font-size4);
}
/* input[type=text], input[type=date] {color: var(--linkColor8);} */
input{color: #333;}
/* custom general input */
/* input[type=text]:focus, input[type=date]:focus
,.general select:focus{
  border: 2px solid var(--linkColor8);
  box-shadow: none;
} */
input:focus
,.general select:focus,
textarea:focus{
  border: 2px solid var(--linkColor8);
  box-shadow: none;
  color: var(--linkColor8);
}
input[type=date] ~ .req{right: 7px;}
/* Custom labels: the container */
.checkcontainer {
  display: block;
  position: relative;
  padding-right: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 17px;
  -webkit-user-select: none; /* Chrome, Opera, Safari */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}

.checkcontainer h4{
  margin-left: 33px;
}

/* Hide the browser's default checkbox */
.checkcontainer input {
  position: absolute;
    opacity: 0;
    cursor: pointer;
    top: 0;
    left: 0;
}

  /* Create a custom checkbox */
  .checkmark {
    position: absolute;
    top: 6px;
    height: 15px;
    width: 15px;
    background-color: transparent;
    border: 1px solid var(--linkColor9);
    border-radius: 2px;

  }
  .checkcontainer input[type="radio"] ~ .checkmark{
    border-radius: 50%;
  }


  /* On mouse-over, add a grey background color */
  .checkcontainer:hover input ~ .checkmark {
    background-color: #ccc;
  }

  /* When the checkbox is checked, add a blue background */
  .checkcontainer input:checked ~ .checkmark {
    background-color: var(--linkColor8);
    border-color: var(--linkColor8);
  }

  /* Create the checkmark/indicator (hidden when not checked) */
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  /* Show the checkmark when checked */
  .checkcontainer input:checked ~ .checkmark:after {
    display: block;
  }

  /* Style the checkmark/indicator */
  .checkcontainer .checkmark:after {
    left: 3px;
    top: 1px;
    width: 5px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    /* -webkit-transform: rotate(45deg); */
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  .mt {
    margin: 90px 0;
  }
  
  .font-13{
    font-size: 13px;
  }

  #prevBtn ,#prevBtn:focus,
  #nextBtn ,#nextBtn:focus{
    border: none;
    background-color: transparent;
    font-size: var(--font-size3);
    color: var(--linkColor7);
    box-shadow: none;
    outline: none;

    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
    transition: all .25s ease;
  }
  #prevBtn{
    color: var(--linkColor3);
  }
  #prevBtn:hover,
  #nextBtn:hover{
    opacity: .8;
  }


  .divBox{

  }

  .centerBox{
    position: absolute;
    width: 80%;
    left: 50%;
    top: 56%;
    transform: translate(-50%, -50%);

  }
  .centerBox h1{
    color:#fff;
  }
  .centerBox p{
    color:#CECECE;
  }

  .divBox .step  span.b-step{
    width: 10%;
    height: 5px;
    background-color: #AD3D94;
    opacity: .5;
    display: inline-flex;
    margin: 2px;
    border-radius: 1px;
  }
  .divBox .step  span.b-step.finash{
    background-color: #fff;
    opacity: .5;
    }.divBox .step  span.b-step.active{
      background-color: #fff;
      opacity: 1;
    }
.social i{
  color: #fff;
  width: 30px;
  height: 29px;
  text-align: center;
  line-height: 2.5;
  border-radius: 50%;
}
.social i.fa-twitter{
  background-color:#1DA1F2;
}
.social i.fa-facebook-f{
  background-color:#4267B2;
}
.social i.fa-instagram{
  background-color:#8a3ab9;
}
.social i.fa-youtube{
  background-color:#FF0000;
}
.social i.fa-linkedin{
  background-color:#0e76a8;
}

.submit{
  background-color: var(--linkColor7) !important;
  color: #fff !important;
  font-size: 12px !important;
  width: 163px;
  padding: 10px 0;
  border-radius: 30px;
  margin: auto;
}

.side-title{
  position: fixed;
    left: 0;
    top: 280px;
    width: 509px;
    padding: 0 50px;
    /* width: 80%;
    left: 50%;
    top: 50%; */
    /* transform: translate(-50%, -50%); */
}
.side-title h1{
  color: #fff;
}
.side-title p{
  color: #ccc;
}
.padding-15{
  padding: 0 15px;
}
.yellow{
  color: var(--linkColor6);
}
.visible-h{
  visibility: hidden;
}
.add{
  position: relative;
  top: 27px;
  cursor: pointer;
}
.add.erp{
  position: absolute;
  top: 0;
  z-index: 55;
}
.slide{
  position: absolute;
  cursor: pointer;
  /* top: 31px; */
}
.add i,
.slide i{
  color: #22a4f1;
  border: 1px solid #22a4f1;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 2;
  border-radius: 50%;
}
@media (max-width: 768px){
  .side-title{
    display: none;
  }
}
.form-control{
  font-size: 12px;
}

.navbar-toggler {
  display: none;
}

.fixed-bar{
  background-color: #FFF;
  position: fixed;
  bottom: 0;
  z-index: 5;
  padding: 5px 20px 0px;
  box-shadow: 0 1px 3px 1px #777;
  width: 100%;
  right: 0;
}
@media(min-width:769px){
  .fixed-bar{
    width: 67%;
  }
}

.fixed-bar h4{
  display: inline-block;
  margin-left: 13px;
}
@media(max-width:530px){
  .fixed-bar h4{
    margin-left: 0px;
  }
}
.fixed-bar h4:last-of-type{
  margin-right: 8px;
}
.price h3:last-child,
.unit-price h3:last-child{
  margin-left: 14px;
}
.table td, .table th{
  font-size: 13px !important;
}

.table .thead-light th{
  font-size: 11px !important;
}
/* 

@media (min-width: 769px){
  .collapce{
    display: flex;
  }
} */
/* @media (max-width: 768px){
  .navbar-toggler{
    display: block;
  }
  .collapce{
    display: none;
    /* display: flex; */
    /*width: 100%;
    background-color: #da1717;
    height: 100vh;
    z-index: 222222222222222222;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
  }
}