@font-face { font-family: 'sfuitext'; src: url('/fonts/sfuitext-regular.ttf') format('truetype'); }
@font-face { font-family: 'sfpro'; src: url('../fonts/fontsfree-net-sfprodisplay-regular.ttf') format('truetype'); }
html { font-size: 14px; position: relative; min-height: 100%; }
body { margin-bottom: 60px; max-width: 1440px; margin: auto!important; font-family: sfpro; padding: 0px!important;}
a { color: #0366d6; }
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {margin-bottom: .3rem;}
a.navbar-brand { white-space: normal; text-align: center; word-break: break-all; }
button.accept-policy { font-size: 1rem; line-height: inherit; }
.btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: #fff; background-color: #1b6ec2; border-color: #1861ac; }
.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }
.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }
.footer { display: none; position: absolute; bottom: 0; width: 100%; white-space: nowrap; line-height: 60px; }
.mb-3, .my-3 { margin-bottom: 0px!important; }
.container { max-width: 100%; padding: 0px; margin-right: 0px; margin-left: 0px; box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .05); position: relative; overflow: hidden;}
.brand-logo{ width: 55px; }
.page-label { padding-left: 10px; font-size: 21px; font-weight: bold; }
.login-form { margin: auto; width: 500px; padding-top: 100px;padding-bottom: 100px; }
.navbar { width: 100%; z-index: 9; display: flex; justify-content: space-between;}
.login-form-error { color: red; margin-left: 10px; }
.rectangle-button { width: 40px; height: 40px; border-radius: 4px; border: solid 1px rgba(129, 129, 129, 0.1); background-color: #ffffff; }
.nav-panel-l { float: left; }
.nav-panel-r { float: right; margin-top: 5px; }
.user-icon { width: 45px; }
.rectangle-button.left { margin-right: 20px; position: relative; } 
.rectangle-button.right { margin-right: 15px; }
.dropdown{ float: right; }
.user-name-lbl { font-size: 20px; font-weight: 600; vertical-align: middle; margin-right: 5px; }
.fa-chevron-down:before{ vertical-align: sub; }
.btn-user-menu { border: none; background: no-repeat; }
.dropdown-toggle{ font-size: 17px; }
.login-error-msg { margin-top: 10px; }
.rectangle-button-circle { width: 7px; height: 7px; background-color: red; position: absolute; top: -3px; right: -3px; border-radius: 5px; }
.flights { width: calc(100% - 80px); margin: auto;}
.flights-lbl { font-size: 19px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.16; color: #000000; }
.top-flights-lbl { padding-left: 15px; font-size: 19px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.16; color: #000000; }
.slider-tick.round {background-color: #4392F1;background-color: #4392F1; background-image: none; border: 3px solid #FFF;}
.show-all { display: none; font-size: 13px; color: #8a8a8f; float: right; cursor: pointer; }
.flights-container { display: grid; border-radius: 5px; padding: 10px 16px; color: #fff; font-size: 22px; }
.top-flights-container { display: grid; margin-top: 10px; border-radius: 5px; padding: 10px 20px; color: #fff; font-size: 22px; }
.top-flight-counter-big {font-size: 35px; font-weight: bold;}
.top-flight-counter-mid {font-size: 28px; font-weight: bold;}
.flights-container-main { cursor: pointer; height: 152px; margin-top: 5px; margin-bottom: 10px; border-radius: 5px; padding: 10px 15px; color: #fff; font-size: 22px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.23); }
.flights-mobile-carousel .owl-prev, .flights-mobile-carousel .owl-next {top: 50px;}
.achievements .flights-container-main .flight-counter-mid { font-size: 16px; }
.achievements .flights-container-main .flight-counter-small{ font-size: 12px; display: inline-flex;}
.achievements .owl-prev, .achievements .owl-next { top: 65px;}
.with-hover:hover { opacity: 0.9; }
.flight-counter-big { font-size: 46px; font-weight: 700; text-transform: uppercase; line-height: 50px; }
.flight-counter-mid { font-size: 36px; font-weight: 700; text-transform:uppercase; }
.flight-counter-small { font-size: 22px; font-weight: 100; }
.show-all:hover { text-decoration: underline; }
.donut-label { color: #000; font-weight: 700; }
.donut-container { height: 164px; border-radius: 7px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.23); background-color: #ffffff; margin-top: 15px; }
.friend-logo { width: 45px; margin-left; }
.friend-conteiner-l { float: left;}
.friend-conteiner-r { float: left; display: inline-grid; margin-left: 10px;}
.nav-tabs{ margin-top: 40px; border: none;}
.nav-tabs .nav-link { font-weight: 600;color: #8a8a8f; padding-left: 5px; padding-right: 1em; }
#map { width: 100%; height: 750px; background-color: #3E91F4; }
.statistic-carousel { overflow: hidden; }
.chart-container { background-color: #5AA2FA; border-radius: 5px; box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.3);}
.friends-row {margin-bottom: 40px;}
.friends-row > a { color: inherit; }
.carousel-container { height: 160px; margin-top: 10px; border-radius: 5px; padding: 15px 20px; color: #fff; font-size: 22px; box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.3); background-repeat: no-repeat; background-position: right; background-size: 184px 166px, 75% 100%; margin-bottom: 15px; }
.carousel-container>h6{ width: 55%; font-size: 15px; font-weight: normal; font-stretch: normal; font-style: normal; }
.carousel-container>h5{ width: 55%; font-size: 13px; font-weight: normal; font-stretch: normal; font-style: normal; }
.top-carosel .carousel-container, .top-carosel-third .carousel-container, .top-carosel-second .carousel-container{ height: 184px; line-height: 30px;padding-left: 15px; cursor: pointer;}
.owl-buttons{position: relative;}
.owl-prev, .owl-next { position: absolute; transition: 0.4s; top: 96px; color: #FFF; width: 30px; height: 30px; opacity: 0.3; border-radius: 15px; box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); background-color: #ff3a30; cursor: pointer; }
.owl-prev:hover, .owl-next:hover{ opacity: 1; }
.fa-angle-left:before, .fa-angle-right:before { margin-left: 10px; line-height: 30px; font-size: 20px; }
.owl-next {right: 0px;}
.map-dropdown { position: absolute; top: 35px; right: 50px; background-color: #fff; }
.map-dropdown > button { width: 100%; text-align: right }
.map-dropdown > ul { right: 0px!important;}
.map-dropdown > ul > li { padding: 5px 10px; cursor: pointer;text-align: right;}
.map-dropdown > ul > li:hover { background-color: #E8E8E8;}
.slider-handle { background-image: linear-gradient(to bottom,#FF3A30 0,#FF3A30 100%) !important; }
.nav-link { color: #99999D; font-weight: 600; }
.date-range{ float: right; }
.date-range>.active{ font-weight: bold; }
.date-range{ cursor: pointer; }
.vertical-divider { margin: 0px 10px; border: 1px solid #D8D8D8; }
.dv-top-flight-distance { background-image: url('../images/group-24@2x.png'), url('../images/path10@2x.png'); background-color: #22BBEF; }
.dv-top-flight-count { background-image: url('../images/group-27@2x.png'), url('../images/path11@2x.png'); background-color: #2C86F4; }
.dv-top-time-in-air { background-image: url('../images/group-28@2x.png'), url('../images/path12@2x.png'); background-color: #073B79; }
.loading-panel { width: 100%; height: 100%; position: absolute; top: 0px; z-index: 999; text-align: center; line-height: 90; background-color: #E0E0E0; opacity: 0.5; display: none; }
.dv-top-container { background-repeat: no-repeat; background-size: 35%, 100%; background-blend-mode: hard-light; background-position-x: right; background-position-y: bottom; }
.dv-small-flights-light { background-image: linear-gradient(to bottom, #30bced, #12b1e9), url('../images/combined-shape5@2x.png'); }
.dv-small-flights-light-blue { background-image: linear-gradient(to bottom, #4392f1, #2c86f4), url('../images/combined-shape5@2x.png'); }
.dv-small-flights-blue { background-image: linear-gradient(to bottom, #3477c8, #134d93), url('../images/combined-shape5@2x.png'); }
.dv-flights { background-image: url('../images/combined-shape52@2x.png'), linear-gradient(to bottom, #ff3a30, #dc231a);}
.dv-flight-distance { background-image: url('../images/combined-shape42@2x.png'), linear-gradient(to bottom, #4392f1, #2c86f4); }
.dv-co2 { background-image: url('../images/co-2@2x.png'), linear-gradient(to bottom, #3477c8, #134d93); }
.dv-time-in-air { background-image: url('../images/combined-shape32@2x.png'), linear-gradient(to bottom, #30bced, #12b1e9); }
.flight-bottom{ position: absolute; bottom: 13px;}
.owl-wrapper{ transition: 1s!important; }
.chart-carosel > .owl-controls > .owl-buttons > div { top: 112px; }
.tiles-carousel > .owl-controls > .owl-buttons > div { top: 75px; }
.owl-carousel{ overflow: hidden; -ms-touch-action: pan-y; touch-action: pan-y;}
[rel=noopener] { bottom: 40px; position: absolute !important; left: 40px;}
.rank-panel-mobile{ display: none; }
.flights-mobile{ display: none;}
.flights-mobile>.col-md-12 {padding: 0px;}
.flights-mobile .flights-lbl {padding-left: 15px;}
.gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom { right: 70px !important; }
button.gm-control-active.gm-fullscreen-control { right: 30px !important; bottom: 155px !important; }
.modal-body { padding: 0px 15px; }
.modal-dialog { width: 728px !important; min-width: 728px !important; }
.modal-content { color: #EEE; height: 692px; background-repeat: no-repeat; background-position-x: right; background-position-y: 35px, top; background-size: 25% 25%, 45% 45%; border-radius: 8px; border: none;}
.modal-header { border: none; height: 50px;}
.close { font-size: 2.5rem; color: #EEE; line-height: 0.5; outline: none!important; font-weight: 100; height: 50px; width: 50px; position: relative; z-index: 99999;}
.modal-header-lbl { width: calc(100% - 2rem); position: absolute; text-align: center; font-size: 17px; font-weight: 600; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: 1px;}
.modal-main { width: 100%; height: 160px; padding: 0px 10px; }
.modal-main h5, .modal-main h6 { font-size: 17px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.29; color: #ffffff; }
.modal-grid { box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.23); border-radius: 7px; background-color: #eee; }
.modal-grid-header { padding: 10px 3.5%; border-bottom: 1px solid #E2E2E4; font-size: 15px; font-weight: 600; font-stretch: normal; font-style: normal; line-height: 1.27; color: #8a8a8f; }
.modal-grid-list-group { height: 420px; overflow: auto; border-radius: 7px; }
.modal-grid-list-group-item { border-bottom: 1px solid #E2E2E4; padding: 10px 0px; margin: auto; width: 93%; color: #000; display: flex; justify-content: space-between;}
.top-carosel, .top-carosel-third, .top-carosel-second{ margin-top: 30px;}
.chart-carosel { margin-top: 15px;}
.charts { margin-top: 20px;}
.modal-header .close { padding: 0.1em 0.3rem 0rem 0rem;}
.close span { position: absolute; top: 5px; right: 5px; }
#flights-distance-modal .modal-header, #flights-distance-modal [class=close] { color: #000; }
#flights-distance-modal .modal-dialog { width: 1128px !important; min-width: 1128px !important }
#flights-distance-modal .modal-body { padding: 0px; height: 100%; overflow: auto; }
#flights-distance-modal .modal-content { height: 676px; }
#flights-distance-modal .fd-container { display: flex; width: 100%; height: 100%; padding: 0px 15px 15px; }
#flights-distance-modal .row { margin: unset; }
#flights-distance-modal .col-md-12, #flights-distance-modal .col-md-6 { padding: 10px; }
#flights-distance-modal .fd-left { width: 33.333%; float: left; }
#flights-distance-modal .fd-right { width: 66.667%; }
#flights-distance-modal .modal-main { width: 100%; height: 100%; padding: 0px;}
#flights-distance-modal .fd-left-container, #flights-distance-modal .fd-right-container { overflow: hidden; width: 100%; height: 100%; padding: 15px; min-height: 128px; border-radius: 8px; position: relative; box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.3); }
#flights-distance-modal .fd-mobile{ display: none; }
#flights-distance-modal .fd-left-container .fd-image { position: absolute; top: 58px; right: 0px; width: 230px; height: 230px; background-size: 100%; background-repeat: no-repeat; box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.3); border-radius: 65%; }
#flights-distance-modal .fd-right-container .fd-image { position: absolute; top: -4px; right: 0px; width: 145px; height: 145px; background-size: 100%; background-repeat: no-repeat; box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.3); border-radius: 65%; }
#flights-distance-modal .btn-danger { background-color: #FF3A30; width: 76px; height: 24px; font-size: 11px; padding: 4px; font-stretch: normal; font-style: normal; line-height: normal; letter-spacing: 0.93px; position: absolute; bottom: 15px; }
#flights-distance-modal .fd-big-text { font-size: 34px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.21; letter-spacing: 0.37px; color: #ffffff; margin-bottom: 5px; }
#flights-distance-modal .fd-small-text { font-size: 17px; font-weight: 600; font-stretch: normal; font-style: normal; line-height: 1.29; letter-spacing: 1.21px; color: #ffffff; margin-bottom: 10px; }
#flights-distance-modal .fd-mid-text { font-size: 22px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.27; letter-spacing: 0.35px; color: #ffffff; margin-bottom: 10px; }

#time-in-the-air-modal .modal-content { height: 605px; }
#time-in-the-air-modal .modal-body, #time-in-the-air-modal .modal-main { padding: 0px; }
#time-in-the-air-modal .modal-content { background-color: #0C3D77; background-image: url(/images/tia1@2x.png); background-size: 60% 80%; background-position: right 0px; }
#time-in-the-air-modal .tia-top { background-image: url(/images/time-in-the-air-img@2x.png); background-size: 290px 290px; background-position: right 0px; background-repeat: no-repeat; height: 290px; padding-left: 30px; }
#time-in-the-air-modal .tia-tile { width: 316px; height: 128px; margin-bottom: 30px; box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.3); position: relative; }
#time-in-the-air-modal .tia-tile-content { padding: 15px; height: 100%; background-repeat: no-repeat; background-position: right bottom; background-size: 130px 104px; position: relative; }
#time-in-the-air-modal .tia-big-text { font-size: 35px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1; letter-spacing: 1px; margin-bottom: 7px; }
#time-in-the-air-modal .tia-small-text { font-size: 16px; font-weight: 600; font-stretch: normal; font-style: normal; line-height: 1; letter-spacing: 1px; }
#time-in-the-air-modal .btn-danger {width: 79px;height: 27px;border-radius: 4px;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.23);background-color: #ff3a30;font-size: 11px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: 1px;text-align: center;color: #ffffff;position: absolute;bottom: 15px;}
#time-in-the-air-modal .modal-header { padding-bottom: 40px; }
#time-in-the-air-modal .tia-bottom { display: flex; width: 100%; padding: 30px 30px; justify-content: space-between; }
#time-in-the-air-modal .tia-bottom-tile { width: 200px; height: 200px; border-radius: 8px; }
#time-in-the-air-modal .tia-tile-mobile { display: none; }
#time-in-the-air-modal .tia-bottom-mobile { display: none;}

#flights-modal .modal-header, #flights-modal [class=close] { color: #000; }
#flights-modal .flts-tile-top { border-radius: 8px; background-image: url(/images/fcount-bg@2x.png); width: 664px; height: 244px; margin: auto;background-size: 60% 100%;background-position: right;background-repeat: no-repeat;background-color: #4392f1; box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.3);}
#flights-modal .flts-tile-top .flts-tile-content{background-image: url(/images/f-img@2x.png);background-position: right;background-repeat: no-repeat;background-size: 232px 232px;height: 100%;padding: 25px;position: relative;}
#flights-modal .flts-tile-bottom .flts-tile-content {height: 100%;padding: 25px;background-size: 170px 170px;background-repeat: no-repeat;background-position: right bottom;}
#flights-modal .flts-60-text {font-size: 60px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1;letter-spacing: 0.66px;color: #ffffff;}
#flights-modal .flts-34-text {font-size: 34px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.21;letter-spacing: 0.37px;color: #ffffff;}
#flights-modal .flts-52-text {font-size: 52px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 0.79;letter-spacing: 0.57px;color: #ffffff;}
#flights-modal .flts-22-text {font-size: 22px;font-weight: bold;font-stretch: normal;font-style: normal;line-height: 1.27;letter-spacing: 0.35px;color: #ffffff;}
#flights-modal .flts-60-text, #flights-modal .flts-52-text{ margin-bottom: 20px;}
#flights-modal .flts-tile-bottom {width: 316px;height: 244px;border-radius: 8px;position: relative; box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.3);}
#flights-modal .flts-tiles-bottom {width: 664px;margin: auto;display: flex;justify-content: space-between;padding-top: 30px;}
#flights-modal .btn-danger {width: 79px;height: 27px;border-radius: 4px;box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.23);background-color: #ff3a30;font-size: 11px;font-weight: 600;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: 1px;text-align: center;color: #ffffff;position: absolute;bottom: 15px;}

.modal-dialog-centered { display: flex !important; min-height: 100%; }
.modal-content { box-shadow: 0 5px 12px 0 rgba(0, 0, 0, 0.3); }

.fade-scale { transform: scale(0); opacity: 0; -webkit-transition: all 1s !important; -o-transition: all 1s !important; transition: all 1s !important; }
.fade-scale.in { opacity: 1!important; transform: scale(1)!important; }
.modal-backdrop{ opacity: .5;}

.tiles-carousel, .chart-carosel, .top-carosel, .charts, .top-carosel-first, .top-carosel-second { display: flex; }

.custom-switch .custom-control-label::before, .custom-switch .custom-control-label::after, .custom-control-label{ cursor: pointer;}

@media (max-width: 1280px) {
    .slider-tick-label{ font-size: 14px;}
    .carousel-container>h6{ font-size: 14px; }
    .carousel-container>h5{ font-size: 12px; }
    .achievements .flights-container-main{ line-height: 20px;}

    #flights-distance-modal .modal-content, #flights-distance-modal .modal-dialog { margin: auto; margin-top: 10px; }    
}
@media (max-width: 1127px) {
    #flights-distance-modal .modal-content, #flights-distance-modal .modal-dialog { width: 100% !important; min-width: 100% !important; }
}
@media (min-width: 1025px) {
    .rank-panel { display: flex!important; }
    .rank-panel-mobile { display: none!important; }
    .modal-open .modal{ overflow: hidden;}
}
@media (max-width: 1024px) {
    [rel=noopener]{left: 20px;}
    .flights-mobile { display: block; }
    .flights-desctop { display: none; }
    .carousel-container { height: 160px; }
    .flights-lbl {font-size: 19px;}
    .flights { width: calc(100% - 40px);}
    .rank-panel { display: none!important; padding: 0px 0px 24px 0px!important; width: calc(100% - 40px)!important;}
    .rank-panel-mobile { display: flex!important; height: 80px!important; }
    .rank-panel-left { display: unset !important; padding: 7px 12px 3px 8px !important; width: unset !important; position: absolute; bottom: 0px; left: 0px; text-align: left !important; font-size: 11px; }
    .rank-panel-right { display: unset !important; width: unset !important; text-align: center; position: absolute; bottom: 0px; right: 10px; text-align: right !important; font-size: 11px; }       
    .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom { right: 50px !important; }
    button.gm-control-active.gm-fullscreen-control { right: 10px !important; bottom: 155px !important; } 
    .dv-flight-distance, .dv-co2{ padding-top: 10px!important;}
    .slider-handle { background-image: url(/images/air.png) !important; background-size: 20px 20px !important; width: 20px !important; height: 20px !important; background-color: unset !important; background-repeat: no-repeat !important; }
    .total-miles-lbl { text-align: center; position: absolute; margin-top: 45px; font-weight: 600; font-size: 11px; }
    .rank-slider-div { width: calc(85% - 40px) !important; margin: 15px 0px 0px 0px !important; }
    .slider-tick:first-child { background-color: transparent !important; background-image: url(/images/regular-pilot.png) !important; width: 40px; height: 40px; background-size: 100%; left: -30px !important; top: -10px; }
    .slider-tick:last-child { background-color: transparent !important; background-image: url(/images/Astronaft.png) !important; width: 40px; height: 40px; background-size: 100%; left: 103% !important; top: -10px; }
    button.gm-control-active.gm-fullscreen-control, .gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom { display: none; }

    #flights-distance-modal .modal-content, #flights-distance-modal .modal-dialog { width: 98% !important; min-width: 85% !important;}
    #flights-distance-modal .fd-left { display: none !important; }
    #flights-distance-modal .fd-mobile { display: block; }
    #flights-distance-modal .fd-right { width: 100%!important; }

    #flights-distance-modal .modal-content { height: calc(100vh - 10vh); }
    #flights-modal .modal-content { height: calc(100vh - 10vh); overflow: auto; }
}
@media (min-width: 768px) {
    html { font-size: 16px; }
}
@media (max-width: 768px) {
    .col-md-12 { padding-right: 10px; padding-left: 10px;}
    .flights-container{ padding: 10px 10px;}
    .flight-counter-big { font-size: 35px; }
    .flight-counter-mid { font-size: 17px; }
    .flight-counter-small { font-size: 14px;width: 60%;}
    .flights-container-main{ height: 110px; line-height: 12px;}
    .achievements .owl-prev, .achievements .owl-next{ top: 50px;}
    .page-label {padding-left: 0px;font-size: 14px;}
    .owl-prev, .owl-next {top: 108px;}
    .charts .owl-prev, .charts .owl-next {top: 110px;}
    .carousel-container > h6 { font-size: 12px; }
    .tiles-carousel > .owl-controls > .owl-buttons > div { top: 47px; }
    .tiles-carousel .carousel-container{ padding: 5px 10px;}
    .modal-dialog { width: unset !important; min-width: unset !important; }

    #flights-distance-modal .modal-content, #flights-distance-modal .modal-dialog { width: 85% !important; min-width: 85% !important; }   

    #flights-modal .modal-content, #flights-modal .modal-dialog { width: 99% !important; min-width: 99% !important; margin: auto; }
    #flights-modal .flts-tile-top, #flights-modal .flts-tile-bottom { width: 100%;}
    #flights-modal .flts-tiles-bottom { display: contents; }
    #flights-modal .flts-tile-bottom { margin-top: 25px;}
    #flights-modal .modal-main {padding: 0px;}
    #flights-modal .flts-tile-bottom, #flights-modal .flts-tile-top {height: 148px;}
    #flights-modal .flts-60-text, #flights-modal .flts-52-text { font-size: 42px; }
    #flights-modal .flts-34-text, #flights-modal .flts-22-text { font-size: 17px; }
    #flights-modal .flts-60-text, #flights-modal .flts-52-text { margin-bottom: 5px; }
    #flights-modal .flts-tile-top .flts-tile-content { background-size: 139px 139px; }
    #flights-modal .flts-tile-bottom .flts-tile-content { background-size: 120px 120px; background-position: right center; }
    #flights-modal .modal-header { padding: 1rem 1rem; }

    #flights-modal .modal-content, #flights-modal .modal-dialog,
    #time-in-the-air-modal .modal-content, #time-in-the-air-modal .modal-dialog,
    #flights-distance-modal .modal-content, #flights-distance-modal .modal-dialog { margin-top: 10px !important; }
    .modal-dialog-centered{ align-items: start;}
    #time-in-the-air-modal .modal-dialog { max-width: 724px !important;  }
}
@media (max-width: 508px) {
    .dv-top-container {background-size: 70%, 100% !important;}
    .modal-dialog { width: unset !important; min-width: unset !important; }
    .modal-content{ background-size: 150px 150px, 45% 45%;}
    .modal-main { padding: 0px 40% 0% 0px;}
    .modal-body { padding: 0px 10px;}
    .modal-main {height: 175px;}
        
    #time-in-the-air-modal .modal-content { width: 310px !important; margin: auto; }
    #time-in-the-air-modal .tia-top{ padding-left: 10px; }
    #time-in-the-air-modal .tia-bottom { padding: 30px 10px; }
    #time-in-the-air-modal .tia-tile-mobile { display: block; width: 136px; height: 136px; }
    #time-in-the-air-modal .tia-tile-content { background-size: 88px 68px; }
    #time-in-the-air-modal .tia-big-text { font-size: 22px; }
    #time-in-the-air-modal .tia-small-text { font-size: 16px; }
    #time-in-the-air-modal .tia-tile, #time-in-the-air-modal .tia-bottom-tile { display: none; }
    #time-in-the-air-modal .tia-tile, #time-in-the-air-modal .tia-bottom { padding: 30px 8px; }
    #time-in-the-air-modal .tia-bottom-mobile { width: 100%; display: block; }
    #time-in-the-air-modal .tia-bottom-mobile-section { display: flex; justify-content: space-between; width: 100%; margin-bottom: 30px; }
    #time-in-the-air-modal .modal-content { height: 550px !important; }
    #time-in-the-air-modal .tia-top { background-size: 136px 136px; height: 136px; padding-left: 8px; }

    #flights-distance-modal .modal-content, #flights-distance-modal .modal-dialog { width: 98% !important; min-width: 98% !important; }
    #flights-distance-modal .fd-container { padding: 0px;}

    .top-modal .modal-content { height: 97vh;}
    .top-modal .modal-grid-list-group { height: calc(100% - 40px);}
    .top-modal .modal-body { height: inherit; }
    .top-modal .modal-grid { height: 70%; overflow: hidden; }
}
@media (max-width: 348px) {
    .col-md-12 { padding-right: 7px; padding-left: 7px; }
    .flight-counter-big { font-size: 28px; }
    .flight-counter-mid { font-size: 14px; }
    .flight-counter-small { font-size: 13px; }
}

@media only screen and (max-width: 400px) and (max-height: 700px) {
    .top-modal .modal-grid { height: 67%; }
}
@media only screen and (max-width: 500px) and (max-height: 600px) {
    .top-modal .modal-grid { height: 62%; }
}
@media only screen and (max-width: 400px) and (max-height: 868px) {
    #flights-modal .modal-content { height: calc(100vh - 32vh); overflow: auto; }
}
@media only screen and (max-width: 424px) and (max-height: 768px) {
    #flights-modal .modal-content { height: calc(100vh - 24vh); overflow: auto; }
}
@media (min-height: 576px) {
    #flights-modal .modal-content { height: 590px; margin-top: 0px !important; }
}
@media (max-width: 768px) {
    #flights-modal .modal-content { height: 560px; }
} 
@media (max-height: 748px) {
    #flights-distance-modal .modal-content, .modal-content, #time-in-the-air-modal .modal-content { margin-top: 0px !important; height: 97vh; }
    .modal-dialog-centered { margin-top: 0px; }
    .modal-body { height: inherit; overflow: auto; }
    .modal-grid { height: calc(100% - 185px); }
    .modal-grid-list-group { height: calc(100% - 40px) }
    #flights-distance-modal .fd-left-container { height: 276px; }
}