@font-face{
    font-family:'Digital-7';
    src:url('../fonts/digital-7.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

/* =========================================================
   POWER VISUAL THEME FOR OGP SIMPLEBOOTSTRAP
   - removes the old SimpleBootstrap visual language
   - uses the Power AGENCYR font
   - keeps OGP markup/functionality intact
   - horizontal Power navigation, no navigation icons
   ========================================================= */

@font-face{
    font-family:'AGENCYR';
    src:url('../fonts/AGENCYR.TTF') format('truetype');
    font-weight:normal;
    font-style:normal;
    font-display:swap;
}

/* Remove the old rounded/light Bootstrap visual language. */
html,body{
    min-height:100%;
}
html{
    background:#090c10;
}
body{
    margin:0;
    padding:0;
    color:#fff !important;
    background:#090c10 url('../images/bg/power-pozadina.jpg') center top / cover fixed no-repeat !important;
    font-family:'AGENCYR',Arial,sans-serif !important;
    font-size:16px !important;
    line-height:1.35;
    letter-spacing:0;
}
body *{
    font-family:'AGENCYR',Arial,sans-serif;
}
code,pre,kbd,samp{
    font-family:monospace,monospace !important;
}

/* One Power canvas, same visual width as the Power site. */
.container-fluid{
    width:960px;
    max-width:calc(100% - 20px);
    margin:0 auto !important;
    padding:0 !important;
}
.container-fluid > .row{
    margin-left:0 !important;
    margin-right:0 !important;
}

/* =========================================================
   HEADER / LOGO
   ========================================================= */
.logo{
    width:100% !important;
    height:146px !important;
    min-height:146px !important;
    margin: 30px auto 0 !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}
.logo h2{
    display:block !important;
    width:100% !important;
    height:146px !important;
    min-height:146px !important;
    margin:0 !important;
    padding:0 !important;
    background:url('../images/power-logo.png') center center / 100% auto no-repeat !important;
    border:0 !important;
    color:transparent !important;
    font-size:0 !important;
    line-height:0 !important;
    text-indent:-9999px;
    overflow:hidden;
}
.logo h1,.logo h3{
    display:none !important;
}

/* =========================================================
   NAVIGATION - POWER, WITHOUT ICONS
   ========================================================= */
.navigation{
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    float:none !important;
}
.navigation > .navbar,
.navigation .navbar{
    min-height:58px !important;
    height:auto !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:url('../images/power-menu.png') repeat-x center center !important;
    background-color:#101923 !important;
    box-shadow:0 2px 7px rgba(0,0,0,.55) !important;
}
.navigation .navbar-header{
    min-height:58px !important;
}
.navigation .navbar-brand{
    display:none !important;
}
.navigation .navbar-collapse{
    border-top:0 !important;
    padding:0 !important;
}
.navigation .navbar-nav,
.navigation .nav{
    float:none !important;
    display:flex !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
}
.navigation .navbar-nav > li,
.navigation .nav > li{
    float:none !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
}
.navigation .navbar-nav > li > a,
.navigation .nav > li > a{
    display:block !important;
    height:58px !important;
    line-height:22px !important;
    padding:18px 16px !important;
    margin:0 !important;
    color:#fff !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    text-shadow:0 1px 1px #000 !important;
    font-family:'AGENCYR',Arial,sans-serif !important;
    font-size:18px !important;
    font-weight:normal !important;
    text-transform:uppercase !important;
    white-space:nowrap;
}
.navigation .navbar-nav > li > a:hover,
.navigation .navbar-nav > li.active > a,
.navigation .navbar-nav > li.open > a,
.navigation .nav > li > a:hover,
.navigation .nav > li.active > a{
    color:#fff !important;
    background:url('../images/power-menu-active.png') repeat-x center !important;
    box-shadow:none !important;
}
.navigation .dropdown-menu{
    margin:0 !important;
    padding:0 !important;
    min-width:190px !important;
    background:rgba(0,0,0,.97) !important;
    border:1px solid #2b4e7f !important;
    border-radius:0 !important;
    box-shadow:0 7px 18px rgba(0,0,0,.55) !important;
}
.navigation .dropdown-menu > li > a{
    padding:10px 14px !important;
    color:#fff !important;
    background:transparent !important;
    font-family:'AGENCYR',Arial,sans-serif !important;
    font-size:16px !important;
    text-transform:uppercase !important;
}
.navigation .dropdown-menu > li > a:hover{
    color:#fff !important;
    background:#2b4e7f !important;
}
/* No icons in the navigation. */
.navigation .fa,
.navigation .glyphicon,
.navigation i,
.navigation .icon,
.navigation .icon-*{
    display:none !important;
}
.navigation .navbar-toggle{
    margin:11px 12px !important;
    border:1px solid #3d6290 !important;
    border-radius:0 !important;
    background:#1b2c43 !important;
}
.navigation .navbar-toggle .fa,
.navigation .navbar-toggle .glyphicon,
.navigation .navbar-toggle i{
    display:none !important;
}
.navigation .navbar-toggle:after{
    content:'MENU';
    color:#fff;
    font-family:'AGENCYR',Arial,sans-serif;
    font-size:15px;
}
.navigation .caret{
    border-top-color:#fff !important;
    border-bottom-color:#fff !important;
}

/* =========================================================
   MAIN / CONTENT
   ========================================================= */
.main{
    width:100% !important;
    max-width:none !important;
    float:none !important;
    margin:0 !important;
    padding:0 !important;
    min-height:520px;
    background:rgba(7,10,14,.78);
    border-left:1px solid rgba(43,78,127,.35);
    border-right:1px solid rgba(43,78,127,.35);
}
.main-content{
    width:100% !important;
    max-width:none !important;
}
.main .row{
    margin-left:0 !important;
    margin-right:0 !important;
}
.main .row > [class*="col-"]{
    box-sizing:border-box;
}

/* Power-style panels, blocks and forms. */
.bloc,
.panel,
.well,
fieldset,
.infoBox,
.login-container,
.modal-content,
.jumbotron,
.list-group-item{
    color:#fff !important;
    
    
    border-radius:0 !important;
    box-shadow:none !important;
}
.panel-heading,
.panel-footer,
.modal-header,
.modal-footer{
    color:#fff !important;
    background:rgba(27,31,39,.96) !important;
    border-color:#344967 !important;
    border-radius:0 !important;
}
.panel-title,
h1,h2,h3,h4,h5,h6{
    color:#fff !important;
    font-family:'AGENCYR',Arial,sans-serif !important;
    text-transform:uppercase !important;
    font-weight:normal !important;
}
h1,h2,h3,h4,h5,h6{
    border-bottom:1px solid #434857 !important;
    padding-bottom:8px !important;
}
a{
    color:#fff !important;
}
a:hover,a:focus{
    color:#6b9bd0 !important;
    text-decoration:none !important;
}
p,label,td,th,li{
    color:#fff !important;
}

/* Tables exactly in the dark Power family. */
.table,
table:not(.online_servers){
    color:#fff !important;
    background:rgba(11,14,19,.84) !important;
    border:1px solid #344967 !important;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
th{
    color:#fff !important;
    background:rgba(26,30,37,.96) !important;
    border-color:#344967 !important;
    text-transform:uppercase !important;
    font-weight:normal !important;
}
.table > tbody > tr > td,
.table > tfoot > tr > td{
    color:#fff !important;
    background:rgba(14,18,24,.78) !important;
    border-color:rgba(52,73,103,.7) !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > td{
    background:rgba(30,35,44,.72) !important;
}
.table-hover > tbody > tr:hover > td{
    background:rgba(43,78,127,.38) !important;
}

/* Forms. */
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
input[type=text],
input[type=password],
input[type=email],
input[type=number],
select,
textarea{
    color:#fff !important;
    background:rgba(10,13,18,.92) !important;
    border:1px solid #344967 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}
.form-control:focus,
input:focus,
select:focus,
textarea:focus{
    border-color:#4d78aa !important;
    box-shadow:0 0 0 1px rgba(77,120,170,.3) !important;
    outline:none !important;
}
select option{
    color:#fff;
    background:#11151b;
}

/* Power buttons. */
.btn,
button,
input[type=submit],
input[type=button]{
    color:#fff !important;
    background:#2b4e7f !important;
    background-image:none !important;
    border:1px solid #416897 !important;
    border-radius:2px !important;
    box-shadow:none !important;
    text-shadow:0 1px 1px #000 !important;
}
.btn:hover,
.btn:focus,
button:hover,
input[type=submit]:hover,
input[type=button]:hover{
    color:#fff !important;
    background:#356298 !important;
    border-color:#5b84b5 !important;
}

/* OGP images and server/game content. */
img{
    max-width:100%;
    height:auto;
}
.main img{
    object-fit:contain;
}
.image-tooltip + .tooltip > .tooltip-inner{
    background:#11151b !important;
    color:#fff !important;
}
img[src*="image_not_found"]{
    opacity:.72;
}
.table-responsive{
    border:0 !important;
}

/* Status colours remain readable. */
.online{color:#65c779 !important;}
.offline{color:#e36a6a !important;}

/* =========================================================
   FOOTER - same visual structure as Power website
   ========================================================= */
.footer{
    position:relative;
    width:100% !important;
    min-height:48px !important;
    margin:0 !important;
    padding:13px 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:15px;
    box-sizing:border-box;
    color:#fff !important;
    background:rgba(0,0,0,.90) !important;
    border-top:1px solid #2b4e7f !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    font-family:'AGENCYR',Arial,sans-serif !important;
    text-transform:uppercase;
    font-size:14px !important;
}
.footer a{
    color:#fff !important;
}
.footer a:hover{
    color:#6b9bd0 !important;
}
.power-footer-left,
.power-footer-center,
.power-footer-right{
    flex:1 1 33.333%;
    white-space:nowrap;
}
.power-footer-left{text-align:left;}
.power-footer-center{text-align:center;}
.power-footer-right{text-align:right;}
.power-footer-separator{
    margin:0 5px;
}

/* Remove old SimpleBootstrap footer styles. */
.footer.center{
    text-align:initial !important;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width:767px){
    .container-fluid{
        width:100%;
        max-width:100%;
    }
    .logo,
    .logo h2{
        height:auto !important;
        min-height:95px !important;
    }
    .logo h2{
        background-size:100% auto !important;
    }
    .navigation .navbar-nav,
    .navigation .nav{
        display:block !important;
    }
    .navigation .navbar-nav > li > a,
    .navigation .nav > li > a{
        height:auto !important;
        padding:12px 14px !important;
    }
    .navigation .dropdown-menu{
        position:static !important;
        width:100% !important;
        box-shadow:none !important;
    }
    .main{
        min-height:400px;
    }
    .footer{
        display:block !important;
        text-align:center !important;
        line-height:24px;
    }
    .power-footer-left,
    .power-footer-center,
    .power-footer-right{
        display:block;
        text-align:center;
        white-space:normal;
    }
}

/* Prevent content from creating horizontal page overflow. */
.main pre,
.main code,
.main .table-responsive{
    max-width:100%;
    overflow:auto;
}


/* =========================================================
   FINAL POWER ALIGNMENT
   ========================================================= */

/* The OGP content canvas stays centered like Power. */
.container-fluid{
    width:960px !important;
    max-width:calc(100% - 20px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* Power navigation: one horizontal strip, no icons. */
.navigation{
    width:100% !important;
    float:none !important;
    display:block !important;
    margin:0 !important;
    padding:0 !important;
}
.navigation .navbar{
    width:100% !important;
    min-height:58px !important;
    border-radius:0 !important;
}
.navigation .navbar-nav{
    display:flex !important;
    flex-wrap:nowrap !important;
    align-items:stretch !important;
    justify-content:flex-start !important;
}
.navigation .navbar-nav > li{
    float:none !important;
}
.navigation .navbar-nav > li > a{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:58px !important;
    height:58px !important;
    padding:0 16px !important;
    line-height:58px !important;
    font-size:18px !important;
}
.navigation a i,
.navigation a .fa,
.navigation a .glyphicon,
.navigation a .power-nav-icon,
.navigation a [class*="icon-"]{
    display:none !important;
}

/* Keep the mobile menu icon-free as well. */
.navigation .navbar-toggle:before{
    content:'MENU';
    color:#fff;
    font-family:'AGENCYR',Arial,sans-serif;
    font-size:15px;
}
.navigation .navbar-toggle:after{
    display:none !important;
}

/* Main content is the same centered Power canvas. */
.main{
    width:100% !important;
    float:none !important;
    margin:0 !important;
    padding:0 !important;
    background:rgba(7,10,14,.78) !important;
}

/* Footer breaks out of the 960px canvas and spans the whole viewport. */
.footer{
    position:relative !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width:100vw !important;
    max-width:100vw !important;
    min-height:48px !important;
    margin:0 !important;
    padding:13px max(12px, calc((100vw - 960px)/2 + 12px)) !important;
    box-sizing:border-box !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    background:rgba(0,0,0,.94) !important;
    border-top:1px solid #2b4e7f !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;
    border-radius:0 !important;
}

/* No legacy rounded footer treatment. */
.col.footer{
    border-radius:0 !important;
}

/* Power typography everywhere, including elements with Bootstrap/module rules. */
body,
body *:not(code):not(pre):not(kbd):not(samp){
    font-family:'AGENCYR',Arial,sans-serif !important;
}

/* Preserve icon fonts only where OGP functionality explicitly needs them,
   never inside the navigation. */
.fa,
[class*="fa-"]{
    font-family:'FontAwesome' !important;
}
.navigation .fa,
.navigation [class*="fa-"]{
    display:none !important;
}

/* Remove the old FTP AGENCYR look even if its module CSS is cached. */
.ftp_iframe #LoginForm > div > div:first-child{
    font-family:'AGENCYR',Arial,sans-serif !important;
}

@media (max-width:767px){
    .container-fluid{
        width:100% !important;
        max-width:100% !important;
    }
    .navigation .navbar-nav{
        display:block !important;
    }
    .navigation .navbar-nav > li > a{
        height:auto !important;
        min-height:48px !important;
        line-height:48px !important;
        justify-content:flex-start !important;
    }
    .footer{
        left:50% !important;
        transform:translateX(-50%) !important;
        width:100vw !important;
        padding:12px 10px !important;
    }
}



/* =========================================================
   POWER EXACT DESIGN OVERRIDE
   Match the original Power Hosting visual language.
   Navigation is the original Power-style horizontal menu
   with NO FontAwesome/navigation icons.
   ========================================================= */

/* Exact Power base geometry */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100% !important;
}
body {
    background: #000 url('../images/bg/power-pozadina.jpg') center top / cover fixed no-repeat !important;
    color: #fff !important;
    font-family: 'AGENCYR', sans-serif !important;
    font-size: 18px !important;
    line-height: 1.25 !important;
}
body, body * {
    font-family: 'AGENCYR', sans-serif !important;
}
code, pre, kbd, samp {
    font-family: monospace !important;
}

/* Original Power width */
.container-fluid {
    width: 960px !important;
    max-width: 960px !important;
    margin: 30px auto 0 !important;
    padding: 0 !important;
}
.container-fluid > .row {
    margin: 0 !important;
}

/* Header = original Power 960 x 146 logo area */
.logo {
    width: 960px !important;
    max-width: 960px !important;
    height: 146px !important;
    min-height: 146px !important;
    margin: 30px auto 0 !important;
    padding: 0 !important;
    float: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.logo h2 {
    display: block !important;
    width: 960px !important;
    height: 146px !important;
    min-height: 146px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: url('../images/power-logo.png') center top / 960px 146px no-repeat !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -99999px !important;
    border: 0 !important;
}

/* =========================================================
   NAVIGATION
   This targets the actual OGP .menu markup, not Bootstrap
   .navbar-nav (the previous version styled the wrong element).
   ========================================================= */
.navigation {
    width: 960px !important;
    max-width: 960px !important;
    height: 60px !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
    background: url('../images/power-menu.png') repeat-x left top !important;
    background-color: #101923 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.navigation > .navbar,
.navigation .navbar,
.navigation .navbar-collapse {
    width: 100% !important;
    min-height: 60px !important;
    height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Never show the Bootstrap brand/header on desktop */
.navigation .navbar-header {
    display: none !important;
}

/* Actual OGP menu */
.navigation .menu {
    width: 960px !important;
    height: 60px !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

/* Remove the old vertical menu styling */
.navigation .menu > ul {
    width: 960px !important;
    height: 60px !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    line-height: 60px !important;
}

/* Power-style top-level menu item */
.navigation .menu > ul > li {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 60px !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    line-height: 60px !important;
    border: 0 !important;
}

/* Power uses an active background image, not Bootstrap buttons */
.navigation .menu > ul > li:hover,
.navigation .menu > ul > li.active,
.navigation .menu > ul > li.active_poslednji {
    background-image: url('../images/power-menu-active.png') !important;
    background-repeat: repeat-x !important;
    background-position: center top !important;
}
.navigation .menu > ul > li.menu_gp:hover {
    background-image: url('../images/power-menu-active-gp.png') !important;
}
.navigation .menu > ul > li.menu_poslednji:hover,
.navigation .menu > ul > li.active_poslednji {
    background-image: url('../images/power-menu-active-last.png') !important;
}

/* Text = original Power menu typography */
.navigation .menu > ul > li > a,
.navigation .menu > ul > li > a:visited {
    display: block !important;
    width: auto !important;
    height: 60px !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 15px 10px 0 !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-family: 'AGENCYR', sans-serif !important;
    font-size: 20px !important;
    font-weight: bold !important;
    line-height: 30px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

/* Exact first/last spacing from Power */
.navigation .menu > ul > li.menu_prvi > a {
    padding-left: 16px !important;
}
.navigation .menu > ul > li.menu_poslednji > a {
    padding-right: 16px !important;
}

/* Absolutely NO navigation icons / pseudo icons */
.navigation .menu a:before,
.navigation .menu a:after,
.navigation .menu a span:before,
.navigation .menu a span:after,
.navigation .menu .tree:before,
.navigation .menu .tree:after,
.navigation .menu img,
.navigation .menu .fa,
.navigation .menu .glyphicon,
.navigation .menu i,
.navigation .menu [class*="icon-"] {
    display: none !important;
    content: none !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Do not reserve icon space */
.navigation .menu a > span {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Submenus: same dark dropdown language as original Power */
.navigation .menu > ul > li > ul {
    position: absolute !important;
    z-index: 99999 !important;
    left: -99999px !important;
    top: 60px !important;
    width: 190px !important;
    min-width: 190px !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    list-style: none !important;
    background: rgba(0,0,0,.92) !important;
    border: 1px solid #2b4e7f !important;
    box-sizing: border-box !important;
    line-height: 30px !important;
    overflow: visible !important;
}
.navigation .menu > ul > li:hover > ul,
.navigation .menu > ul > li > ul:hover,
.navigation .menu > ul > li.opened > ul {
    left: 0 !important;
}
.navigation .menu > ul > li > ul > li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    line-height: 30px !important;
}
.navigation .menu > ul > li > ul > li > a {
    display: block !important;
    height: auto !important;
    min-height: 30px !important;
    padding: 0 8px !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 30px !important;
    text-transform: none !important;
    white-space: nowrap !important;
}
.navigation .menu > ul > li > ul > li > a:hover {
    color: #fff !important;
    background: #2b4e7f !important;
}

/* Main content: exact Power 960 canvas */
.main {
    width: 960px !important;
    max-width: 960px !important;
    min-height: 500px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: rgba(0,0,0,.62) !important;
    border: 0 !important;
    box-shadow: none !important;
}
.main-content {
    width: 960px !important;
    max-width: 960px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Power-like content typography */
.main h1, .main h2, .main h3, .main h4, .main h5, .main h6 {
    color: #fff !important;
    font-family: 'AGENCYR', sans-serif !important;
    font-weight: bold !important;
    text-transform: none !important;
}
.main h1 { font-size: 24px !important; }
.main h2 { font-size: 20px !important; }
.main h3 { font-size: 18px !important; }
.main p, .main label, .main td, .main th, .main li {
    font-family: 'AGENCYR', sans-serif !important;
}

/* Remove Bootstrap rounded-card appearance */
.main .panel,
.main .well,
.main .bloc,
.main fieldset,
.main .jumbotron,
.main .list-group-item,
.main .modal-content {
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Full-width Power footer */
.footer {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 45px !important;
    height: 45px !important;
    margin: 25px 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    background: rgba(0,0,0,.60) !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-family: 'AGENCYR', sans-serif !important;
    font-size: 15px !important;
    font-weight: bold !important;
    line-height: 45px !important;
}
.footer .power-footer-left,
.footer .power-footer-center,
.footer .power-footer-right {
    box-sizing: border-box !important;
    display: block !important;
    float: left !important;
    height: 45px !important;
    line-height: 45px !important;
    white-space: nowrap !important;
}
.footer .power-footer-left {
    width: calc((100vw - 960px) / 2 + 300px) !important;
    padding-left: max(0px, calc((100vw - 960px) / 2)) !important;
    text-align: left !important;
}
.footer .power-footer-center {
    width: 400px !important;
    text-align: center !important;
}
.footer .power-footer-right {
    width: calc((100vw - 960px) / 2 + 300px) !important;
    padding-right: max(0px, calc((100vw - 960px) / 2)) !important;
    text-align: right !important;
}
.footer a {
    color: #fff !important;
    text-decoration: none !important;
}
.footer a:hover {
    color: #2e6cc2 !important;
}

/* Mobile: keep Power proportions but allow menu wrapping */
@media (max-width: 991px) {
    .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 10px !important;
    }
    .logo,
    .logo h2,
    .navigation,
    .navigation .menu,
    .navigation .menu > ul,
    .main,
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
    }
    .logo,
    .logo h2 {
        height: auto !important;
        min-height: 110px !important;
    }
    .logo h2 {
        background-size: contain !important;
    }
    .navigation {
        height: auto !important;
        min-height: 60px !important;
    }
    .navigation .navbar,
    .navigation .navbar-collapse,
    .navigation .menu {
        height: auto !important;
        min-height: 60px !important;
    }
    .navigation .menu > ul {
        height: auto !important;
        min-height: 60px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        line-height: 60px !important;
    }
    .navigation .menu > ul > li,
    .navigation .menu > ul > li > a {
        height: 60px !important;
        min-height: 60px !important;
    }
    .main {
        min-height: 400px !important;
    }
    .footer {
        height: auto !important;
        min-height: 45px !important;
        line-height: 24px !important;
        padding: 10px 12px !important;
    }
    .footer .power-footer-left,
    .footer .power-footer-center,
    .footer .power-footer-right {
        float: none !important;
        width: 100% !important;
        height: auto !important;
        line-height: 24px !important;
        padding: 0 !important;
        text-align: center !important;
        white-space: normal !important;
    }
}


/* =========================================================
   POWER NAVIGATION - FULL WIDTH BAR / COMPACT TYPOGRAPHY
   ========================================================= */
.navigation {
    width: 100vw !important;
    max-width: none !important;
    float: none !important;
    clear: both !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    background: rgba(0,0,0,.72) !important;
    border: 0 !important;
    box-sizing: border-box !important;
}
.navigation .navbar {
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.navigation .navbar-collapse {
    width: 960px !important;
    max-width: 960px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.navigation .menu,
.navigation .menu > ul {
    width: 960px !important;
    max-width: 960px !important;
    height: 48px !important;
    min-height: 48px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
.navigation .menu > ul {
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
}
.navigation .menu > ul > li {
    height: 48px !important;
    min-height: 48px !important;
    line-height: 48px !important;
    flex: 0 0 auto !important;
}
.navigation .menu > ul > li > a,
.navigation .menu > ul > li > a:visited {
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 12px !important;
    line-height: 48px !important;
    font-family: 'AGENCYR', sans-serif !important;
    font-size: 16px !important;
    font-weight: normal !important;
    letter-spacing: .2px !important;
    text-transform: uppercase !important;
    color: #fff !important;
    background: transparent !important;
}
.navigation .menu > ul > li.menu_prvi > a {
    padding-left: 12px !important;
}
.navigation .menu > ul > li.menu_poslednji > a {
    padding-right: 12px !important;
}

/* full-width menu background, compact Power-style inner menu */
.navigation .menu > ul > li:hover,
.navigation .menu > ul > li.active,
.navigation .menu > ul > li.active_poslednji,
.navigation .menu > ul > li.menu_gp:hover,
.navigation .menu > ul > li.menu_poslednji:hover {
    background-position: center center !important;
    background-size: auto 48px !important;
}

/* Never show or reserve space for OGP navigation icons */
.navigation .menu img,
.navigation .menu i,
.navigation .menu .fa,
.navigation .menu .glyphicon,
.navigation .menu [class*="icon-"],
.navigation .menu a:before,
.navigation .menu a:after,
.navigation .menu span:before,
.navigation .menu span:after {
    display: none !important;
    visibility: hidden !important;
    content: none !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.navigation .menu a > span {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Desktop page width stays Power-like; menu itself is viewport-wide */
@media (min-width: 992px) {
    .navigation {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
}

/* Mobile navigation */
@media (max-width: 991px) {
    .navigation {
        width: 100vw !important;
        height: auto !important;
        min-height: 48px !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
    .navigation .navbar-header {
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        margin: 0 !important;
        padding: 0 12px !important;
    }
    .navigation .navbar-brand {
        display: inline-block !important;
        height: 48px !important;
        line-height: 48px !important;
        padding: 0 !important;
        margin: 0 !important;
        color: #fff !important;
        font-family: 'AGENCYR', sans-serif !important;
        font-size: 16px !important;
        text-transform: uppercase !important;
    }
    .navigation .navbar-toggle {
        display: block !important;
        float: right !important;
        margin: 8px 0 !important;
        padding: 5px 9px !important;
        height: 32px !important;
        min-height: 32px !important;
        line-height: 20px !important;
        border: 1px solid #2e6cc2 !important;
        border-radius: 0 !important;
        background: #111 !important;
        color: #fff !important;
    }
    .navigation .navbar-toggle i {
        display: none !important;
    }
    .navigation .navbar-toggle:after {
        content: "MENU" !important;
        font-family: 'AGENCYR', sans-serif !important;
        font-size: 13px !important;
        color: #fff !important;
    }
    .navigation .navbar-collapse {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-top: 1px solid #233d61 !important;
    }
    .navigation .navbar-collapse.in,
    .navigation .navbar-collapse.collapsing {
        overflow: visible !important;
    }
    .navigation .menu,
    .navigation .menu > ul {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .navigation .menu > ul > li {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        min-height: 42px !important;
        border-bottom: 1px solid rgba(43,78,127,.45) !important;
    }
    .navigation .menu > ul > li > a {
        display: block !important;
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 15px !important;
        line-height: 42px !important;
        font-size: 15px !important;
    }
    .navigation .menu > ul > li > ul {
        position: static !important;
        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-top: 1px solid rgba(43,78,127,.35) !important;
        background: rgba(0,0,0,.35) !important;
    }
    .navigation .menu > ul > li.opened > ul,
    .navigation .menu > ul > li:hover > ul {
        display: block !important;
        left: auto !important;
    }
    .navigation .menu > ul > li > ul > li > a {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 25px !important;
        line-height: 38px !important;
        font-size: 14px !important;
    }
}


/* =========================================================
   POWER NAVIGATION — FINAL / ORIGINAL POWER GEOMETRY
   The supplied Power assets are 58px high, so the navigation
   uses the original 58px bar instead of the previous 48px
   Bootstrap-style approximation.
   ========================================================= */

.navigation {
    width: 100vw !important;
    max-width: none !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 0 !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
    background: url('../images/power-menu.png') repeat-x left top !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.navigation .navbar,
.navigation .navbar-collapse,
.navigation .menu {
    width: 100% !important;
    max-width: none !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.navigation .navbar-header {
    display: none !important;
}

.navigation .menu > ul {
    width: 960px !important;
    max-width: 960px !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    list-style: none !important;
    background: transparent !important;
    line-height: 58px !important;
}

.navigation .menu > ul > li {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    line-height: 58px !important;
}

/* INACTIVE = original Power 10px repeating strip */
.navigation .menu > ul {
    background: url('../images/power-menu.png') repeat-x left top !important;
}

/* ACTIVE = original Power 69px strip, stretched/repeated horizontally */
.navigation .menu > ul > li:hover,
.navigation .menu > ul > li.active,
.navigation .menu > ul > li.active_poslednji,
.navigation .menu > ul > li[class*="menu_link_selected"],
.navigation .menu > ul > li.user_menu_link_selected,
.navigation .menu > ul > li:has(> a[class*="menu_link_selected"]) {
    background-image: url('../images/power-menu-active.png') !important;
    background-repeat: repeat-x !important;
    background-position: center top !important;
    background-size: auto 58px !important;
    background-color: transparent !important;
}

/* Explicit selected-link variants — important because OGP may
   place user_menu_link_selected on the A instead of the LI. */
.navigation .menu > ul > li > a[class*="menu_link_selected"],
.navigation .menu > ul > li > a.user_menu_link_selected,
.navigation .menu a[class$="menu_link_selected"] {
    background-image: url('../images/power-menu-active.png') !important;
    background-repeat: repeat-x !important;
    background-position: center top !important;
    background-size: auto 58px !important;
    background-color: transparent !important;
}

/* Power's special final/GP strips when those OGP classes exist */
.navigation .menu > ul > li.menu_gp:hover,
.navigation .menu > ul > li.menu_gp.active {
    background-image: url('../images/power-menu-active-gp.png') !important;
    background-repeat: repeat-x !important;
    background-position: center top !important;
    background-size: auto 58px !important;
}
.navigation .menu > ul > li.menu_poslednji:hover,
.navigation .menu > ul > li.menu_poslednji.active,
.navigation .menu > ul > li.active_poslednji {
    background-image: url('../images/power-menu-active-last.png') !important;
    background-repeat: repeat-x !important;
    background-position: center top !important;
    background-size: auto 58px !important;
}

/* Exact Power text treatment */
.navigation .menu > ul > li > a,
.navigation .menu > ul > li > a:visited {
    display: block !important;
    width: auto !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-family: 'AGENCYR', sans-serif !important;
    font-size: 18px !important;
    font-weight: normal !important;
    letter-spacing: 0 !important;
    line-height: 58px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
}

.navigation .menu > ul > li.menu_prvi > a {
    padding-left: 16px !important;
}
.navigation .menu > ul > li.menu_poslednji > a {
    padding-right: 16px !important;
}

/* Absolutely remove every OGP menu icon/decorator */
.navigation .menu img,
.navigation .menu i,
.navigation .menu .fa,
.navigation .menu .glyphicon,
.navigation .menu [class*="icon-"],
.navigation .menu a:before,
.navigation .menu a:after,
.navigation .menu a span:before,
.navigation .menu a span:after,
.navigation .menu .tree:before,
.navigation .menu .tree:after {
    display: none !important;
    visibility: hidden !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.navigation .menu a > span {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Original Power-style dropdown */
.navigation .menu > ul > li > ul {
    position: absolute !important;
    z-index: 99999 !important;
    top: 58px !important;
    left: -99999px !important;
    width: auto !important;
    min-width: 190px !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    list-style: none !important;
    background: rgba(0,0,0,.94) !important;
    border: 1px solid #1686af !important;
    border-top: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    line-height: normal !important;
}

.navigation .menu > ul > li:hover > ul,
.navigation .menu > ul > li.active > ul,
.navigation .menu > ul > li.opened > ul,
.navigation .menu > ul > li > ul:hover {
    left: 0 !important;
}

.navigation .menu > ul > li > ul > li {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.navigation .menu > ul > li > ul > li > a {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    font-family: 'AGENCYR', sans-serif !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: auto !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

.navigation .menu > ul > li > ul > li > a:hover,
.navigation .menu > ul > li > ul > li > a[class*="menu_link_selected"],
.navigation .menu > ul > li > ul > li.active > a {
    color: #fff !important;
    background-image: url('../images/power-menu-active.png') !important;
    background-repeat: repeat-x !important;
    background-position: center center !important;
    background-size: auto 36px !important;
    background-color: transparent !important;
}

/* Deeper Power submenus */
.navigation .menu > ul > li > ul > li > ul {
    position: absolute !important;
    left: 100% !important;
    top: -7px !important;
    min-width: 190px !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    background: rgba(0,0,0,.94) !important;
    border: 1px solid #1686af !important;
    display: none !important;
}
.navigation .menu > ul > li > ul > li:hover > ul,
.navigation .menu > ul > li > ul > li.opened > ul {
    display: block !important;
}

/* Mobile: Power menu becomes full-width vertical */
@media (max-width: 991px) {
    .navigation {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: 0 !important;
        height: auto !important;
        min-height: 48px !important;
        background: url('../images/power-menu.png') repeat-x left top !important;
    }
    .navigation .navbar {
        height: auto !important;
        min-height: 48px !important;
    }
    .navigation .navbar-header {
        display: block !important;
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        padding: 0 12px !important;
        box-sizing: border-box !important;
    }
    .navigation .navbar-toggle {
        display: block !important;
        float: right !important;
        margin: 7px 0 !important;
        padding: 5px 10px !important;
        height: 34px !important;
        border: 1px solid #1686af !important;
        border-radius: 0 !important;
        background: rgba(0,0,0,.65) !important;
        color: #fff !important;
    }
    .navigation .navbar-toggle:after {
        content: "MENU" !important;
        font-family: 'AGENCYR', sans-serif !important;
        font-size: 14px !important;
        line-height: 20px !important;
    }
    .navigation .navbar-toggle i,
    .navigation .navbar-toggle .fa {
        display: none !important;
    }
    .navigation .navbar-collapse {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-top: 1px solid #1686af !important;
    }
    .navigation .menu,
    .navigation .menu > ul {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .navigation .menu > ul {
        background: url('../images/power-menu.png') repeat !important;
    }
    .navigation .menu > ul > li {
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        border-bottom: 1px solid rgba(22,134,175,.45) !important;
    }
    .navigation .menu > ul > li > a {
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
        padding: 0 15px !important;
        line-height: 42px !important;
        font-size: 16px !important;
    }
    .navigation .menu > ul > li > ul,
    .navigation .menu > ul > li > ul:hover {
        position: static !important;
        left: auto !important;
        top: auto !important;
        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        background: rgba(0,0,0,.55) !important;
        border: 0 !important;
        border-top: 1px solid rgba(22,134,175,.4) !important;
    }
    .navigation .menu > ul > li.opened > ul,
    .navigation .menu > ul > li.active > ul {
        display: block !important;
    }
    .navigation .menu > ul > li > ul > li > a {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 28px !important;
        line-height: 38px !important;
        font-size: 15px !important;
    }
}


/* =========================================================
   POWER NAVIGATION — FINAL MATCH
   Short OGP labels + original Power proportions/assets.
   ========================================================= */

/* The navigation is a 960px Power canvas with the Power strip
   continuing across the full viewport. */
.navigation {
    position: relative !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: 0 !important;
    padding: 0 !important;
    background: url('../images/power-menu.png') repeat-x left top !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

.navigation .navbar,
.navigation .navbar-collapse,
.navigation .menu {
    width: 100% !important;
    min-height: 58px !important;
    height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.navigation .menu > ul {
    width: 960px !important;
    max-width: calc(100vw - 20px) !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow: visible !important;
    background: url('../images/power-menu.png') repeat-x left top !important;
}

.navigation .menu > ul > li {
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.navigation .menu > ul > li > a,
.navigation .menu > ul > li > a:visited {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: auto !important;
    height: 58px !important;
    min-height: 58px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 17px !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: normal !important;
    line-height: 58px !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,.9) !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Exact Power inactive strip. */
.navigation .menu > ul > li {
    background: transparent url('../images/power-menu.png') repeat-x left top !important;
}

/* Exact Power active strip: repeat the supplied 69x58 image instead
   of stretching it, so the graphic keeps its original proportions. */
.navigation .menu > ul > li:hover,
.navigation .menu > ul > li.active,
.navigation .menu > ul > li[class*="menu_link_selected"],
.navigation .menu > ul > li:has(> a[class*="menu_link_selected"]),
.navigation .menu > ul > li > a:hover,
.navigation .menu > ul > li > a.ready,
.navigation .menu > ul > li > a[class*="menu_link_selected"],
.navigation .menu > ul > li > a.user_menu_link_selected {
    background-image: url('../images/power-menu-active.png') !important;
    background-repeat: repeat-x !important;
    background-position: left top !important;
    background-size: 69px 58px !important;
    background-color: transparent !important;
}

.navigation .menu > ul > li > a:hover,
.navigation .menu > ul > li > a.ready,
.navigation .menu > ul > li > a[class*="menu_link_selected"],
.navigation .menu > ul > li > a.user_menu_link_selected {
    color: #fff !important;
}

/* Special Power end pieces. */
.navigation .menu > ul > li.menu_gp,
.navigation .menu > ul > li.menu_gp:hover,
.navigation .menu > ul > li.menu_gp.active {
    background-image: url('../images/power-menu-active-gp.png') !important;
    background-repeat: repeat-x !important;
    background-size: 98px 58px !important;
}
.navigation .menu > ul > li.menu_poslednji,
.navigation .menu > ul > li.menu_poslednji:hover,
.navigation .menu > ul > li.menu_poslednji.active,
.navigation .menu > ul > li.active_poslednji {
    background-image: url('../images/power-menu-active-last.png') !important;
    background-repeat: repeat-x !important;
    background-size: 78px 58px !important;
}

/* Remove every icon and every old FontAwesome menu decoration. */
.navigation .menu img,
.navigation .menu i,
.navigation .menu .fa,
.navigation .menu .glyphicon,
.navigation .menu [class*="icon-"],
.navigation .menu a:before,
.navigation .menu a:after,
.navigation .menu a span:before,
.navigation .menu a span:after,
.navigation .menu .tree:before,
.navigation .menu .tree:after {
    display: none !important;
    visibility: hidden !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.navigation .menu a > span {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

/* Power dropdown: dark, square and compact. */
.navigation .menu > ul > li > ul {
    position: absolute !important;
    top: 58px !important;
    left: -99999px !important;
    z-index: 100000 !important;
    width: auto !important;
    min-width: 210px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    overflow: visible !important;
    list-style: none !important;
    background: rgba(1,10,16,.98) !important;
    border: 1px solid #076ba6 !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.55) !important;
}

.navigation .menu > ul > li:hover > ul,
.navigation .menu > ul > li.active > ul,
.navigation .menu > ul > li.opened > ul,
.navigation .menu > ul > li > ul:hover {
    left: 0 !important;
}

.navigation .menu > ul > li > ul > li {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

.navigation .menu > ul > li > ul > li > a {
    display: block !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 16px !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: normal !important;
    line-height: 34px !important;
    text-transform: none !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.navigation .menu > ul > li > ul > li > a:hover,
.navigation .menu > ul > li > ul > li > a.ready,
.navigation .menu > ul > li > ul > li > a[class*="menu_link_selected"] {
    color: #fff !important;
    background: url('../images/power-menu-active.png') repeat-x left center !important;
    background-size: 69px 34px !important;
}

/* Nested dropdowns. */
.navigation .menu > ul > li > ul > li > ul {
    position: absolute !important;
    top: -5px !important;
    left: 100% !important;
    min-width: 210px !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    background: rgba(1,10,16,.98) !important;
    border: 1px solid #076ba6 !important;
    display: none !important;
}
.navigation .menu > ul > li > ul > li:hover > ul,
.navigation .menu > ul > li > ul > li.opened > ul {
    display: block !important;
}

/* Mobile keeps the Power graphics but stacks the items. */
@media (max-width: 991px) {
    .navigation {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        height: auto !important;
        min-height: 48px !important;
    }
    .navigation .navbar,
    .navigation .navbar-collapse,
    .navigation .menu {
        height: auto !important;
        min-height: 48px !important;
    }
    .navigation .menu > ul {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        display: block !important;
        background: url('../images/power-menu.png') repeat !important;
    }
    .navigation .menu > ul > li,
    .navigation .menu > ul > li > a {
        width: 100% !important;
        height: 42px !important;
        min-height: 42px !important;
    }
    .navigation .menu > ul > li > a {
        padding: 0 16px !important;
        line-height: 42px !important;
        font-size: 16px !important;
    }
    .navigation .menu > ul > li > ul {
        position: static !important;
        left: auto !important;
        top: auto !important;
        display: none !important;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        background: rgba(0,0,0,.65) !important;
        border: 0 !important;
        border-top: 1px solid #076ba6 !important;
    }
    .navigation .menu > ul > li.active > ul,
    .navigation .menu > ul > li.opened > ul {
        display: block !important;
    }
    .navigation .menu > ul > li > ul > li > a {
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 28px !important;
        line-height: 38px !important;
        font-size: 15px !important;
    }
}


/* =========================================================
   POWER NAV FINAL - IDENTICAL BUTTON TREATMENT
   Every navigation button uses the supplied Power ACTIVE strip.
   Mobile intentionally keeps the exact desktop/PC navigation.
   ========================================================= */

.navigation,
.navigation .navbar,
.navigation .navbar-collapse,
.navigation .menu {
    width: 960px !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.navigation .menu {
    height: 58px !important;
    min-height: 58px !important;
    overflow: visible !important;
}

.navigation .menu > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 960px !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: url('../images/power-menu.png') repeat-x left top !important;
}

/* EVERY top-level button gets the original Power active image.
   The 69x58 image is repeated horizontally, never stretched. */
.navigation .menu > ul > li,
.navigation .menu > ul > li:hover,
.navigation .menu > ul > li.active,
.navigation .menu > ul > li[class*="menu_link_selected"],
.navigation .menu > ul > li.user_menu_link_selected,
.navigation .menu > ul > li:has(> a[class*="menu_link_selected"]) {
    position: relative !important;
    display: block !important;
    flex: 0 0 auto !important;
    height: 58px !important;
    min-height: 58px !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background-image: url('../images/power-menu-active.png') !important;
    background-repeat: repeat-x !important;
    background-position: left top !important;
    background-size: 69px 58px !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* The link itself is the button surface and inherits the same Power strip.
   This makes the active image visible across the complete clickable area. */
.navigation .menu > ul > li > a,
.navigation .menu > ul > li > a:visited,
.navigation .menu > ul > li > a:hover,
.navigation .menu > ul > li > a:focus,
.navigation .menu > ul > li > a.ready,
.navigation .menu > ul > li > a[class*="menu_link_selected"],
.navigation .menu > ul > li > a.user_menu_link_selected {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: auto !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 16px !important;

    color: #fff !important;
    background-image: url('../images/power-menu-active.png') !important;
    background-repeat: repeat-x !important;
    background-position: left top !important;
    background-size: 69px 58px !important;
    background-color: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;

    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 58px !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,.95) !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Do not let the old OGP "ready" state replace the Power strip. */
.navigation .menu > ul > li > a.ready,
.navigation .menu > ul > li > a[class$="menu_link_selected"],
.navigation .menu > ul > li[class$="menu_link_selected"] > a {
    background-image: url('../images/power-menu-active.png') !important;
    background-repeat: repeat-x !important;
    background-position: left top !important;
    background-size: 69px 58px !important;
}

/* Submenu buttons use the same original Power ACTIVE image as well. */
.navigation .menu > ul > li > ul,
.navigation .menu > ul > li > ul > li,
.navigation .menu > ul > li > ul > li > a,
.navigation .menu > ul > li > ul > li > a:hover,
.navigation .menu > ul > li > ul > li > a.ready,
.navigation .menu > ul > li > ul > li > a[class*="menu_link_selected"] {
    font-family: 'AGENCYR', Arial, sans-serif !important;
}

.navigation .menu > ul > li > ul {
    top: 58px !important;
    min-width: 220px !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(4, 10, 17, .98) !important;
    border: 1px solid #133d63 !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 6px 15px rgba(0,0,0,.55) !important;
}

.navigation .menu > ul > li > ul > li {
    display: block !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.navigation .menu > ul > li > ul > li > a,
.navigation .menu > ul > li > ul > li > a:hover,
.navigation .menu > ul > li > ul > li > a:focus,
.navigation .menu > ul > li > ul > li > a.ready,
.navigation .menu > ul > li > ul > li > a[class*="menu_link_selected"] {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 16px !important;

    color: #fff !important;
    background-image: url('../images/power-menu-active.png') !important;
    background-repeat: repeat-x !important;
    background-position: left top !important;
    background-size: 69px 58px !important;
    background-color: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 58px !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,.95) !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Third level keeps the same Power button treatment. */
.navigation .menu > ul > li > ul > li > ul {
    top: 0 !important;
    left: 100% !important;
    min-width: 220px !important;
    background: rgba(4,10,17,.98) !important;
    border: 1px solid #133d63 !important;
    border-top: 0 !important;
}

.navigation .menu > ul > li > ul > li > ul > li,
.navigation .menu > ul > li > ul > li > ul > li > a {
    height: 58px !important;
    min-height: 58px !important;
}

.navigation .menu > ul > li > ul > li > ul > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    background: url('../images/power-menu-active.png') repeat-x left top !important;
    background-size: 69px 58px !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 15px !important;
    line-height: 58px !important;
    text-transform: uppercase !important;
}

/* Remove every old icon/arrow generated by OGP. */
.navigation .menu img,
.navigation .menu i,
.navigation .menu .fa,
.navigation .menu .glyphicon,
.navigation .menu [class*="icon-"],
.navigation .menu a:before,
.navigation .menu a:after,
.navigation .menu a span:before,
.navigation .menu a span:after,
.navigation .menu .tree:before,
.navigation .menu .tree:after {
    display: none !important;
    visibility: hidden !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.navigation .menu a > span {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
}

/* Mobile = EXACT same PC navigation.
   No hamburger, no vertical stacking, no smaller font, no 42px buttons. */
@media (max-width: 991px) {
    html, body {
        min-width: 0 !important;
        overflow-x: auto !important;
    }

    .container-fluid {
        width: 960px !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .navigation,
    .navigation .navbar,
    .navigation .navbar-collapse,
    .navigation .menu,
    .navigation .menu > ul {
        width: 960px !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .navigation .menu {
        height: 58px !important;
        min-height: 58px !important;
        overflow: visible !important;
    }

    .navigation .menu > ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        height: 58px !important;
        min-height: 58px !important;
        overflow: visible !important;
    }

    .navigation .menu > ul > li,
    .navigation .menu > ul > li > a {
        width: auto !important;
        height: 58px !important;
        min-height: 58px !important;
    }

    .navigation .menu > ul > li > ul {
        position: absolute !important;
        top: 58px !important;
        left: -99999px !important;
        width: max-content !important;
        min-width: 220px !important;
        display: block !important;
    }

    .navigation .menu > ul > li:hover > ul,
    .navigation .menu > ul > li.active > ul,
    .navigation .menu > ul > li.opened > ul {
        left: 0 !important;
    }
}

/* Keep the Power font loaded and authoritative for navigation text. */
.navigation .menu,
.navigation .menu *,
.navigation .menu a,
.navigation .menu span {
    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-weight: normal !important;
    font-style: normal !important;
}



/* =========================================================
   POWER NAVIGATION — FINAL CLEAN MATCH
   Normal buttons = power-menu.png
   Active/hover top-level button = power-menu-active.png
   SUBMENUS NEVER use power-menu-active.png
   ========================================================= */

/* Power canvas / wider navigation row */
.navigation,
.navigation > .navbar,
.navigation .navbar,
.navigation .navbar-collapse,
.navigation .menu {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.navigation .menu {
    height: 58px !important;
    min-height: 58px !important;
    overflow: visible !important;
}

.navigation .menu > ul {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: visible !important;
    list-style: none !important;
    background: url('../images/power-menu.png') repeat-x left top !important;
}

/* Every normal top-level button uses ONLY the normal Power strip. */
.navigation .menu > ul > li {
    position: relative !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: url('../images/power-menu.png') repeat-x left top !important;
    background-size: auto 58px !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* The clickable top-level button also stays normal by default. */
.navigation .menu > ul > li > a,
.navigation .menu > ul > li > a:visited {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 20px !important;

    color: #fff !important;
    background: url('../images/power-menu.png') repeat-x left top !important;
    background-size: auto 58px !important;
    background-color: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 58px !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,.95) !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* ONLY a top-level button that is hovered/selected/open gets ACTIVE. */
.navigation .menu > ul > li:hover > a,
.navigation .menu > ul > li.active > a,
.navigation .menu > ul > li.opened > a,
.navigation .menu > ul > li > a.ready,
.navigation .menu > ul > li > a[class*="menu_link_selected"],
.navigation .menu > ul > li > a.user_menu_link_selected,
.navigation .menu > ul > li[class*="menu_link_selected"] > a {
    color: #fff !important;
    background-image: url('../images/power-menu-active.png') !important;
    background-repeat: repeat-x !important;
    background-position: left top !important;
    background-size: auto 58px !important;
    background-color: transparent !important;
}

/* Do NOT use the special GP/LAST active strips. */
.navigation .menu > ul > li.menu_gp,
.navigation .menu > ul > li.menu_poslednji,
.navigation .menu > ul > li.active_poslednji {
    background-image: url('../images/power-menu.png') !important;
    background-repeat: repeat-x !important;
    background-size: auto 58px !important;
}

/* =========================================================
   SUBMENU — Power dark dropdown, NO menu-active IMAGE
   ========================================================= */
.navigation .menu > ul > li > ul,
.navigation .menu > ul > li > ul > li,
.navigation .menu > ul > li > ul > li > a,
.navigation .menu > ul > li > ul > li > a:hover,
.navigation .menu > ul > li > ul > li > a:focus,
.navigation .menu > ul > li > ul > li > a.ready,
.navigation .menu > ul > li > ul > li > a[class*="menu_link_selected"] {
    background-image: none !important;
}

.navigation .menu > ul > li > ul {
    position: absolute !important;
    top: 58px !important;
    left: -99999px !important;
    z-index: 100000 !important;

    width: max-content !important;
    min-width: 230px !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    list-style: none !important;

    background: rgba(5,10,16,.98) !important;
    border: 1px solid #24527d !important;
    border-top: 0 !important;
    border-radius: 0 !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.65) !important;
}

.navigation .menu > ul > li:hover > ul,
.navigation .menu > ul > li.active > ul,
.navigation .menu > ul > li.opened > ul,
.navigation .menu > ul > li > ul:hover {
    left: 0 !important;
}

.navigation .menu > ul > li > ul > li {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(5,10,16,.98) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(54,80,108,.28) !important;
}

.navigation .menu > ul > li > ul > li > a,
.navigation .menu > ul > li > ul > li > a:visited {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 18px !important;

    color: #fff !important;
    background: rgba(5,10,16,.98) !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: normal !important;
    line-height: 42px !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 1px rgba(0,0,0,.95) !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Submenu hover is a Power colour highlight, NOT the active image. */
.navigation .menu > ul > li > ul > li > a:hover,
.navigation .menu > ul > li > ul > li > a:focus,
.navigation .menu > ul > li > ul > li > a.ready,
.navigation .menu > ul > li > ul > li > a[class*="menu_link_selected"] {
    color: #fff !important;
    background: #173e63 !important;
    background-image: none !important;
}

/* Third level: same dark Power submenu, no active image. */
.navigation .menu > ul > li > ul > li > ul {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    z-index: 100001 !important;
    display: none !important;
    min-width: 230px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(5,10,16,.98) !important;
    border: 1px solid #24527d !important;
    border-top: 0 !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.65) !important;
}

.navigation .menu > ul > li > ul > li:hover > ul,
.navigation .menu > ul > li > ul > li.opened > ul {
    display: block !important;
}

.navigation .menu > ul > li > ul > li > ul > li,
.navigation .menu > ul > li > ul > li > ul > li > a {
    height: 42px !important;
    min-height: 42px !important;
}

.navigation .menu > ul > li > ul > li > ul > li > a {
    display: flex !important;
    align-items: center !important;
    padding: 0 18px !important;
    color: #fff !important;
    background: rgba(5,10,16,.98) !important;
    background-image: none !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 42px !important;
    text-transform: uppercase !important;
}

/* =========================================================
   REMOVE ALL OGP NAV ICONS / ARROWS
   ========================================================= */
.navigation .menu img,
.navigation .menu i,
.navigation .menu .fa,
.navigation .menu .glyphicon,
.navigation .menu [class*="icon-"],
.navigation .menu a:before,
.navigation .menu a:after,
.navigation .menu a span:before,
.navigation .menu a span:after,
.navigation .menu .tree:before,
.navigation .menu .tree:after {
    display: none !important;
    visibility: hidden !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.navigation .menu a > span {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
}

/* =========================================================
   MOBILE = THE SAME PC POWER NAVIGATION
   ========================================================= */
@media (max-width: 991px) {
    html, body {
        min-width: 0 !important;
        overflow-x: auto !important;
    }

    .container-fluid {
        width: 960px !important;
        min-width: 0 !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .navigation,
    .navigation > .navbar,
    .navigation .navbar-collapse,
    .navigation .menu,
    .navigation .menu > ul {
        width: 960px !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .navigation .menu,
    .navigation .menu > ul {
        height: 58px !important;
        min-height: 58px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow: visible !important;
    }

    .navigation .menu > ul > li,
    .navigation .menu > ul > li > a {
        height: 58px !important;
        min-height: 58px !important;
    }

    .navigation .menu > ul > li > ul {
        position: absolute !important;
        top: 58px !important;
        left: -99999px !important;
        width: max-content !important;
        min-width: 230px !important;
        display: block !important;
    }

    .navigation .menu > ul > li:hover > ul,
    .navigation .menu > ul > li.active > ul,
    .navigation .menu > ul > li.opened > ul {
        left: 0 !important;
    }

    .navigation .navbar-toggle {
        display: none !important;
    }
}

/* =========================================================
   POWER NAVIGATION — FINAL SPACING / WIDTH MATCH
   Keep the complete navigation strip wide, but DO NOT
   distribute the labels across the row. Power uses compact,
   content-sized buttons placed directly next to each other.
   ========================================================= */
.navigation,
.navigation .navbar,
.navigation .navbar-collapse,
.navigation .menu {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 60px !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}

.navigation .menu > ul {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 60px !important;
    min-height: 60px !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: url('../images/power-menu.png') repeat-x left top !important;
    background-size: auto 60px !important;
}

/* Power buttons are content-width, not equal-width columns. */
.navigation .menu > ul > li {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 60px !important;
    min-height: 60px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.navigation .menu > ul > li > a,
.navigation .menu > ul > li > a:visited {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 60px !important;
    min-height: 60px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 15px 10px 0 !important;
    color: #fff !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: bold !important;
    font-style: normal !important;
    line-height: 30px !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Power's first/last items have only small edge spacing. */
.navigation .menu > ul > li:first-child > a {
    padding-left: 16px !important;
}

.navigation .menu > ul > li:last-child > a {
    padding-right: 16px !important;
}

/* Active strip only on the top-level item itself. */
.navigation .menu > ul > li:hover > a,
.navigation .menu > ul > li.active > a,
.navigation .menu > ul > li.opened > a,
.navigation .menu > ul > li > a.ready,
.navigation .menu > ul > li > a[class*="menu_link_selected"],
.navigation .menu > ul > li.user_menu_link_selected > a,
.navigation .menu > ul > li[class*="menu_link_selected"] > a {
    background-image: url('../images/power-menu-active.png') !important;
    background-repeat: repeat-x !important;
    background-position: center top !important;
    background-size: auto 60px !important;
    background-color: transparent !important;
}

/* Submenus stay compact and NEVER use the active Power image. */
.navigation .menu > ul > li > ul,
.navigation .menu > ul > li > ul > li,
.navigation .menu > ul > li > ul > li > a,
.navigation .menu > ul > li > ul > li > a:hover,
.navigation .menu > ul > li > ul > li > a:focus,
.navigation .menu > ul > li > ul > li > a.ready,
.navigation .menu > ul > li > ul > li > a[class*="menu_link_selected"] {
    background-image: none !important;
}

/* Keep labels tightly grouped like Power. */
.navigation .menu a > span {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
}

/* Same PC navigation on mobile: no hamburger / no reflow. */
@media (max-width: 991px) {
    html, body {
        min-width: 0 !important;
        overflow-x: auto !important;
    }

    .container-fluid {
        width: 960px !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .navigation,
    .navigation .navbar,
    .navigation .navbar-collapse,
    .navigation .menu,
    .navigation .menu > ul {
        width: 960px !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .navigation .menu > ul {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
    }

    .navigation .menu > ul > li {
        flex: 0 0 auto !important;
    }

    .navigation .navbar-toggle {
        display: none !important;
    }
}


/* =========================================================
   POWER FINAL OVERRIDE — FULL WIDTH / COMPACT / NO MONITOR CHECK
   ========================================================= */

@font-face {
    font-family: 'AGENCYR';
    src: url('../fonts/AGENCYR.TTF') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Full-screen Power navigation */
body {
    overflow-x: auto !important;
}

.container-fluid {
    width: 100% !important;
    max-width: none !important;
}

.navigation {
    position: relative !important;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.navigation > .navbar,
.navigation .navbar,
.navigation .navbar-collapse,
.navigation .menu {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.navigation .navbar-collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}

.navigation .menu {
    height: 58px !important;
    min-height: 58px !important;
    overflow: visible !important;
}

/* Power base strip spans the complete screen. */
.navigation .menu > ul {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    list-style: none !important;
    background: url('../images/power-menu.png') repeat-x left top !important;
    background-size: auto 58px !important;
}

/* Compact Power-style buttons: no huge gaps. */
.navigation .menu > ul > li {
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.navigation .menu > ul > li > a,
.navigation .menu > ul > li > a:visited {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;

    color: #fff !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;

    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 58px !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 1px #000 !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* The active Power image is ONLY a top-level hover/open/selected state. */
.navigation .menu > ul > li:hover > a,
.navigation .menu > ul > li.active > a,
.navigation .menu > ul > li.opened > a,
.navigation .menu > ul > li > a.ready,
.navigation .menu > ul > li > a[class*="menu_link_selected"],
.navigation .menu > ul > li[class*="menu_link_selected"] > a {
    color: #fff !important;
    background-image: url('../images/power-menu-active.png') !important;
    background-repeat: repeat-x !important;
    background-position: left top !important;
    background-size: auto 58px !important;
    background-color: transparent !important;
}

/* Monitor must never be left checked by OGP's selected state. */
.navigation .menu > ul > li > a[href*="m=gamemanager"][href*="p=game_monitor"],
.navigation .menu > ul > li > a[href*="m=gamemanager"][href*="p=game_monitor"].ready,
.navigation .menu > ul > li > a.user_menu_link_selected[href*="m=gamemanager"] {
    /* Keep normal Power appearance when not physically hovered. */
    background-image: none !important;
    background-color: transparent !important;
}

/* But genuine mouse hover over Monitor still gets the same Power active strip. */
.navigation .menu > ul > li:hover > a[href*="m=gamemanager"][href*="p=game_monitor"] {
    background-image: url('../images/power-menu-active.png') !important;
    background-repeat: repeat-x !important;
    background-position: left top !important;
    background-size: auto 58px !important;
}

/* Control is not special: exactly the same rules as every other top-level item. */
.navigation .menu > ul > li > a[href*="m=administration"][href*="p=main"] {
    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 58px !important;
}

/* No active image anywhere inside submenus. */
.navigation .menu > ul > li > ul,
.navigation .menu > ul > li > ul *,
.navigation .menu > ul > li > ul > li > a,
.navigation .menu > ul > li > ul > li > a:hover,
.navigation .menu > ul > li > ul > li > a:focus,
.navigation .menu > ul > li > ul > li > a.ready,
.navigation .menu > ul > li > ul > li > a[class*="menu_link_selected"] {
    background-image: none !important;
}

.navigation .menu > ul > li > ul {
    position: absolute !important;
    top: 58px !important;
    left: -99999px !important;
    z-index: 100000 !important;
    width: max-content !important;
    min-width: 220px !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: rgba(5,10,16,.98) !important;
    border: 1px solid #24527d !important;
    border-top: 0 !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.65) !important;
}

.navigation .menu > ul > li:hover > ul,
.navigation .menu > ul > li.active > ul,
.navigation .menu > ul > li.opened > ul,
.navigation .menu > ul > li > ul:hover {
    left: 0 !important;
}

.navigation .menu > ul > li > ul > li {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(5,10,16,.98) !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(54,80,108,.30) !important;
}

.navigation .menu > ul > li > ul > li > a {
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    color: #fff !important;
    background: rgba(5,10,16,.98) !important;
    background-image: none !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 15px !important;
    font-weight: normal !important;
    line-height: 40px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 1px #000 !important;
    white-space: nowrap !important;
}

.navigation .menu > ul > li > ul > li > a:hover,
.navigation .menu > ul > li > ul > li > a:focus {
    background: #173e63 !important;
    background-image: none !important;
}

/* Remove all icons/arrows and old OGP pseudo decorations. */
.navigation .menu img,
.navigation .menu i,
.navigation .menu .fa,
.navigation .menu .glyphicon,
.navigation .menu [class*="icon-"],
.navigation .menu a:before,
.navigation .menu a:after,
.navigation .menu a span:before,
.navigation .menu a span:after,
.navigation .menu .tree:before,
.navigation .menu .tree:after {
    display: none !important;
    visibility: hidden !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.navigation .menu a > span {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
}

/* Same PC Power navigation on phones/tablets. */
@media (max-width: 991px) {
    html, body {
        min-width: 0 !important;
        overflow-x: auto !important;
    }

    .container-fluid {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .navigation,
    .navigation > .navbar,
    .navigation .navbar-collapse,
    .navigation .menu,
    .navigation .menu > ul {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .navigation .navbar-toggle,
    .navigation .navbar-header,
    .navigation .navbar-brand {
        display: none !important;
    }

    .navigation .navbar-collapse {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    .navigation .menu > ul {
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
    }

    .navigation .menu > ul > li {
        flex: 0 0 auto !important;
    }
}


/* =========================================================
   POWER FINAL ALIGNMENT / FULL-WIDTH NAV / DASHBOARD
   ========================================================= */

/* Keep the Power canvas centered; only the navigation is full viewport. */
html, body {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.container-fluid {
    position: relative !important;
    width: 960px !important;
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
}
.container-fluid > .row {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Logo starts at the very top and has absolutely no gap below it. */
.logo {
    height: 146px !important;
    min-height: 146px !important;
    margin: 30px auto 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
}
.logo h2 {
    height: 146px !important;
    min-height: 146px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    position: relative !important;
    top: 0 !important;
    background-position: center top !important;
}

/* Navigation spans the entire browser width while its items remain Power-compact. */
.navigation {
    position: relative !important;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc((960px - 100vw) / 2) !important;
    margin-right: 0 !important;
    padding: 0 !important;
}
.navigation > .navbar,
.navigation .navbar {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.navigation .menu,
.navigation .menu > ul {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}
.navigation .menu > ul {
    justify-content: flex-start !important;
}

/* Remove any Bootstrap/OGP gap that can appear immediately under the logo. */
.navigation + *,
.logo + .row {
    margin-top: 0 !important;
}
.logo .row,
.logo > h2 {
    margin-bottom: 0 !important;
}

/* Dashboard: no artificial space beneath its top image/content. */
body.power-dashboard .main,
body.power-dashboard .main-content,
body.power-dashboard #refreshed-0,
body.power-dashboard #column4 {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
body.power-dashboard .dragbox:first-child,
body.power-dashboard .dragbox:first-child > h4,
body.power-dashboard .dragbox:first-child > .dragbox-content {
    margin-top: 0 !important;
}
body.power-dashboard .dragbox-content > img:first-child,
body.power-dashboard .dragbox-content > a:first-child img {
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: block !important;
}

/* Monitor: never inherit OGP's persistent selected/checked strip. */
.navigation .menu > ul > li > a[href*="m=gamemanager"][href*="p=game_monitor"] {
    background-image: none !important;
    background-color: transparent !important;
}
.navigation .menu > ul > li:hover > a[href*="m=gamemanager"][href*="p=game_monitor"] {
    background-image: url('../images/power-menu-active.png') !important;
    background-repeat: repeat-x !important;
    background-position: left top !important;
    background-size: auto 58px !important;
}

/* Control/Menu is visually identical to every other top-level Power item. */
.navigation .menu > ul > li > a[href*="m=administration"][href*="p=main"] {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Full-screen Power background must remain behind the whole page. */
body {
    background-color: #090c10 !important;
    background-image: url('../images/bg/power-pozadina.jpg') !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/* =========================================================
   POWER HEADER + NAVIGATION FINAL FIX
   ========================================================= */

/* Flush Power logo against the very top edge. */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}
body {
    min-height: 100vh !important;
    background-color: #090c10 !important;
    background-image: url('../images/bg/power-pozadina.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/* Keep the Power 960px canvas centered with zero top offset. */
.container-fluid {
    position: relative !important;
    width: 960px !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    top: 0 !important;
}
.container-fluid > .row {
    margin: 0 !important;
    padding: 0 !important;
}

/* Logo: exact Power dimensions, flush to page top. */
.container-fluid .logo {
    position: relative !important;
    top: 0 !important;
    width: 960px !important;
    height: 146px !important;
    min-height: 146px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    line-height: 0 !important;
    overflow: hidden !important;
}
.container-fluid .logo h2 {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 960px !important;
    height: 146px !important;
    min-height: 146px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-image: url('../images/power-logo.png') !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: 960px 146px !important;
}

/* Full-screen Power navigation strip, directly under the logo. */
.container-fluid .navigation {
    position: relative !important;
    z-index: 5000 !important;
    width: 100vw !important;
    max-width: none !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 0 0 calc((960px - 100vw) / 2) !important;
    padding: 0 !important;
    float: none !important;
}

/* Remove every Bootstrap navbar offset/gap. */
.container-fluid .navigation > .navbar,
.container-fluid .navigation .navbar,
.container-fluid .navigation .navbar-collapse,
.container-fluid .navigation .menu {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Power base texture across the complete navigation. */
.container-fluid .navigation .menu > ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: url('../images/power-menu.png') repeat-x left top !important;
    background-size: auto 58px !important;
    overflow: visible !important;
}

/* Buttons: compact, adjacent, same height as the original Power bar. */
.container-fluid .navigation .menu > ul > li {
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.container-fluid .navigation .menu > ul > li > a,
.container-fluid .navigation .menu > ul > li > a:visited {
    display: block !important;
    width: auto !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box !important;

    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: bold !important;
    font-style: normal !important;
    line-height: 58px !important;
    letter-spacing: 0 !important;
    text-transform: uppercase !important;

    color: #fff !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 1px #000 !important;

    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Exactly one Power active strip on a top-level button. */
.container-fluid .navigation .menu > ul > li:hover > a,
.container-fluid .navigation .menu > ul > li.active > a,
.container-fluid .navigation .menu > ul > li.opened > a,
.container-fluid .navigation .menu > ul > li > a.ready,
.container-fluid .navigation .menu > ul > li > a[class*="menu_link_selected"] {
    color: #fff !important;
    background-color: transparent !important;
    background-image: url('../images/power-menu-active.png') !important;
    background-repeat: repeat-x !important;
    background-position: left top !important;
    background-size: auto 58px !important;
}

/* Monitor is not permanently checked by OGP; only real hover gets active. */
.container-fluid .navigation .menu > ul > li > a[href*="m=gamemanager"][href*="p=game_monitor"] {
    background-image: none !important;
    background-color: transparent !important;
}
.container-fluid .navigation .menu > ul > li:hover > a[href*="m=gamemanager"][href*="p=game_monitor"] {
    background-image: url('../images/power-menu-active.png') !important;
    background-repeat: repeat-x !important;
    background-position: left top !important;
    background-size: auto 58px !important;
}

/* Control/Menu has no special sizing: identical to all other buttons. */
.container-fluid .navigation .menu > ul > li > a[href*="m=administration"][href*="p=main"] {
    padding: 0 14px !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 20px !important;
    font-weight: bold !important;
    line-height: 58px !important;
    background-color: transparent !important;
}

/* No Power active image in any submenu. */
.container-fluid .navigation .menu > ul > li > ul,
.container-fluid .navigation .menu > ul > li > ul *,
.container-fluid .navigation .menu > ul > li > ul > li > a,
.container-fluid .navigation .menu > ul > li > ul > li > a:hover,
.container-fluid .navigation .menu > ul > li > ul > li > a:focus,
.container-fluid .navigation .menu > ul > li > ul > li > a.ready,
.container-fluid .navigation .menu > ul > li > ul > li > a[class*="menu_link_selected"] {
    background-image: none !important;
}

/* Submenu remains Power-style, tight and aligned under its parent. */
.container-fluid .navigation .menu > ul > li > ul {
    top: 58px !important;
    min-width: 220px !important;
    width: max-content !important;
    background: rgba(5,10,16,.98) !important;
    border: 1px solid #24527d !important;
    border-top: 0 !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.65) !important;
}
.container-fluid .navigation .menu > ul > li > ul > li > a {
    height: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
    padding: 0 16px !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 15px !important;
    text-transform: uppercase !important;
    text-shadow: 1px 1px 1px #000 !important;
    background: rgba(5,10,16,.98) !important;
    background-image: none !important;
}
.container-fluid .navigation .menu > ul > li > ul > li > a:hover {
    background: #173e63 !important;
    background-image: none !important;
}

/* Never let OGP/Bootstrap icons alter Power button geometry. */
.container-fluid .navigation .menu img,
.container-fluid .navigation .menu i,
.container-fluid .navigation .menu .fa,
.container-fluid .navigation .menu .glyphicon,
.container-fluid .navigation .menu [class*="icon-"],
.container-fluid .navigation .menu a:before,
.container-fluid .navigation .menu a:after,
.container-fluid .navigation .menu a span:before,
.container-fluid .navigation .menu a span:after,
.container-fluid .navigation .menu .tree:before,
.container-fluid .navigation .menu .tree:after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}
.container-fluid .navigation .menu a > span {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
	font-weight:bold !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
}

/* The same PC Power navigation is used on small screens. */
@media (max-width: 991px) {
    html, body {
        min-width: 0 !important;
        overflow-x: auto !important;
    }
    .container-fluid {
        width: 960px !important;
        min-width: 0 !important;
        max-width: 960px !important;
        margin: 0 auto !important;
    }
    .container-fluid .logo {
        width: 960px !important;
    }
    .container-fluid .navigation {
        width: 100vw !important;
        min-width: 0 !important;
        margin-left: calc((960px - 100vw) / 2) !important;
    }
    .container-fluid .navigation .navbar-header,
    .container-fluid .navigation .navbar-toggle,
    .container-fluid .navigation .navbar-brand {
        display: none !important;
    }
    .container-fluid .navigation .navbar-collapse {
        display: block !important;
        height: 58px !important;
        overflow: visible !important;
    }
}


/* =========================================================
   FINAL POWER LOGIN / BUTTON / DESKTOP-ON-MOBILE OVERRIDE
   ========================================================= */

/* Power canvas starts at the very top. */
html, body {
    margin: 0 !important;
    padding: 0 !important;
}
.container-fluid {
    width: 960px !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

/* Keep the real Power logo at the very top of the page. */
.logo,
.logo h2 {
    width: 960px !important;
    max-width: 960px !important;
    height: 146px !important;
    min-height: 146px !important;
    margin: 0 !important;
    padding: 0 !important;
}
.logo h2 {
    background: url('../images/power-logo.png') center top / 960px 146px no-repeat !important;
}

/* Login area: leave the Power logo/navigation above it and move the form down 250px. */
.login-container {
    position: relative !important;
    top: 0 !important;
    width: 400px !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

/* Login title and controls use the Power typography. */
.login-container h3 {
    margin-top: 0 !important;
    text-align: center !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 22px !important;
    font-weight: normal !important;
    text-transform: uppercase !important;
}

/* Buttons are raised by exactly 2px. */
.btn.btn-sm.btn-primary,
.login-container .btn.btn-sm.btn-primary {
    position: relative !important;
    top: -2px !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
}

/* Power index-style centered buttons. */
.login-container .btn {
    text-align: center !important;
}
.login-container .btn:not(.btn-block) {
    display: inline-block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.login-container .btn.btn-block {
    display: block !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Main login canvas keeps the Power dark presentation. */
.main:has(.login-container) {
    min-height: 650px !important;
}

/* =========================================================
   FORCE THE DESKTOP / PC VERSION ON MOBILE
   No hamburger, no vertical mobile menu, no mobile resizing.
   The 960px Power layout is kept intact and may scroll
   horizontally on narrow screens.
   ========================================================= */
@media (max-width: 991px) {
    html, body {
        min-width: 0 !important;
        overflow-x: auto !important;
    }

    .container-fluid {
        width: 960px !important;
        max-width: 960px !important;
        min-width: 0 !important;
        margin: 0 auto !important;
    }

    .logo,
    .logo h2 {
        width: 960px !important;
        max-width: 960px !important;
        min-width: 0 !important;
        height: 146px !important;
        min-height: 146px !important;
    }

    .logo h2 {
        background-size: 960px 146px !important;
        background-position: center top !important;
    }

    .navigation,
    .navigation .navbar,
    .navigation .navbar-collapse,
    .navigation .menu {
        width: 100vw !important;
        min-width: 0 !important;
        height: 58px !important;
        min-height: 58px !important;
    }

    .navigation .navbar-header {
        display: none !important;
    }

    .navigation .navbar-collapse {
        display: block !important;
        width: 960px !important;
        max-width: 960px !important;
        margin: 0 auto !important;
        overflow: visible !important;
    }

    .navigation .menu > ul {
        width: 960px !important;
        min-width: 0 !important;
        height: 58px !important;
        min-height: 58px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        margin: 0 auto !important;
    }

    .navigation .menu > ul > li {
        width: auto !important;
        min-width: 0 !important;
        height: 58px !important;
        min-height: 58px !important;
        display: block !important;
        flex: 0 0 auto !important;
    }

    .navigation .menu > ul > li > a {
        width: auto !important;
        height: 58px !important;
        min-height: 58px !important;
        line-height: 58px !important;
        padding: 0 12px !important;
        font-size: 16px !important;
        white-space: nowrap !important;
    }

    .navigation .menu > ul > li.menu_prvi > a {
        padding-left: 16px !important;
    }
    .navigation .menu > ul > li.menu_poslednji > a {
        padding-right: 16px !important;
    }

    .navigation .menu > ul > li > ul {
        position: absolute !important;
        width: 190px !important;
        min-width: 190px !important;
        left: -99999px !important;
        top: 58px !important;
        display: block !important;
    }

    .navigation .menu > ul > li:hover > ul,
    .navigation .menu > ul > li.opened > ul,
    .navigation .menu > ul > li > ul:hover {
        left: 0 !important;
    }

    .main,
    .main-content {
        width: 960px !important;
        max-width: 960px !important;
        min-width: 0 !important;
    }

    .login-container {
        width: 400px !important;
        max-width: 400px !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        top: 0 !important;
    }

    .footer {
        min-width: 100vw !important;
    }
}


/* FINAL: explicit Power logo above navigation on index.php */
.logo .power-index-logo {
    display: block !important;
    width: 960px !important;
    height: 146px !important;
    max-width: 960px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: center top !important;
}
.logo h2 {
    display: none !important;
}

/* FINAL: login form position */
.login-container {
    top: 0 !important;
    width: 400px !important;
    max-width: 400px !important;
}


/* =========================================================
   POWER CMS NAVIGATION + DASHBOARD TAB-BTN
   Copied/adapted from Power CMS (pravila.css + dashboard.php)
   ========================================================= */

/* Keep the game panel desktop geometry on phones too. */
html, body {
    min-width: 0 !important;
}
body {
    overflow-x: auto !important;
}
.container-fluid {
    width: 960px !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Remove the original OGP navigation visually; page content remains. */
.navigation .menu {
    display: none !important;
}
.navigation > .navbar {
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.navigation .navbar-header,
.navigation .navbar-brand,
.navigation .navbar-toggle,
.navigation .navbar-collapse {
    display: none !important;
}

/* ----- Power CMS top navigation ----- */
.power-cms-menu {
    width: 100% !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: url('../images/power-cms-menu.png') repeat-x center top !important;
    font-family: 'AGENCYR', sans-serif !important;
    font-weight: bold !important;
    position: relative;
    z-index: 1000;
}
.power-cms-menu-inner {
    width: 960px;
    height: 58px;
    margin: 0 auto;
    position: relative;
}
.power-cms-main,
.power-cms-main ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.power-cms-main {
    height: 58px;
    display: flex;
    align-items: stretch;
}
.power-cms-main > li {
    position: relative;
    display: block;
    height: 58px;
    padding: 0 !important;
    margin: 0 !important;
}
.power-cms-main > li > a {
    display: block;
    height: 58px;
    line-height: 28px;
    padding: 15px 10px 0 !important;
    color: #fff !important;
    text-decoration: none !important;
    font-family: 'AGENCYR', sans-serif !important;
    font-size: 20px !important;
    font-weight: bold !important;
    white-space: nowrap;
    text-shadow: 0 1px 1px #000;
}
.power-cms-main > li:hover > a,
.power-cms-main > li.power-cms-home > a {
    background: url('../images/power-cms-menu-active.png') no-repeat center top !important;
}
.power-cms-main > li.power-cms-gamepanel:hover > a {
    background-image: url('../images/power-cms-menu-active-gp.png') !important;
}
.power-cms-main > li.power-cms-contact > a {
    padding-right: 12px !important;
}
.power-cms-main > li.power-cms-contact:hover > a {
    background-image: url('../images/power-cms-menu-active-last.png') !important;
}

/* Order dropdown from Power CMS. */
.power-cms-main > li > ul {
    display: none;
    position: absolute;
    left: 0;
    top: 58px;
    z-index: 1100;
    width: 220px;
    padding: 8px 0 !important;
    margin: 0 !important;
    background: rgba(0,0,0,.96);
    border: 1px solid #2b4e7f;
    box-shadow: 0 7px 18px rgba(0,0,0,.65);
}
.power-cms-main > li:hover > ul {
    display: block;
}
.power-cms-main > li > ul > li {
    display: block;
    width: 100%;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}
.power-cms-main > li > ul > li > a {
    display: block;
    padding: 8px 12px !important;
    color: #fff !important;
    font-family: 'AGENCYR', sans-serif !important;
    font-size: 16px !important;
    text-decoration: none !important;
    white-space: nowrap;
}
.power-cms-main > li > ul > li > a:hover {
    background: #2b4e7f !important;
}

/* ----- Dashboard sub-navigation: exact Power CMS tab-btn base ----- */
.power-account-nav {
    width: 960px;
    margin: 20px auto 20px;
    padding: 0;
    position: relative;
    z-index: 900;
    font-family: 'AGENCYR', sans-serif !important;
}
.power-account-title {
    color: #fff;
    font-family: 'AGENCYR', sans-serif !important;
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 20px;
    text-transform: uppercase;
}
.power-account-tabs {
    display: flex;
    gap: 5px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Copied from Power CMS dashboard.php:
   .tab-btn { background:rgba(43,78,127,.6); color:#fff;
   padding:10px 18px; border-radius:4px; font-family:AGENCYR; font-size:14px; }
   .tab-btn.active, .tab-btn:hover { background:#2b4e7f; } */
.power-account-tabs .tab-btn {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    background: rgba(43,78,127,0.6) !important;
    color: #fff !important;
    padding: 10px 18px !important;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 4px !important;
    font-family: 'AGENCYR', sans-serif !important;
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: normal !important;
    text-decoration: none !important;
    text-shadow: 0 1px 1px #000;
    min-height: 0;
    white-space: nowrap;
}
.power-account-tabs .tab-btn.active,
.power-account-tabs .tab-btn:hover,
.power-account-tabs .tab-btn.is-current {
    background: #2b4e7f !important;
    color: #fff !important;
    text-decoration: none !important;
}
.power-account-tabs .power-tab > a {
    color: #fff !important;
    text-decoration: none !important;
    font-family: 'AGENCYR', sans-serif !important;
}

/* Power CMS-style dropdown for Active and Menu. */
.power-tab-dropdown {
    padding: 0 !important;
}
.power-tab-dropdown > a {
    display: block;
    padding: 10px 18px !important;
    min-height: 0;
    line-height: 18px;
}
.power-submenu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 1200;
    min-width: 180px;
    max-width: 260px;
    padding: 6px 0;
    margin-top: 4px;
    background: rgba(0,0,0,.96);
    border: 1px solid #2b4e7f;
    border-radius: 3px;
    box-shadow: 0 7px 18px rgba(0,0,0,.65);
}
.power-submenu-wide {
    min-width: 220px;
    max-height: 70vh;
    overflow-y: auto;
}
.power-tab-dropdown:hover > .power-submenu {
    display: block;
}
.power-submenu a {
    display: block;
    padding: 7px 12px;
    color: #fff !important;
    font-family: 'AGENCYR', sans-serif !important;
    font-size: 13px;
    line-height: 18px;
    text-decoration: none !important;
    white-space: nowrap;
}
.power-submenu a:hover {
    background: #2b4e7f !important;
}

/* Keep dashboard content below the CMS account navigation. */
.power-account-nav + .navigation {
    margin-top: 0 !important;
}
.power-account-nav ~ .navigation .container,
.power-account-nav ~ .navigation .main,
.power-account-nav ~ .navigation .content {
    margin-top: 0 !important;
}

/* Do not let Bootstrap/Simple theme change these Power elements. */
.power-cms-menu *,
.power-account-nav * {
    box-sizing: border-box;
}


/* ==========================================================
   POWER CMS DASHBOARD TAB-BTN - FINAL BUTTON FIX
   ========================================================== */
.power-account-nav {
    display: block !important;
    width: 960px !important;
    max-width: 960px !important;
    margin: 20px auto 26px !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 5000 !important;
    clear: both !important;
}

.power-account-title {
    display: block !important;
    margin: 0 0 14px 0 !important;
    color: #fff !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 26px !important;
    line-height: 32px !important;
    font-weight: normal !important;
    text-transform: uppercase !important;
}

.power-account-tabs {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
    position: relative !important;
    z-index: 5001 !important;
}

/* Every top item is a real dashboard button. */
.power-account-tabs > .tab-btn,
.power-account-tabs > a.tab-btn,
.power-account-tabs > div.tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 48px !important;
    min-height: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    border: 1px solid rgba(255,255,255,.25) !important;
    border-radius: 3px !important;
    background: rgba(43,78,127,.60) !important;
    background-image: none !important;
    color: #fff !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 18px !important;
    font-weight: normal !important;
    text-decoration: none !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.9) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 1px 2px rgba(0,0,0,.35) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    position: relative !important;
    float: none !important;
}

.power-account-tabs > a.tab-btn:hover,
.power-account-tabs > div.tab-btn:hover,
.power-account-tabs > .tab-btn.is-current,
.power-account-tabs > .tab-btn.active {
    background: #2b4e7f !important;
    background-image: none !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.35) !important;
    text-decoration: none !important;
}

/* Nested link inside dropdown button must not lose the button appearance. */
.power-account-tabs > .power-tab-dropdown {
    padding: 0 !important;
    overflow: visible !important;
}
.power-account-tabs > .power-tab-dropdown > a:first-child {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    box-sizing: border-box !important;
    color: #fff !important;
    background: transparent !important;
    border: 0 !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 16px !important;
    line-height: 18px !important;
    text-decoration: none !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.9) !important;
}
.power-account-tabs > .power-tab-dropdown:hover > a:first-child,
.power-account-tabs > .power-tab-dropdown.is-current > a:first-child {
    color: #fff !important;
    background: transparent !important;
}

/* Submenus stay hidden until the actual button is hovered. */
.power-account-tabs .power-submenu {
    display: none !important;
    position: absolute !important;
    left: 0 !important;
    top: calc(100% + 4px) !important;
    min-width: 190px !important;
    max-width: 320px !important;
    margin: 0 !important;
    padding: 5px 0 !important;
    background: rgba(5,8,12,.98) !important;
    border: 1px solid #2b4e7f !important;
    border-radius: 3px !important;
    box-shadow: 0 7px 18px rgba(0,0,0,.65) !important;
    z-index: 6000 !important;
}
.power-account-tabs .power-tab-dropdown:hover > .power-submenu {
    display: block !important;
}
.power-account-tabs .power-submenu a {
    display: block !important;
    width: auto !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 7px 12px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-family: 'AGENCYR', Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 18px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}
.power-account-tabs .power-submenu a:hover {
    background: #2b4e7f !important;
    color: #fff !important;
}
.power-account-tabs .power-submenu-wide {
    min-width: 230px !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
}

/* Keep the real OGP navigation out of the page; Power buttons are the navigation. */
.navigation {
    display: block !important;
    clear: both !important;
}
.navigation .menu,
.navigation .navbar-header,
.navigation .navbar-brand,
.navigation .navbar-toggle,
.navigation .navbar-collapse {
    display: none !important;
}

/* The content starts below the Power account buttons. */
.power-account-nav + .row {
    margin-top: 0 !important;
}

@media (max-width: 959px) {
    html, body {
        min-width: 0 !important;
    }
    .power-account-nav,
    .power-account-tabs {
        width: 960px !important;
        min-width: 0 !important;
    }
}


/* FINAL: the legacy OGP navigation is not part of the Power layout. */
.navigation {
    display: none !important;
}
.power-account-nav {
    display: block !important;
}

/* FINAL POWER CLEANUP: legacy OGP menu classes must never render */
.navigation,.navigation .menu,.navigation .navbar,.navigation .navbar-collapse,.navigation .navbar-header,.navigation .navbar-brand,.navigation .navbar-toggle,.menu-bg{display:none!important;visibility:hidden!important;}
.power-cms-menu{width:100vw!important;min-width:0!important;height:60px!important;margin-left:calc(50% - 50vw)!important;background-image:url('../images/power-cms-menu.png')!important;background-repeat:repeat-x!important;background-position:left top!important;}
.power-cms-menu-inner{width:960px!important;height:60px!important;margin:0 auto!important;}
.power-cms-main{display:block!important;width:960px!important;height:60px!important;margin:0 auto!important;padding:0!important;list-style:none!important;font-family:'AGENCYR',Arial,sans-serif!important;font-size:20px!important;font-weight:bold!important;white-space:nowrap!important;}
.power-cms-main>li{display:inline-block!important;vertical-align:top!important;width:auto!important;height:60px!important;padding:15px 0 0!important;margin:0!important;box-sizing:border-box!important;}
.power-cms-main>li>a{display:block!important;height:45px!important;padding:0 10px!important;background:transparent!important;border:0!important;color:#fff!important;font:normal 20px/30px 'AGENCYR',Arial,sans-serif!important;font-weight:bold!important;text-decoration:none!important;text-transform:uppercase!important;}
.power-cms-main>li:hover>a{background:transparent!important;color:#fff!important;}
.power-cms-main ul{display:none!important;position:absolute!important;left:0!important;top:60px!important;width:220px!important;padding:5px 0!important;margin:0!important;background:rgba(0,0,0,.97)!important;border:1px solid #2b4e7f!important;z-index:99999!important;}
.power-cms-main>li:hover>ul{display:block!important;}

/* FINAL FIX: Power CMS navigation + account submenu */
.power-cms-menu{width:100vw!important;min-width:0!important;height:60px!important;margin-left:calc(50% - 50vw)!important;margin-right:0!important;background-repeat:repeat-x!important;background-position:left top!important;}
.power-cms-menu-inner{width:960px!important;height:60px!important;margin:0 auto!important;}
.power-cms-main{width:960px!important;min-width:0!important;height:60px!important;margin:0 auto!important;display:flex!important;align-items:stretch!important;}
.power-cms-main>li{position:relative!important;height:60px!important;padding:0!important;margin:0!important;}
.power-cms-main>li>a{height:60px!important;line-height:30px!important;padding:15px 10px 0!important;background:transparent!important;color:#fff!important;font-family:'AGENCYR',Arial,sans-serif!important;font-size:20px!important;font-weight:bold!important;text-decoration:none!important;text-transform:uppercase!important;}
.power-cms-main>li:hover>a{background:transparent!important;color:#fff!important;}
.power-cms-main>li>ul{display:none!important;position:absolute!important;left:0!important;top:60px!important;width:220px!important;padding:5px 0!important;margin:0!important;background:rgba(0,0,0,.97)!important;border:1px solid #2b4e7f!important;box-shadow:0 8px 18px rgba(0,0,0,.65)!important;z-index:99999!important;}
.power-cms-main>li:hover>ul{display:block!important;}
.power-cms-main>li>ul>li{display:block!important;width:100%!important;height:auto!important;padding:0!important;margin:0!important;}
.power-cms-main>li>ul>li>a{display:block!important;padding:8px 12px!important;color:#fff!important;background:transparent!important;font-family:'AGENCYR',Arial,sans-serif!important;font-size:16px!important;font-weight:normal!important;text-decoration:none!important;text-transform:none!important;white-space:nowrap!important;}
.power-cms-main>li>ul>li>a:hover{background:#2b4e7f!important;color:#fff!important;}
.power-account-nav{width:960px!important;max-width:960px!important;margin:16px auto 24px!important;}
.power-account-tabs .power-tab,.power-account-tabs .power-tab-admin,.power-account-tabs .power-tab-logout{font-family:'AGENCYR',Arial,sans-serif!important;font-size:14px!important;font-weight:normal!important;text-transform:none!important;}
.power-account-tabs .power-submenu,.power-account-tabs .power-submenu-wide,.power-account-tabs .power-submenu a,.power-account-tabs .power-submenu-wide a{font-family:'AGENCYR',Arial,sans-serif!important;}
.power-account-tabs .power-submenu a,.power-account-tabs .power-submenu-wide a{font-size:16px!important;font-weight:normal!important;text-transform:none!important;}
.navigation,.navigation .menu,.menu-bg{display:none!important;visibility:hidden!important;}

/* Final overrides */
.power-account-nav{width:100%!important;max-width:960px!important;margin:20px auto!important;padding:0 15px!important;background:transparent!important;background-image:none!important;box-shadow:none!important;min-height:0!important;}
.power-account-title{font-size:26px!important;font-weight:bold!important;font-family:'AGENCYR',sans-serif!important;margin:0 0 20px!important;color:#fff!important;width:100%!important;}
.power-account-tabs{display:flex!important;flex-wrap:wrap!important;gap:5px!important;margin:0 0 20px!important;}
.power-account-tabs>.tab-btn,.power-account-tabs>.power-tab-dropdown{
  appearance:none!important;padding:10px 18px!important;border-radius:4px!important;
  border:1px solid rgba(58,106,176,0.35)!important;
  background:rgba(43,78,127,0.6)!important;background-image:none!important;
  color:#fff!important;font-family:AGENCYR,sans-serif!important;font-size:14px!important;
  min-height:38px!important;height:auto!important;cursor:pointer!important;box-shadow:none!important;
}
.power-account-tabs>.tab-btn:hover,.power-account-tabs>.tab-btn.active,.power-account-tabs>.power-tab-dropdown:hover{
  background:#2b4e7f!important;border:1px solid #3a6ab0!important;
}
.main{width:960px!important;margin:15px auto 0!important;}


/* ===== FORCE equal tab size: TS3 / Board same as Admin / Logout ===== */
.power-account-nav .power-account-tabs > a.power-tab-ts3,
.power-account-nav .power-account-tabs > a.power-tab-board,
.power-account-tabs > a.power-tab-ts3,
.power-account-tabs > a.power-tab-board,
.power-account-tabs a.tab-btn.power-tab-ts3,
.power-account-tabs a.tab-btn.power-tab-board,
.power-account-tabs .power-tab-ts3,
.power-account-tabs .power-tab-board,
.power-account-tabs .power-tab,
.power-account-tabs .tab-btn,
.power-account-tabs > .tab-btn,
.power-account-tabs > a.tab-btn,
.power-account-tabs > div.tab-btn {
  font-size: 14px !important;
  font-weight: normal !important;
  line-height: 18px !important;
  padding: 10px 18px !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
}
.power-account-tabs .power-tab-ts3 *,
.power-account-tabs .power-tab-board * {
  font-size: 14px !important;
  font-weight: normal !important;
  line-height: 18px !important;
}
.power-account-tabs .power-tab-ts3 img,
.power-account-tabs .power-tab-board img,
.power-account-tabs .power-tab-ts3 i,
.power-account-tabs .power-tab-board i {
  width: 14px !important;
  height: 14px !important;
  font-size: 14px !important;
  max-width: 14px !important;
  max-height: 14px !important;
}


/* Equal ALL dropdown tabs Active/Menu */
.power-account-tabs > .power-tab-dropdown,
.power-account-tabs > div.power-tab-dropdown,
.power-account-tabs .power-tab-active,
.power-account-tabs .power-tab-menu {
  font-size: 14px !important;
  font-weight: normal !important;
  line-height: 18px !important;
  padding: 10px 18px !important;
  min-height: 0 !important;
  height: auto !important;
}
.power-account-tabs .power-tab-dropdown > a,
.power-account-tabs .power-tab-dropdown > a:first-child {
  font-size: 14px !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 18px !important;
}
.power-real-welcome {
  margin-top: -10px !important;
  margin-bottom: 12px !important;
}

.power-auth-links a,.power-auth-links a:hover,.power-auth-links a:focus,.power-auth-links a:active{text-decoration:none!important;outline:none!important;}
.power-language-switcher button:focus,.power-language-switcher button:active{outline:none!important;border:none!important;}
.power-language-switcher svg,.power-language-switcher .flag-sr{border:none!important;}
.power-real-welcome{margin-top:-10px!important;margin-bottom:12px!important;}


/* ===== Logo spacing like Power CMS (#header margin-top:30px) ===== */
.logo,
.col-xs-12.logo {
  margin-top: 30px !important;
  margin-bottom: 0 !important;
}
.power-index-logo {
  margin-top: 0 !important;
}

/* ===== Footer on mobile = same look as PC (horizontal 3-col, not stacked ugly) ===== */
@media (max-width: 991px) {
  .footer,
  .power-footer-row .footer {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: auto !important;
    min-height: 45px !important;
    line-height: 45px !important;
    padding: 0 12px !important;
    text-align: left !important;
  }
  .footer .power-footer-left,
  .footer .power-footer-center,
  .footer .power-footer-right,
  .power-footer-left,
  .power-footer-center,
  .power-footer-right {
    float: none !important;
    display: block !important;
    width: auto !important;
    max-width: 33% !important;
    height: auto !important;
    line-height: 45px !important;
    padding: 0 4px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .footer .power-footer-left { text-align: left !important; }
  .footer .power-footer-center { text-align: center !important; flex: 1 !important; }
  .footer .power-footer-right { text-align: right !important; }
}

/* Remove force min-width phone hacks – allow natural responsive like Power CMS */
html, body {
  min-width: 0 !important;
}
.power-cms-menu {
  min-width: 0 !important;
}
@media (max-width: 959px) {
  html, body { min-width: 0 !important; }
  .power-cms-menu { min-width: 0 !important; width: 100% !important; margin-left: 0 !important; }
  .power-cms-menu-inner,
  .power-cms-main,
  .main,
  .container-fluid {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Keep power-real-welcome – do not delete message */
.power-real-welcome,
.main .power-real-welcome,
div.power-real-welcome {
  margin-top: -10px !important;
  margin-bottom: 12px !important;
}

/* =========================================================
   POWER MOBILE LAYER
   Replaces the previous forced-PC-on-mobile overrides.
   Uses the same responsive principle as the Power website.
   ========================================================= */
@media screen and (max-width: 980px) {
    html, body { min-width:0!important; width:100%!important; overflow-x:hidden!important; }
    .container-fluid,.main,.col-xs-12.main { width:100%!important; max-width:100%!important; min-width:0!important; margin-left:auto!important; margin-right:auto!important; box-sizing:border-box!important; }
    .container-fluid { padding-left:10px!important; padding-right:10px!important; margin-top:10px!important; }
    .logo,.logo h2 { width:100%!important; height:auto!important; min-height:0!important; }
    .logo { margin-top:10px!important; }
    .logo h2 { min-height:85px!important; background-size:contain!important; background-position:center center!important; }
    .navigation,.navigation .navbar,.navigation .navbar-collapse,.navigation .menu,.navigation .menu > ul { width:100%!important; min-width:0!important; max-width:100%!important; box-sizing:border-box!important; }
    .navigation .navbar,.navigation .menu { height:auto!important; min-height:0!important; overflow:visible!important; }
    .navigation .navbar-nav,.navigation .nav,.navigation .menu > ul { display:block!important; width:100%!important; height:auto!important; min-height:0!important; overflow:visible!important; flex-wrap:nowrap!important; }
    .navigation .navbar-nav > li,.navigation .nav > li,.navigation .menu > ul > li { display:block!important; width:100%!important; float:none!important; box-sizing:border-box!important; }
    .navigation .navbar-nav > li > a,.navigation .nav > li > a,.navigation .menu > ul > li > a { width:100%!important; min-height:46px!important; height:auto!important; line-height:22px!important; padding:12px 14px!important; white-space:normal!important; box-sizing:border-box!important; }
    .navigation .dropdown-menu,.navigation .menu > ul > li > ul { position:static!important; display:block!important; width:100%!important; min-width:0!important; max-width:100%!important; margin:0!important; box-sizing:border-box!important; box-shadow:none!important; }
    .navigation .dropdown-menu > li > a,.navigation .menu > ul > li > ul > li > a { white-space:normal!important; padding:10px 18px!important; }
    .power-account-nav { width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; padding-left:10px!important; padding-right:10px!important; }
    .power-account-tabs { display:flex!important; flex-wrap:wrap!important; width:100%!important; gap:5px!important; }
    .power-account-tabs > .tab-btn,.power-account-tabs > a.tab-btn,.power-account-tabs > .power-tab-dropdown { flex:1 1 auto!important; max-width:100%!important; box-sizing:border-box!important; }
    .power-submenu,.power-submenu-wide { position:static!important; width:100%!important; min-width:0!important; max-width:100%!important; max-height:none!important; overflow:visible!important; box-sizing:border-box!important; }
    .main { min-height:400px!important; overflow-x:auto!important; }
    .main .table-responsive,.main table { max-width:100%!important; }
    .footer,.power-footer-row,.power-footer-left,.power-footer-center,.power-footer-right { width:100%!important; max-width:100%!important; box-sizing:border-box!important; text-align:center!important; white-space:normal!important; }
    .power-footer-left,.power-footer-center,.power-footer-right { display:block!important; margin:4px 0!important; }
}
@media screen and (max-width:600px) {
    body { font-size:16px!important; }
    .logo h2 { min-height:70px!important; }
    .power-account-title { font-size:22px!important; }
    .power-account-tabs > .tab-btn,.power-account-tabs > a.tab-btn,.power-account-tabs > .power-tab-dropdown { flex:1 1 100%!important; width:100%!important; }
    .power-submenu a { white-space:normal!important; overflow-wrap:anywhere!important; }
    .main { padding-left:8px!important; padding-right:8px!important; }
}


/* ===== FINAL POWER ALIGNMENT FIX =====
   Keep the existing Power design; only correct edge alignment/position. */
.power-cms-menu{
    width:100vw !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
}
.power-cms-menu-inner{
    width:960px !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
}
@media (max-width:959px){
    .power-cms-menu{
        width:960px !important;
        min-width:960px !important;
        max-width:none !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    .power-cms-menu-inner{
        width:960px !important;
        min-width:960px !important;
        max-width:none !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
}
/* Footer must reach the complete viewport width, not the .row/container width. */
.power-footer-row{
    width:100vw !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
}
.power-footer-row > .footer,
.power-footer-row .footer{
    width:100vw !important;
    max-width:none !important;
    margin-left:0 !important;
    margin-right:0 !important;
    box-sizing:border-box !important;
}
/* Move the real welcome block UP by 40px from its previous -10px position. */
.power-real-welcome,
.main .power-real-welcome,
div.power-real-welcome{
    margin-top:-75px !important;
    margin-bottom:12px !important;
}



/* FINAL POWER DESKTOP FOOTER LEFT EXTENSION
   Keep the mobile layout exactly as it is. On PC, the footer must
   extend from the actual left edge to the actual right edge. */
@media (min-width:768px){
    .footer.power-footer,
    .power-footer-row .footer{
        position:relative !important;
        left:calc((960px - 100vw) / 2) !important;
        transform:none !important;
        width:100vw !important;
        max-width:100vw !important;
        margin-left:0 !important;
        margin-right:0 !important;
        box-sizing:border-box !important;
    }
}


/* FINAL: restore power-real-welcome background and move it 25px upward. */
.power-real-welcome,.main .power-real-welcome,div.power-real-welcome{
  margin-top:-100px !important;
  margin-bottom:12px !important;
  background:rgba(20,20,20,.72) !important;
  background-image:none !important;
  padding:12px 16px !important;
  border-radius:4px !important;
  box-sizing:border-box !important;
}


/* Power checkbox fix – checkmark instead of empty rectangle */
input[type="checkbox"],
input[type="checkbox"].form-control,
table input[type="checkbox"],
.table input[type="checkbox"],
.main input[type="checkbox"] {
	-moz-appearance: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	width: 16px !important;
	height: 16px !important;
	min-width: 16px !important;
	min-height: 16px !important;
	margin: 0 4px !important;
	padding: 0 !important;
	border: 1px solid #4a5160 !important;
	border-radius: 3px !important;
	background: rgba(67,72,87,0.45) !important;
	display: inline-block !important;
	vertical-align: middle !important;
	position: relative !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	outline: none !important;
}
input[type="checkbox"]:checked,
table input[type="checkbox"]:checked,
.main input[type="checkbox"]:checked {
	background: #1997c6 !important;
	border-color: #0e6b8a !important;
}
input[type="checkbox"]:checked::after,
table input[type="checkbox"]:checked::after,
.main input[type="checkbox"]:checked::after {
	content: "" !important;
	display: block !important;
	position: absolute !important;
	left: 4px !important;
	top: 1px !important;
	width: 5px !important;
	height: 9px !important;
	border: solid #fff !important;
	border-width: 0 2px 2px 0 !important;
	-webkit-transform: rotate(45deg) !important;
	transform: rotate(45deg) !important;
	box-sizing: border-box !important;
}
input[type="checkbox"]::before,
input[type="checkbox"]:before {
	content: none !important;
	display: none !important;
}

/* =========================================================
   DATABASE PAGE FIX (MySQL module)
   Overrides modules/mysql/user_db.css which causes right shift:
     .database { margin:5%; width:90%; float:middle; }
     .database_info { margin:30px; }
   ========================================================= */

/* Kill horizontal page shift from 100vw footer / scrollbar */
html {
    overflow-x: hidden !important;
    scrollbar-gutter: stable;
}
body {
    overflow-x: hidden !important;
}

/* Outer wrapper table from user_db.php */
table.database,
.database {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: table !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 12px 0 !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

table.database > tbody > tr > td,
table.database > tr > td,
.database td {
    width: 50% !important;
    vertical-align: top !important;
    padding: 0 !important;
    float: none !important;
    border: none !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

/* Panels inside the two columns */
table.database .dragbox.bloc,
table.database .dragbox,
table.database .bloc,
.database .dragbox.bloc,
.database .bloc {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Inner "Database Information" table */
table.database_info,
.database_info {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 8px !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    border: 1px solid #344967 !important;
    background: rgba(11,14,19,.84) !important;
    box-sizing: border-box !important;
}

table.database_info td,
.database_info td {
    padding: 8px 12px !important;
    border: none !important;
    border-bottom: 1px solid rgba(52,73,103,.5) !important;
    vertical-align: middle !important;
    word-break: break-word !important;
    color: #fff !important;
}

table.database_info tr td:first-child,
.database_info tr td:first-child {
    width: 40% !important;
    font-weight: 600 !important;
    color: #6b9bd0 !important;
    background: rgba(26,30,37,.7) !important;
}

table.database_info tr td:last-child,
.database_info tr td:last-child {
    width: 60% !important;
    background: rgba(14,18,24,.78) !important;
}

table.database_info tr:nth-child(odd) td:last-child,
.database_info tr:nth-child(odd) td:last-child {
    background: rgba(30,35,44,.72) !important;
}

table.database_info tr:hover td,
.database_info tr:hover td {
    background: rgba(43,78,127,.38) !important;
}

/* Tables list (pre / xmp) */
table.database pre,
table.database xmp,
.database pre,
.database xmp {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    float: none !important;
    display: block !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: 420px !important;
    box-sizing: border-box !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
    background: transparent !important;
    color: #c8d0dc !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    border: none !important;
}

/* If Bootstrap classes appear on any table on this page */
.main .table.table-sm,
.main .table.table-sm.table-striped,
.main table.table.table-sm.table-striped {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
}
.main .table.table-sm td,
.main .table.table-sm.table-striped td {
    padding: 6px 10px !important;
}

/* Administration / backup table under the same page */
.main table.administration-table {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 !important;
    table-layout: fixed !important;
}

/* =========================================================
   HARD OVERRIDE – page shift + database table
   ========================================================= */
html {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}
body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Force database layout regardless of load order */
table.database,
table.database.table,
.database {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    left: 0 !important;
    right: auto !important;
    position: relative !important;
    transform: none !important;
    border: none !important;
    background: transparent !important;
    table-layout: fixed !important;
}
table.database td,
.database td {
    width: 50% !important;
    float: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 6px !important;
}
table.database_info,
.database_info {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}


/* PH-LOGIN-KILL-MAIN-BLOC */
.main.ph-auth-page-main,
.main:has(.ph-login-container),
.main:has(.ph-auth-page) {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
}
.main.ph-auth-page-main > .bloc,
.main.ph-auth-page-main > .panel,
.main.ph-auth-page-main > table,
.main.ph-auth-page-main > center {
    display: none !important;
}