﻿body { background-color: var(--mag-page-bg-100); }
body, div { padding: 0; margin: 0; }
.contentWrapper { padding: 0 15px; }
.sitePage { overflow:hidden;margin: 15px auto; background-color: var(--mag-page-bg-color); border: 1px solid var(--mag-element-border-color); }
.siteHeader { display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; background-color: var(--mag-header-bg-color); }
.site-page-header { background-color: var(--mag-header-bg-color); }
.signin-link, .signup-link { color: var(--mag-header-text-color); opacity: 0.8;}
.signin-link:hover, .signup-link:hover, .signin-link:focus, .signup-link:focus { color: var(--mag-header-text-color); opacity: 1; text-decoration: none; }
.sys-instace-type { padding: 3px 8px; background-color: #e02424; color: #fff; border: 1px solid #e02424; 
                    border-radius: var(--mag-border-radius); max-width: 250px; overflow: hidden; font-size:smaller; 
                    text-overflow: ellipsis; white-space: nowrap; position: relative; display: inline-flex; align-items:center; margin-bottom:15px;}
.sys-instance-name { overflow: hidden; display: inline-block; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; max-width: 100%; flex-grow: 1; }
a.appLink span:not(.caret) { max-width: 95%; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.site-logo-img > img { max-height:50px;}
.msie .sys-instace-type { width: 140px; }
.siteBody { min-height: 450px; }
.bs3 .siteBody { padding: 25px 15px 15px 15px; }
.bs5 .siteBody { padding: .75rem; }
.mag-navbarmenu { --mag-nav-text-hover-color: var(--mag-nav-text-color); border-bottom: 1px solid var(--mag-element-border-muted-color); }
.mag-site-main-menu .nav a:hover, .mag-site-main-menu .nav .active a:hover , .mag-site-main-menu .nav .active a { opacity: 1; }
.mag-site-main-menu .nav > li a { text-shadow: none; opacity: 0.8; font-size:16px; }

.siteFooter {background-color: var(--mag-page-bg-color); border-top: 1px solid var(--mag-page-bg-300); }
.site-footer a:hover { text-decoration: none; }
.siteFooter .social-media-links a { opacity: 0.7 }
.siteFooter .social-media-links a:hover { opacity: 1; }

@media (max-width: 768px) { 
    .admin-panel-tab-button { display: none; }
    .sys-instace-type { display: none; }
    .user-placeholder { top: -4px; }
    .sitePage { border-radius: 0; width: 100%; margin-top: 0; margin-bottom: 0; }
    .contentWrapper { padding: 0; }  
    .signin-link { margin-left: 10px }
}

@media(max-width:460px) {
    .btn-mag-lang-picker .btn, .appLink { padding: 2px 4px; }
}

@media (max-width: 375px) {
    a.appLink { max-width: 145px; }
    a.appLink span:not(.caret) { max-width: 80%; }
}

@media (max-width: 340px) {      
    a.appLink, .siteHeader-items .btn-mag-lang-picker .btn { font-size: 11px; }
    .userBox img { height: 35px; }
}

@media (max-width: 272px) {
    .siteHeader .userBox { margin-bottom:10px;}
}

@media (max-width: 163px) {
    .siteHeader-items .btn-mag-lang-picker { margin-bottom: 10px; }
}

/*SitePlusSideBar Master*/
.mag-page-plus-sidebar .siteBody { min-height: 600px; padding-left: 0; }
.mag-page-plus-sidebar #page_wrapper { position: relative; overflow-x: hidden; }
.mag-page-plus-sidebar .layout-content {padding-left: 262px; transition: all 0.01s ease 0s; overflow-x: hidden; position: relative; }
.mag-page-plus-sidebar .layout-sidebar { width: 250px; position: absolute; background-color: var(--mag-page-bg-color); height: 95%; 
                                         max-height: 100%; overflow-y: auto; z-index: 900;top: 0; left: 0; right: 0; 
                                         border:1px solid var(--mag-element-border-color);}
.mag-page-plus-sidebar #menu-toggle { position: relative; left: 0px; margin-bottom: 2px; }

@media (max-width:767px) {
    .mag-page-plus-sidebar .layout-content { padding-left: 15px; }
    .mag-page-plus-sidebar .layout-sidebar { left: -255px; top: 22px; }
    .mag-page-plus-sidebar #page_wrapper.activated .layout-sidebar { left: 0px; width: 250px; transition: all 0.4s ease 0s; }
}