/*landing page*/
.bg-banner-api { position: relative; display: flex; align-items: center; background-color: #f4f6f9; height: 300px; }
    .bg-banner-api:before { content: ""; background-image: url('/assets/img/bg-api-texture.png'); background-repeat: no-repeat; display: inline-block; width: 100%; height: 100%; position: absolute; position: absolute; background-position: -625px -100px; }
    .bg-banner-api .btn-link { color: var(--theme-green); }
    .bg-banner-api .img-fluid { max-width: 75%; }
.api-banner-title { font-size: 32px; font-weight: bold; margin-bottom: 1rem; }
.api-banner-text { margin-bottom: 1rem }
.home-service-card .card.card-api-gateway .card-title { font-size: 22px; }
.card-api-gateway .card-img { width: 100px; height: 80px; display: flex; align-items: center; justify-content: center; padding: 5px; }
    .card-api-gateway .card-img img { width: 100%; height: 100%; }
.card-api-gateway .card-text p{line-height:normal; margin-bottom:0;}
.price-api { background-color: #f14848; font-weight: 600; color: #fff; padding: 0.25rem 0.5rem 0.05rem; border-radius: 0.25rem; display: inline-block; margin: 0.25rem 0 0; }
/*landing page end*/

/*registration page*/
.flex-grid > div > span { height: 100%; align-items: center; display: inline-flex; flex-direction: row; flex-wrap: wrap; }
.fee-break-down.flex-grid > div > span { flex: 0 0 50%; }
.bg-card-grey { background-color: #fbfbfb; }
.payment-card .card { cursor: pointer; }
.payment-card .card-body { padding: 1.5rem; }
    .payment-card .card-body > span { display: flex; }
.fw-500 { font-weight: 500; }
.payment-card .card-link { display: flex; position: relative; align-items: center; justify-content: center; margin-top: 1rem; color: var(--theme-green); background-color: rgba(0,122,53,.10); border-radius: 8px; padding: 8px 16px; font-weight: 600; font-size: 14px; transition: all .3s; margin-bottom: 0; }
.payment-card .card:hover .card-link,
.payment-card .btn-check:checked + .card .card-link { background-color: var(--theme-green); color: #fff; }
.payment-card .btn-check:checked + .card { border-color: var(--theme-green); transition: all .3s; box-shadow: 0 0 10px 0px rgb(0 0 0 / 15%); background-color: rgba(229,241,235,.30); }
.api-terms-and-condition { list-style: decimal; padding-left: 1rem; font-size: 14px; }
    .api-terms-and-condition > li { margin-bottom: 10px; }
    .api-terms-and-condition li span { position: absolute; left: 20px; }
/*registration page end*/

/*user guide page*/
.wrapper-container { display: flex; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; display: flex; }
.sidebar-wrapper { width: 250px; height: auto; background: #f5f5f5; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; z-index: 1; }
.page-content-wrapper { padding: 0 15px 15px 30px; width: calc(100% - 10px); position: relative; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }
.sidebar-nav { width: 250px; margin: 0; padding: 0; list-style: none; }
    .sidebar-nav li { text-indent: 15px; line-height: 40px; }
        .sidebar-nav li a { display: flex; text-decoration: none; position: relative; align-items: center; }
            .sidebar-nav li a:hover { text-decoration: none; background: rgba(255, 255, 255, 0.2); /*border-left: red 2px solid;*/ }
            .sidebar-nav li a:active,
            .sidebar-nav li a:focus,
            .sidebar-nav li.active > a { text-decoration: none; color: var(--theme-green); background-color: rgba(0,122,53,.10); }
.sidebar-title { background-color: #f1f1f1; border: none; font-weight: 600; padding: 1rem; text-align: left; }
.fw-500 { font-weight: 500; }
.sidebar-nav li.divider { border-bottom: 1px solid var(--bdr); margin: 5px 0; }
.api-doc-content { display: none; }
.bottom-300 { bottom: 300px; }
/*user guide page end*/


/*Subscription dashboard*/

/*.dashboard-content-wrapper { padding: 0 0 0 15px; width: calc(100% - 235px); position: relative; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; }*/
.dashboard-content-wrapper .card .card-header { display: flex; align-items: center; justify-content: space-between; }

.sidebar-wrapper .nav-link { text-align: left; border-radius: 0; background-color: transparent; border: none; color: var(--black-color); position: relative; display: flex; align-items: center; justify-content: space-between; }
    .sidebar-wrapper .nav-link.active,
    .sidebar-wrapper .nav-link:active,
    .sidebar-wrapper .nav-link:hover,
    .sidebar-wrapper .nav-link:focus { color: var(--theme-green); background-color: rgba(0,122,53,.10); }
    .sidebar-wrapper .nav-link:after { content: ""; width: 8px; height: 8px; border: solid var(--theme-green); border-width: 0 3px 3px 0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }

.home-service-card .card-cancelled .card { background-color: #f1f1f1; border-color: #f1f1f1;}
.rtl .form-check .form-check-input { float: right; margin-left: 0; margin-right: -1.5em; }
.rtl .form-check { padding-left: 0; padding-right: 1.5em; }
@media(max-width:992px) {
.bg-banner-api:before{display:none;}
    .bg-banner-api{height:auto; padding:2rem 0;}
}