/* site ********************************************************************************************************************************************************************/
.page-content {
padding: 0 !important;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
}
body.ios {
/* min-height: 100%; */
}
@media screen and (max-width: 767px) {
.footer_index {
position: fixed;
bottom: 0;
right: 0;
left: 0;
}
.dop-wrap-flex {
padding-bottom: 88px;
}
}
/* form ********************************************************************************************************************************************************************/
.mapflight__route {
position: absolute;
top: 0;
left: 50%;
/* right: 0; */
transform: translateX(-50%);
display: flex;
padding: 20px 0 0;
justify-content: center;
z-index: 1;
}
.mapflight__route form {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.mapflight__route__dop {
position: relative;
z-index: 1;
width: 100%;
text-align: right;
margin-top: 10px;
padding-right: 182px;
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
.mapflight__route__clear {
position: relative;
padding: 8px 30px 8px 15px;
background: #161834;
cursor: pointer;
border-radius: 5px;
color: #fff;
}
.mapflight__route__clear:before,
.mapflight__route__clear:after {
content: '';
position: absolute;
top: 50%;
right: 8px;
width: 15px;
height: 1px;
margin-top: -1px;
background: #fff;
transform: rotate(45deg);
}
.mapflight__route__clear:after {
transform: rotate(-45deg);
}
.mapflight__route__direct {
display: flex;
align-items: center;
/* height: 28px; */
margin-right: 30px;
background: #161834;
border-radius: 5px;
line-height: 23px;
margin-right: 10px;
}
.mapflight__route__direct input {
display: none;
}
.mapflight__route__direct label {
margin-bottom: 0 !important;
padding: 9px 10px 8px 8px;
color: #fff;
cursor: pointer;
}
.mapflight__route__direct label:before {
content: '';
position: relative;
top: 3px;
display: inline-block;
width: 17px;
height: 17px;
margin-right: 5px;
background: #fff;
border: 1px solid #ddd;
border-radius: 50%;
box-sizing: border-box;
}
.mapflight__route__direct input:checked + label:before {
border: 3px solid #abe2dc;
background: #abe2dc;
}
.mapflight__route__conf {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.mapflight__route__i {
position: relative;
margin-right: 10px;
}
#cityFrom,
#cityTo {
display: none;
}
.mapflight__route input[type="text"] {
background: #fff;
padding: 15px 23px 15px 10px;
width: 300px;
overflow: hidden;
color: #161834;
font-size: 17px;
line-height: 20px;
border: 1px solid #161834;
border-radius: 5px;
}
.mapflight__route input[type="text"]:disabled {
background-color: #f0f0f0;
}
.page-content .mapflight__route input[type="submit"] {
padding: 5px 15px;
background: #F6955E !important;
border: none;
border-radius: 5px;
color: #fff;
font-size: 17px;
/* line-height: 40px; */
font-weight: 400 !important;
cursor: pointer;
text-shadow: none !important;
box-shadow: none !important;
color: #fff !important;
}
.page-content .mapflight__route input[type="submit"]:hover {
background-color: #161834 !important;
}
/* list city map's form ********************************************************************************************************************************************************************/
.mapflight__route__list {
position: absolute;
top: 51px;
left: 0;
right: 0;
display: none;
background: #fff;
border: 1px solid #161834;
border-top: none;
padding-right: 0;
max-height: 300px;
overflow-y: scroll;
border-radius: 5px;
}
.mapflight__route__list::-webkit-scrollbar {
width: 2px;
}
.mapflight__route__list::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}
.mapflight__route__list::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid transparent;
}
/* .mapflight__route__i input[type="text"]:focus + .mapflight__route__list_active { */
.mapflight__route__list_active {
display: block;
}
.mapflight__route__list__i {
cursor: pointer;
padding: 10px;
margin: 0;
border-top: 1px solid #161834;
color: #161834;
}
.mapflight__route__list__i_active:first-child {
/* border-top: none; */
/* background: #f1f1f1; */
}
.mapflight__route__list__i_disabled {
display: none;
}
/* map's sidebar ********************************************************************************************************************************************************************/
.mapflight__sidebar {
position: absolute;
top: 20px;
left: 20px;
max-height: 608px;
overflow: hidden;
display: flex;
flex-direction: column;
z-index: 1;
border-radius: 5px;
}
.activeFromElement .mapflight__sidebar {
width: 270px;
}
.mapflight__sidebar__list::-webkit-scrollbar {
width: 0px;
}
.mapflight__sidebar__list::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}
.mapflight__sidebar__list::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid transparent;
}
.mapflight__sidebar__list {
overflow-y: scroll;
scrollbar-face-color: darkgrey;
scrollbar-track-color: darkgrey;
}
.mapflight__sidebar__list::-webkit-scrollbar {
/* display: none; */
}
.mapflight__sidebar__i_t {
position: relative;
padding: 12px 30px 14px 10px;
background: #161834;
color: #fff !important;
font-size: 20px;
}
.mapflight__sidebar__i_t:after {
content: '';
position: absolute;
top: 50%;
right: 12px;
width: 10px;
height: 10px;
margin-top: -9px;
border: 1px solid #fff;
border-top: none;
border-right: none;
transform: rotate(-45deg);
}
.mapflight__sidebar__i {
display: block;
position: relative;
padding: 10px 35px 10px 10px;
font-size: 18px;
background: #fff;
cursor: pointer;
color: #161834;
transition: padding-left .3s linear;
text-decoration: none;
}
.mapflight__sidebar__i__pam {
display: none;
font-size: 12px;
}
.mapflight__sidebar__i_transfer {
padding-top: 4px;
padding-bottom: 2px;
}
.mapflight__sidebar__i_transfer .mapflight__sidebar__i__pam {
display: flex;
justify-content: flex-start;
align-items: center;
}
.mapflight__sidebar__i_transfer .mapflight__sidebar__i__pam:before {
content: '';
display: inline-block;
width: 5px;
height: 5px;
background: #ff0000;
border-radius: 100%;
margin-right: 3px;
}
.mapflight__sidebar__i + .mapflight__sidebar__i {
border-top: 1px solid #e8e8e8;;
}
.mapflight__sidebar__i:after {
content: "";
position: absolute;
top: 50%;
right: 10px;
display: flex;
justify-content: center;
align-items: center;
width: 19px;
height: 19px;
margin-top: -10px;
color: #6a6a6a;
font-size: 11px;
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAyMCAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48Y2lyY2xlIGN4PSI3LjUiIGN5PSI3LjUiIHI9IjYuNSIgc3Ryb2tlPSIjQ0ZDRkNGIiBzdHJva2Utd2lkdGg9IjIiLz48cGF0aCBkPSJNMTIuNzA3MSAxMi4yOTI5TDE4LjcwNzEgMTguMjkyOSIgc3Ryb2tlPSIjQ0ZDRkNGIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=);
}
.mapflight__sidebar__i:before {
content: '';
position: absolute;
top: 13px;
left: -70px;
width: 17px;
height: 17px;
background-image: url('data:image/svg+xml,');
transition: left .3s linear;
}
.mapflight__sidebar__i:hover {
color: #161834;
padding-left: 35px;
}
.mapflight__sidebar__i:hover:before {
left: 10px;
}
.mapflight__sidebar__i:hover:after {
background-image: url('data:image/svg+xml,');
}
/* map ********************************************************************************************************************************************************************/
.mapflight-w {
position: relative;
}
#mapflight {
width: 100%;
height: 700px;
}
/* balloon ********************************************************************************************************************************************************************/
.ymaps-2-1-79-balloon-pane {
z-index: 4001 !important;
}
.ymaps-2-1-79-balloon,
.ymaps-2-1-79-balloon__layout {
border-radius: 5px;
}
.ymaps-2-1-79-balloon__close {
/* display: none;
width: 0px !important; */
float: none;
overflow: hidden !important;
height: 0px !important;
}
.ymaps-2-1-79-balloon__close-button {
height: 1px !important;
background: transparent;
}
.ymaps-2-1-79-balloon__content {
padding: 0;
margin-right: 0 !important;
text-align: center;
}
.balloon__img {
width: 100%;
min-width: 100px;
}
.balloon__tx {
display: inline;
line-height: 15px;
/* padding-bottom: 10px; */
}
.ymaps-2-1-79-balloon-pane .balloon__tx {
display: inline-block;
padding-top: 7px;
padding-left: 5px;
padding-right: 5px;
}
/* places ********************************************************************************************************************************************************************/
@keyframes pulsate {
0% {
transform:scale(.1, .1);
opacity:0
} 50% {
opacity:1
} 100% {
transform:scale(1.2, 1.2);
opacity:0
}
}
@keyframes route {
0% {
width: 0px;
} 100% {
width: unset;
}
}
.ymaps-2-1-79-placemark-overlay {
font-size: 0px !important;
}
.ymaps-2-1-79-places-pane {
z-index: 4000 !important;
}
.selectedCityFrom,
.selectedCityTo {
z-index: 4000 !important;
}
.ymaps-2-1-79-image-with-content {
background: #fff !important;
background-image: url('data:image/svg+xml,') !important;
background-repeat: no-repeat !important;
background-position: -2px center !important;
background-size: 20px 16px !important;
border: 1px solid #161834;
border-radius: 20px;
left: -11px !important;
top: -10px !important;
transition: width .3s linear;
}
.ymaps-2-1-79-image-with-content:hover,
.ymaps-2-1-79-image-with-content.selectedandhover {
cursor: pointer;
}
.ymaps-2-1-79-image-with-content:hover:before,
.ymaps-2-1-79-image-with-content.selectedandhover:before {
content: '';
position: absolute;
top: -10px;
left: -10px;
z-index: -1;
width: 40px;
height: 40px;
animation: pulsate 1.5s ease-out;
animation-iteration-count: infinite;
opacity: 0;
border-radius: 50%;
box-shadow: 0 0 0 2px #fff,
0 0 0 3px #161834,
0 0 0 4px #fff;
}
ymaps.selectedCityFrom .ymaps-2-1-79-image-with-content:hover:before,
ymaps.selectedCityTo .ymaps-2-1-79-image-with-content:hover:before {
display: none;
}
ymaps.selectedCityFrom .ymaps-2-1-79-image-with-content,
ymaps.selectedCityTo .ymaps-2-1-79-image-with-content {
width: auto !important;
overflow: hidden;
}
.ymaps-2-1-79-image-with-content-content {
position: relative !important;
width: auto !important;
display: none;
padding-left: 31px;
padding-right: 31px;
text-align: left !important;
}
ymaps.selectedCityFrom .ymaps-2-1-79-image-with-content-content,
ymaps.selectedCityTo .ymaps-2-1-79-image-with-content-content {
display: block;
}
ymaps[id*="id_"] > ymaps,
ymaps[id*="id_"] > ymaps {
position: static;
white-space: nowrap;
font-size: 15px;
line-height: 13px;
vertical-align: top;
}
ymaps[id*="id_"] {
position: static;
/* padding-top: 10px;
padding-left: 5px;
padding-right: 5px; */
}
.ymaps-2-1-79-image-with-content.disabled {
opacity: .5;
border-color: #f0f0f0;
cursor: default !important;
background-color: #f0f0f0 !important;
display: none;
}
.ymaps-2-1-79-image-with-content.disabled:hover:before {
display: none;
}
.map_preloader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
background: rgba(0,0,0,.2);
}
.map_preloader__anime {
height: 200px;
width: 200px;
/* background: url(img/ui-loader-planes.svg) center center no-repeat; */
background: url(img/ui-loader-logo.svg) center center no-repeat;
background-size: 100% auto;
}
.place-content__city {
font-size: 13px;
line-height: 20px;
}
.content-info__close {
position: absolute;
right: 7px;
top: 2px;
width: 15px;
height: 15px;
cursor: pointer;
}
.content-info__close:before,
.content-info__close:after {
content: '';
position: absolute;
top: 7px;
left: 0px;
width: 15px;
height: 1px;
background: #000;
transform: rotate(45deg);
}
.content-info__close:after {
transform: rotate(-45deg);
}
.mapflight__route__i .content-info__close {
top: 50%;
margin-top: -7px;
display: none;
}
.activeFromElement .mapflight__route__i_from .content-info__close {
display: block;
}
.activeToElement .mapflight__route__i_to .content-info__close {
display: block;
}
.ymaps-2-1-79-graphics-SVG svg {
overflow: hidden;
/* width: unset; */
/* animation: route 1.5s ease-out; */
/* animation-iteration-count: infinite; */
}
.new-footer {
margin-top: 0px;
}
.new-footer::after {
left: 15px;
right: 15px;
}
@media screen and (max-width: 1400px) {
.mapflight__route {
justify-content: flex-end;
padding-right: 50px;
}
}
@media screen and (max-width: 1200px) {
.mapflight__route {
padding-right: 20px;
}
.mapflight__route input[type="text"] {
width: 270px;
}
}