.bodyContent {
    position: relative;
    display: block;
    overflow: auto;
    grid-area: outlet / outlet / outlet / outlet;
}
.index_block{
    display: block;
    background-color: #f9f9f9;
    vertical-align: middle;
    padding-top: 12px;
    padding-right: 50px;
    position: relative;
    width: 80%;
    margin: 50px auto;
    padding: 30px;
    border: 1px solid #babbbf;
}
.json-container {
    font-family: monospace;
    background: #ebecf0;
    padding: 10px;
    overflow-x: auto;
    max-width: 100%;
}

.json-table {
    border-collapse: collapse;
    width: 100%;
}

.line-number {
    color: #888;
    background-color: #ebecf0;
    text-align: right;
    padding-right: 10px;
    user-select: none;
    vertical-align: top;
    width: 30px;
}

.json-line {
    white-space: pre-wrap;
    background: #f5f5f5;
    padding-left: 5px;
    font-size: 12px; !important;
}

.json-key {
    color: #8476bd;
}

.json-string {
    color: #008000;
}

.json-bool {
    color: #aa0d91;
    font-weight: bold;
}

.json-number {
    color: #1c00cf;
}
* {
    box-sizing: border-box;
}
.banner-content {
    text-align: center;
}
.banner-title {
    color: #2e3c40;
    font-family: Roboto, sans-serif;
    font-size: 24px;
    font-weight: 900;
    line-height: 1.3;
}
.banner-subtitle-wrap {
    background-color: #ffffff91;
    border-radius: 4px;
}
.banner-button-wrap {
    grid-column-gap: 30px;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
}
.banner-subtitle {
    font-size: 16px;
}
p {
    margin-bottom: 10px;
}
h1 {
    color: #2e3c40;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 48px;
    font-weight: 900;
    line-height: 1.5;
}
a {
    border: none;
}
.home-banner-feature {
    margin-top: 10px;
}
.pricing-detail-content.homepage { 
    vertical-align: middle;
}

.price-detail-item.home-banner-subtitle {
    justify-content: center;
    align-items: center;
}
.price-detail-item.home-banner-subtitle .check-mark-icon{
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/x-icon;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB0ElEQVR4nO2WzUrDQBDHg8VT79aDYMFrL2pBLIKvIHi01UeJsDOb0jxB/HiBPIHtE1jPWg+Cx0Y9C9bTyO6maVKzabKmeOnAQMJu9kfm4z9rWSvLYcTYNgE8E+KIHKduLcMIoEmcd8h1q/Ld9ysEMCBEki6efb8i11y3Kvc6zv7foL3eJiF+h4CAEG8JcRhBZz4kgJtwj9g7IcSaOZixVgoknzPWMgcDnBuDOe8UDy/nB8T5BQG8GYPFt+qM5sKwh5tUTst0gAkB7OnBoiLLhs68rQeLdkAcL+GPg2k76uGI14aAd9G/xNhRCvgqG6rE4cEIitiI1cn8+nAqMr+hjlNPKJIJFLERvqeFe5Aqr6H26nJ0SognBPBpBMXonKe03I60HzC2E+45jsGLQVEHVhMnPdQAL9TtbkVwxFcDaF8w9MWVPgSScM9bLwi91xZXrnZK/nk+qHIvG5pPQESYLwngo0DljzMFZKmSydiZHiyURw3xssFf5Di7i3Jck+ojZvHfxmIgIyjOsu2NTOi/XgRKu/pwfmiZGonbyDTn6iLnyZ5M61O1FkQ5LRreeRM3B1GRc9fbfgx8R7a9FmvH9sJCMjU5yZS2P2plcGVW0n4ACN+hFCMkTEIAAAAASUVORK5CYII=");
    background-size: contain;
    background-repeat: no-repeat;
    border: none;
    outline: none;
    box-shadow: none;
    vertical-align: middle;
}
.price-detail {
    display: flex;
    width: 100%;
    gap: 10px;
    padding-top: 10px;
}
.price-detail-item {
    justify-content: flex-start;
    margin-bottom: 6px;
    flex: 1;
}
.price-detail-item-box {
    box-shadow: 0 2px 6px rgba(201, 224, 246, 0.7); /* світло-блакитна тінь */
    border-radius: 6px; /* опціонально – згладження */
    padding: 5px;
    height: 100%;
    width: 100%;
}

.w-button {
    color: #fff;
    line-height: inherit;
    cursor: pointer;
    background-color: #3898ec;
    border: 0;
    border-radius: 0;
    padding: 9px 15px;
    text-decoration: none;
    display: inline-block;
}
.button {
    border: 1px solid #4a46a1;
    background-color: #4a46a1;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    border-radius: 4px;
    min-width: 200px;
    padding: 10px 40px 10px;
    font-size: 12px;
    font-weight: 500;
    /*line-height: 1.5;*/
    transition: border-color .2s, background-color .2s, color .2s;
}

.button:hover {
    color: #FFFFFF;
    background-color: #ff4747;
}
#qdataip, #qdataqs {
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: #2e3c40;
    padding: 4px 8px;
    
}

.response_box{
    display: flex; width: 100%;height: 400px;gap: 10px;
}
.response_box_item{
    flex: 1;
}
.leaflet-control-attribution{
    display: none;
}


/*// Base class*/
/*// --------------------------------------------------*/

   .nav {
       padding-left: 0; /*// Override default ul/ol*/
       margin-bottom: 0;
       list-style: none;
       display: flex;
       &:extend(.clearfix all);

       > li {
           position: relative;
           display: block;
           /*flex: 0 0 100px;*/

           > a {
               position: relative;
               display: block;
               padding: 10px 15px;
               text-decoration: none;
               white-space: pre-wrap;
               width: 200px;
               height: 80px;
               text-align: center;
               &:hover,
               &:focus {
                   text-decoration: none;
                   background-color: #eee;
               }
           }

       }


/*   // Nav dividers (deprecated with v3.0.1)
   //
   // This should have been removed in v3 with the dropping of `.nav-list`, but
   // we missed it. We don't currently support this anywhere, but in the interest
   // of maintaining backward compatibility in case you use it, it's deprecated.*/


   /*// Prevent IE8 from misplacing imgs*/
   /*//*/
   /*// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989*/
   > li > a > img {
       max-width: none;
   }
   }


 /*Tabs*/
 /*-------------------------*/

 /*Give the tabs something to sit on*/
   .nav-tabs {
       border-bottom: 1px solid #babbbf;
       background-color: #e6e8ec;
       > li {
           float: left;
       /*// Make the list-items overlay the bottom border*/
       margin-bottom: -1px;
       background-color: #e5e8ed;

       /*// Actual tabs (as links)*/
       > a {
           margin-right: 2px;
           line-height: 1.42857143;
           border: 1px solid transparent;
           &:hover {
               border-color: #eee #eee #ddd;
           }
       }

       /*// Active state, and its :hover to override normal :hover*/
       &.active > a {
           &,
           &:hover,
           &:focus {
               color: #555;
               cursor: default;
               background-color: #f9f9f9;
               border: 1px solid #babbbf;
               border-bottom: 0px;
           }
       }
       }

   }

.nav:before {
    display: table;
    content: " ";
}
.nav:after {
    clear: both;
}
.nav:after, .nav:before {
    display: table;
    content: " ";
}
:after, :before {
    /*-webkit-box-sizing: border-box;*/
    /*-moz-box-sizing: border-box;*/
    /*box-sizing: border-box;*/
}
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.tab-content>.tab-pane {
    display: none;
}
.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear;
}
.tab-content>.tab-pane {
    display: none;
}
.tab-content>.active {
    display: block;
}
.fade.in {
    opacity: 1;
}

.banner-area-title {
    color: #2e3c40;
    margin-top: 0;
}
.banner-title-area-content {
    margin-bottom: 20px;
    font-size: 18px;
}

.pricing-header-area {
    margin-top: auto;
    position: relative;
}

.pricing-banner-section {

}

.pricing-banner-wrap {
    z-index: 2;
    text-align: center;
    position: relative;
}

.pricing-header-top-split {
    background-color: #fff4f4;
    width: 100%;
    height: 350px;
    display: none;
    position: absolute;
    inset: auto 0% -37%;
    transform: skew(82.5deg);
}

.pricing-section {
    padding-bottom: 40px;
    position: relative;
}

.pricing-wrap {
    z-index: 3;
    position: relative;
}

.pricing-tabs {
    position: relative;
}

.pricing-tabs-menu {
    float: right;
    border: 1px solid #ff4747;
    text-align: right;
    border-radius: 4px;
    justify-content: flex-end;
    width: auto;
    padding: 2px;
    position: relative;
    inset: 0% 15% 0% auto;
}

.pricing-tabs-content {
    width: 100%;
    margin-top: 54px;
    position: relative;
    overflow: visible;
}

.pricing-tab-link {
    letter-spacing: .04em;
    text-transform: uppercase;
    background-color: #0000;
    font-family: Roboto, sans-serif;
    font-size: 12px;
    font-weight: 500;
}

.pricing-tab-link.w--current {
    background-color: #ff4747;
    color: #fff;
    border-radius: 4px;
}

.pricing-tab-pane {
    margin-left: 0%;
    overflow: visible;
}

.pricing-slider {
    background-color: #0000;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    height: auto;
    overflow: visible;
}

.pricing-mask {
    width: 100%;
    height: auto;
    overflow: visible;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.pricing-item {
    text-align: center;
    width: auto;
    height: auto;
    margin: 10px;
    white-space: normal;
    display: inline-block;
}

.pricing-card {
    background-color: #fff;
    border-radius: 8px;
    padding: 40px 30px 36px;
    box-shadow: 0 0 8px #00000030;
}

.pricing-card.popular {
    background-color: #ff4747;
    opacity: .9;
    color: #fff4f4;
}

.pricing-image-wrap {
    justify-content: center;
    align-items: center;
    min-height: 100px;
    display: none;
}

.pricing-image.popular {
    mix-blend-mode: luminosity;
    margin-top: 13px;
}

.pricing-title {
    color: #2e3c40;
    font-size: 20px;
}

.pricing-title.popular {
    color: #fff4f4;
}

.left-arrow {
    z-index: 5;
    background-color: #fff;
    border-radius: 100%;
    width: 70px;
    height: 70px;
    display: block;
    inset: 0% 94% 0% 0%;
    box-shadow: 0 0 8px #00000030;
}

.amount {
    color: #ff4747;
    flex: 1;
    margin-top: 10px;
    margin-left: 0;
    padding-left: 10px;
    font-size: 21px;
    display: block;
    position: absolute;
    inset: 0% 0% 0% 100%;
}

.amount.monthly {
    color: #2e3c40;
    height: 51px;
    min-height: 51px;
    margin-bottom: 38px;
    padding-left: 0;
    position: static;
}

.amount.location-value {
    flex: 1;
    inset: 0% 0% 0% 100%;
}

.amount.card-body-amount {
    padding-bottom: 10px;
    position: static;
}

.amount.yearly {
    color: #2e3c40;
    min-height: 90px;
    margin-left: 0;
    position: static;
}

.amount.monthly-copy {
    color: #2e3c40;
    height: 51px;
    min-height: 51px;
    margin-bottom: 38px;
    position: static;
}

.pricing-amount {
    margin-bottom: 0;
    font-size: 22px;
}

.pricing-amount.popular {
    color: #fff4f4;
}

.price-range {
    font-size: 12px;
}

.price-range.popular {
    color: #fff4f4;
}

.pricing-ratelimits {
    margin-top: 30px;
}

.pricing-ratelimit-text {
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 500;
}

.price-info {
    border-top: 1px solid #e3e8ea;
    margin-top: 25px;
    padding-top: 20px;
    position: relative;
}

.price-detail-item {
    justify-content: flex-start;
    margin-bottom: 6px;
    display: flex;
}

.price-detail-item.home-banner-subtitle {
    justify-content: center;
    align-items: center;
}

.price-detail-icon {
    margin-top: 3px;
    padding-right: 0;
}

.price-detail-icon.cross {
    margin-right: 3px;
    padding-right: 0;
}

.pricing-detail-content {
    color:#5b7075;
    letter-spacing: .01em;
    margin-bottom: 0;
    margin-left: 10px;
    margin-top: 0;
    font-family: Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

.pricing-detail-content.price-detail-tooltip-title {
    border-bottom: 1px dashed #000;
}

.pricing-detail-content.popular {
    color: #fff4f4;
}

.pricing-detail-content.homepage {
    /*margin-left: 5px;*/
    /*margin-right: 20px;*/
}

.pricing-detail-content.plus {
    margin-left: 0;
}
.section-title-content {
    font-family: Roboto, sans-serif;
    font-size: 18px;
    font-weight: 400;
}
h2 {
    color: #2e3c40;
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 32px;
    font-weight: 700;
    line-height: 36px;
}