#wrapper {}
.elementor-headline-dynamic-wrapper {margin-left:-5px}
a { color: inherit;text-decoration: none; outline: none; 
-webkit-transition: all 0.5s cubic-bezier(0.28, 0, 0.18, 1);
    -moz-transition: all 0.5s cubic-bezier(0.28, 0, 0.18, 1);
    transition: all 0.5s cubic-bezier(0.28, 0, 0.18, 1);
}
p { font-style: inherit; font-weight: inherit;color:inherit}
* { box-sizing: border-box}
a:hover {  text-decoration: underline; }
html { overflow-x: hidden; background-repeat: no-repeat;background-position: top right; background-size: 100% auto}
body {
    background: #fff;
    font-style: normal;
    font-size: 14px;
    line-height: 1.4;
    color: #21212B;   
    font-family: var(---font-text);
    letter-spacing: 0.8px;
    font-weight: normal;
    	-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.color-yellow {color: #FFDB84}
 #header {z-index: 999}

.rlvt .e-con-inner {position: relative}

body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, li, table, th, td, form, select, option, address, pre, strong, em, caption, cite, code, dfn, var {}
h1.elementor-headline,
h2.elementor-headline,
h1,
h2 { font-size: 60px; font-weight: bold;letter-spacing: 0!important;line-height:1}
h3.elementor-headline,
h3 {
    font-size: 35px; font-weight: bold;letter-spacing: 0!important;
}
h4.elementor-headline,
    h4 {
        font-size: 24px; font-weight: bold;letter-spacing: 0!important;line-height: 1.1
    }
@media (max-width:767px){
    h1.elementor-headline,
    h2.elementor-headline,
    h1,
    h2 { font-size: 35px; font-weight: bold;letter-spacing: 0!important;line-height: 1}
    h3.elementor-headline,
    h3 {
        font-size: 20px; font-weight: bold;letter-spacing: 0!important;line-height: 1.1
    }
    h4.elementor-headline,
    h4 {
        font-size: 16px; font-weight: bold;letter-spacing: 0!important;line-height: 1.1
    }
}
.pp-advanced-menu .sub-arrow { display: none}

#header-right .pp-advanced-menu--main .pp-advanced-menu a {padding: 20px 2.4vw 5px;font-size: 1vw;line-height: 1.4}
#header-right .pp-advanced-menu--main .pp-advanced-menu li li a {padding:  2px 0px;text-align: center;color: #F6F5FA;background: none!important;font-size: 1vw;white-space: nowrap}

#header-right .pp-advanced-menu--main .pp-advanced-menu li li:hover a {color: #FFDB84!important}
#header-right .pp-advanced-menu--main .pp-advanced-menu li li {background: none!important}
#header-right .pp-advanced-menu--dropdown {padding:10px;background: #21212B !important;left: calc(2.4vw + 5px)!important;}
#header-right {position:absolute; right: 0; top: 0;height: 100%;transition: transform 0.3s;transform: translateX(100%)}
#menu-bt { position: absolute; top: 0; right: 0;width: 100px; height: 100px;background: #21212B;cursor: pointer}
#menu-bt span {width: 25px; top: 50%; height: 4px;background: #DCD9EC;position: absolute; margin-top: -2px;left: 30px;transition: all 0.3s}
#menu-bt:hover span {left: 45px;}
#menu-bt:before {width: 40px; top: 36px; height: 4px;background: #DCD9EC;position: absolute;left: 30px;content: " ";transition: transform 0.3s}
#menu-bt:after {width: 40px; bottom: 36px; height: 4px;background: #DCD9EC;position: absolute;left: 30px;content: " ";transition: transform 0.3s}

.show-menu #menu-bt span {display: none}
.show-menu #menu-bt:before {    transform: rotateZ(45deg);top: 46px}
.show-menu #menu-bt:after {    transform: rotateZ(135deg);top: 46px}
.show-menu #header-right{transform: translateX(0)}

#logo svg {    width: 65%;}
@media (max-width:767px){
    body {overflow-x: hidden}
    #menu-bt {width: 100px;height: 86px}
    #menu-bt:after {bottom: 30px}
    #menu-bt:before {top: 30px}
    .show-menu #menu-bt:after,
    .show-menu #menu-bt:before { top: 36px}
    .pp-menu-toggle {display: none!important}
    .pp-advanced-menu--dropdown.pp-advanced-menu__container { display: block!important}
    #header-right {height: auto;margin-top: 87px}
    .pp-advanced-menu--dropdown.pp-advanced-menu__container .pp-sub-item,
    .pp-advanced-menu--dropdown.pp-advanced-menu__container .pp-menu-item {color: #F6F5FA;}
    .pp-advanced-menu .sub-arrow {display: block}
    .pp-advanced-menu .sub-arrow .e-font-icon-svg {fill:#F6F5FA}
    .pp-advanced-menu--dropdown.pp-advanced-menu__container .pp-sub-item {padding: 3px 30px;font-size: 14px}
    #logo svg {    width: 130px;}
}


.elementor-headline--style-highlight svg {
    
        width: calc(100% + 10px)!important;
    background: #FFDB84!important;
    height: 35%!important;
    bottom: 7%!important;
    top: auto!important;
    left: -5px!important;
    transform: none!important;
  max-width: calc(100% + 10px)!important;
    transition: max-width 0.3s!important;
}
.elementor-headline--style-highlight .e-hide-highlight svg {
    
      max-width: 0!important;
}
body .elementor-headline-dynamic-text { color: inherit}
#footer-bottom .wpcf7-form > p {display: flex}
#footer-bottom .wpcf7-form .wpcf7-form-control-wrap {width: calc(100% - 120px)}
#footer-bottom .wpcf7-spinner { display: none}

#footer-bottom > .e-flex:first-child{ position: relative}
#footer-bottom > .e-flex:first-child:after{ position: absolute; right: -10px; height: 100%; width: 1px; display: block; content: " ";background: #D9D9E3;top: 0}
@media (max-width:767px){
    #footer-bottom > .e-flex:first-child:after { display: none}
}

.h-line {position: relative; display: flex}
.h-line:after { content: " "; display: block; width: 1px; height: 1px; background: #000; opacity: 0.5;margin: 10px 0 10px 10px;transition: all 0.5s; transition-delay: 800ms}
.h-line.line-white:after { background: #FFDB84}
.h-line.animated:after {width: 80px}

.information_list { display: flex;margin-left: -20px; margin-right: -20px; max-width: none;padding: 30px 0}
.information_list dl {width: 33.3333%;text-align: center; padding: 10px 20px}
.information_list dl dt {font-size: 42px; font-weight: bold;}
.information_list dl dd {font-size: 14px}

.elementor-editor-active .elementor-text-editor > *,
.elementor-widget-text-editor > .elementor-widget-container > * {margin-bottom: 30px;}

.elementor-editor-active .elementor-text-editor > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6),
.elementor-widget-text-editor > .elementor-widget-container > *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) { font-size: inherit;}

.elementor-editor-active .elementor-text-editor > *:last-child,
.elementor-widget-text-editor > .elementor-widget-container > *:last-child {margin-bottom: 0}

@media (min-width:768px){
    .single-project .swiper {    margin-right: -12vw;
    padding-right: 12vw;}
    .single-project .swiper-slide-active+ .swiper-slide {text-align: left!important}
    .single-project .swiper-slide-active+ .swiper-slide img {height: 12vw;width: auto!important}
    .single-project .swiper-autoheight .swiper-wrapper {align-items: flex-end;text-align: left}
    #project-post-contnet {columns: 2; column-gap: 60px}
    #project-post-contnet p {margin-bottom: 30px}
}
.custom-swiper-page { display: flex; align-items: center; margin: 20px 0 40px}
.custom-swiper-page > * {position: relative!important; left: auto!important; top: auto!important; right:auto!important; bottom: auto!important;height: auto!important; padding: 0!important;width: auto!important;transform: none!important; margin: 0 3px!important}

.block-project {margin-top: -36px;position: relative; z-index: 2}
.block-project .block-title h2 {background: #FFDB84; display: inline-block;padding: 5px 30px; font-size: 18px; font-weight: bold; min-width: 250px;text-align: center}

.projects-grid { display: flex; flex-wrap: wrap;margin-bottom: -20px}
.projects-grid .item {position: relative; width: 33.3333%;overflow: hidden;background: #fff}
.projects-grid .item img {margin-left: -50px;width: calc(100% + 50px);max-width: none; filter: grayscale(1);opacity: 0.3;transition: all 0.5s}
.projects-grid .item a:hover img {margin-left: 0; opacity: 1; filter: grayscale(0)}
.projects-grid .item a:before {content: " "; display: block; width: 100%; height: 100%; position: absolute; left: 0; top: 0;background: #D9D9E3; opacity: 0.7; z-index: 2;transition: all 0.5s;}
.projects-grid .item a:hover:before {opacity: 0}
.projects-grid .project-title {position: absolute; top: 50%;left: 50%; transform: translate(-50%,-50%);width: 80%; text-align: center; z-index: 4;transition: all 0.5s}
.projects-grid .item a:hover .project-title {opacity: 0}
.projects-grid .project-title h2 { font-size: 22px;font-weight: bold}
.projects-grid .project-title h6 { font-size: 13px; text-transform: uppercase;text-decoration: underline;margin-top: 10px}


.cat-listing .block-taxonomy {background: #2C2C36;overflow: hidden;max-height: 160px; box-shadow: 0 0 40px rgb(0,0,0,0.3);transition: all 0;position: relative}
.cat-listing .block-taxonomy .block-inner { display: flex; flex-wrap: wrap}
.cat-listing .block-taxonomy .block-inner .image {width: 45%}
.cat-listing .block-taxonomy .block-inner .image img {width: 100%;filter: grayscale(100);transition: all 0.3s}
.cat-listing .block-taxonomy .block-inner .block-right {width: 55%;color: #F6F5FA;padding: 60px;}
.cat-listing .block-taxonomy .sub-title {font-size: 21px;line-height: 1.2;margin-bottom: 50px;position:relative;padding-right:0}
.cat-listing .block-taxonomy .des { column-count:2; column-gap: 30px}

.cat-listing .block-project.hover .block-taxonomy { max-height: 3000px;transition: all 1s}
.cat-listing .block-project.hover .block-taxonomy .image img {filter: grayscale(0);}

.cat-listing .show_icon {    top: 0;
    text-align: right;
    font-size: 40px;
    color: #fff;
    position: absolute;
    bottom: auto;
    right: -60px;
    /* display: none; */
    cursor: pointer;}
.cat-listing .block-project.hover .show_icon {display: block}
.cat-listing .block-project.active .show_icon .down,
.cat-listing .show_icon .up {display: none}
.cat-listing .block-project.active .show_icon .up {display: block}

.cat-listing .project-list {max-height: 0;position: relative; overflow: hidden;}
.cat-listing .active .project-list {max-height: 10000px}
.cat-listing .project-list-inner {background: #FFFFFF;padding: 40px 30px 40px 60px}
.cat-listing .project-list-inner-2 {padding-right: 30px; overflow: auto}
.cat-listing .item-list {display: flex;padding: 10px}
.cat-listing .item-list .p-left {width: 50%;}
.cat-listing .item-list .p-left h2 {font-size: 22px; font-weight: bold;margin-bottom: 10px}
.cat-listing .item-list .p-right {width: 50%}
.cat-listing .item-list .p-right img {height: 160px; object-fit: cover;width: 100%}

.pro-listing.block-project.hover .show_icon {display: block}
.pro-listing .block-project.active .show_icon .down,
.pro-listing .show_icon .up {display: none}
.pro-listing .block-project.active .show_icon .up {display: block}

.pro-listing .project-list {max-height: 100% !important; position: relative; overflow: visible;}
.pro-listing .active .project-list {max-height: 10000px}
.pro-listing .project-list-inner {background: #FFFFFF;padding: 40px 30px 40px 60px}
.pro-listing .project-list-inner-2 {padding-right: 30px; overflow: auto}
.pro-listing .item-list {display: flex;padding: 10px}
.pro-listing .item-list .p-left {width: 50%;}
.pro-listing .item-list .p-left h2 {font-size: 22px; font-weight: bold;margin-bottom: 10px}
.pro-listing .item-list .p-right {width: 50%}
.pro-listing .item-list .p-right img {height: 160px; object-fit: cover;width: 100%}



@media (max-width:767px){
    .information_list {flex-wrap: wrap;padding-top: 0}
    .information_list dl {width: 50%}
    .projects-grid .item {width: 100%}
    .cat-listing .block-taxonomy .block-inner .block-right {padding: 10px}
    .cat-listing .block-taxonomy .sub-title {font-size: 14px; min-height: 105px;padding-top:10px}
    .cat-listing .block-taxonomy {max-height: 168px}
    .cat-listing .block-taxonomy .block-inner .image img {height: 132px; object-fit: cover}
    .cat-listing .block-taxonomy .block-inner .des {    margin-left: calc(-50vw + 20px);padding-bottom: 20px;font-size: 12px;}
    .cat-listing .show_icon {        right: -10px;
        bottom: auto;
        top: -18px;
        font-size: 30px;}
    .cat-listing .project-list-inner {padding: 20px 0}
    .cat-listing .project-list-inner-2 {padding: 0;height: auto}
    .cat-listing .item-list .p-right {width: 35%}
    .cat-listing .item-list .p-left {width: 65%;padding-right: 20px;font-size: 12px}
    .cat-listing .item-list {align-items: center}
    .projects-grid .project-title h2,
    .cat-listing .item-list .p-left h2 {font-size: 14px}
    .cat-listing .item-list .p-right img {height: 120px}
    .information_list dl dt { font-size: 22px}
    .projects-grid .item img {height: 60vw; object-fit: cover}
}


.slider-arrow-top .pp-post-title {position: relative}
#slider-arrow-top img { display:none}
.slider-img-hoder {position:absolute; left:0; top:0; width:100%; height:100%!important; object-fit:cover; display:none}
.slider-arrow-top .pp-post-title a {position: relative; z-index: 1}
.slider-arrow-top .pp-post-title:before {content: " "; width: 100px; position: absolute; left: -5px;height: 0.8vw; background: #FFDB84;top: 0.7em; z-index: 0}
.slider-arrow-top .pp-posts-button {float: right;position: relative;display: flex;align-items: flex-end;text-decoration: none}
.slider-arrow-top .pp-posts-button .pp-button-text { text-decoration: underline;min-height: 17px; display: block}
.slider-arrow-top  a.pp-posts-button:after { content: ">"; display: block!important;background: #FFDB84; width: 15px; height: 15px; line-height: 12px; text-align: center; text-decoration: none;border: 1px solid #000;font-family: cursive;order: 11;margin-left: 5px;}
.slider-arrow-top  a.pp-posts-button:after {width: 4px; height: 4px;font-size: 0;background: #000;transition: all 0.3s;margin-bottom: 4px;}
.slider-arrow-top  a.pp-posts-button:hover:after {background: #FFDB84; width: 14px; height: 15px;font-size: 14px;margin-bottom: 1px}
.slider-arrow-top .custom-swiper-page {    position: absolute;  right: 0;   top: -110px;}
@media (max-width:767px){
    .slider-arrow-top .custom-swiper-page {    top: -86px;}
}

@media (min-width:768px){
    .pp-one-page-nav-container { top: 220px;transform: none}
    .pp-one-page-nav-container ul {border-right: 1px solid #fff}
    .pp-nav-dot-tooltip-content {background: none;}
    .pp-nav-align-right .pp-one-page-nav-item {position: relative;text-align: right;margin: 15px 0;padding-right: 10px}
    .pp-nav-align-right .pp-nav-dot-tooltip {visibility: visible; opacity: 1;color: #D9D9E3;position: relative;left: auto; right: auto;top: auto; text-align: right; font-size: 11px;text-transform: uppercase;letter-spacing: 0}
    .pp-nav-align-right a { position: absolute; width: 100%; height: 100%; display: block;top: 0; left: 0}
    .pp-nav-align-right a:after {content: " "; display: block; width: 3px; height: 100%;background: #FFDB84;position: absolute; right: -2px; top: 0; max-height: 0; transition: all 0.5s}
    .pp-nav-dot-tooltip.pp-tooltip-arrow:after,
    .pp-nav-align-right .pp-nav-dot-wrap { display: none}
    .pp-one-page-nav-item.active .pp-nav-dot-tooltip-content { color: #FFDB84; font-weight: 500}
    .pp-one-page-nav-item.active a:after {max-height: 100px}
    
    .white .pp-one-page-nav-container ul {border-color:#21212B!important}
    .white .pp-nav-dot-tooltip-content { color: #21212B!important}
}
@media (max-width:767px){
    .pp-nav-dot svg{fill: #F6F5FA}
    .white .pp-nav-dot svg {fill: #000}
}
.swiper-autoheight .swiper-wrapper {height:auto!important}
#about-slider .elementor-swiper-button-next,
#about-slider .elementor-swiper-button-prev { z-index:10}
#about-slider .pp-info-box-icon{ display: none}
#about-slider .pp-info-box-carousel:before { content: " ";width: 25%; height: 100%; position: absolute; left: 0; top: 0;background: rgb(246,245,250);
background: linear-gradient(90deg, rgba(246,245,250,1) 0%, rgba(255,255,255,0) 100%);display: block; z-index: 2;pointer-events: none} 
#about-slider .pp-info-box-carousel:after { content: " ";width: 25%; height: 100%; position: absolute; right: 0; top: 0;background: rgb(246,245,250);
background: linear-gradient(-90deg, rgba(246,245,250,1) 0%, rgba(255,255,255,0) 100%);display: block; z-index: 2;pointer-events: none} 


.pp-flipbox-container {height: auto!important;padding-top: 100%}
.pp-flipbox-container .pp-flipbox-flip-card {position: absolute!important;top: 0}
.pp-flipbox-container {border: 1px solid rgba(217,217,227,0.2);margin: -1px}
.pp-flipbox-front .pp-flipbox-heading { position: absolute; bottom: 0; left: 0;padding: 10px 20px; display: flex; justify-content: space-between;width: 100%;align-items: center}
.pp-flipbox-front .pp-flipbox-heading:after {content: "\e874";font-family: Linearicons-Free;color: #FFDB84; font-size: 22px}
.pp-flipbox-back {    text-align: left;
    padding: 20px;}
.pp-flipbox-back .pp-flipbox-overlay {text-align: left!important;
    padding: 0;
    align-items: flex-start;
    margin: 0;
    display: block;}
.pp-flipbox-back  .pp-flipbox-content {      position: absolute;
    bottom: 0;
    left: 0;
    margin: 20px;
    height: 53%;
    overflow: auto;
}
@media (max-width:767px){
    #custom-id-419 .pp-flipbox-container {height: calc(50vw - 20px)!important;padding-top: 0}
}
#boxs {display: flex; max-width: none; width: 200%;transition: all 0.3s}
#boxs > * {width: 50%!important}

#box2 {opacity: 0;transition: all 0.3s}
#boxs.box2-hover { transform: translateX(-32%)}
#boxs.box2-hover #box2 {opacity: 0.5}
#boxs.box2-hover #box2 .elementor-widget-text-editor {opacity: 0}
#boxs.box2-active { transform: translateX(-50%)}
#boxs.box2-active #box2 {opacity: 1}
#boxs.box2-active #box2 .elementor-widget-text-editor {opacity: 1}
#bt2 {display: none}
.color-white *,
.color-white {color: #D9D9E3}

#icon-list {padding-left: 20px;overflow-y: hidden}
#icon-list:before { content: " ";width: 1px; height: 100%; position: absolute; left: 7px; top: 0;border-left: 2px solid #2C2C36;}
#icon-list li {position: relative;}
#icon-list li svg {opacity: 0.3}
#icon-list li:before { content: " "; width: 12px; height: 12px; display: block; border: 1px solid #2C2C36;background: #21212B; left: -18px; top:  8px;position: absolute; border-radius: 50%;transition: all 0.3s;background: #21212B;z-index: 2}
#icon-list li:after {     content: " ";    width: 2px;    height: 155%;    position: absolute;    left: -13px;    top: -24px;    background: #2C2C36;transition: all 0.3s}
#icon-list ul > li:first-child:before { transform: none; top: 0}
#icon-list ul > li:last-child:before { transform: none; top: auto; bottom: 0}
#icon-list li.active svg,
#icon-list li:hover svg { opacity: 1}
#icon-list li.active:before,
#icon-list li:hover:before { background: #D9D9E3;border-color: #D9D9E3}

#time-line {position: relative; overflow: hidden}
#time-line:after { content: " "; width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; width: 100%;
background: rgb(246,245,250);
background: linear-gradient(0deg, rgba(33,33,43,1) 0%, rgba(33,33,43,0.1) 100%);pointer-events: none
}
#time-line > .e-con-inner {    max-height: 170px;
    overflow: auto;
    margin-right: -20px;
    padding-right: 20px;
    padding-left: 20px;
    margin-left: -20px;
    width: calc(100% + 40px);
    max-width: none;}

.elementor-flip-box { height: auto!important}
.elementor-flip-box__layer {}
.elementor-flip-box__front { position: relative!important;width: 100%}
.elementor-flip-box__back {top: 0}
.custom-flip .elementor-flip-box__image {margin: 0!important}
.custom-flip .elementor-flip-box__image img {width: 100%}
.custom-flip .elementor-flip-box__layer__title > span {position: relative;display: inline-block;}
.custom-flip .elementor-flip-box__layer__title > span:before {content: " ";  width: calc(100% + 4px);  position: absolute;  left: -2px;  height: 4px;   background: #FFDB84;   top: auto;   z-index: 0; bottom: 2px;}
.custom-flip .elementor-flip-box__layer__title > span strong { z-index: 1;position: relative}
.custom-flip .elementor-flip-box__layer__title:after { content: " "; width: 30px; height: 1px; font-size: 0; border-bottom: 1px solid #000;margin: 10px 0; display: block}

.filters { display: flex; align-items: center; flex-wrap: wrap; margin:  -3em 0 4em 0}
.filters > span { margin-right: 30px;font-size: 16px;}
.filters .facetwp-facet {margin: 0 10px}
.filters .fs-label-wrap {background: #D9D9E3; border: none; border-radius: 20px;padding: 8px 20px;z-index: 2}
.filters  .fs-search {display: none}
.filters  .fs-dropdown {    margin-top: -20px;
    background: #D9D9E3;
    border-radius: 0 0 20px 20px;
    padding: 20px 20px 10px;z-index: 1}
.filters .fs-wrap.single .fs-option.selected {background: none; font-weight: 500;text-decoration: underline}
.filters .fs-arrow {right: 10px}

.career-posts .el-am06za { font-weight: bold;font-size: 17px;}
.career-posts .fwpl-row.el-tufuca {
    grid-template-columns: 4fr 1fr 1fr;
}
.career-posts .fwpl-row.el-dxhdlw { max-height: 0; overflow: hidden; transition: all 0.8s}
.career-posts .active .fwpl-row.el-dxhdlw { max-height: 2000px}
.career-posts .fwpl-result {border-bottom:  1px solid #21212B; padding: 10px 0}
.career-posts .el-zlkxr { position: relative}
.career-posts .el-zlkxr .el-j9b84 { position: absolute; top: 50%; right: 0;transform: translateY(-50%); font-size: 20px;cursor: pointer}
.career-posts .el-zlkxr .el-j9b84 .lnr-chevron-up { display: none}
.career-posts .active .el-zlkxr .el-j9b84 .lnr-chevron-up { display: block}
.career-posts .active .el-zlkxr .el-j9b84 .lnr-chevron-down { display: none}
.career-posts .el-olsmp7 { padding: 30px 0 0 0}
.career-posts .el-olsmp7 > * {margin-bottom:30px}

@media (max-width:767px){
    .filters {margin-top: 30px}
    .filters .facetwp-facet.facetwp-facet-department_copy {margin-left: 100px; margin-top: 10px;}
    .career-posts .fwpl-row.el-tufuca {grid-template-columns: 1fr 1fr 1fr;}
    .career-posts .fwpl-row.el-tufuca .fwpl-col {padding-right: 10px;}
}

.pp-advanced-tabs {width: 100%}
.pp-advanced-tabs.pp-style-6 .pp-advanced-tabs-wrapper .pp-advanced-tabs-title {width: 50%}
.pp-advanced-tabs.pp-style-6 .pp-advanced-tabs-wrapper .pp-advanced-tabs-title.pp-tab-active {border-bottom: 1px solid #FFDB84!important}

.elementor-widget-text-editor a{ text-decoration: underline}
.elementor-widget-text-editor a:hover { text-decoration: none; color: #FFDB84}

#overflow-box .inner {max-height: 300px; overflow: auto}
#overflow-box:before { content: " ";width: 100%; height: 100px; position: absolute; left: 0; top: 0;background: rgb(246,245,250);
background: linear-gradient(180deg, rgba(217,217,227,1) 0%, rgba(217,217,227,0) 100%);display: block; z-index: 2;pointer-events: none} 
#overflow-box:after { content: " ";width: 100%; height: 100px; position: absolute; right: 0; bottom: 0;background: rgb(246,245,250);
background: linear-gradient(0deg, rgba(217,217,227,1) 0%, rgba(217,217,227,0) 100%);display: block; z-index: 2;pointer-events: none}