@import url('https://fonts.googleapis.com/css?family=Roboto+Slab|Ubuntu');
@import url('https://fonts.googleapis.com/css?family=Lato');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:ital,wght@0,300;0,700;1,300&display=swap');


html,body{
    font-family: 'Roboto', sans-serif;
    padding: 0;
    margin: 0;
}
body{
    background-color: #fff;
}


::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: #6c7ae0;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #6c7ae0;
}

::-moz-scrollbar {
    width: 5px;
    height: 5px;
}

::-moz-scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 10px;
}

::-moz-scrollbar-thumb {
    background: #6c7ae0;
    border-radius: 10px;
}

::-moz-scrollbar-thumb:hover {
    background: #6c7ae0;
}

.scrollbar {
    width: 5px;
    height: 5px;
}

.scrollbar-track {
    box-shadow: inset 0 0 5px #fff;
    border-radius: 10px;
}

.scrollbar-thumb {
    background: #6c7ae0;
    border-radius: 10px;
}

.scrollbar-thumb:hover {
    background: #6c7ae0;
}

.br-10{
    border-radius: 10px;
}
.br-5{
    border-radius: 5px;
}


.border-left-yellow{
    border-left: 7px solid #ffcc00;
}
.border-left-red{
    border-left: 7px solid #ff5050;
}
.border-left-blue{
    border-left: 7px solid #00ccff;
}
.border-left-violet{
    border-left: 7px solid #9900ff;
}
.border-left-green{
    border-left: 7px solid #42f5c8;
}

.border-top-yellow{
    border-top: 7px solid #ffcc00;
}
.border-top-red{
    border-top: 7px solid #ff5050;
}
.border-top-blue{
    border-top: 7px solid #00ccff;
}
.border-top-violet{
    border-top: 7px solid #9900ff;
}
.border-top-green{
    border-top: 7px solid #42f5c8;
}

.grey-bg{
    background-color: #535151;
}
.grey-text{
    color:#535151;
}
.teel-bg{
    /* background-color: #008080; */
    background: linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%)
}
.light-teel-bg{
    background-color: #22eeee;
}
.light-teel-border{
    border: 2px solid #22eeee;
}
.light-teel-text{
    color: #22eeee;
}
.light-grey-text{
    color: #ced4da;
}
.gold-text{
    color: #FFD700;
}
.teel-text{
    color:#008080;
}
.gradient-border{
    border-color:  linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%);
}
.gradient-text{linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%)
    background: ;
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.title{
    font-size:35px;
}
.sub-title{
    font-size:25px;
}
.title:before{
    background: linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%);
    content: "";
    display: inline-block;
    height: 50px;
    position: absolute;
    margin-top: -15px;
    width: 5px;
}
.title span{
    margin-left: 20px;
}
p{
    margin: 10px;
}
button{
    border: none;
}
.ui-state-default{
    border:none;
}
.ui-state-active{
    background: linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%)
}
.nav-item{
    cursor: pointer;
}
.shadow,
.shadow-lg{
    box-shadow: 0px 6px 8px -3px #ccc !important;
}
.big-shadow{
    box-shadow:0 0px 15px 0px rgb(0 0 0 / 10%)
}
.was-validated .form-control:invalid,
.form-control.is-invalid,
.was-validated .custom-select:invalid,
.custom-select.is-invalid{
    border-color: #008080;
}
button:focus,
input:focus{
    outline: none;
}
.form-control:focus{
   box-shadow: 0 0 0 0.2rem transparent !important;
}

button:hover,
input[type="submit"]{
    box-shadow: 0px 6px 8px -3px #000 !important;
    transition: 0.2s ease-in-out;
    cursor: pointer;
}

/*********** Navbar **********/
.navbar .nav-item .nav-link{
    color: #535151;
    border-bottom: 2px solid transparent;
} 
.navbar-brand img{
    width: 75px;
}
.navbar .dropdown-item:hover{
    /* background-color: #008080; */
     background: linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%);
    color: #fff;
}
.navbar .dropdown-menu{
    padding:0px;
    box-shadow: 2px 6px 8px -3px #000;
}
.navbar .nav-item:hover .nav-link{
    color: #008080;
}
.navbar .dropdown-item{
    text-align: center;
}
.navbar .navbar-brand h3{
    font-family: 'Open Sans Condensed', sans-serif !important;
    font-weight: 700;
}
.navbar .user_profile .dropdown-toggle .user_pic{
    width: 50px;
    height: 50px;
    background-image: url("../imgs/hj.jpg");
    background-size: cover;
    border-radius: 50%
}
.navbar .user_profile .dropdown-menu{
    left: -100px;
}

/***************** carousel us in home page ***************/
.slideshow-container button,
.faq_banner .faq_cta{
    border-radius: 30px;
    position: absolute;
    top: 400px;
    left: 50px;
    z-index: 132;
}

.mySlides {display: none}
.slide1{ display:block }
.slideshow-container img {vertical-align: middle;}


.slideshow-container {
  position: relative;
  margin: auto;
}


.slideshow-container  .prev, .slideshow-container  .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 0px 8px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 50%;
  user-select: none;
}

.slideshow-container  .next {
  right: 0;
}

.slideshow-container  .prev:hover, .slideshow-container  .next:hover {
  background-color: #ccc;
}


.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

 .dot:hover {
  background-color: #717171;
}
.dot.active{
    background-color: #008080;
}


.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}

}

/***************** About us in home page ****************/



/************* We test in home page **************/
.wetest-section,
.services-section {
    margin: 100px 0px;
}
.wetest-section .wetest1_img{
    width:600px;
}
.wetest-section .wetest2_img{
    width:400px;
}
.wetest-section .sub-title{
    margin-bottom: 5px !important;
}

#testing .iq-fancy-box-02 {
    /* display: flex;
    justify-content: center; */
}

/************* Why C4T in home page **************/
.yc4t-section img{
    width: 400px;
    margin: 10px 0px;
}

/************* Services in home page **************/
.services-section img{
    width: 100px;
}
.services-section .row div{
    width:250px;
    margin:10px;
}

/************* Testimonial in home page **************/
.testimonial_section .row .col-sm-6{
    /* background-image: url("../imgs/feedback_bg2.svg"); */
    background-size: cover;
    padding: 10px;
    margin: 10px 0px;
    width: 300px;
}
.testimonial_section .row .client{
    width: 100px;
    height:100px;
    border-radius: 50%;
    border: 4px solid #fff;
    overflow: hidden;
    margin: 0px auto;
}
.testimonial_section .row .client1{
    background-image: url("../imgs/confirmtkit.jpg");
    background-size: cover;
}
.testimonial_section .row .client2{
    background-image: url("../imgs/rydo.jpg");
    background-size: cover;
}
.testimonial_section .row .client3{
    background-image: url("../imgs/hungurybells.jpg");
    background-size: cover;
}
.testimonial_section .row .client4{
    background-image: url("../imgs/smacar.png");
    background-size: cover;
}

.testimonial_section .row .tester1{
    background-image: url("../imgs/Avatar_1.jpg");
    background-size: cover;
}
.testimonial_section .row .tester2{
    background-image: url("../imgs/erick.jpg");
    background-size: cover;
}
.testimonial_section .row .tester3{
    background-image: url("../imgs/hrvoje.jpg");
    background-size: cover;
}
.testimonial_section .row .tester4{
    background-image: url("../imgs/Avatar_3.jpg");
    background-size: cover;
}

/************* CTA in home page **************/
.cta{
    border-radius:20px;
    border: none;
}
.cta:hover{
    box-shadow:0px 4px 4px 0px #000;
    transition: 0.2s linear;
    cursor: pointer;
}

/************* Footer **************/
footer .title{
    font-size: 25px;
}
footer .title:before{
    height: 40px;
    background: linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%);
}
footer .sm-links span{
    margin: 0px 10px;
}
footer .sm-links span img{
    width: 50px;
    cursor: pointer;
}
footer .playstore{
    width: 200px;
    margin:20px 10px;
    cursor: pointer;
}
footer input{
    width: 300px;
    border:none;
    border-radius:20px;
    height:40px;
}
footer button{
    border:none;
    border-radius:20px;
    height: 40px;
    width: 100px;
}
footer button{
    cursor: pointer;
}

footer .service-links p:hover{
    cursor: pointer;
    font-weight: bold;
    padding-left:10px;
    background: linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%);
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    transition: 0.2s linear;
}


/*************** Pricing ****************/
.pricing_banner img,
.faq_banner img,
.webinar_banner img,
.host_pic img,
.mobileapp_banner img,
.desktopapp_banner img,
.website_banner img{
    width: inherit;
}
.pricing .row div{
    box-shadow: 0px 6px 8px -3px #000;
    margin: 0px 10px;
    padding-right:0px;
    padding-left:0px;
}
.pricing p,
.pricing span{
    font-size: 15px;
    color:#535151;
}
.pricing .header{ 
    font-size: 20px;
}
.pricing button{
    padding: 10px 30px;
    border-radius: 30px;
}

/*************** Faq ****************/
.faq_banner .faq_cta button{
    border-radius: 20px;
}
.faq_banner .faq_cta p{
    font-size:25px;
}

/*************** Webinar ****************/

.webinar img{
    width: 200px;
    border-radius: 50%;
    border:5px solid #008080;
}
.webinar button{
    border-radius:20px;
    width: 100%;
}

/*************** Mobile app ****************/
.mobileapp ul,
.desktopapp ul{
    list-style-type: none;
}
.mobileapp ul .teel-text,
.desktopapp ul .font-weight-bold,
.ul-disc ul .font-weight-bold{
    font-size: 20px;
}
.ul-disc ul{
    list-style-type: disc;
}
.ul-circle ul{
    list-style-type: circle;
}
.ul-number ol{
    /* list-style-type: decimal */
}
/*************** About Us ****************/
.aboutus img{
    width: 200px;
    border-radius: 50%;
    border:5px solid #008080;
    height: auto;
}
.ach img{
    width: 100px;
    height: auto;
}
.global_pres img{
    width: inherit;
    height: auto;
}
.clients img{
    width: 100px;
    height: auto;
}

/*************** Contact ****************/
.contact button{
    border-radius: 5px;
    cursor: pointer;
}
.contact iframe{
    width: inherit;
}

/*************** Review ****************/
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link{
    background-color: #ffffff !important;
    /* background: linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%) !important; */
}
.review input[type="text"]{
    border: none;
    border-radius: 0px;
    border-bottom: 2px solid #008080;
}
.review .rev-cont{
    box-shadow: 0px 10px 15px -5px #000;
    padding: 10px;
}
.review .rev-cont .row{
    margin-left: 0px;
    margin-right: 0px;
}

/****** Style Star Rating Widget *****/

.rating { 
  border: none;
  float: left;
}

.rating > input { display: none; } 
.rating > label:before { 
  margin: 5px;
  font-size: 1.25em;
  font-family: FontAwesome;
  display: inline-block;
  content: "\f005";
}

.rating > .half:before { 
  content: "\f089";
  position: absolute;
}

.rating > label { 
  color: #ddd; 
 float: right; 
}

.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700;  } /* hover previous stars in list */

.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFD700;  } 


/*************** Signup ****************/

/* Login form */
.login-bg{
    /* background-image: url("../imgs/login.svg");
    background-size: cover; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login-bg img{
    /* width: inherit; */
    height: calc(100vh - 100px);
}
.forms{
    /* padding-top: 45px; */
    padding-bottom: 45px;
}
.forms .btn{
    width:260px;
    /* background-color: #008080; */
    background: linear-gradient(to left, rgb(74, 216, 237) 0%, rgb(108, 223, 169) 100%);
    color: white;
    margin-top: 10px;
}
.forms .form-control{
    background-color: transparent;
    border-style: none;
    border-bottom: 2px solid #008080;
    border-radius: 0px;
}
.forms .container{
    padding-top: 10px;
    /* box-shadow: 0px 2px 5px 4px grey; */
    padding-bottom: 10px;
}
.forms:focus-within{
    border-style: none;
}
form label, label{
    color: #535151 !important;
}
hr{
    width: 80px;
    height: 2px;
    background-color:  #008080;
    margin: auto;
}
.mailwid{
    margin-top: -20px;
}
.custom-checkbox #customCheck{
    background-color: #008080;
    color: #008080;
}
::-webkit-input-placeholder {
  /* color: peachpuff; */
  font-size: 13px;
}
::-moz-placeholder {
  /* color: peachpuff; */
  font-size: 13px;
}
:-ms-input-placeholder {
  /* color: peachpuff; */
  font-size: 13px;
}
::placeholder {
  /* color: peachpuff; */
  font-size: 13px;
}

/*************** Join US ****************/
.join_us input{
    border-style: none;
    border-bottom: 2px solid #008080;
    border-radius: 0px;
}
.join_us label{
    font-weight: bold;
}
.join_us{
    background: url("./assets/imgs/update.png");
    background-size: cover;
}

/*************** T&C ****************/

.tnc ol li{
    list-style-type: decimal;
}
.tnc .title{
    line-height: 1;
}



/**********************************/
/********* Build ***********/
/**********************************/

.build-sidenav {
    background-color: #6c7ae0;
    padding: 10px;
}

  
.build-sidenav .nav-item,
.contest-sidenav .nav-item {
  color: #ffffff;
  cursor: pointer;
  border-radius: 5px;
}

.build-sidenav .nav-item:hover,
.contest-sidenav .nav-item:hover {
  background-color: #e4f0f6;
  color: #0079bf;
  transition: 0.2s ease-out;
}

.build-sidenav .nav-pills .nav-link.active,
.contest-sidenav .nav-pills .nav-link.active{
  background-color: #e4f0f6;
  color: #6c7ae0;
  font-weight: bold;
}

.build-summary .nav-item:hover{
  background-color: #a6ffd5;
  color: #138750;
  transition: 0.2s ease-out;
}
.build-summary .nav-pills .nav-link.active{
  background-color: #a6ffd5;
  color: #138750;
  font-weight: bold;
}

.profile-pic{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background-image: url("../imgs/hj.jpg");
    background-size: cover;
}

#payslips .logo{
    background-image: url("../imgs/logo.png");
    width: 100px;
    height: 100px;
    background-size: cover;
}

#payslips table, #payslips th, #payslips td{
    border: 1px solid black;
    padding: 5px;
  }

#addEmployeeModal label{
    color: #535151
}

#timesheets table td{
    vertical-align: middle !important;
}

#reportdetails .timesheetReport, #reportdetails .ptReport, #reportdetails .tdsReport{
    display: none;
}


#employeedetails .card .card-img-top{
    background-image: url("../imgs/hj.jpg");
    background-size: cover;
    width: 100px;
    height: 100px;
    border-radius: 50%
}

#taxDeduction ol li{
    list-style-type: lower-alpha;
    font-size: 15px;
}
#taxDeduction table{
    padding: 5px;
}
#taxDeduction .borderless-table{
    border: none;
}
#taxDeduction table,
#taxDeduction  th, 
#taxDeduction  td,
#taxDeduction  tr{
    border: 1px solid black;
    padding: 5px;
}




.worktype button:hover{
    box-shadow: 0px 0px 0px transparent !important;
}

/* .worktype button:focus{
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
} */

.thead-lite-blue{
    color: #fff;
    background-color: #00ccff;
    border-color: #00ccff;
}
.thead-violet{
    color: #fff;
    background-color: #9900ff;
    border-color: #9900ff;
}

.btn-primary{
    background-color: #6c7ae0;
}


.btn-primary:hover {
    color: #fff;
    background-color: #4e5cc1;
    border-color: #4e5cc1;
}

#leads .column1,
#leads .column2,
#leads .column3,
#leads .column4,
#leads .column5
{
    width: 20% !important;
}

#partners .column1,
#partners .column2,
#partners .column3,
#partners .column4
{
  width: 25%;
}
#leads .comp_img img{
    /* background-image: url(../imgs/hungurybells.jpg);
    background-size: cover; */
    width: 35px;
    height: 35px !important;
    border-radius: 20px;
}

#basicDetails .comp_img img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 70px !important;
    border-radius: 50px;
}

#leads tr,
#partners tr{
    cursor: pointer;
}

admin .form-control,
admin .form-control:focus,
admin .form-control:active{
    border: 1px solid #ced4da;
}

#addnewlead .modal-body{
    max-height: 500px;
    overflow: auto;
}


#users .column1,
#users .column2,
#users .column3,
#users .column4,
#invoices .column1,
#invoices .column2,
#invoices .column3,
#invoices .column4{
    width: 25%;
}

#invoiceDetails .column1,
#invoiceDetails .column2,
#invoiceDetails .column3 {
    width: 30%;
}

#customers .customerLogo img{
    width: 60px;
    height: 60px;
}

#customerdetailsModal .nav-pills .nav-link.active, .nav-pills .show > .nav-link{
    background-color: #6c7ae0 !important;
    color: #fff;
}


#invoices .table100-body{
    max-height: 300px;
}

#generateInvoiceModal tr,
#generateInvoiceModal td{
    border: 1px solid #ccc;
}

#generateInvoiceModal .td1{
    width: 70%;
}
#generateInvoiceModal .td2{
    width: 30%;
}
.del_tr{
    cursor: pointer;
}
#generateInvoiceModal .logo img{
    width: 70px;
    height: auto;
}
 
.lead_details #basicDetails .comp_img img,
.customer_details #basicDetails .comp_img img{
    /* background-image: url(../imgs/hungurybells.jpg);
    background-size: cover; */
    width: 100px;
    height: auto;
}
.lead_details .nav-pills .nav-link.active, .nav-pills .show > .nav-link,
.customer_details .nav-pills .nav-link.active, .nav-pills .show > .nav-link{
    color: #6c7ae0;
    font-weight: bold;
}
.lead_details #basicDetails .cell100,
.customer_details #basicDetails .cell100{
    width: 33.33%;
}


#leadconv .converstaions,
#clientconv .converstaions{
    min-height: 250px;
    max-height: 450px;
    overflow: auto;
}
#leadconv .add_conv_div,
#clientconv .add_conv_div{
    width: 300px;
}

#leadconv .converstaions .border-left-blue,
#clientconv .converstaions .border-left-blue{
    border: 1px solid #ccc;
    border-left: 5px solid #6c7ae0;
}

 #invoiceDetails .inv-hist{
    /* border-top: 1px solid #ccc; */
    border-bottom: 1px solid #ccc;
}
.customer_details #invoiceDetails .inv-hist span{
    width: 50px
}

#invoices tr{
    cursor: pointer;
}









/*********************** Media Queries ************************/
@media only screen and (max-width:1200px) and (min-width:900px){
    .services-section .row div{
        width:200px;
    }
    footer .title:nth-child(2){
        margin-top: 20px;
    }
    .slideshow-container button,
    .faq_banner .faq_cta{
        top: 300px;
        left: 20px;
    }
    
}

@media only screen and (max-width:992px){
    .login-trigger{
        margin-bottom: 15px;
    }
}

@media only screen and (max-width:992px) and (min-width:768px){
    .wetest-section .wetest2_img{
        width: 300px;
    }
    .yc4t-section img{
        width: 300px;
    }
    .wetest-section .wetest1_img{
        width: 400px;
    }
    .slideshow-container button,
    .faq_banner .faq_cta{
        top: 300px;
        left: 20px;
    }
}

@media only screen and (max-width:768px) and (min-width:576px){
    .yc4t-section img{
        width: 200px;
    }
    .wetest-section .wetest1_img{
        width: 400px;
    }
    .slideshow-container button,
    .faq_banner .faq_cta{
        top: 250px;
        left: 20px;
    }
}

@media only screen and (max-width:576px){
    .yc4t-section img,
    .wetest-section .wetest1_img,
    .wetest-section .wetest2_img{
        width: 300px;
    }
    .title{
        font-size:25px;
    }
    .sub-title{
        font-size:20px;
    }
    .title:before{
        background-color: #008080;
        content: "";
        display: inline-block;
        height: 40px;
        position: absolute;
          margin-top: -15px;
    }
    .slideshow-container button,
    .faq_banner .faq_cta{
        top: 110px;
        left: 20px;
    }
    .faq_banner .faq_cta p{
        font-size:15px;
    }
    body{
        font-size: 0.85rem;
    }
}

.error-message {
    font-size: 14px;
}

.customerLogo { 
    position: relative; 
}
.customerLogo .fa-edit { 
    position: absolute;
    top: 0px;
    right: -20px;
}


.customer-details .customer-details-tab a.active{
    color: #6c7ae0;
    font-weight: bold;
    border-top: solid 1px #6c7ae0;
    border-left: solid 1px #6c7ae0;
    border-right: solid 1px #6c7ae0;
}

.customer-details .customer-details-tab a:hover{
    color: #6c7ae0;
}


/* client logo edit buttons */
.comp_img { position: relative; }
.comp_img .fa-edit { 
    position: absolute; 
    left: 130;
    top: -10;
}

.customer-card {
    width: 225px !important;
}


/* Template designs */

#templates .add-template{
    border: 2px dotted #6c7ae0;
    padding: 20px 0px;
    border-radius: 20px;
}
#templates .add-template i{
    font-size: 100px;
    color: #6c7ae0;
    font-weight: bold;
}
#templates .add-template p{
    color: #6c7ae0;
}



#addtemplatesmodal .it .btn-orange
{
	background-color: transparent;
	border-color: #777!important;
	color: #777;
	text-align: left;
  width:100%;
}
#addtemplatesmodal .it input.form-control
{
	height: 54px;
	border:none;
  margin-bottom:0px;
	border-radius: 0px;
	border-bottom: 1px solid #ddd;
	box-shadow: none;
}
#addtemplatesmodal .it .form-control:focus
{
	border-color: #6c7ae0;
	box-shadow: none;
	outline: none;
}
#addtemplatesmodal .fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
#addtemplatesmodal .fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
#addtemplatesmodal .it .btn-new, .it .btn-next
{
	margin: 30px 0px;
	border-radius: 0px;
	/* background-color: #333; */
	color: #f5f5f5;
	font-size: 16px;
	width: 155px;
}
#addtemplatesmodal .it .btn-next
{
	/* background-color: #ff4d0d; */
	color: #fff;
}
#addtemplatesmodal .it .btn-check
{
  cursor:pointer;
  line-height:54px;
  color:red;
}
#addtemplatesmodal .it .uploadDoc
{
	margin-bottom: 20px;
}
#addtemplatesmodal .it .uploadDoc
{
	margin-bottom: 20px;
}
#addtemplatesmodal .it .btn-orange img,
#templates .templateFile img{
    width: 30px;
}
#addtemplatesmodal p
{
  font-size:16px;
  text-align:center;
  /* margin:30px 0px; */
}
#addtemplatesmodal .it #uploader .docErr
{
	position: absolute;
    right:auto;
    left: 10px;
    top: -56px;
    padding: 10px;
    font-size: 15px;
    background-color: #fff;
    color: red;
    box-shadow: 0px 0px 7px 2px rgba(0,0,0,0.2);
    display: none;
}
#addtemplatesmodal .it #uploader .docErr:after
{
	content: '\f0d7';
	display: inline-block;
	font-family: FontAwesome;
	font-size: 50px;
	color: #fff;
	position: absolute;
	left: 30px;
	bottom: -40px;
	text-shadow: 0px 3px 6px rgba(0,0,0,0.2);
}

.templateFile i{
    cursor: pointer;
}


.search {
    width: 100%;
    position: relative;
    display: flex;
  }
  
  .searchTerm {
    width: 100%;
    border: 2px solid #6c7ae0;
    border-right: none;
    padding: 5px;
    height: 40px;
    border-radius: 5px 0 0 5px;
    outline: none;
    color: #9DBFAF;
  }
  
  .searchTerm:focus{
    color: #6c7ae0;
  }
  
  .searchButton {
    width: 40px;
    height: 40px;
    border: 1px solid #6c7ae0;
    background: #6c7ae0;
    text-align: center;
    color: #fff;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 18px;
  }

  

#invoicePreview .logo img{
    width: 100px;
    height: auto;
}

#invoicePreview tr,
#invoicePreview td{
    border: 1px solid #ccc;
}

#invoicePreview .td1{
    width: 70%;
}

#invoicePreview .td2{
    width: 30%;
}