html, body {
  margin: 0;
  min-height: 100%;
  height: 100%;
}

.main-body.popup-page {
  max-height: calc(100vh - 0px);
}

/* Popups open in narrow windows (e.g. image picker at 540px), where the
   header buttons are the only place to confirm. The base rule in main.css
   hides .form-component__buttons below 768px, which makes the confirm/cancel
   buttons disappear in these small popup windows. Action buttons must never be
   hidden by window width, so force them visible everywhere. These buttons only
   appear inside popups, so there is no risk of duplicates in the main admin. */
.form-component__buttons {
  display: flex !important;
}

/* Beautify legacy custom action buttons (input.button) used by picker popups
   so they match the design-system .btn look instead of raw native buttons.
   These only appear inside .form-component__buttons (popup headers). */
.form-component__buttons .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 0;
  border-radius: 48px;
  font-family: inherit;
  font-size: 15px;
  line-height: 23px;
  cursor: pointer;
  color: rgba(33, 35, 39, 0.5019607843);
  background-color: #F3F4F6;
  transition: transform 0.25s ease-out;
}
.form-component__buttons .button:hover,
.form-component__buttons .button:focus {
  transform: scale(1.05);
  outline: none;
}
/* First button is the primary confirm action (e.g. "Velja mynd"). */
.form-component__buttons .button:first-child {
  color: #fff;
  background-color: var(--color-primary);
}

/* On narrow popup windows the fixed 64px burger button overlays the popup
   title. Pad the header so the title clears the burger. */
@media only screen and (max-width: 61.99em) {
  .popup-page .form-component__header {
    padding-left: 64px;
  }
}

/* Modernize legacy fieldset/legend cards used by picker popups. */
.popup-page fieldset {
  border: 1px solid #DADEE7;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 0 0 16px;
}
.popup-page fieldset legend {
  padding: 0 8px;
  font-size: 13px;
  font-weight: 600;
  color: #212327;
}
.popup-page fieldset .fields td {
  color: rgba(33, 35, 39, 0.6);
  font-size: 14px;
  vertical-align: middle;
}

/* Modernize the native <select> controls in picker popups. */
.popup-page fieldset select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  height: 40px;
  padding: 0 36px 0 12px;
  border: 1px solid #DADEE7;
  border-radius: 8px;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23212327' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  font-family: inherit;
  font-size: 14px;
  color: #212327;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.popup-page fieldset select:hover {
  border-color: #b9c0cc;
}
.popup-page fieldset select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(52, 121, 254, 0.15);
}

/* Give the picture-list iframe a matching rounded frame. */
.popup-page #picturesFrame {
  max-width: 100%;
  border: 1px solid #DADEE7;
  border-radius: 10px;
  background: #fff;
}

.data-table thead th {
  background-color: #ffffff;
}

#tree #header {
  display: none;
}

#tree {
  height: 100%;
  overflow: auto;
}

.dtree {
  height: calc(100% - 60px);
  overflow: auto;
}

.dtree .dTreeNode {
  position: relative;
}

.dtree .clip .dTreeNode {
  border-bottom: 1px solid #DADEE7;
}

.dtree > .dTreeNode a:before {
  content: "\e5cc";
  display: block;
  font-family: "Material Icons";
  font-weight: normal;
  font-size: 10px;
  position: absolute;
  left: 12px;
  top: 10px;
  transform: rotate(90deg);
  color: #3479fe;
}

.dtree .clip .dTreeNode + .clip .dTreeNode {
  border-bottom: none;
}

.dtree > .dTreeNode {
  padding: 8px 32px;
  background-color: #F8FAFF;
  border: 1px solid rgba(52, 121, 254, 0.1490196078);
  border-radius: 10px;
  display: flex;
  align-items: center;
  color: #3479fe;
}

.dtree .dTreeNode a.first-link {
  display: flex;
  align-items: center;
  width: 20px;
  height: 20px;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 7px;
}

.dtree .dTreeNode a.first-link img {
  width: 6px;
}


.dtree .clip {
  height: calc(100% - 60px);
  overflow: auto;
  padding-left: 32px;
}

.dtree .clip .node,
.dtree .clip .nodeSel {
  display: block;
  padding: 18px 40px 18px 32px;
}

.dTreeNode .side-icon {
  display: none;
}

.dtree + .dTreeNode a {
  display: inline-block;
  width: 100%;
  padding: 0;
  transition: all 0.3s ease;
  position: relative;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  color: inherit;
}


.login-page {
  display: flex;
  justify-content: center;
  align-content: center;
  width: 100%;
  height: 100%;
  min-height: 100%;
  background-color: #F3F4F6;
}

.login-page .logo {
  display: block;
  margin: 0 auto 64px;
}

.login-page .login-block {
  align-self: center;
}

.login-page .login-parent {
  display: flex;
  gap: 64px;
  justify-content: space-between;
  align-items: center;
  border-radius: 10px;
  background-color: #fff;
  padding: 64px;
}

.login-right {
  color: #212327;
  align-self: flex-start;
  max-width: 385px;
  width: 100%;
}

.login-right h3 {
  font-weight: 700;
  font-size: 24px;
  margin: 0 0 32px;
}

.login-right p {
  font-weight: 400;
  font-size: 15px;
  line-height: 23px;
  margin: 0 0 48px;
}

.login-right .input-block {
  margin-bottom: 30px;
}

.login-right form .input-block span {
  display: block;
  font-weight: 600;
  font-size: 13px;
  line-height: 23px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.login-right form input {
  color: #212327;
  width: 100%;
  height: 48px;
  border-radius: 10px;
  border: 1px solid #DADEE7;
  padding: 0 0 0 16px;
}

.login-right form button {
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 15px;
  line-height: 23px;
  letter-spacing: 0;
  border: none;
  border-radius: 48px;
  background-color: #3479FE;
  height: 48px;
  width: 100%;
  padding: 0 24px;
}

.login-right form button.selector-button {
  width: auto;
}

.login-right form button svg {
  margin-right: 12px;
}

.login-right a {
  display: block;
  color: #3479FE;
  font-weight: 500;
  font-size: 15px;
  line-height: 23px;
  text-decoration: none;
  margin-top: 30px;
  text-align: center;
}


.login-right .select-block {
  position: relative;
  width: 100%;
  height: 48px;
  border-radius: 10px;
  border: 1px solid #DADEE7;
  padding: 0;
}

.login-right .select-block svg {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 22px;
}

.login-right .select-block select {
  color: #212327;
  font-weight: 400;
  font-size: 15px;
  line-height: 23px;
  border: none;
  height: 46px;
  width: 100%;
  border-radius: 10px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
  padding: 0 0 0 16px;
}

.table-icon {
  display: inline-block;
  vertical-align: middle;
  margin: 0 8px 0 0;
}

.custom-checkbox input[type="checkbox"] {
  opacity: 0;
  visibility: hidden;
  width: 0;
  height: 0;
}

.custom-checkbox span {
  cursor: pointer;
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid #DADEE7;
}

.custom-checkbox span img {
  display: none;
}

.custom-checkbox input[type="checkbox"]:checked + span img {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.custom-first input[type="checkbox"]:checked + span {
  background-color: #3479FE;
  border: none;
}

.custom-first input[type="checkbox"]:checked + span:before {
  content: '';
  display: block;
  width: 12px;
  height: 2px;
  background-color: #ffffff;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 1024px) {
  .login-page .login-parent {
    gap: 16px;
    margin: 0 16px;
    flex-direction: column;
    padding: 24px;
  }
  .login-page .logo {
    margin: 0 auto 24px;
  }
  .login-page .login-parent img{
    width: 75%;
    margin: 0 auto;
  }
  .login-page .login-right h3{
    margin-bottom: 16px;
  }
  .login-right p{
    margin-bottom: 16px;
  }
  .login-right .input-block {
    margin-bottom: 16px;
  }
  .login-right a{
    margin-bottom: 24px;
  }
}