/*
 * AdminLTE v2.4.2 Skin BLACK light modifications by SEFIRA
 */

:root { /* branding variables */
  /*
    WARNING: variables don't work in IE 11 and other outdated browsers
    WORKAROUND 1: replace all variables with their values before building the result
    WORKAROUND 2: A library like ponyfill can be used to filter new CSS in old browsers
  */

  /* main color and its complement */
  --color-main: dimgray;
  --color-main-complement: white;

  /* lighter color and its complement */
  --color-secondary: gray;
  --color-secondary-complement: white;

  /* colors and their common complement */
  --color-green: green; /* success */
  --color-red: firebrick; /* error */
  --color-orange: orange; /* warning */
  --color-blue: royalblue; /* info */
  --color-black: black;
  --color-complement: white; /* common complement of all these colors */

  /* protected space around the logo */
  --logo-padding: 15%;

  /* background image placement */
  --background-position: center 20%;
  --background-size: 100% auto;
}

:root { /* common variables */
  --new-mobile-id-padding-width: 13px;
  --new-mobile-id-padding-height: 16px;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6,
body {
  font-family: Play, Helvetica, Arial, sans-serif;
}

a,
a:link,
a:visited {
  color: royalblue; /* fallback for IE compatibility */
  color: var(--color-main);
  text-decoration: none;
}

a:hover,
a:active {
  color: royalblue; /* fallback for IE compatibility */
  color: var(--color-main);
  text-decoration: underline;
}

/********************************/

.skin-black .wrapper > .main-header {
  border-bottom: 1px solid var(--color-main);
}

.skin-black .wrapper > .main-header > a.logo {
  color: var(--color-main-complement);
  border-color: var(--color-main);
}

/*@media (max-width: 767px) {*/
.skin-black .main-header > .logo,
.skin-black .main-header > .logo:link,
.skin-black .main-header > .logo:visited,
.skin-black .main-header > .logo:hover,
.skin-black .main-header > .logo:active {
  background-color: var(--color-secondary);
  text-decoration: none;
}
/*}*/

.skin-black .main-header .navbar {
  color: var(--color-main-complement);
  background-color: var(--color-main);
}

.header-headline {
  font-size: large;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 60px;
}

.skin-black .main-header .logo-mini,
.skin-black .main-header .logo-lg {
  margin: 9px;
  height: 32px;
}

.skin-black .main-header .logo-mini > svg,
.skin-black .main-header .logo-lg > svg {
  height: 100%;
  width: 100%;
  fill: var(--color-secondary-complement);
}

.skin-black .main-header .navbar .navbar-custom-menu .navbar-nav > li > a,
.skin-black .main-header .navbar > .sidebar-toggle {
  color: var(--color-main-complement);
  border-color: var(--color-main);
  text-decoration: none;
}

.skin-black .main-header .navbar .navbar-custom-menu .navbar-nav > li > a:hover,
.skin-black .main-header .navbar .navbar-custom-menu .navbar-nav > li > a:focus,
.skin-black .main-header .navbar .navbar-custom-menu .navbar-nav > li > a:active,
.skin-black .main-header .navbar > .sidebar-toggle:hover {
  color: var(--color-secondary-complement);
  background-color: var(--color-secondary);
  text-decoration: none;
}

.navbar > .navbar-custom-menu > .nav > .user > .dropdown-menu {
  color: black;
  background-color: var(--color-main);
  border-color: var(--color-main);
  border-width: 0;
  border-style: solid;
  border-radius: 4px;
  padding: 0;
  width: 400px;
  box-shadow: rgba(0,0,0,0.1) 0 2px 6px;
}

.navbar > .navbar-custom-menu > .nav > .user > .dropdown-menu > .user-header,
.navbar > .navbar-custom-menu > .nav > .user > .dropdown-menu > .user-header-plain {
  border-color: var(--color-main);
  border-width: 0;
  border-style: solid;
  border-radius: 4px 4px 0 0;
}

.navbar > .navbar-custom-menu > .nav > .user > .dropdown-menu > .user-header-plain {
  padding: 15px;
  font-weight: bolder;
  background-color: var(--color-main-complement);
}

.navbar > .navbar-custom-menu > .nav > .user > .dropdown-menu > .user-body {
  border-color: #D9D9D9;
  border-width: 1px 0 1px 0;
  border-style: solid;
  border-radius: 0;
  background-color: var(--color-main-complement);
}

.navbar > .navbar-custom-menu > .nav > .user > .dropdown-menu > .user-footer {
  border-color: var(--color-main);
  border-width: 0;
  border-style: solid;
  border-radius: 0 0 4px 4px;
  background-color: var(--color-main-complement);
}

.navbar > .navbar-custom-menu > .nav > .user > .dropdown-menu .user-footer .btn {
  width: 100% !important;
  color: black !important;
}

.skin-black .sidebar-menu > li > a {
  color: white;
  /*background-color: rgba(0, 0, 0, 0.2);*/
}

.skin-black .sidebar-menu > li.active > a {
  border-left-color: var(--color-secondary);
}

.skin-black .sidebar-menu > li:hover > a,
.skin-black .sidebar-menu > li.active > a {
  background-color: black;
  color: var(--color-main-complement);
}

.skin-black .content-header {
  padding: 15px 30px;
}

.skin-black .content-wrapper {
  /*background-image: url(".../userportal/static/branding/images/background.svg");*/ /* This has to be set in HTML or JavaScript because of the ".../userportal/" prefix */
  background-repeat: no-repeat;
  background-color: #ECF0F5;
  background-position: bottom 20px right 20px; /* fallback for IE compatibility */
  background-position: var(--background-position);
  background-size: 25% auto; /* fallback for IE compatibility */
  background-size: var(--background-size);
  background-attachment: fixed;
}

.main-sidebar {
  min-height: 100%;
}

.skin-black .main-sidebar {
  border-right-color: var(--color-main);
  background-color: #222D32;
}

.main-sidebar > .sidebar {
  padding-top: 15px !important;
  min-height: 100%;
}

.nav-tabs-custom > .nav-tabs > li.header {
  font-size: 18px !important;
}

.form-horizontal .form-group {
  margin-bottom: 0;
}

.btn-group > .btn {
  float: inherit;
}

.public-login-button,
.public-index-info,
.app-download,
.new-identity-button,
.pin-change-text {
  padding-bottom: 20px;
}

.full-name {
  padding-bottom: 40px;
}

.public-login-button .btn {
  padding: 20px !important;
  width: 100% !important;
}

.pull-left {
  padding-right: 10px;
}

.pull-right {
  padding-left: 10px;
}

.sidebar-logo {
  padding: 10%; /* fallback for IE compatibility */
  padding: var(--logo-padding);
}

.main-page-logo {
  display: inline-block;
}

.main-page-logo .img {
  max-width: 100%;
  max-height: 100%;
  height: 100px;
  margin: 10% 0; /* fallback for IE compatibility */
  margin: var(--logo-padding) 0;
}

.full-width { /* TODO: zrušit */
  width: 100% !important;
}

.table-of-buttons .btn {
  height: 100% !important;
}

/* Sloupec tabulky minimální šířky */
table th.col-width-min,
table td.col-width-min,
table td.col-icons {
  white-space: nowrap;
  width: 1px;
}

table td.col-icons {
  text-align: center;
}

/* Zalomení textu na celá slova */
.col-break-word {
  word-break: break-word;
  overflow-wrap: break-word;
}

.custom-bg-black,
.custom-bg-main,
.custom-bg-secondary,
.custom-bg-green,
.custom-bg-red,
.custom-bg-orange,
.custom-bg-blue {
  border-color: rgba(0, 0, 0, 0.15) !important;
  color: white; /* fallback for IE compatibility */
  color: var(--color-complement) !important;
}

.custom-bg-black a,
.custom-bg-black a:hover,
.custom-bg-black a:link,
.custom-bg-black a:visited,
.custom-bg-main a,
.custom-bg-main a:hover,
.custom-bg-main a:link,
.custom-bg-main a:visited,
.custom-bg-secondary a,
.custom-bg-secondary a:hover,
.custom-bg-secondary a:link,
.custom-bg-secondary a:visited,
.custom-bg-green a,
.custom-bg-green a:hover,
.custom-bg-green a:link,
.custom-bg-green a:visited,
.custom-bg-red a,
.custom-bg-red a:hover,
.custom-bg-red a:link,
.custom-bg-red a:visited,
.custom-bg-orange a,
.custom-bg-orange a:hover,
.custom-bg-orange a:link,
.custom-bg-orange a:visited,
.custom-bg-blue a,
.custom-bg-blue a:hover,
.custom-bg-blue a:link,
.custom-bg-blue a:visited {
  color: white; /* fallback for IE compatibility */
  color: var(--color-complement) !important;
}

.custom-bg-black {
  background-color: black; /* fallback for IE compatibility */
  background-color: var(--color-black) !important;
}

.custom-bg-main {
  background-color: var(--color-main) !important;
}

.custom-bg-secondary {
  background-color: var(--color-secondary) !important;
}

.custom-bg-green {
  background-color: green; /* fallback for IE compatibility */
  background-color: var(--color-green) !important;
}

.custom-bg-red {
  background-color: firebrick; /* fallback for IE compatibility */
  background-color: var(--color-red) !important;
}

.custom-bg-orange {
  background-color: orange; /* fallback for IE compatibility */
  background-color: var(--color-orange) !important;
}

.custom-bg-blue {
  background-color: royalblue; /* fallback for IE compatibility */
  background-color: var(--color-blue) !important;
}

.custom-bg-color-complement {
  background-color: white; /* fallback for IE compatibility */
  background-color: var(--color-complement) !important;
  color: black; /* fallback for IE compatibility */
  color: var(--color-black) !important;
}

.custom-border-black,
.custom-border-black hr {
  border-color: black; /* fallback for IE compatibility */
  border-color: var(--color-black) !important;
}

.custom-border-main,
.custom-border-main hr {
  border-color: var(--color-main) !important;
}

.custom-border-secondary,
.custom-border-secondary hr {
  border-color: var(--color-secondary) !important;
}

.custom-border-green,
.custom-border-green hr {
  border-color: green; /* fallback for IE compatibility */
  border-color: var(--color-green) !important;
}

.custom-border-red,
.custom-border-red hr {
  border-color: firebrick; /* fallback for IE compatibility */
  border-color: var(--color-red) !important;
}

.custom-border-orange,
.custom-border-orange hr {
  border-color: orange; /* fallback for IE compatibility */
  border-color: var(--color-orange) !important;
}

.custom-border-blue,
.custom-border-blue hr {
  border-color: royalblue; /* fallback for IE compatibility */
  border-color: var(--color-blue) !important;
}

.custom-txt-black {
  color: black; /* fallback for IE compatibility */
  color: var(--color-black) !important;
}

.custom-txt-main {
  color: var(--color-main) !important;
}

.custom-txt-secondary {
  color: var(--color-secondary) !important;
}

.custom-txt-green {
  color: green; /* fallback for IE compatibility */
  color: var(--color-green) !important;
}

.custom-txt-red {
  color: firebrick; /* fallback for IE compatibility */
  color: var(--color-red) !important;
}

.custom-txt-orange {
  color: orange; /* fallback for IE compatibility */
  color: var(--color-orange) !important;
}

.custom-txt-blue {
  color: royalblue; /* fallback for IE compatibility */
  color: var(--color-blue) !important;
}

.table-borderless > thead > th,
.table-borderless > tbody > tr,
.table-borderless > tbody > tr > td,
.table-borderless > tbody {
  border: 0;
}

.box.box-solid {
  background-color: rgba(255, 255, 255, 0.5);
}

.box.box-solid > .box-header {
  font-weight: bold;
  background-color: rgba(255, 255, 255, 0.5);
}

.btn-google,
.btn-google:link,
.btn-google:visited,
.btn-google:hover,
.btn-google:active,
.btn-apple,
.btn-apple:link,
.btn-apple:visited,
.btn-apple:hover,
.btn-apple:active {
  height: 100px;
  background-color: rgba(0, 0, 0, 0); /* ensure no background around image */
}

.btn-google {
  padding: 0;
}

.btn-apple {
  padding: var(--new-mobile-id-padding-height);
}

#code_qr_apple,
#code_qr_google,
#verif_code_qr {
  /*background-color: rgba(255, 255, 255, 0.5);*/
  text-align: center;
  padding-bottom: 20px;
  padding-top: 20px;
}

.pb-nmi {
  padding-bottom: var(--new-mobile-id-padding-height);
}

.main-footer {
  border-color: #D2D6DE;
  color: black;
}

/* This class exists in Bootstrap 4, which is used in AdminLTE 3 */
@media (min-width: 992px) {
  .text-md-right {
    text-align: right !important;
  }
}

.main-page,
.user-header-plain .user-name,
.app-download .qr-code,
.app-download .app-download-button,
.mobile-pairing-code .qr-code {
  text-align: center;
}

li.user-body .table {
  margin: 0;
}

.monospace {
  font-family: monospace;
}

.code-div {
  white-space: pre-wrap;
  font-family: monospace;
  border-color: black; /* fallback for IE compatibility */
  border-color: var(--color-black);
  border-width: 1px;
  border-style: solid;
  padding: 5px;
}

.overflow-auto {
  overflow: auto;
}

.align-right {
  text-align: right;
}

.filter-grayscale {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.filter-invert {
  -webkit-filter: invert(100%);
  filter: invert(100%);
}

@keyframes fade {
  from { opacity: 1.0; }
  50% { opacity: 0.3; }
  to { opacity: 1.0; }
}

@-webkit-keyframes fade {
  from { opacity: 1.0; }
  50% { opacity: 0.3; }
  to { opacity: 1.0; }
}

.animation-fade {
  animation:fade 2000ms infinite;
  -webkit-animation:fade 2000ms infinite;
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
  color: white; /* fallback for IE compatibility */
  color: var(--color-complement);
  background-color: royalblue; /* fallback for IE compatibility */
  background-color: var(--color-blue);
  border-color: royalblue; /* fallback for IE compatibility */
  border-color: var(--color-blue);
}

.menu-flag {
  max-width: 20px;
  max-height: 12px;
}