.markets-background{
    background: rgb(205,205,205);
    background: linear-gradient(180deg, rgba(205,205,205,0) 400px, rgba(205,205,205,1) 700px);
}

.markets-title1{
    color:#7e7e7e;
    font-family: 'promptregular';
    text-align: center;
    padding: 12px 0px;
    background: radial-gradient(25% 15px at bottom,#ebebeb99, #ebebeb00),radial-gradient(25% 15px at top,#ebebeb99, #ebebeb00);
}
.markets-title1 span{
    color:#850a17;
}
.markets-title1 h3{
    margin: 0px;
}
.map-box{
    padding: 10px 50px;
}
.map-box2{
    display: none;
    padding: 10px 50px;
}
.map{
    width: 100%;
    height: auto;
}
.pin{
    filter: grayscale(0.4);
    transition: all 0.35s ease;
}
.pin:hover{
    filter: grayscale(0);
}
.arrow{
    fill:#850a17;
    stroke: #eeeeee55;
    stroke-width: 3px;
}
.way{
    
    fill: none;
    stroke: #D05555;
    stroke-width: 3;
    stroke-dasharray: 1 2;
}
.way{
    fill: none;
    stroke: #850a17;
}
.way2{
    fill: none;
}   
.label{
    font-size: 0.9rem;
    font-family: 'promptregular';
    font-weight: bold;
    color: #000000;
    
}
.label.glow{
    stroke: #ffffffcc;
    stroke-width: 2px;
}
.label.glow2{
    stroke: #3f3f3f55;
    stroke-width: 4px;
}
.label.left{
    text-anchor: start;
}
.label.right{
    text-anchor: end;
}
.none{
    display: none;
}
.markets-title2{
    color:#7e7e7e;
    font-family:'promptregular';
    margin-bottom: 20px;
    text-align: center;
    padding: 12px 0px;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 12%, rgba(255,255,255,0) 52%);
    box-shadow: rgb(33 35 38 / 10%) 0px 10px 15px -20px, rgb(33 35 38 / 10%) 0px -10px 15px -20px;
}
.markets-title2 h3{
    margin: 0px;
    font-weight: bold;
}
.markets-title2 span{
    color:#850a17;
}
.fruittable{
    display: flex;
    flex-wrap: nowrap;
    margin: 80px 100px;
}
.headerfruit-group{
    padding: 0px;
    box-shadow: rgba(33, 35, 38, 0.1) -10px 0px 10px 2px;
    width: 165px;
}
.headerfruit{
    position: relative;
    width: 165px;
}
.headerfruit-box{
    width: 165px;
    height: 43px;
    background-image: url(../img/headerfruit-bg.png);
    background-position: right;
    border-top: 1.5px solid #ffffff99;
    border-bottom: 1.5px solid #55555599;
    
}
.headerfruit-inner{
    position: absolute;
    display: inline-flex;
    font-family:'promptregular';
    font-weight: bold;
    color: #000000;
    right: 15px;
    left:-200px;
    bottom: 0px;
    align-items:flex-end;
    justify-content:flex-end;
}
.headerfruit-inner div{
    display: flex;
    align-items:center;
    word-wrap: normal;
    height: 43px
}


.datatable-group{
    position: relative;
    padding: 0px;
    min-width: 278px;
}
.datatable-border{
    position: absolute;
    min-width: 278px;
    top: -10px;
    left: 0px;
    right: 0px;
    bottom: -10px;
    background-color: #ffffff;
    box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;
}
.datatable-box{
    position: absolute;
    min-width: 258px;
    top: -50px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    overflow-y: hidden;
    /*background-color: #999999;*/
    
}
.datatable-table thead{
    height: 60px;
    min-height: 60px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px -3px 3px 3px;
}
.datatable-table thead th{
    height: 60px;
    min-height: 60px;
    padding: 0px;
    position: relative;

}
.datatable-header{
    /*position: absolute;*/
    height: 44px;
    font-family:'promptregular';
    font-weight: bold;
    color: #207100;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 6px;
    margin-left: 1px;
    margin-right: 1px;
    margin-bottom: 10px;
    background-color: #ffffff;
    border-radius: 15px 15px 0px 0px;
    background-image: linear-gradient(0deg, rgba(0,0,0,0.1) 2px, rgba(19,12,12,0) 8px);
    
}
.datatable-table tbody td{
    /*display: flex;*/
    margin: 0px;
    padding: 0px;
    
    min-height: 43px;
    min-width: 43px;
    height: 43px;
    background-image: linear-gradient(92deg, rgba(0,0,0,0.1) 2px, rgba(19,12,12,0) 8px),linear-gradient(178deg, rgba(0,0,0,0.1) 2px, rgba(19,12,12,0) 8px);
}
.datatable-dot{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 43px;
    min-width: 43px;
    border-radius: 50%;
   
}
.datatable-dot div{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-image: radial-gradient( 18px 12px  at top, rgba(255,4,4,1) 0%, rgba(230,5,5,1) 50%, rgba(80,11,11,1) 100%);
    box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}
.chart-color{
    background-image:linear-gradient( rgba(235,256,192,1), rgba(167,221,99,1));
    background-color: #ebffc0;
}


/*.datatable-row1{
    background-color: #ebffc0;
}
.datatable-row2{
    background-color: #dff8be;
}
.datatable-row3{
    background-color: #cfefa6;
}
.datatable-row4{
    background-color: #bfe68d;
}
.datatable-row5{
    background-color: #a7dd63;
}
.datatable-row6{
    background-color: #95d447;
}
.datatable-row7{
    background-color: #83cd30;
}
.datatable-row8{
    background-color: #75be2e;
}
.datatable-row9{
    background-color: #70ae31;
}
.datatable-row10{
    background-color: #67a126;
}
.datatable-row11{
    background-color: #63a01e;
}
.datatable-row12{
    background-color: #5d9d15;
}
.datatable-row13{
    background-color: #5e9d0e;
}
.datatable-row14{
    background-color: #5a990d;
}
.datatable-row15{
    background-color: #518900;
}
.datatable-row16{
    background-color: #f7fdce;
}*/


/* defaut is xxl  */


/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    
}
/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    
.headline-bar h1{
    font-size: calc(1.375rem + 1.5vw);
}
.fruittable{
    margin: 80px 25px;
}
.headerfruit-group{
    width: 65px;
}
.headerfruit{
    width: 65px;
}
.headerfruit-box{
    width: 65px;
    background-position: -10px;
}

.headerfruit-inner div{
    display: none;
    
}
/*.map-box{
    display: none;
}
.map-box2{
    display: block;
}*/
}
/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    
}
/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
  
}
/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {
   
}