/* default-button */

.default-button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

    width: 118px;
    height: 34px;

    background: url('../images/button.png') no-repeat center / 100% 100%;
    font-size: 13.3px;
    font-weight: 700;
    font-family: var(--font4);
    color: var(--theme__color2);

    border: none;
    cursor: pointer;
    overflow: visible;
}

/* SLIPICI */
.default-button::after {
    content: '';
    position: absolute;
    inset: -3px;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0.0) 30%,
            rgba(255,255,255,0.6) 45%,
            rgba(200,200,200,0.8) 50%,
            rgba(255,255,255,0.6) 55%,
            rgba(255,255,255,0.0) 70%
        );

    background-size: 200% 200%;

    -webkit-mask-image: url('../images/button.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-position: center;

    filter: blur(1.5px);
    opacity: 0;

    animation: sparkleMove 2s linear infinite;
    transition: opacity .25s ease;

    pointer-events: none;
}

.default-button:hover::after {
    opacity: 1;
}

/* Animația de slipici */
@keyframes sparkleMove {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}




.default-button--small {

    font-size: 10.64px;

    padding: 2px 10px 2px;

    background: url('../images/button-small.png') no-repeat center center/100% 100% ;

    height: 28px;

    width: 113px;

    font-size: 10.57px;

}





/* -checkbox-model- */

.checkbox-model {

    appearance: none;

    -moz-appearance: none;

    -webkit-appearance: none;

    height: 14px;

    width: 14px;

    border-radius: 0px;

    font-size: 10px;

    flex-shrink: 0;

    position: relative;

    cursor: pointer;

  }

  .checkbox-model::before {

    content: '';

    height: 100%;

    width: 100%;

    border: 1px solid rgb(117, 93, 66);

    background-color: rgb(35, 1, 1);

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    display: flex;

    border-radius: inherit;

  }

  

  .checkbox-model::after {

    content: '\f00c';

    font-family: "Font Awesome 5 Pro";

    height: 100%;

    width: 100%;

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--theme__color2);

    font-size:inherit;

    border-radius: inherit;

    opacity: 0;

    transition: 0.3s;

  }

  .checkbox-model:checked::after {

    opacity: 1;

  }





/* small-tools */

.h-0 {

    height: 0 !important;

}

.underline {

    text-decoration: underline !important;

}

.h-initial {

    height: initial !important;

}

.space-nowrap {

    white-space: nowrap;

}

.hidden-scroll {

    overflow-y: auto !important;

    -ms-overflow-style: none !important;  /* IE and Edge */

    scrollbar-width: none !important;  /* Firefox */

}

.hidden-scroll::-webkit-scrollbar {

    display: none !important;

}

.pseudo-before-none::before {

    display: none !important;

}

.pseudo-after-none::after {

    display: none !important;

}

.pseudo-none::before,

.pseudo-none::after {

    display: none !important;

}







.flip {

    transform: rotateY(180deg);

}

.flip-x {

    transform: rotateX(180deg);

}

.rotate1_8 {

    transform: rotate(45deg) !important;

}

.rotate2_8 {

    transform: rotate(90deg) !important;

}

.rotate3_8 {

    transform: rotate(135deg) !important;

}

.rotate4_8 {

    transform: rotate(180deg) !important;

}

.rotate5_8 {

    transform: rotate(225deg) !important;

}

.rotate6_8 {

    transform: rotate(270deg) !important;

}

.rotate7_8 {

    transform: rotate(315deg) !important;

}

.rotate8_8 {

    transform: rotate(360deg) !important;

}





/* bg */

.bg-theme1 {

    background: var(--theme__color1) !important;

}

.bg-theme2 {

    background: var(--theme__color2) !important;

}

.bg-theme3 {

    background: var(--theme__color3) !important;

}

.bg-theme4 {

    background: var(--theme__color4) !important;

}



/* hover--bg */

.hover-bg-theme1:hover {

    background: var(--theme__color1) !important;

}

.hover-bg-theme2:hover {

    background: var(--theme__color2) !important;

}

.hover-bg-theme3:hover {

    background: var(--theme__color3) !important;

}

.hover-bg-theme4:hover {

    background: var(--theme__color4) !important;

}





/* fonts */

.font1 {

    font-family: var(--font1);

}

.font2 {

    font-family: var(--font2);

}

.font3 {

    font-family: var(--font3);

}

.font4 {

    font-family: var(--font4);

}





/* text-color */

.color-white {

    color: #fff !important;

}

.color-text {

    color: var(--text__color1) !important;

}

.color-theme1 {

    color: var(--theme__color1) !important;

}

.color-theme2 {

    color: var(--theme__color2) !important;

}

.color-theme3 {

    color: var(--theme__color3) !important;

}

.color-theme4 {

    color: var(--theme__color4) !important;

}





/* text-align */

.text-left {

    text-align: left !important;

}

.text-right {

    text-align: right !important;

}

.text-center {

    text-align: center !important;

}

.text-justified {

    text-align: justify !important;

}





/* font-weights */

.fw-300 {

    font-weight: 300 !important;

}

.fw-400 {

    font-weight: 400 !important;

}

.fw-500 {

    font-weight: 500 !important;

}

.fw-600{

    font-weight: 600!important;

}

.fw-700 {

    font-weight: 700 !important;

}

.fw-800{

    font-weight: 800!important;

}







/* nice-select-edit */

.nice-select {

    height: initial;

    min-height: initial;

    line-height: 1;

    padding: 0 20px 0 0;

    float: none;

    display: inline-block;

    border: none;

}

.nice-select:after {

    margin-top: -2px;

}

.nice-select .list .option,

.nice-select.open .list .option {

    font-size: 16px;

    line-height: initial;

    min-height: initial;

    padding: 13px 15px;

    min-width: 50px;

}

.nice-select .option.selected {

    font-weight: inherit;

}

.nice-select .list {

    border-radius: 2px;

    min-width: 100%;

}



@media (max-width: 767px) {

    .nice-select .list .option,

    .nice-select.open .list .option {

        font-size: 16px;

        line-height: initial;

        min-height: initial;

        padding: 8px 12px;

        min-width: 50px;

    } 

}



/* important */

#scrollUp {

    background-image: url("../images/base/top.png");

    bottom: 20px;

    right: 20px;

    width: 38px;    /* Width of image */

    height: 38px;   /* Height of image */

    color: transparent;

}



.table > tbody > tr > td {

     vertical-align: middle;

}

.table > tbody > tr > th {

     vertical-align: middle;

}



.table>:not(caption)>*>* {

	    background-color: #5b5b5b;

		border-bottom-width: 0;

}



.table-dark {

    --bs-table-striped-bg: #200d0d;

}



.form-control,

.form-control:focus,

.form-control:active {

	border-radius: 0;

    font-size: 12.3px;

    color: #ffffff;

    background-color: #121212;

    border: 1px solid #797979;

}



.btn {

	border-radius: 0;

}

.btn-danger {

	background: #7d7d7d !important;

	border-color: #7d7d7d !important;

}

.btn-danger:hover {

	background: #c7c7c7 !important;

	border-color: #c7c7c7 !important;

}

.alert {

	border-radius: 0;

}

.modal-content {

    background-color: #220707;

}

.modal-header {

    border-bottom: 1px solid #340404;

}

.modal-footer {

    border-top: 1px solid #340404;

}

.list-group-item.active {

    background-color: #150f0e;

    border-color: #8b8887;

}

.list-group-item {

	background-color: #000;

}

.list-group-item:hover, .list-group-item:focus {

	background-color: #000;

	opacity: 0.8;

}



.list-group-item-action,

.list-group-item-action:active,

.list-group-item-action:focus,

.list-group-item-action:hover {

	color: white;

}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {

    color: white;

    background-color: #3b0a0a;

    border-color: #3b0a0a;

}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {

    border-color: #3b0a0a;

}

.nav-tabs {

    border-bottom: 1px solid #3b0a0a;

}

.nav-tabs .nav-link {

	color: white;

}



.card {

    background-color: #3b1919;

    padding: 15px;

	border-radius: 0;

}

/* Navbar modern */
.main-menu ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-menu ul li {
    position: relative;
    margin: 0 15px;
}

.main-menu ul li a {
    color: #fff;
    font-weight: 500;
    padding: 8px 12px;
    transition: all 0.3s ease;
    position: relative;
}

.main-menu ul li a::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #ffd700; /* aur */
    transition: width 0.3s;
    position: absolute;
    bottom: 0;
    left: 0;
}

.main-menu ul li a:hover::after {
    width: 100%;
}

.header-logo img {
    height: 50px;
    transition: transform 0.3s;
}

.header-logo img:hover {
    transform: scale(1.05);
}


<style>
/* =========================================================
   ELVERON FRAME pentru containerul de NEWS din INDEX
   Se aplică pe: <div class="m-box xy-news-part"> ... </div>
   ========================================================= */

/* chenarul mare ca la Elveron */
.m-box.xy-news-part{
  position: relative;
  padding: 18px 18px 22px;
  border-radius: 10px;

  /* maro elveron-ish */
  background: rgba(74, 48, 28, .75);
  border: 1px solid rgba(255, 210, 160, .14);

  /* shadow + inner highlight */
  box-shadow:
    0 18px 40px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);

  /* ca să nu se “lipească” de slider */
  margin-top: 16px;

  /* să nu iasă conținutul din chenar */
  overflow: hidden;
}

/* o linie subtire sus ca în Elveron */
.m-box.xy-news-part::before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:64px;             /* sub header-ul “NOUTĂȚI + taburi” */
  height:1px;
  background: rgba(255,255,255,.10);
}

/* fix: dacă header-ul tău are border separat, îl scoatem ca să nu dubleze */
.m-box.xy-news-part .xy-news-header{
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 14px !important;
}

/* taburile să stea “în chenar” frumos */
.m-box.xy-news-part .elv-tabs{
  gap: 14px !important;
}

/* taburile mai aproape 1:1 ca la Elveron */
.m-box.xy-news-part .elv-tabs a{
  min-width: 170px !important;
  padding: 14px 18px !important;
  border-radius: 8px !important;

  background: rgba(54, 34, 20, .75) !important;
  border: 1px solid rgba(255, 210, 160, .16) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 10px 22px rgba(0,0,0,.35);
}

.m-box.xy-news-part .elv-tabs a.active{
  background: rgba(70, 42, 24, .92) !important;
  border-color: rgba(255, 210, 160, .28) !important;
}

/* cardurile din feed să arate ca în Elveron (mai “plate”, mai maro) */
.m-box.xy-news-part .elv-card{
  background: rgba(50, 30, 18, .55) !important;
  border: 1px solid rgba(255, 210, 160, .10) !important;
  box-shadow: none !important;
  border-radius: 8px !important;
}

/* linia din headerul cardului */
.m-box.xy-news-part .elv-top{
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}

/* butonul “Citește mai mult” roșiatic ca la Elveron */
.m-box.xy-news-part .elv-btn{
  background: rgba(150, 50, 25, .55) !important;
  border: 1px solid rgba(255, 120, 90, .28) !important;
  border-radius: 6px !important;
  padding: 12px 18px !important;
}

.m-box.xy-news-part .elv-btn:hover{
  background: rgba(150, 50, 25, .70) !important;
}

/* thumb cu border ca la Elveron */
.m-box.xy-news-part .elv-thumb{
  border-radius: 8px !important;
  border: 1px solid rgba(255, 210, 160, .12) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}

/* RESPONSIVE - să nu iasă din chenar */
@media (max-width: 900px){
  .m-box.xy-news-part::before{
    top: 112px; /* tabs coboară pe rând 2 */
  }
}
</style>
