:root {
    --root-bg: #ffffff;
    --root-text: #2b49a6;
    --head-bg: #49608a;
    --head-text: #ffffff;
    --head-text-sel: #ffa500;
    --head-hover: #c0c0c0;
    --head-border: lightblue;
    --main-bg: #ffffff;
    --content-bg: #ffffff;
    --menu-bg: #49608a;
    --menu-text: #ffffff;
    --menu-btn: #ffffff;
    --menu-border: lightblue;
    --foot-bg: #57585c;
    --foot-text: lightgray;
    --foot-hoover: gray;
    --foot-border: lightblue;
}

html, body { margin:0; padding:0; background-color:var(--root-bg); color:var(--root-text); font-family:Arial,Verdana,Tahoma; min-height: 100vh; }
body { display:flex; flex-direction:column; }
header { width:100%; min-height:2em; background-color: var(--head-bg); border-bottom: 1px solid var(--head-border); }
header .inner { margin:auto; width:100%; }

header .inner .menu { float: left; }
header .inner .menu > button { color: var(--menu-text); font-size: 1.75em;}
header .inner .menu > button:focus { box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.66); }

header .inner .main { float:left; padding:0.5em 1em;}
header .inner .main a { font-size: 2em; }

header .inner .nav { float:right; right:20px; position:relative; }
header .inner .nav ul { list-style-type: none; margin:auto; }
header .inner .nav ul li { float:left; padding:0.5em; }
header .inner .nav ul li a { font-size:1.0em; }
header .inner .nav ul li a img { width:2.0em; }
header .inner .nav .nav-link { padding:0 !important; }
header .inner a { color: var(--head-text); text-decoration: none; }
header .inner a:hover { color: var(--head-hover); }
header .inner a.selected { color: var(--head-text-sel); }

header .dropdown-language a { color:var(--fbc-secondary-text); }
header .dropdown-language a:hover { color:var(--fbc-primary-text); }
header .flag-icon-background {background-size:contain;background-position:50%;background-repeat:no-repeat}
header .flag-icon {background-size:contain;background-position:50%;background-repeat:no-repeat;position:relative;display:inline-block;width:1.33333333em;line-height:1em}
header .flag-icon:before {content:'\00a0'}
header .flag-icon.flag-icon-squared {width:1em}
header .flag-icon-hu{background-image:url(/skin/admin/images/flags/hu_flat.svg)}
header .flag-icon-hu.flag-icon-squared{background-image:url(/skin/admin/images/flags/hu.svg)}
header .flag-icon-en{background-image:url(/skin/admin/images/flags/en_flat.svg)}
header .flag-icon-en.flag-icon-squared{background-image:url(/skin/admin/images/flags/en.svg)}

footer { border-top: 1px solid var(--foot-border); width:100%; min-height:2em; }
footer .inner { font-size: 0.75em; float:left; width:100%; background-color:var(--foot-bg); }
footer .inner > div { float:inherit; color:var(--foot-text); width:calc(100%/3); }
footer .inner > .center { white-space: nowrap; }
footer .inner > div a { color:var(--foot-text); text-decoration:none; }
footer .inner > div a:hover { color:var(--foot-hoover);}
footer .inner > .left > div { margin: 12px 40px !important; }
footer .inner > .center > div { margin: 12px auto !important; width:50%; min-width: 230px; }
footer .inner > .right { text-align: right; }
footer .inner > .right > div  { margin: 12px 20px !important; }

main { background-color:var(--main-bg); flex:1; display:flex; flex-direction:row; }
main h1 { padding: 0 1em;}
main p { padding: 0 1em; line-height:1.4em; }
main div { line-height:1.4em; }
main h2 { padding: 0 0.6em; }
main .img { width:100%; }
main .img img { width:100%; }
main > div { }
main > .inner { width:100%; }

main > .inner > .menu { float:left; display:flex !important; border-right:1px solid var(--menu-border); height:100%; background-color: var(--menu-bg); color:var(--menu-text);}
main > .inner > .menu .sidebar { min-height: auto !important; }
main > .inner > .menu .sidebar #sidebarToggle { background-color: var(--menu-btn) !important; }
main > .inner > .menu .sidebar hr.sidebar-divider { margin: 1rem 1rem; }
main > .inner > .menu .sidebar .nav-item .nav-link { padding: 0.5rem 1rem 0rem 1rem; color:var(--menu-text); }
main > .inner > .menu .sidebar .nav-item.active .nav-link { padding: 0.5rem 1rem 0rem 1rem; }
main > .inner > .menu .sidebar .nav-item { padding-bottom:0; }
main > .inner > .menu .sidebar .nav-item:first-child { padding-top: 1rem; }

main > .inner > .waiting { background-color:var(--content-bg); margin:0; padding: 1em; overflow-y: auto; min-height:100%; }
main > .inner > .waiting > .outer { display: flex; width:100%; height:100%; margin-top: auto; margin-bottom: auto;}
main > .inner > .waiting > .outer > .justify-content-center { margin-left: auto; margin-right: auto; text-align: center; }

main > .inner > .content { background-color:var(--content-bg); margin:0; padding: 1em; min-height:100%; overflow-y: auto; }
main > .inner > .content > .outer { clear: both; width: 100%; height: 100%; }
main > .inner > .content > .container-fluid { padding-left:0px; padding-right:0px; }
main > .inner > .content > .container-fluid .table-responsive > .dataTables_wrapper > .row {  margin-left:0; margin-right:0; }

main > .inner > .content #index-faces #dataTable tr > td:has(> img.dt-image) { text-align: center; }
main > .inner > .content #face-image-info span.title { font-weight:600; }
main > .inner > .content #face-image { text-align: center; }
main > .inner > .content #face-image > img { max-width:100%; }

main > .inner > .content #glasses-info span.title { font-weight:600; }
main > .inner > .content #glass-image-download { display:flex; justify-content:center; }
main > .inner > .content #glass-image-download > .btn { margin-left: 0.25em; margin-right: 0.25em; }
main > .inner > .content #glass-image-fit { text-align: center; }
main > .inner > .content #glass-image-fit > .img { width:auto; height:auto; padding-bottom:1em; }
main > .inner > .content #glass-image-fit > .img > img { width:auto; height:auto; border: 1px dashed #2288aa; border-radius: 3px; max-width:100%; background-color: #f2f2f2; }
main > .inner > .content #glass-image-fit > .controller { display: flex; justify-content: center; }
main > .inner > .content #glass-image-fit > .controller > .title { margin-top: auto; margin-bottom: auto; padding-right:1em; padding-left:1em; }
main > .inner > .content #glass-image-fit > .controller > .item { width: 2em; height: 2em; border-radius: 1em; border: 1px solid #2288aa; }
main > .inner > .content #glass-image-fit > .controller > .item.sel { border: 1px solid var(--head-text-sel); }
main > .inner > .content #glass-image-fit > .controller > .default { background-color: #f2f2f2; }
main > .inner > .content #glass-image-fit > .controller > .black { background-color: #000000; }
main > .inner > .content #glass-image-fit > .controller > .gray { background-color: #808080; }
main > .inner > .content #glass-image-fit > .controller > .white { background-color: #ffffff; }


main > div form.login > fieldset > .hidden { display: none; }
main > div form.login > fieldset:disabled > a.btn { pointer-events: visible !important; cursor: no-drop !important; }

div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:last-child { padding-right: 0.75rem !important; }
div.table-responsive > div.dataTables_wrapper > div.row > div[class^="col-"]:first-child { padding-left: 0.75rem !important; }

.imagelist { justify-content: center; align-items: center; display: flex; }
.imagelist .aic-demo-image { }

@media (min-width:991px) {}
@media (max-width: 990px) and (min-width:840px) {}
@media (max-width: 839px) and (min-width:768px) {}
@media (max-width: 767px) and (min-width:640px) {}
@media (max-width: 639px) {
    header { height:3.5em; }
    header .inner .main { padding: 1em 0.5em 1em 0.5em; }
    header .inner .main a { font-size: 1.2em; }
    header .inner .nav ul li a { font-size:0.8em; }
    header .inner .nav { padding: 0;  }
    footer .inner > div { float:none; width:100%; padding:0; text-align: left; }
}
@media (max-width: 639px) and (min-width:480px) {}
@media (min-width: 576px) {
  .modal-dialog { max-width: none; }
}
@media (max-width: 479px) {
    header { height:auto; }
    header .inner { width:auto; }
    header .inner .main { padding: 1em 0.5em 1em 0.5em; float:none; }
    header .inner .nav { padding:0; float:none; position:absolute; top:0; right:0; }
    header .inner .nav ul { margin:0; padding:0; height:2.5em; }
    footer .inner > .center > div { margin:0 !important; width:100%; text-align:center; }
}
@media (max-width: 479px) and (min-width:360px) { }
@media (max-width: 359px) and (min-width:320px) {}
@media (max-width: 319px) {}

.bg-login-image { background:none; }
.bg-register-image { background:none; }
.bg-password-image { background:none; }

.p-rel { position: relative; }
.input-file-hidden { position: absolute; opacity: 0; top: 0; right: 0; bottom: 0; left: 0; width: 100%; border: 0; margin:0; border-radius: 10px; z-index:1000;}

#aicommerce-admin-auth-dialog .error { font-size:1rem !important; background-color: var(--danger); width: 100%; border-radius: 0.25em; padding: 5px 15px 5px 15px; color: yellow; text-align: center; }
#aicommerce-admin-auth-dialog .error .title { font-weight:600; font-size:1.5rem important; }
#aicommerce-admin-auth-dialog .error .message { dontfont-weight:100; color:yellow; text-align:justify; }