/* Write your custom CSS here */

.apbg {
    background-color: rgba(255, 255, 255, 0.1);
}

.gssc_main_pc {
    /* background: #001f3f;  */
    /* background: linear-gradient(to bottom, #102027 0%, #1c3b3b 100%); */
    /* background: linear-gradient(to bottom, #102027 0%, #1c3b3b 80%, #102027 100%); */
    background: linear-gradient(to bottom, #102027 0%, #1a3333 40%, #143939 80%, #0f1e26 100%);
}
.gssc_main_pc .page-header.changeBg .navbar-default {
    background:#102027!important;
}

.gssc_main_dropd {
    background: -moz-linear-gradient(top, #001830 0%, #007ba7 50%, #4e8d6b 100%);
    background: -webkit-linear-gradient(top, #001830 0%, #007ba7 50%, #4e8d6b 100%);
    background: linear-gradient(to bottom, #093156 0%, #007ba7 50%, #23a761 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001830', endColorstr='#4e8d6b', GradientType=0 );        
}

.gssc_main_sbl {
    background: #001f3f; 
    background: -moz-linear-gradient(top, #001f3f 0%, #00c9ff 50%, #65e271 100%);
    background: -webkit-linear-gradient(top, #001f3f 0%, #00c9ff 50%, #65e271 100%);
    background: linear-gradient(to bottom, #001f3f 0%, #00c9ff 50%, #65e271 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001f3f', endColorstr='#65e271',GradientType=0 );
}

.gssc_main_sbrt {
    background:#12303b;
    background: -moz-linear-gradient(top, #001921 0%, #052225 100%);
    background: -webkit-linear-gradient(top, #001921 0%, #052225 100%);
    background: linear-gradient(to bottom, #001921 0%, #052225 100%);
}
.gssc_main_sbr {
    background:#12303b;
    background: -moz-linear-gradient(top, #001921 0%, #0a3d37 33%, #12303b 66%, #052520 100%);
    background: -webkit-linear-gradient(top, #001921 0%, #0a3d37 33%, #12303b 66%, #052520 100%);
    background: linear-gradient(to bottom, #001921 0%, #0a3d37 33%, #12303b 66%, #052520 100%);
    /* background: -moz-linear-gradient(top, #021e2b 0%, #104b44 50%, #052e29 100%);
    background: -webkit-linear-gradient(top, #021e2b 0%, #104b44 50%, #052e29 100%);
    background: linear-gradient(to bottom, #021e2b 0%, #104b44 50%, #052e29 100%); */
}

.gssc_main_sbm ul li.active-page.open a.active, .gssc_main_sbm ul li.active-page.open a.active:hover,
.gssc_main_sbm ul li.active-page>a, .gssc_main_sbm ul li.active-page>a i, .gssc_main_sbm ul li.active-page>a:hover, .gssc_main_sbm ul li.active-page>a:hover i {
    color: #65e271!important;
}

.gssc_main_sbm>ul>li>a:hover, .gssc_main_sbm>ul>li>a:hover i.accordion-icon,
.gssc_main_sbm ul li.open>a, .gssc_main_sbm ul li.open>a i, .gssc_main_sbm ul li.open>a:hover, .gssc_main_sbm ul li.open>a:hover i,
.gssc_main_sbm ul li a:hover {
    color: #00c9ff!important;
}

    






.blink_my {
    color: red!important;
    animation: blink 2s infinite; /* Параметры анимации */
}
@keyframes blink_my {
    from { opacity: 1; /* Непрозрачный текст */ }
    to { opacity: 0; /* Прозрачный текст */ }
}

#showdetailtrans a {
    color: #fff;
    background: #eda500;
    padding: 5px 20px;
    border-radius: 10px;
}




.search-input::placeholder {
    color: #999!important;
    font-size: 16px;
}
.search-input {
    font-size: 16px!important;
}

.search-form #go-search {
    background-color: #F1F3F6;
    color: #000;
    border: none;
    height: 60px;
    border-radius: 0;
    box-shadow: none;
    padding-right: 25px;
}

.search-form #go-search i {
    font-size: 20px;
    vertical-align: text-top;
}

.search-form input:focus {
    border: none;
    box-shadow: none;
}

.search-form #go-search:hover,
.search-form #go-search:focus {
    background-color: #F1F3F6!important;
    opacity: 1;
    border: none;
    outline: 0;
    box-shadow: none;
}


.balancepopup {
    font-size: 16px;
}
.balancepopup b {
    font-size: 32px;
}

.transpopup {
    white-space: normal;
    width: 300px;
}






.clnc_1 { width: 150px; height: 150px; }
.clnc_2 { top: -10px; left: 30px; width: 40px; height: 40px;  font-size: 23px; }
.clnc_3 { top: -20px; left: 70px; width: 50px; height: 50px; padding-top: 11px;  font-size: 12px; border: 4px solid #333; }
.clnc_4 { top: 25px; left: 0px; border-radius: 5px; font-size: 12px;}
.clnc_5 { top: -33px; left: 73px; width: 30px; height: 30px; font-size: 15px; }
.clnc_5_1 { border: 2px solid #fff; padding-top: 1px; }
.clnc_5_2 { padding-top: 3px; }
.clnc_6 { top: -35px; left: 80px; width: 25px; height: 25px; font-size: 13px; }
.clnc_7 { top: -75px; left: -75px; width: 40px; height: 40px; font-size: 25px; }



.cl2_1 { width: 150px; height: 150px; }
.cl2_2 { top: -10px; left: 30px; width: 40px; height: 40px;  font-size: 23px; }
.cl2_3 { top: -20px; left: 70px; width: 50px; height: 50px; padding-top: 11px;  font-size: 12px; border: 4px solid #333; }
.cl2_4 { top: 25px; left: 0px; border-radius: 5px; font-size: 12px;}
.cl2_5 { top: -33px; left: 73px; width: 30px; height: 30px; font-size: 15px; }
.cl2_5_1 { border: 2px solid #fff; padding-top: 1px; }
.cl2_5_2 { padding-top: 3px; }
.cl2_6 { top: -35px; left: 80px; width: 25px; height: 25px; font-size: 13px; }
.cl2_7 { top: -75px; left: -75px; width: 40px; height: 40px; font-size: 25px; }

.last6instant {
    width: 125px;
    height: 125px;
}
.last6instant div {
    font-size: 20px;
}

.patop {
    padding: 10px 0px!important;
}

@media screen and (max-width: 768px)  {
    .patop {
        padding: 0px 0px!important;
    }

    .cl2_1 { width: 60px; height: 60px; }
    .cl2_2 { top: -12px; left: -20px; width: 25px; height: 25px;  font-size: 14px; }
    .cl2_3 { top: -42px; left: 13px; width: 30px; height: 30px; padding-top: 3px;  font-size: 12px; border: 3px solid #333; }
    .cl2_4 { top: -7px; left: 0px; border-radius: 5px; font-size: 10px; }
    .cl2_5 { top: -60px; left: 30px; width: 22px; height: 22px; font-size: 11px; }
    .cl2_5_1 { border: 2px solid #fff; padding-top: 0px; }
    .cl2_5_2 { padding-top: 2px; }
    .cl2_6 { top: -63px; left: 35px; width: 20px; height: 20px; font-size: 10px; }
    .cl2_7 { top: -75px; left: -30px; width: 30px; height: 30px; font-size: 20px; }

    .last6instant {
        width: 50px;
        height: 50px;
    }
    .last6instant div {
        font-size: 10px;
    }


    .myhonmob, .myhideonmob {
        display: none!important;
    }
    .myshowonmob {
        display: block!important;
    }

    .mobtopmenu {
        position: relative;
        top: -40px;
    }
    .page-header-fixed.collapsed-sidebar .page-header{left:0px!important;width:100%!important;}


    .search-form #go-search {
        height: 42px;
        padding-right: 0px;
    }

    .search-input::placeholder {
        font-size: 10px;
    }
    .search-input {
        padding-bottom: 13px!important;
    }


    .balancepopup {
        font-size: 14px!important;
    }
    .balancepopup b {
        font-size: 18px!important;
    }

    .transpopup {
        width: 190px;
    }


    #slider_dep, #slider_dep img {
        width: 100%!important;
        height: 550px!important;
    }
    #slider_with, #slider_with img {
        width: 100%!important;
        height: 350px!important;
    }
    #slider_send, #slider_send img {
        width: 100%!important;
        height: 450px!important;
    }
    #slider_trans, #slider_trans img {
        width: 100%!important;
        height: 750px!important;
    }
    #slider_trans table {
        font-size: 8px!important;
    }
    #slider_pava, #slider_pava img {
        width: 100%!important;
    }
    #slider_pcash, #slider_pcash img {
        width: 100%!important;
        height: 580px!important;
    }
    #slider_ppass, #slider_ppass img {
        width: 100%!important;
        height: 350px!important;
    }
    #slider_pfinpass, #slider_pfinpass img {
        width: 100%!important;
        height: 350px!important;
    }
    #slider_pcontact, #slider_pcontact img {
        width: 100%!important;
        height: 700px!important;
    }
    #slider_news, #slider_news img {
        width: 100%!important;
        height: 700px!important;
    }

    .page-header-fixed .page-header{position:fixed;z-index:99;left:0px;right:0;top:0;width:calc(100% - 0px)}
    .plsmob { padding-left: 0px!important; }

    .login-box {all:unset;}

    .page-header .navbar-nav > li > a {
        padding: 1px 1px!important;
    }

}


.page-sidebar .page-sidebar-menu ul li a {
    padding: 2px 8px;
}





.roulette-container {
    position: relative;
    width: 350px;
    height: 350px;
    margin-left: auto;
    margin-right: auto;
}

.roulette-wheel {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 0px solid black;
    overflow: hidden;
    background-image: url('/media/img/roulette_bg.png');
    background-size: cover;
}

.roulette-wheel .segment {
    fill: rgba(0, 255, 0, 0.1); 
    transition: fill 0.3s;
}
.roulette-wheel .segment:hover {
    fill: rgba(0, 255, 0, 0.4);
}
.roulette-wheel .segment.active {
    fill: rgba(0, 255, 0, 0.9);
}

.roulette-wheel .segment_no {
    fill: rgba(255, 0, 0, 0.1); 
    transition: fill 0.3s;
}
.roulette-wheel .segment_no:hover {
    fill: rgba(255, 0, 0, 0.4);
}



.roulette-ball {
    position: absolute;
    top: 90%;
    left: 46%;
    width: 30px;
    height: 30px;
    background-color: white;
    background-image: radial-gradient(circle, #fff, #e6e6e6);
    border-radius: 50%;
    transform-origin: 50% -140px;  /* Это расстояние между центром колеса и центром шарика */
    z-index: 1;
    box-shadow: 
        inset -2px -2px 4px 0 rgba(255, 255, 255, 0.8),
        inset 2px 2px 4px 0 rgba(0, 0, 0, 0.2),
        /* Внешняя тень */
        0 2px 5px 0 rgba(0, 0, 0, 0.3);
    
    opacity: 0;
}




.telegram-button {
    display: inline-block;
    padding: 5px 10px;
    font-size: 14px;
    color: white!important;
    background-color: #0088cc;
    border-radius: 5px;
    border: none;
    text-align: center;
    text-decoration: none;
    font-family: Arial, sans-serif;
    box-shadow: 0 2px 3px rgba(0,0,0,0.3);
    transition: background-color 0.3s, box-shadow 0.3s;
}
.telegram-button:hover {
    background-color: #00aaff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}
.telegram-button:active {
    background-color: #0088cc;
    box-shadow: 0 2px 3px rgba(0,0,0,0.3);
}





/* AI Школа */
.school_container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}
.school_container h1 {
    color: #65e271;
    text-align: center;
    margin-bottom: 20px;
}
.school_container h2 {
    color: #aaa;
}
.school_container .section {
    margin-bottom: 40px;
}
.school_container .course-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.school_container .course-card {
    background-color: #102027;
    padding: 20px;
    border-radius: 10px;
    width: 48%;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.school_container .course-card h3 {
    color: #00c9ff;
}
.school_container .course-card p {
    color: #b3b3b3;
}
.school_container .course-card .btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #00c9ff;
    color: #01110E;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
}
.school_container .course-card .btn:hover {
    background-color: #4e8d6b;
    color: #fff;
}

.school_container .progress-bar {
    background-color: #1c3b3b;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
}
.school_container .progress {
    background-color: #65e271;
    height: 20px;
    text-align: center;
    color: #01110E;
    font-weight: bold;
    width: 0;
}
.school_container .empty-courses {
    text-align: center;
    color: #ccc;
}
.school_container .category {
    margin-bottom: 20px;
}
.school_container .category h2 {
    color: #65e271;
    margin-bottom: 10px;
}
.school_container .filter-section {
    margin-bottom: 30px;
    text-align: center;
}
.school_container .filter-section label {
    color: #fff;
}
.school_container .filter-section select {
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #1c3b3b;
    color: #fff;
}

.school_container .section h2 {
    color: #00c9ff;
    font-size: 24px;
    margin-bottom: 15px;
}
.school_container .section p {
    color: #ffffff;
}

.school_container .popular-courses, .achievements {
    display: flex;
    justify-content: space-between;
}
.school_container .course-card, .achievement-card {
    background-color: #102027;
    padding: 20px;
    border-radius: 10px;
    width: 32%;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.school_container .course-card h3, .achievement-card h3, .news-updates h3 {
    color: #4e8d6b;
}
.school_container .news-updates, .feedback {
    background-color: #1c3b3b;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.school_container .news-item, .feedback-item {
    margin-bottom: 15px;
}
.school_container .news-item:last-child, .feedback-item:last-child {
    margin-bottom: 0;
}

.card-cbg {
    background-image: url("/assets/images/ls_depo/colorful2.jpg"); 
    background-size: cover; 
    background-position: center;    
}

.sidebar_logo {
    position: fixed; 
    top: 0;
}
.collapsed-sidebar .sidebar_logo {
    display: none!important;
}


.urllink {
    color: red;
}
.title-sub-step {
    font-weight: bold;
    font-size: 25px;
    margin-bottom: 10px;
}



.post-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 20px;
}
.post-buttons a {
    text-decoration: none;
    padding: 6px 12px;
    background-color: #f1f1f1;
    border-radius: 6px;
    font-weight: 500;
    color: #333;
    border: 1px solid #ccc;
    transition: all 0.2s ease;
}
.post-buttons a:hover {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
.step-title {
    background-color: #f8f9fa;
    padding: 10px 15px;
    border-left: 4px solid #007bff;
    font-weight: 600;
    margin-bottom: 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.step-title i {
    color: #007bff;
}



.payout-marquee-container {
    height: 280px;
    overflow: hidden;
    position: relative;
    background: #1e1f29; /* Тёмный фон под дизайн */
    border: 1px solid #323544; /* Единый стиль рамок */
    border-radius: 8px;
    padding: 5px 12px;
}

.payout-line {
    font-size: 14px;
    color: #d1d5db; /* светло-серый текст */
    padding: 8px 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.payout-line img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 8px;
    border: 1px solid #444;
    object-fit: cover;
}

.payout-line strong {
    color: #10b981; /* ярко-зелёный (выплата) */
}

.payout-line .text-warning {
    color: #fbbf24; /* жёлтое имя */
}

.card-body .btn-outline-success {
    border-color: #10b981;
    color: #10b981;
}

.card-body .btn-outline-success:hover {
    background: #10b981;
    color: #fff;
}