.logo-text {
    color: var(--phoenix-theme-wizard-complete-color);
    /*color: #3888ff;*/ /*albastru*/
}

/* BEGIN progressbar*/

  .progress {
    position: relative;
    background-color: #01110b; /* Dark background */
    border-radius: 0.5rem;
    overflow: hidden;
    height: 12px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  }

  /* Shimmer effect overlay */
  .progress::before {
    content: '';
    position: absolute;
    top: 0;
    left: -30%;
    width: 30%;
    height: 100%;
    background-color: #caf5be;
    animation: loading-fill 3.5s ease-in-out infinite;
    z-index: 0;
    border-radius: 0.5rem;
  }

  .progress-bar {
    position: relative;
    height: 100%;
    width: 0%;
    background-color: #288ade;
    background-image: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.15) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.15) 50%,
      rgba(255, 255, 255, 0.15) 75%,
      transparent 75%,
      transparent
    );
    background-size: 40px 40px;
    animation: progress-stripes 1s linear infinite reverse;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
    transition: width 0.3s ease;
  }

  .progress_paused .progress-bar {
    animation: none !important;
  }
  .progress_paused::before {
    animation: none !important;
  }  

  @keyframes progress-stripes {
    0% {
      background-position: 40px 0;
    }
    100% {
      background-position: 0 0;
    }
  }

  @keyframes loading-fill {
    0% {
      left: -30%;
      width: 30%;
    }

    100% {
      left: 100%;
      width: 30%;
    }
  }

/* END progressbar*/





/* BEGIN Facem butoanele sa se mareasca daca este pe mobil*/

@media screen and (min-width: 0px) and (max-width: 399px) { /*daca ecranul este mic pe telefon*/
    
    .col-auto { /*a trebuit sa fac asta lata cand esti pe mobil pentru ca multe butoane sunt in .col-auto sper sa nu se fi afectat alte lucruri*/
        width: 100%;
    }

    #create_campaign_btn, #create_a_new_seo_campaign_btn, #add_new_traffic_urls_btn, #add_new_video_urls_btn, #add_new_social_urls_btn, #check_my_website_btn, #suggestion_button, #add_new_AI_btn { /* anumite butoane se var marii la maxim pe telefon*/
        width: 100%;
        /*opacity: 0.95;*/
    }

}

/* END Facem butoanele sa se mareasca daca este pe mobil*/










/* --- BEGIN pagini --- */

#\/app\/contact-us {
    background-image: url(/app/img/pagini-bg-dreapa-sus/contact-us.png);
    background-repeat: no-repeat;
    background-size: 54px;
    background-position: right 9px top 2px;
}
#\/app\/tutorial {
    background-image: url(/app/img/pagini-bg-dreapa-sus/tutorial.png);
    background-repeat: no-repeat;
    background-size: 57px;
    background-position: right 10px top 4px;
}
#\/app\/dashboard {
}

#\/app\/check-my-website .card {
    background-image: url(/app/img/pagini-bg-dreapa-sus/check-my-website.png);
    background-repeat: no-repeat;
    background-size: 69px;
    background-position: right 12px top 11px;
}
@media screen and (min-width: 0px) and (max-width: 575px) { /*daca ecranul este mic pe telefon*/
#\/app\/check-my-website .card {
    background-size: 47px;
}
}

#\/app\/cpu-usage {
}

#\/app\/my-server-status {
    background-image: url(/app/img/pagini-bg-dreapa-sus/my-server-status.png);
    background-repeat: no-repeat;
    background-size: 67px;
    background-position: right 1px top 1px;
}
@media screen and (min-width: 0px) and (max-width: 575px) { /*daca ecranul este mic pe telefon*/
#\/app\/my-server-status {
    background-size: 43px;
    background-position: right 0px top 0px
}
}

#\/app\/create-a-new-seo-campaign {
    background-image: url(/app/img/pagini-bg-dreapa-sus/create-a-new-seo-campaign.png);
    background-repeat: no-repeat;
    background-size: 114px;
    background-position: right 1px top 1px;
}
@media screen and (min-width: 0px) and (max-width: 399px) { /*daca ecranul este mic pe telefon*/
#\/app\/create-a-new-seo-campaign {
    background-size: 87px;
    background-position: right 0px top 0px;
}
}


#\/app\/campaign-tasks {
    background-image: url(/app/img/pagini-bg-dreapa-sus/campaign-tasks.png);
    background-repeat: no-repeat;
    background-size: 114px;
    background-position: right 1px top 1px;
}

#\/app\/keyword-research .card {
    background-image: url(/app/img/pagini-bg-dreapa-sus/keyword-research.png);
    background-repeat: no-repeat;
    background-size: 96px;
    background-position: right 25px top 25px;
}
@media screen and (min-width: 0px) and (max-width: 575px) { /*daca ecranul este mic pe telefon*/
#\/app\/keyword-research .card {
    background-size: 81px;
    background-position: right 5px top 4px;
}
}


#\/app\/AI-SEO {
    background-image: url(/app/img/pagini-bg-dreapa-sus/AI-SEO.png);
    background-repeat: no-repeat;
    background-size: 137px;
    background-position: right 1px top 1px;
}
@media screen and (min-width: 0px) and (max-width: 1136px) { /*daca ecranul este mic pe telefon*/
#\/app\/AI-SEO {
    background-position: right -5px top 0px;
    background-size: 84px;
}
}


#\/app\/seo-campaigns {
    background-image: url(/app/img/pagini-bg-dreapa-sus/seo-campaigns.png);
    background-repeat: no-repeat;
    background-size: 137px;
    background-position: right 1px top 1px;
}
@media screen and (min-width: 0px) and (max-width: 1136px) { /*daca ecranul este mic pe telefon*/
#\/app\/seo-campaigns {
    background-position: right -5px top -3px;
    background-size: 90px;
}
}


#\/app\/social-signals {
    background-image: url(/app/img/pagini-bg-dreapa-sus/social-signals.png);
    background-repeat: no-repeat;
    background-size: 251px;
    background-position: right 0px top -9px;
}
@media screen and (min-width: 0px) and (max-width: 399px) { /*daca ecranul este mic pe telefon*/
#\/app\/social-signals {
    background-size: 125px;
    background-position: right 0px top 0px;
}
}


#\/app\/AI-visibility {
    background-image: url(/app/img/pagini-bg-dreapa-sus/AI-visibility.png);
    background-repeat: no-repeat;
    background-size: 251px;
    background-position: right 0px top -9px;
}
@media screen and (min-width: 0px) and (max-width: 399px) { /*daca ecranul este mic pe telefon*/
#\/app\/AI-visibility {
    background-size: 125px;
    background-position: right 0px top 0px;
}
}


#\/app\/video-views {
    background-image: url(/app/img/pagini-bg-dreapa-sus/video-views.png);
    background-repeat: no-repeat;
    background-size: 251px;
    background-position: right -21px top -9px;
}
@media screen and (min-width: 0px) and (max-width: 399px) { /*daca ecranul este mic pe telefon*/
#\/app\/video-views {
    background-size: 171px;
    background-position: right -17px top -16px;
}
}


#\/app\/website-traffic {
    background-image: url(/app/img/pagini-bg-dreapa-sus/website-traffic.png);
    background-repeat: no-repeat;
    background-size: 148px;
    background-position: right 3px top 16px;
}
@media screen and (min-width: 0px) and (max-width: 399px) { /*daca ecranul este mic pe telefon*/
#\/app\/website-traffic {
    background-size: 80px;
    background-position: right -7px top 31px;
}
}


#\/app\/pricing {
}
#\/app\/notifications {
    background-image: url(/app/img/pagini-bg-dreapa-sus/notifications.png);
    background-repeat: no-repeat;
    background-size: 81px;
    background-position: right 0px top 0px;
}
@media screen and (min-width: 0px) and (max-width: 575px) { /*daca ecranul este mic pe telefon*/
#\/app\/notifications {
    background-size: 64px;
    background-position: right 5px top 0px;
}
}



#\/app\/settings {
    background-image: url(/app/img/pagini-bg-dreapa-sus/settings.png);
    background-repeat: no-repeat;
    background-size: 70px;
    background-position: right 1px top 9px;
}
#\/app\/faq {

}
#\/app\/page-not-found {

}

/* --- END pagini --- */




/* BEGIN Coloanele le-am facut custom*/

/* (am schimbat 'row' cu 'ovi' am facut custom)
inainte:
<div id="social_table_big" class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xxl-4 g-3 mb-9"></div>
dupa:
<div id="social_table_big" class="row ovi-cols-1 ovi-cols-sm-2 ovi-cols-lg-3 ovi-cols-xxl-4 ovi-cols-xxl-5 g-3 mb-9"></div>
*/

.ovi-cols-1>* {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100%;
}

@media (min-width: 576px) {
    .ovi-cols-sm-2>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 50%;
    }
}

@media (min-width: 1292px/*992px*/) {
    .ovi-cols-lg-3>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 33.3333333333%;
    }
}

@media (min-width: 1600px) { /*1540px*/
    .ovi-cols-xxl-4>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 25%;
    }
}

@media (min-width: 2000px/*1540px*/) {
    .ovi-cols-xxl-5>* {
        -webkit-box-flex: 0;
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: 20%;
    }
}
/*END Coloanele le-am facut custom*/



/*BEGIN modificari la popover-e*/
.popover {
    --phoenix-popover-max-width: 330px; /*am facut popover-ele sa poata fi putin mai late*/
    
    /*schimbam culorile*/
    --phoenix-alert-color: #bc3803;
    --phoenix-alert-bg: #fff6e0;
    --phoenix-alert-border-color: #fff6e0;
    
    background: var(--phoenix-alert-bg);
    border-color:var(--phoenix-alert-border-color);
}

.bs-popover-top>.popover-arrow::after, .bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after {
    border-top-color: red;
}

.popover-body {
  color: var(--phoenix-alert-color); /*schimbam culorile*/
}

/* END modificari la popover-e*/








/* BEGIN buton stanga si poza checkmark.png dreapta*/

.p_stanga_dreapta {
    display: flex;
}

.p_stanga {
    flex-grow: 1;
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis;    
}

.p_dreapta {
    margin-left: 6px;
    margin-top:4px;
    flex-shrink: 0; /* Prevent from shrinking */
    text-align: right;
}


.p_stanga a {
    width:100%;
    /* max-width:100px;*/
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis;    
}      

/* END buton stanga si poza checkmark.png dreapta*/









.titlu_care_se_vede_mai_bine_in_fundal {
    text-shadow: 2px 2px 4px var(--phoenix-body-bg), -2px -2px 4px var(--phoenix-body-bg);
}

#url_live {
    width: 250px;
    padding-left: 5px;
    padding-right: 5px;
}

.logo-text {
    font-weight: 700; /*textul de la logo mai gros*/
}



.titlu_patrat {
    word-break: break-all;
}


.alert-soft-warning { /*la mesajele de apara sus sa fie putin transparente sa se vada fundalul prin ele*/
    opacity: 0.9;
}








/*
<span class="led"></span>
    .led {
        display:inline-block;
            width: 15px;
            height: 1
            background-color: green;
            border-radius: 50%;
            animation: blink 1s infinite alternate;
        }

        @keyframes blink {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0;
            }
        }
*/


#live_url {
    transition: opacity 0.3s ease-in-out;
}







/* BEGIN panou scroll in /app/social-signals*/

.panou_social_live_url {
  width: -webkit-fill-available; /*width merge in chrome*/
  width: -moz-available;         /*width merge in firefox*/
  height: 40px;
  overflow: hidden; /* Hide scrollbars initially */
  white-space: pre-wrap;
  position: relative;

 }

.div_social_live_url {
  width: -webkit-fill-available; /*width merge in chrome*/
  width: -moz-available;         /*width merge in firefox*/

  position: absolute;
  bottom: 0;
}

.div_social_live_url::after { /*cursorul animat*/
  content: '|';
  display: inline-block;
  animation: cursor_blink 1s infinite; /* Add a blinking animation */
  color: var(--phoenix-1100);
}

@keyframes cursor_blink {
  0%, 100% {opacity: 1;}
  50% {opacity: 0;}
}

/* END panou scroll in /app/social-signals*/




/* BEGIN panou scroll in /app/AI-visibility */

.panou_AI_visibility_live_url {
  width: -webkit-fill-available;
  width: -moz-available;
  height: 40px;
  overflow: hidden;
  white-space: pre-wrap;
  position: relative;
}

.div_AI_visibility_live_url {
  width: -webkit-fill-available;
  width: -moz-available;
  position: absolute;
  bottom: 0;
}

/* blinking cursor */
.div_AI_visibility_live_url::after {
  content: '|';
  display: inline-block;
  animation: cursor_blink 1s infinite;
  color: var(--phoenix-1100);
}

/* reuse same animation (you already have it, but safe to keep once) */
@keyframes cursor_blink {
  0%, 100% {opacity: 1;}
  50% {opacity: 0;}
}

/* END panou scroll in /app/AI-visibility */



/* BEGIN buy_now_button_left */
#buy_now_button_left {
  display: none;
  position: fixed;
  bottom: 18px;
  right: 206px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
/*  background-color: #03a84e;*/
  color: white;
  cursor: pointer;
/*  padding: 15px;*/
  border-radius: 4px;
  z-index: 1046; /*trebuie ca daca sa deschis chat-ul nu se mai poate apasa pe buton*/

  /*effect ca butonul de Live chat*/
  -webkit-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;  
    
  box-shadow: 0px 0px 32px 0px rgb(36, 40, 46, 0.3);
}
.buy_now_button_in_dreapta {
    right: 5.3rem!Important;
}
/* END buy_now_button_left */



/* BEGIN chatul mutat mai jos */
.support-chat {
    bottom: 2rem!Important;
}

.btn-support-chat {
    bottom: 1.0rem!Important;
    right: 1.7rem!Important;
}


.support-chat-container.show {
    display: block;
    background-color: red;
}
/* END chatul mutat mai jos */





/*BEGIN effect de button pe toate butoanele*/
button, .btn {
  transition: transform 0.2s ease;
}

button:active, .btn:active {
  transform: scale(0.95);
}
/*END effect de button pe toate butoanele*/


/*BEGIN pentru diagrama din /app/create-a-new-seo-campaign*/
#diagram_iframe {
    width: 100%;
    min-width: 50px;
    height: 400px;
}
@media only screen and (max-width: 500px) { /*on mobile diagrama este mai mica in inaltime*/
#diagram_iframe {
    height: 200px; /*aici poate fi auto*/
}
}
/*END pentru diagrama din /app/create-a-new-seo-campaign*/




/*BEGIN meniul de jos de pe mobil*/
#meniu_jos_mobil {
    display: none;
    justify-content: space-between; /*calculeaza width la butoanele functioneaza cu display: flex;*/
    text-align: center;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 111;
    transform: translateX(-100%);
    transition: transform 0.5s ease;
    animation: slideInFromBottom 0.3s ease-out forwards;

    background-color: var(--phoenix-white);
    border-top: 1px solid var(--phoenix-navbar-vertical-border-color);
    width: 100%;

    padding-left: 4%;
    padding-right: 4%;
}

#meniu_jos_mobil>a {
    width: 100%;
    line-height: 40px;
    display: inline-block;
}


@media only screen and (max-width: 991px) { /*pe mobil sau pe tableta*/
    #meniu_jos_mobil {
        display: flex; /*pe mobil afisem meniul de jos pentru mobil*/
    }

    #buy_now_button_left {bottom: 46px;} /*mutam butonul buy now mai jos*/
    .support-chat {bottom: 3rem!Important;} /*chat window mai jos*/
    .btn-support-chat {bottom: 2.6rem!Important;} /*butonul de chat mai jos*/
}
@media only screen and (min-width: 992px) { /*pe ecran mare*/
    #buy_now_button_left {bottom: 18px!Important} /*mutam butonul buy mai sus pe pozitia default*/
    .support-chat {bottom: 1.0rem!Important;} /*chat window mai sus pe pozitia default*/
    .btn-support-chat {bottom: 1rem!Important;} /*butonul de chat mai jos*/
}


#meniu_jos_mobil.show {
    animation: slideInFromBottom 0.2s ease-out forwards;
}

#meniu_jos_mobil.hide {
    animation: slideOutToBottom 0.2s ease-in forwards;
}

@keyframes slideInFromBottom {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideOutToBottom {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}

#meniu_jos_mobil a.active {
    background-color: var(--phoenix-gray-200);
}
/*END meniul de jos de pe mobil*/







/*BEGIN partead de sus sarea in dreapta cand se deschidea un ferestre modal bug reparat, aparea pe chrome si safari*/
/* bugul este in fisierul /theme-x/public/assets/css/theme.css*/
@media (min-width: 992px) { /*pt chrome*/
  .chrome:not(.mobile):not(.iphone):not(.ipad) .modal-open .navbar-top {
    padding-right: 2.5rem!important; /*inainte era 3.5625rem*/
  }
}

@media (min-width: 992px) { /*pt safari*/
  .safari:not(.ipad):not(.iphone) .modal-open .navbar-top {
    padding-right: 2.5rem!important; /*inainte era 3.5625rem*/
  }
}
/*END partead de sus sarea in dreapta cand se deschidea un ferestre modal bug reparat, aparea pe chrome si safari*/



/*BEGIN cand se deschid ferestre modal dialog sa nu ascunda scrol-ul din dreapta automat (ca se muta totul putin mai in dreapta) */
body.modal-open {
    /*cu acest css se va putea face scroll in spate la dialog dar rezolva problema scrolul ramane vizibil si nu se mai muta tot site-ul putin in dreapta cand se deschide o fereastra modal*/
    overflow: auto !important;
    padding-right: 0 !important;
}
/*END cand se deschid ferestre modal dialog sa nu ascunda scrol-ul din dreapta automat (ca se muta totul putin mai in dreapta) */



/* BEGIN daca ecranul este mic pe telefon ascundem minusul din titlul din pagina /app/AI-SEO*/
@media screen and (min-width: 0px) and (max-width: 409px) { /*daca ecranul este mic pe telefon (cand sare o parte din titlu pe linia 2)*/
    #AI-SEO-minus-character { /* anumite butoane se var marii la maxim pe telefon*/
        visibility: hidden;
    }
}
/* END daca ecranul este mic pe telefon ascundem minusul din titlul din pagina /app/AI-SEO*/



/* BEGIN daca nu suntem pe mobil nu afisem in tabelul /app/AI-SEO in prima coloana textul 'A.I.' */
@media (min-width: 485px) {
    #AI_table thead tr th:first-child {
        visibility: hidden;
    }
}
/* END daca nu suntem pe mobil nu afisem in tabelul /app/AI-SEO in prima coloana textul 'A.I.' */



/* BEGIN notifications un meniu de coboara din dreapta sus este ascuns pe viitor sa il stergem complet*/
#notification_dropdown_menu_div {
    display: none;
}
/* END notifications un meniu de coboara din dreapta sus este ascuns pe viitor sa il stergem complet*/



/*BEGIN latimea la butonul de chat*/
.support-chat+.btn-support-chat {
    width: 9.5rem;
}
/*END latimea la butonul de chat*/



/*BEGIN in thema exista o problema de scroll in fieldurile care au ID si asa o reparam (o problema de scroll cu mouse-ul in KEYWORDS_TO_RANK_FOR_FIELD)*/
[id] {
    scroll-margin-top: 0 !important;
}
/*END in thema exista o problema de scroll in fieldurile care au ID si asa o reparam (o problema de scroll cu mouse-ul in KEYWORDS_TO_RANK_FOR_FIELD)*/




/* CHAT PE MOBIL BEGIN pe telefoanele mici mutam pozele avatar in stanga inainte de mesaj*/
@media (max-width: 440px) {
  /* Received message row: avatar above message */
  #chat_posts_div .chat-message:has(.chat-message-content.received)
  [class*="hover-ac"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
  }

  /* Move received-message avatar slightly left */
  #chat_posts_div .chat-message:has(.chat-message-content.received)
  .avatar {
    margin: 0 0 8px -10px !important;
  }

  /* Received message: natural width, aligned left */
  #chat_posts_div .chat-message-content.received {
    width: auto !important;
    max-width: calc(100%/* - 10px*/) !important;
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  #chat_posts_div .received-message-content {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* Timestamp for received messages */
  #chat_posts_div .chat-message #chat_date_time.ms-7 {
    margin-left: 0 !important;
    text-align: left !important;
  }

  /* Timestamp for sent messages */
  #chat_posts_div .chat-message #chat_date_time:not(.ms-7) {
    margin-left: auto !important;
    margin-right: 0 !important;
    text-align: right !important;
  }
}
/* CHAT PE MOBIL BEGIN pe telefoanele mici mutam pozele avatar in stanga inainte de mesaj*/

/*MARIM POZA IN CHAT LA AVATAR BEGIN la mouse over sau pe mobil la click*/
#chat_posts_div .chat-message .avatar img {
  transition: transform 0.2s ease;
}

#chat_posts_div .chat-message .avatar:hover img,
#chat_posts_div .chat-message .avatar:active img,
#chat_posts_div .chat-message .avatar:focus img {
  transform: scale(1.4);
  z-index: 9999;
  position: relative;
}
/*MARIM POZA IN CHAT LA AVATAR BEGIN la mouse over sau pe mobil la click*/



/*BEGIN in chat pe mobil cand face scroll cu mouser-ul sa nu mute si pagina din spate in scroll*/
.chat .scrollbar {
  overscroll-behavior: contain;
}

.support-chat .card-header,
.support-chat .card-footer {
  touch-action: none;
}
/*END in chat pe mobil cand face scroll cu mouser-ul sa nu mute si pagina din spate in scroll*/




/*BEGIN ascundem butonul de dark theme daca este ecranul pria mic*/
@media (max-width: 600px) {
  .nav-item:has(.theme-control-toggle-label) {
    display: none !important;
  }
}
/*END ascundem butonul de dark theme daca este ecranul pria mic*/