/*-----------------------------------------------------------------------------------

    Template Name: Ruxin - App Landing Page HTML Template
    Template URI: site.com
    Description: Ruxin is a colorful 2020 style app landing page HTML Template. It is specially designed for any kind of mobile app, software, sass, startup, marketing, one page and other online businesses.
    Author: Layerdrops
    Author URI: site.com
    Version: 1.0

-----------------------------------------------------------------------------------

    CSS INDEX
    ===================

    01. Theme default CSS
	02. Header
    03. Hero
	04. Footer

-----------------------------------------------------------------------------------*/
/*===========================
        01.COMMON css 
===========================*/
.header-area{
  position:static;
}

.modal {
	top:250px;
}
.login-error{
	background-color: orangered;
    color: white;
    border: none;
    margin-top: 10px;
    text-align: left;
    font-size: 10pt;
    padding: 8px;
}

.navbar .navbar-nav li a{
  color: #303030;
}

.navbar-btn-login{
  color: #ffffff;
  background: #2196f3;
  border: 1px solid #2196f3;
}

.navbar-btn-sign{
  color: #2196f3;
  border: 1px solid #2196f3;
}

.navbar .navbar-nav li{
  padding: 0px;
  line-height: 54px;
  text-transform: uppercase;
}

.navbar .navbar-nav li:hover a,.navbar .navbar-nav li.active a{
  color: #2196f3;
  
}

.banner-area{
  background: url("../images/banner-bg.png") no-repeat;
  background-size: 100% 100%;
  padding-top:30px;
  padding-bottom:30px;
}

.banner-content-wrapper .banner-content .title{
  color: #ffffff;
}

.banner-content-wrapper .banner-content p{
  color: #ffffff;
}

.news-comment-form{
  background-color: #ffffff;
  border-radius:5px;
  padding:20px;
}

.news-comment-form .comment-title{
  color:#2196f3;
}

.news-comment-form .input-box input{
  height: 50px;
  line-height: 50px;
}

.news-comment-form .comment-form-wrapper{
  padding-top: 0px;
}

.news-comment-form .input-box .main-btn{
  height:50px;
  line-height: 50px;
  background: #2196f3;
  color: #ffffff;
  padding:0px;
  width: 100%;
  border: 1px solid #2196f3;
}

.bg-f8{
  background: #f8f8f8;
}

.footer-area{
  background: #2196f3;
  
}

.footer-area p{
  color: #ffffff;
}

.strengths-area{
  background: url("../images/index-strengths-bg.png") no-repeat;
  padding-bottom: 60px;
}

.strengths-area .features-icon i{
  width: 100px;
  height: 100px;
  line-height: 100px;
  border-radius: 50%;
  display: block;
  background: #ffffff;
  text-align: center;

}

.strengths-area .features-icon i img{
  display: inline-block;
  
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .strengths-area .features-icon i {
    margin:0 auto }
   }
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .strengths-area .features-icon i {
    margin:0 auto } }
@media (max-width: 767px) {
  .strengths-area .features-icon i {
    margin:0 auto } }

.strengths-area .features-content h4{
  color: #ffffff;
}

.strengths-area .features-content p{
  color: #ffffff;
  margin-top:20px;
}

.strengths-area .section-title .title {
  color: #ffffff;
}

.api-list{
  background: #ffffff;
  padding: 20px;
}

.api-list ul li{
  height: 40px;
  line-height: 40px;
  border-bottom: 1px dashed #ebebeb;
}

.api-list ul li a{
  font-size: 14px;
  color: #303030;

}

.api-list ul li a:hover{
  text-decoration: underline;
  color: #2196f3;
}

.api-select{
  border:1px solid #ebebeb;
  background-color: #ffffff;
  height: 40px;
  line-height: 40px;
  display: flex;
}

.api-select select{
  width: 33%;
  border:none;
  height: 38px;
  line-height: 38px;
  border-right: 1px solid #ebebeb;
  
}

.api-select select:last-child{
  border-right: none;
}

.api-list h6{
  color: #2196f3;
 text-transform: uppercase;
}

.api-list-list{
  background-color: #ffffff;
}

.api-list-list ul li{
  padding: 20px;
  border-top:1px solid #ebebeb;
  min-height: 170px;
}

.api-list-list ul li img{
  width: 220px;
  height: auto;
}

.api-list-list ul li:hover{
  border-top: 2px solid #2196f3;
}

.page-div a{
  color:#666666;
  padding: 5px 14px;
  border:1px solid #ebebeb;
  background-color: #ffffff;
  margin:0px 5px;
  border-radius: 5px;
}

.page-div  a:hover,.page-div a.active {
  color:#2196f3;
  border:1px solid #2196f3;
  
}

.api-categry h6{
  text-transform: uppercase;
}

.api-categry ul li{
  float: left;
  
  margin: 10px 10px;
  
}

.api-categry ul li a{
  color: #303030;
  font-size: 14px;
  border:1px solid #ebebeb;
  background-color: #ffffff;
  border-radius: 15px;
  padding:0px 15px;
  height: 30px;
  line-height: 30px;
}

.api-categry-sel{
	background-color: #2196f3 !important;
    color: #ffffff !important;
    border: 1px solid #2196f3 !important;
}
.api-categry ul li a:hover{
  background-color:#2196f3 ;
  color: #ffffff;
  border: 1px solid #2196f3;
}

.h7{
	font-size: 12pt;
	color: #8ba359;
	font-weight: 600;
}

.api-detail{
  background-color: #ffffff;
  margin-top:30px;
  padding: 0px 20px 0px;
}

.api-detail .api-categry{
  width: 100%;
  display: block;
  height: 100%;
  min-height:200px;
  /* max-height:300px; */
  /* border:1px solid #ebebeb; */
}

.api-detail .api-categry img{
  display: block;
  width: 100%;
  height: 100%;
}

.api-detail-text p{
  margin-top: 20px;
  font-size: 14px;
}

.navbar-btn-user{
  color: #666666;
}

.navbar-user{
  position: relative;
  top:0;
  left: 0;
}

.navbar-user-box{
  position: absolute;
  bottom:0px;
  left: 0px;
  background-color: #ffffff;
  border: 1px solid #ebebeb;
  width: 100%;
}

.about-title{
  background: url("../images/abou-icon.png") no-repeat;
  background-position: center right;
  height: 102px;
  background-size: auto 100%;
}

.about-title p{
  height: 102px;
  line-height: 102px;
  color: #2196f3;
}

.about-img{
  max-height: 300px;
}

.about-area-center{
  background-color: #ffffff;
 
}

.contact-title i{
  width: 5%
  height: 2px;
  background-color: #303030;
}

.contact-content{
  padding: 20px;
}

.contact-text p{
    width: 100%;
    padding: 3px 0px;
    line-height: 25px;
    /* border-bottom: 1px dashed #ebebeb; */
    /* height: 35px; */
}

.contact-text span {
    width: 100%;
    padding: 3px 0px;
    line-height: 25px;
    /* border-bottom: 1px dashed #ebebeb; */
    /* height: 35px; */
}

.contact-text p span{
      float: left;
    display: block;
    margin-left: 25px;
}

.car-text{
	width: 100%;
    padding: 0px 0px;
    line-height: 25px;
    font-size: 11pt;
    color: #666e82;
    font-weight: 400;
}

.car-text p{
	margin-top: 20px;
    line-height: 30px;
}

.contactus-content{
  padding: 20px;
}

.contactus-text p{
    width: 100%;
    padding: 10px 0px;
    line-height: 25px;
    /* border-bottom: 1px dashed #ebebeb; */
    /* height: 35px; */
}

.contactus-text span {
    width: 100%;
    padding: 3px 0px;
    line-height: 25px;
    /* border-bottom: 1px dashed #ebebeb; */
    /* height: 35px; */
}

.contactus-text p span{
      float: left;
    display: block;
    margin-left: 25px;
}

.user-content{
  background-color: #ffffff;
  padding:30px 10px;
  margin-right: 20px;
  margin-bottom: 20px;
  min-height: 190px;
}

.login-im p{
  font-size: 12px;
  color: #999999;
  line-height: 28px;
}

.balance-box h2{
  color: #ff4000;
  margin: 20px 0px;
}

.balance-box a{
  font-size: 14px;
}

.user-div p{
  padding:10px 0px;
}

.user-credit p{
  padding: 7px 0px;
}

.historical-records h4,.historical-records a{
  line-height: 120px;
}

.user-area{box-shadow:2px 2px 2px rgba(0, 0, 0, 0.05);}

.user-tools-wrapper{padding-top:30px;padding-bottom:30px;}

.user-tools-wrapper li{float:left;margin-right:20px;font-size:14px;line-height:20px;}

.user-wrapper-ul li a{color:#999999;margin-left:10px;}

.user-wrapper-ul li a:hover{color:#1387e8;}

.forme-ul{
  width: 100%;
  border-left: 1px solid #ebebeb;
  
}

.forme-ul li{
  width:16.6%;
  height: 60px;
  line-height:60px;
  text-align: center;
  border-right:1px solid #ebebeb;
  margin-right:0px !important;
}



.border-title{
  border-bottom:1px solid #ebebeb;
  border-top:1px solid #ebebeb;
  border-right:1px solid #ebebeb;
  padding-bottom:10px;
  color:#303030;
  height: 60px;
  line-height:60px;
  background-color: #f8f8f8;
}

.border-text{
  border-bottom:1px solid #ebebeb;
  border-right:1px solid #ebebeb;
  height: 60px;
  line-height:60px;
}

.forme-ul li:last-child{
  border-right: none;
}

.historical-btn{
  background-color: #2196f3;
  color: #ffffff;
  border:none;
  width: 100px;
  height:40px;
  line-height: 40px;
  border-radius: 5px;
}


.historical-input{
   height: 40px;
   line-height: 40px;
}

.historical-input input{
  width: 100%;
  height:40px;
  line-height: 40px;
  border:1px solid #ebebeb;
  border-radius: 5px;
  padding-left:5% ;
}

.modify-div{
  width:100%;
  height:100%;
  position: fixed;
  display:none;
  top:20%;
  left: 25%;
  z-index: 10000;
  
}

.modify-div-form{
  box-shadow: 2px 2px 10px 10px rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

.close{
  font-size: 16px;
  font-weight: normal;
  color: #999999;
}


@media(max-width:375px) {
	.navbar-btn-sign {
	  	margin-left: 20px;
	}
	.api-search-input{
		margin-top:20px!important
	}
}

@media(min-width:640px) and (max-width:1024px) {
	.navbar .navbar-nav li {
	    padding: 0px;
	    line-height: 25px;
	    text-transform: uppercase;
	}
	
	.navbar-expand-lg .navbar-nav {
	    -ms-flex-direction: row;
	    flex-direction: row;
	    width: 495px;

	}
	
	.main-btn {
    	width: 70px;
    }
    
    .navbar .navbar-nav li a {
	    font-size: 12px;
	    font-weight: 500;
    }
}