/* ---- spinner ---- */
#spinner { opacity: 0; visibility: hidden; transition: opacity .5s ease-out, visibility 0s linear .5s; z-index: 99999; }
#spinner.show { transition: opacity .5s ease-out, visibility 0s linear 0s; visibility: visible; opacity: 1; }
#spinner div.spinner-grow { color: var(--main_color); width: 3rem; height: 3rem; }

/* ---- cookie alert ---- */
.cookiealert {
    background: var(--medium_bg);
    color: var(--medium_txt);
    font-size: 0.9em;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
.cookiealert .acceptcookies {
    border: 2px solid var(--dark_medium_bg);
    color: var(--dark_medium_txt);
    font-size: 0.9rem;
    margin-left: 0;
    margin-right: 20px;
}


/* ---- common styles ------- */
a { color: var(--main_color); }
a:hover { color: var(--dark_bg); }

.container { color: var(--medium_txt); }
.container-first { padding-top: 6rem !important; }
.container-dark-bg { background-color: var(--medium_bg); }

.title { font-size: 42px; font-weight: 700 !important;  color: var(--dark_txt); line-height: 48px; }
.mc { color: var(--main_color) !important; }
.xxl-title { font-size: 32px; font-weight: 700; color: var(--dark_txt); line-height: 36px;}
.xl-title { font-size: 28px; font-weight: 700; color: var(--dark_txt); line-height: 30px;}
.l-title { font-size: 22px; font-weight: 700; color: var(--dark_txt); line-height: 26px;}
.s-title { font-size: 17px !important; font-weight: 700; color: var(--dark_txt); line-height: 21px; }
.small { font-size: 0.85em; font-weight: 400; line-height: 19px; }
.dark-text { color: var(--dark_txt); }

.selected-button { color: #1EA833 !important; border-color: #1EA833 !important; background-color: #EAFDED !important; }
.selected-button.rounded { cursor:auto !important; border-width:2px; border-radius: 20px !important; padding-left: 0.7em; padding-right: 0.7em; width: auto; }
.transparent-button { background-color: transparent !important; }

.list-group-item { border: none; }
ul { padding-left: 1rem !important; }
li::marker { color: var(--main_color); }
.show-hide-password-eye { width: 32px; height: 32px; cursor: pointer; line-height: 36px; position: absolute; right: 26px; text-align: center; top: 3px; color: var(--medium_txt); z-index:999; font-size:0.8em }

.how_works .xl-title { color: var(--dark_medium_txt) !important; }
.how_works .s-title { color: var(--dark_medium_txt) !important; }

.esim-dropdown-menu { border: 1px solid var(--medium_txt); border-radius:10px; }
.esim-dropdown-menu.dropstart .dropdown-toggle::before { display:none; }
.esim-dropdown-menu .dropdown-item { font-size: 0.85em; color: var(--medium_txt); }

.plaza { background-color: var(--light_bg); border-radius: 1em; padding: 2em; }
.plaza.dark { background-color: var(--medium_bg); }
.plaza.darker { background-color: var(--dark_medium_bg); }
.plaza.transparent { background-color: transparent; border:2px solid var(--dark_medium_bg); }

.plaza.package_selector { background-color: var(--light_bg) !important; border:2px solid var(--dark_medium_bg) !important; }
.plaza.package_selector.active, .esims-slider .plaza.active { color:var(--dark_txt); background-color: var(--main_color_opacity_10) !important; border:2px solid var(--main_color) !important;  }

.plaza.profile_menu { border: 0px; padding-top: 1em; padding-bottom: 1em; margin-bottom: 0.15em;}
.plaza.profile_menu a { color: var(--dark_medium_txt); }
.plaza.profile_menu a.active { color: var(--main_color); }
.plaza.profile_menu_first { border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; margin-bottom: 0.15em; }
.plaza.profile_menu_last { border-top-right-radius: 0px; border-top-left-radius: 0px; padding-top: 1em; padding-bottom: 1em; }
.plaza.profile_menu_last a { color: var(--warning_color); }

.plaza.profile_menu .accordion .accordion-button { background: transparent; padding: 0px; color: var(--medium_txt); }
.plaza.profile_menu .accordion .accordion-button:not(.collapsed) { background: transparent; }
.plaza.profile_menu .accordion .accordion-button::after { opacity: 0.5; }
.plaza.profile_menu .accordion .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23555555'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
.plaza.profile_menu .accordion .accordion-item { margin-bottom: 0; }
.plaza.expired { opacity: 0.75; }
.plaza.expired .s-title { color: var(--medium_txt); }

.countries_list_item {border-bottom: 1px solid var(--dark_medium_bg); padding-bottom: 1.5em; }

#qrcode-window-image { margin:auto auto; height:205px; width:205px; padding:0; background-color: var(--medium_bg); }

.tg-bordered { padding-bottom: 8px; border-bottom: 3px solid var(--dark_bg); border-top: 3px solid var(--dark_bg); }

/*------ navigation panel ------- */
.sticky-top {top: -120px; transition: .8s; background-color: var(--light_bg); }
.navbar { padding: 11px 0 !important; height: 75px; }
.navbar .navbar-nav .nav-link { margin-right: 35px; padding: 0; color: var(--medium_txt); outline: none; font-size: 17px; }
.navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active { color: var(--main_color); }
.nav-button { padding: 12px 60px 12px 60px !important; background-color: var(--dark_bg); color: var(--light_txt); }
.nav-button:hover, .nav-button:active { background-color: var(--main_color); }
.navbar-light .navbar-toggler { border:none !important;  box-shadow: none !important; }

.nav-button.spad { padding: 6px 20px 6px 20px !important; }

@media (max-width: 991.98px) {
    .navbar .navbar-nav { padding: 15px 15px; background: var(--light_bg); }
    .navbar .navbar-nav .nav-link  { margin-right: 0; padding: 10px 0; }
}
@media (min-width: 992px) {
    .navbar .nav-item .dropdown-menu { display: block; border: none; margin-top: 0; top: 150%; opacity: 0; visibility: hidden; transition: .5s; }
    .navbar .nav-item:hover .dropdown-menu { top: 100%; visibility: visible; transition: .8s; opacity: 1; }
    .modal-content { width:700px; } /* 860 */
    #login-window .modal-content { width:500px; }
}

/* ---- buttons ------ */
.back-to-top { position: fixed; display: none; right: 45px; bottom: 45px; z-index: 99999; background-color: var(--dark_bg); color: var(--light_txt); }
.back-to-top:focus { box-shadow: none !important; }

.btn { font-weight: 500; transition: .5s; font-size: 0.95rem;}
.btn-square { width: 38px; height: 38px; }
.btn-sm-square { width: 32px; height: 32px; }
.btn-lg-square { width: 48px; height: 48px; }
.btn-square, .btn-sm-square, .btn-lg-square {padding: 0; display: flex; align-items: center; justify-content: center; font-weight: normal; border-radius: 50px; }

.light-button { color: var(--dark_txt); border: 2px solid var(--dark_bg); background-color: var(--light_txt); }
.light-button:hover { color: var(--dark_bg); border: 2px solid var(--main_color); background-color: var(--main_color_opacity_30); }
.light-button:disabled { color: var(--medium_txt) !important; border-color: var(--dark_medium_bg) !important; }

.dark-button { background-color: var(--dark_bg); color: var(--light_txt); }
.dark-button:hover, .nav-button:active { background-color: var(--main_color); }

.narrow-button { padding: 0.5em 1em 0.5em 1em !important;}

.soc-button { text-align:left; color: var(--light_txt); border: 0; padding: 10px 36px 10px 36px !important;}
.soc-button:hover { text-align:left; color: var(--light_txt); border: 0; }
.soc-button.yandex { background-color: #FC3F1D; }
.soc-button.yandex:hover { background-color: #FC3F1D; }
.soc-button.mailru { background-color: #014B88; }
.soc-button.mailru:hover { background-color: #014B88; }

/* ---- inputs/selectors ------ */
input:focus, input:active, select:focus, select:active, button:focus, button:active { box-shadow: none !important; }
input.form-control { font-size: 0.90em; }
input.auto-hidden-input { background: transparent; border:1px solid transparent; width:100%; outline:none; border-radius: 10px; }
input.auto-hidden-input:hover, input.auto-hidden-input:focus { background: rgba(255,255,255,0.5); border:1px solid var(--medium_txt); }

/* ------ search tariff plan by country ----- */
#stp-container { position: relative; }
.stp-control { background-color: var(--light_bg) !important; color: var(--medium_txt) !important; border: 1px solid #E1E7EC; outline: 0; outline-offset: 0;}
.stp-control:focus { outline: 0; outline-offset: 0;}
.stp-control.btn {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border: 1px solid #E1E7EC;
    border-left: 0 !important;
}
.stp-helpers { position: absolute; }
.stp-helpers > span {
    cursor: pointer;
    background-color: var(--light_bg);
    color: var(--dark_medium_txt);
    border: 1px solid #E1E7EC;
    padding: 4px 8px;
    margin-right: 4px;
    margin-top: 4px;
    display: inline-block;
    border-radius: 8px;
}
.stp-result { box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; position: absolute; left: 0; z-index: 1000; display: none; width: 100%; background-clip: padding-box;  }
.stp-result .s-title { color: var(--dark_medium_txt) !important; }
.stp-result .plaza.darker { padding: 1.5em; }

/* ---- modal window ----- */
.modal { top: 5em; }
.modal-open>*:not(.modal.show) { filter: blur(3px); }
.modal .modal-content { border: none; background: var(--light_bg); }
.modal .modal-body { padding:0; }
.modal .btn-close { color: var(--medium_txt); font-size: 0.60rem; }

.modal-backdrop { background-color: var(--dark_medium_bg); }
.modal-backdrop.show { opacity: 0.75; }

/* ---- FAQs and Tariff One package------ */
.accordion .accordion-item { border: none; margin-bottom: 15px; }
.accordion-header, .accordion-item { border-radius: 8px; }
.accordion .accordion-button { background: var(--dark_medium_bg); border-radius: 8px; color: var(--dark_medium_txt); }
.accordion .accordion-button:not(.collapsed) { color: var(--light_txt); background: var(--dark_bg); box-shadow: none; }
.accordion .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); }
.accordion .accordion-body { padding: 12px; }
.accordion-button:focus { box-shadow: none !important; }

#tariff_view_one_pkg .accordion .accordion-button { background: var(--medium_bg); }
#tariff_view_one_pkg .accordion .accordion-button:not(.collapsed) { color: var(--dark_txt); background: var(--medium_bg); border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; }
#tariff_view_one_pkg .accordion .accordion-body { padding: 12px; background: var(--medium_bg); border-bottom-left-radius: 8px; border-bottom-right-radius: 8px;}

#accordionCountries .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23777'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important; }


/* -------- purchase --------- */
.purchase select, .purchase input { background-color: var(--medium_bg); border:1px solid var(--medium_bg); }
.purchase .form-control:read-only { background-color: var(--medium_bg);  border:1px solid var(--medium_bg); }
.purchase div.btn { border:1px solid var(--dark_medium_bg) !important; background-color: transparent !important; }
.purchase div.btn:hover { color: var(--dark_txt); background-color: var(--dark_medium_bg) !important; }
.purchase input[type="checkbox"] { border-color: var(--medium_txt) !important; background-color: transparent !important; }
.purchase input[type="checkbox"]:checked { background-color: var(--dark_bg) !important; border-color: var(--dark_bg) !important; }
.purchase .flag-icon { background-size: cover; width:3em; height:3em; border-radius:3em; }

.purchase .alert { display:flex; border: 1px solid var(--warning_color); background-color: var(--warning_color_opacity_10); color: var(--dark_txt); font-size: 15px; }
.purchase .alert.hidden { display: none !important; }
.purchase .alert img { margin-right:18px; width:42px; }


    /* -------- tariffs description --------- */
.btn.tariff-list-title { border: 1px solid var(--dark_medium_bg);  background-color: transparent; }
.btn.tariff-list-title:hover { color: var(--main_color); }
.btn.tariff-list-title.active { border: 1px solid var(--dark_medium_bg);  background-color: var(--dark_medium_bg); }

/* ----- progress bar ------ */
.progress { width: 120px; height: 120px; background: none; position: relative; }
.progress::after { content: ""; width: 100%; height: 100%; border-radius: 50%; border: 6px solid var(--medium_bg);; position: absolute; top: 0; left: 0; }
.progress>span { width: 50%; height: 100%; overflow: hidden; position: absolute; top: 0; z-index: 1; }
.progress .progress-left { left: 0; }
.progress .progress-bar { width: 100%; height: 100%; background: none; border-width: 12px; border-style: solid; position: absolute; top: 0; border-color: var(--main_color);}
.progress .progress-left .progress-bar { left: 100%; border-top-right-radius: 80px; border-bottom-right-radius: 80px; border-left: 0; -webkit-transform-origin: center left; transform-origin: center left; }
.progress .progress-right { right: 0; }
.progress .progress-right .progress-bar { left: -100%; border-top-left-radius: 80px; border-bottom-left-radius: 80px; border-right: 0; -webkit-transform-origin: center right; transform-origin: center right; }
.progress .progress-value { position: absolute; top: 40px; text-align: center; height: 100%; }

/* swiper slider */
.packages-slider.swiper { padding-bottom: 20px; }
.packages-slider .swiper-pagination { margin-top: -7px; position: relative; }
.packages-slider .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background-color: var(--dark_medium_bg); opacity: 1; }
.packages-slider .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--main_color); }

.esims-slider.swiper { padding-bottom: 22px; }
.esims-slider .swiper-pagination { margin-top: -8px; position: relative; }
.esims-slider .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; background-color: var(--dark_medium_bg); opacity: 1; }
.esims-slider .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--main_color); }


/* ---- footer ---- */
.footer { background: var(--medium_bg); }
.footer .copyright { padding: 25px 0; font-size: 15px; font-weight: 400; color: var(--medium_txt); line-height: 17px; }
.footer a { font-size: 17px; margin-right: 15px; line-height: 21px; padding-right: 15px; color: var(--medium_txt) }

/* ------- overrides ------ */
.dark_bg { background: var(--medium_bg) !important; }
.tooltip-inner { border-radius: 3px !important; background-color: var(--main_color) !important; color: var(--light_txt) !important; font-size: 0.85em; }
.bs-tooltip-end .tooltip-arrow::before { border-right-color: var(--main_color) !important; }
div.tooltip.bs-tooltip-end.show, div.tooltip.bs-tooltip-top.show { filter: blur(0) !important; }

 { filter: blur(0) !important; }
@media (max-width: 450px) {
    .title { line-height:32px; font-size: 24px; }
    .xl-title { font-size: 20px; line-height: 24px; }

    .xxl-title { font-size: 22px; }
    .plaza { margin-bottom: 20px; }
    .tarif-plaza { margin-top: 10px; }
    .footer-block { margin-top: 2px; }
    .light-button { padding: 10px 30px 12px 30px !important; }
    .tarif-presentation .title { line-height: 28px; font-size: 20px; }
    .tarif-presentation a.btn.light-button { width:100%; }

    .mob_std_sized { font-size: 12px; padding-left:4px; padding-right:4px; }
    .mob_std_sized .l-title { font-size: 16px; white-space: nowrap; }
    .purchase .flag-icon { width: 2em; height: 2em; }
    .quick-search-tariff-block { padding-bottom: 50px !important; }
}