@import url("darkTheme.css");

body {
    background: #EDEEF0;
}

*::-webkit-scrollbar {
    width: 10px;
    background-color: #f9f9fd;
  }
  
  *::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background-color: #3D6898;
  }
  
  *::-webkit-scrollbar-track {
    -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset;
    background-color: none;
  }

.container {
    max-width: 1250px !important;
}

a {
    color: #3d7fdf !important;
}

.navbar-nav .nav-link {
    padding: 12px 10px !important;
}

A.about-the-service {
    text-shadow: 0 0 2px rgba(0,0,0,0.5) ;
    background-image: -webkit-linear-gradient(-90deg, rgba(249,198,103,1) 0, rgba(247,150,33,1) 100%);
    background-image: -moz-linear-gradient(180deg, rgba(249,198,103,1) 0, rgba(247,150,33,1) 100%);
    background-image: linear-gradient(180deg, rgba(249,198,103,1) 0, rgba(247,150,33,1) 100%);
    background-position: 50% 50%;
    -webkit-background-origin: padding-box;
    background-origin: padding-box;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-background-size: auto auto;
    background-size: auto auto;
    padding: 7px 20px !important;;
}

.bg-light-blue {
    background: #e0e9f1;
}

.bg-dark {
    background: #404552 !important;
}

.bg-primary {
    background: #3D6898 !important;
}

.bg-primary-50 {
    background: #608ab9 !important;
}

.bg-success {
    background: #7bba58 !important;
}

.bg-danger {
    background: #FF675C !important;
}

.border-danger {
    border-color: #FF675C !important; 
}

.border-success {
    border-color: #7bba58 !important; 
}

.text-danger {
    color: #FF675C !important; 
}

.text-success {
    color: #7db607!important;
}

.text-primary {
    color: #426c9b!important;
}

.text-muted {
    color: #85929d!important;
}

.btn-light {
        background-image: -webkit-linear-gradient(-90deg, #cecece 0, rgba(200,200,200,1) 100%);
        background-image: -moz-linear-gradient(180deg, rgba(237,237,237,1) 0, rgba(200,200,200,1) 100%);
        background-image: linear-gradient(180deg, rgba(237,237,237,1) 0, rgba(200,200,200,1) 100%);
        background-position: 50% 50%;
        -webkit-background-origin: padding-box;
        background-origin: padding-box;
        -webkit-background-clip: border-box;
        background-clip: border-box;
        -webkit-background-size: auto auto;
        background-size: auto auto;
        border-color: #CACACA !important;
        color: #404552 !important;
    }

    .btn-light:hover {
        background: #E1E1E1 !important;
        border-color: #E1E1E1 !important;
    }

.btn-light-1 {
        background: #dbe5ef;
        color: #646f7b !important;
    }

    .btn-light-1:hover {
        background: #b7cce1;
        color: #000 !important;
    }

.btn-light-2 {
        background: #dbdddf;
        color: #373839 !important;
    }

    .btn-light-2:hover {
        background: #c7c8c9;
        color: #000 !important;
    }

.btn-outline-light {
        color: #747d85 !important;
        border-color: #d3d8dd;
        background: #f1f1f1;
    }

    .btn-outline-light:hover {
        color: #000 !important;
        background-color: #e9ebed;
        border-color: #cccfd1;
    }

.btn-primary {
        background: #3D6898 !important;
        border-color: #3D6898 !important;
        color:#FFF !important;
    }

    .btn-primary:hover {
        background: #527fb1 !important;
        border-color: #527fb1 !important; 
    }

    .btn-primary.active {
        background: #5689c1 !important;
        border-color: #5689c1 !important;;
    }

.btn-outline-primary:hover {
    color: #FFF !important;
    background-color: #5693ed !important;
    border-color: #5693ed !important;
}

.btn-success {
        color: #fff;
        background-color: #66a545  !important;
        border-color: #66a545  !important;
    }

    .btn-success.active {
        background-color: #9dcf83   !important;
        border-color: #9dcf83   !important;    
    }

    .btn-success:hover, .btn-success.active:hover {
        background-color: #7dc15a   !important;
        border-color: #7dc15a   !important;  
    }

.btn-danger {
        color: #fff;
        background-color: #FF675C   !important;
        border-color: #FF675C   !important;
    }

    .btn-danger:hover, .btn-danger.active:hover {
        background-color: #e74c41   !important;
        border-color: #e74c41   !important;  
    }

.rounded-top-start {
    border-radius: 0.25rem 0 0 0!important;
}

.rounded-bottom-start {
    border-radius: 0 0 0 0.25rem !important;
}

.rounded-top-end {
    border-radius: 0 0.25rem 0 0!important;
}

.hover_underline:Hover {
    text-decoration: underline !important;
}

.bg-hover:Hover {
    background: #d9e1eb;
}

.logo_title {
        background: #3d689885;
        padding: 3px 8px 0px 5px !important;
        border-radius: 3px;
    }

    .logo_title div, .logo_title span {
        font-size: 1.98rem;
        font-weight: 600;
        color: #FFF;
    }

    .logo_title p {
        font-size: 0.77rem;
        color: #ffffff8a;
        text-transform: lowercase;
    }

    .logo_title img {
        width: 45px;
        margin-right: 2px;
        margin-top: -6px;
    }

    .logo_title .mobile-logo {
        display: none;
    }

.topHeaderBg {
    background: #034467;
} 


.header {
    background: #244e7d;
}

.header_user_menu .u-icon i::before {
    font-size: 2rem !important;
    margin: 0px 10px;
}

.header_user_menu .dropdown-menu {
    margin: 8px 0 0 0 !important;
}

.header_user_menu .dropdown-menu .triangleUp {
    position: relative !important;
}

.header_user_menu .dropdown-menu .triangleUp::after {
    content: ''; 
    position: absolute; /* Абсолютное позиционирование */
    right: 8px; top: -37px; /* Положение треугольника */
    border: 15px solid transparent; /* Прозрачные границы */
    border-bottom: 15px solid #343a40; /* Добавляем треугольник */
   }

.page-nav-menu A {
        color: #FFF !important;
    }
    .page-nav-menu A:Hover, .nav-link.dropdown-toggle.show {
        background: #537cab;
    }

    .page-nav-menu button {
        border-bottom: 1px solid #5280b3;
    }

    .page-nav-menu button i {
        margin: -2px !important;
    }

    .page-nav-menu button i::before {
        font-size: 1.8rem !important;
    }

    .page-nav-menu .dropdown-menu {
        position: relative;
    }

    .page-nav-menu .dropdown-menu::before, .page-nav-menu .dropdown-menu::after {
        content: ''; 
        position: absolute;
        left: 20px; top: -20px;
        border: 10px solid transparent;
        border-bottom: 10px solid #00000026;
    }
    .page-nav-menu .dropdown-menu::after {
        border-bottom: 10px solid white;
        top: -19px; 
    }

    .page-nav-menu .dropdown-menu A {
        color: #404552 !important;
    }

    .page-nav-menu .dropdown-menu A:Hover {
        background: #dce6f1;
    }

    .page-nav-menu .dropdown-menu A:active {
        background: #3D6898 !important;
        color: #FFF !important;
        text-decoration: none !important;
    }

.demo-icon-1em::before {
    font-size: 1em !important;
}

.demo-icon-11em::before {
    font-size: 1.1em !important;
}

.demo-icon-12em::before {
    font-size: 1.2em !important;
}

.demo-icon-13em::before {
    font-size: 1.3em !important;
}

.demo-icon-14em::before {
    font-size: 1.4em !important;
}

.demo-icon-15em::before {
    font-size: 1.5em !important;
}

.demo-icon-16em::before {
    font-size: 1.6em !important;
}

.demo-icon-17em::before {
    font-size: 1.7em !important;
}

.demo-icon-18em::before {
    font-size: 1.8em !important;
}

.demo-icon-2em::before {
    font-size: 2em !important;
}

.demo-icon-25em::before {
    font-size: 2.5em !important;
}

.demo-icon-3em::before {
    font-size: 3em !important;
}

.demo-icon-35em::before {
    font-size: 3.5em !important;
}

.demo-icon-4em::before {
    font-size: 4em !important;
}

.demo-icon-5em::before {
    font-size: 5em !important;
}

.demo-icon-10em::before {
    font-size: 10em !important;
}

.link-secondary {
        color: #6c757d !important;
    }

    .link-secondary:Hover {
        color: #525659 !important;
    }


.soclink {
    margin-right: 2px;
}

.soclink img {
    border-radius: 3px;
    width: 22px;
}

.progress-bar {
    background-color: #5b83bf !important;
}

.modal {
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.font_oswald {
    font-family: 'Oswald Bold' !important;
}

.online_status {
    width: 11px;
    height: 11px;
    border-radius: 100px;
    margin: 5px;
    animation: greenBgAnimation 1600ms infinite;
    z-index: 1;
    animation: greenBgAnimation 1600ms infinite;
}

.cursor-pointer {
    cursor: pointer;
}

.mobile-page-nav li {
    list-style: none;
}

#top_reklama {
    background-color: #FFF;
    position: relative;
}

#top_reklama.lk::after{
    content:'';
    position: absolute;
    z-index: -1;
    top: -0.25em;
    left: -0.2em;
    width: calc(100% + .45em);
    height: calc(100% + .45em);
    border-radius: .45em;
    background-image: linear-gradient(45deg,#f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    background-size: 200%;
    animation: animateborder 3s ease infinite paused;
    animation-play-state: running;
}

#top_reklama.home::after{
    content:'';
    position: absolute;
    z-index: -1;
    top: -0.2em;
    left: -0.2em;
    width: calc(100% + .45em);
    height: calc(100% + .45em);
    border-radius: .45em;
    background-image: linear-gradient(45deg,#f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
    background-size: 200%;
    animation: animateborder 3s ease infinite paused;
    animation-play-state: running;
}

.postVideo {
        height: 0;
        position: relative;
        padding-bottom: 56.25%;
    }

    .postVideo iframe {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

@keyframes animateborder {
    0% {
        background-position: 0%;
    }
    50% {
        background-position: 100%;
    }
    100% {
        background-position: 0%;
    }
}

@keyframes greenBgAnimation {
    0% { background-color: #2ba805; box-shadow: 0 0 5px #2ba805; }
    50% { background-color: #48c422; box-shadow: 0 0 20px #49e819; }
    100% { background-color: #2ba805; box-shadow: 0 0 5px #2ba805; }
}

.reg_sponsor_info {
    background: url('img/reg_sponsor_info_bg.jpg') no-repeat top;
    background-size: cover;
}

.accordion-button:not(.collapsed) {
    color: #000000;
    background-color: #f8f9fa;
}

.vip_lenta_avatar {
    width: 89px;
    height: 89px;
}

.vip_lenta_avatar_bg {
    background-image: -webkit-linear-gradient(-90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 33%, rgba(22,22,22,0.55) 100%);
    background-image: -moz-linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 33%, rgba(22,22,22,0.55) 100%);
    background-image: linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) 33%, rgba(22,22,22,0.55) 100%);
    background-position: 50% 50%;
    -webkit-background-origin: padding-box;
    background-origin: padding-box;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-background-size: auto auto;
    background-size: auto auto;
    text-shadow: 0 0 2px rgba(0,0,0,0.5) ;
}

blockquote {
    border-left: 5px solid #acc3d7;
    background: #eff0f1;
    padding: 1rem;
}

@keyframes blink {
    0% { opacity: 1; }
    33% { opacity: 1; }  /* Блок видим 1 секунду */
    40% { opacity: 0; }  /* Быстро исчезает */
    50% { opacity: 1; }  /* Быстро появляется */
    100% { opacity: 1; } /* Блок снова видим */
}

.blinking {
    animation: blink 2s infinite;
}

.alert.alert-warning {
    border-color: #efb764 !important;
    background-color: #f7e5c9 !important;
}

#bonusIconAnimate img {
    -moz-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -moz-animation: blink normal 2s infinite ease-in-out;
    -webkit-animation: blink normal 2s infinite ease-in-out;
    -ms-animation: blink normal 2s infinite ease-in-out;
    animation: blink normal 2s infinite ease-in-out;
}

#bonusIconAnimate img:hover {
    -moz-animation: none;
    -webkit-animation: none;
    -ms-animation: none;
    animation: none;
}

@-moz-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

@-ms-keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }

    100% {
        opacity: 1;
    }
}

.tooltip {
    z-index: 1 !important;
}

@media screen and (max-width: 400px) {

    .mobile-hidden {
        display: none;
    }

    .online_status {
        width: 8px;
        height: 8px;
        margin: 1px;
    }

}

@media screen and (max-width: 500px) {

    .logo_title {
        padding: 3px 5px 0px 5px !important;
    }

    .logo_title div, .logo_title span {
        font-size: 1.58rem;
    }

    .logo_title .mobile-logo {
        display: inline;
        width: 33px;
        margin-top: -4px;
        margin-bottom: -4px;
        margin-right: -2px;
    }

    .vip_lenta_avatar {
        height: 32px;
        width: 32px;
    }

}