/*
Copyright (C) 2001-2021 OTRS AG, https://otrs.com/
Copyright (C) 2021 Znuny GmbH, https://znuny.org/

This software comes with ABSOLUTELY NO WARRANTY. For details, see
the enclosed file COPYING for license information (GPL). If you
did not receive this file, see https://www.gnu.org/licenses/gpl-3.0.txt.
*/

/**
 * @package     Skin "Default"
 * @section     Application
 * @subsection  Admin
 */

@media screen,projection,tv,handheld {

textarea:focus, input:focus{
    outline: none;
}

/**
 * @subsection      Getting Started
 */

.GettingStarted {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-md);
}

.GettingStarted.LittlePadding {
    padding-top: 15px;
}

.GettingStarted li {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: var(--gap-sm);
    width: 250px;
    height: 205px;
    border: var(--border-width) var(--border-solid) var(--border-color);
    border-radius: var(--border-radius-lg);
    background: var(--main-bg-color);
    padding: var(--padding-lg);
}

.GettingStarted li i {
    color: var(--gray-dark-semi);
    font-size: 28px;
}

.GettingStarted li p {
    width: fit-content;
    max-width: 205px;
    color: var(--black);
    font-weight: var(--normal);
    font-size: 14px;
    line-height: 22px;
    letter-spacing: .1px;
    text-align: center; 
}

.GettingStarted li p a {
    color: var(--primary-color);
    transition: var(--main-transition);
}

.GettingStarted li p a:hover {
    text-decoration: underline;
}

.GettingStarted + .SearchBox {
    display: flex;
    align-items: center;
    padding: var(--padding-lg);
    padding-top: 0;
    max-width: 830px;
    margin: auto;
    width: 100%;
}

#SearchBoxAutoComplete > span {
    position: relative;
    flex: 1;
    width: 100%;
}

#SearchBoxAutoComplete #SysConfigSearch + .AJAXLoader {
    position: absolute;
    right: 15px;
    top: 10px;
}

/**
 * @subsection      General
 */

p.NoItemsInfo {
    padding-bottom: 10px;
}

p.NoItemsInfo i {
    display: block;
    font-size: 30px;
    margin: 10px 0px 15px 0px;
    color: #aaa;
}

.SearchBox input[type=text] {
    width: 218px;
    margin-bottom: 2px;
}

.SearchBox button {
    position: relative;
    top: -2px;
}

#ConfigTree {
    padding: 2px 0px 5px 0px;
    font-size: 12px;
    margin-top: 5px;
    overflow: hidden;
}

#ConfigTree .OpenNodeInNewWindow {
    display: none;
    position: absolute;
    right: -10px;
}

#ConfigTree .OpenNodeInNewWindow i {
    position: relative;
    top: 1px;
    font-size: 11px;
}

#ConfigTree > p {
    line-height: 100px;
}

#ConfigTree a.jstree-disabled {
    color: #777;
}

#ConfigTreeSearch {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 5px;
    padding: 5px;
}

/*#ConfigTree .jstree-hovered:not(.jstree-disabled),
#ConfigTree .jstree-wholerow-hovered:not(.jstree-disabled) {
    background: #ddd !important;
}*/

.UpdateSetting {
    margin: 3px;
}

.DefaultValue {
    margin: 3px;
}


/**
 * @subsection      Search
 */

h2.SearchResults {
    text-align: center;
    margin: 0px 0px 20px 0px;
}

/**
 * @subsection      Settings
 */

 div.Setting div.Hash input[type="text"]:not(:checked), 
 div.Setting div.SettingContent > input[disabled="disabled"].Key,
 div.Setting div.SettingContent > textarea {
    background: var(--main-bg-color);
    color: var(--black);
    font-size: var(--font-size-sm);
    border-color: transparent;
}

.HashItem > input {
    max-width: 30%;
}

.Setting > .SettingContent {
    display: flex;
    align-items: center;
    gap: var(--gap-xs);
    /*padding: var(--padding-lg);*/
    flex-wrap: wrap;
}

.IsLockedByMe .Setting > .SettingContent {
    padding: var(--padding-lg);
  }

/*.HashItem .Key {
    float: left;
}*/

.SettingContent .DatepickerIcon {
    width: 24px;
    height: 24px;
    min-height: 24px;
    min-width: 24px;
}

/**
 * @subsubsection     Dialogs: General
 */

.HelpDialog {
    width: 400px;
    padding: 5px;
    max-width: 100%;
}

.DialogComment {
    box-sizing: border-box;
    font-family: sans-serif;
    padding: 5px;
    width: 100%;
    min-height: 58px;
}

.Dialog > p {
    margin-bottom: 10px;
}

.Dialog .WidgetSimple {
    margin: 0px 0px 7px 0px;
}

.Dialog .WidgetSimple .Header input {
    position: absolute;
    right: 5px;
    top: 5px;
}

.Dialog .WidgetSimple:last-child {
    margin-bottom: 0px;
}

.Dialog .Overlay {
    display: none;
    background: #fff;
    height: 100%;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.Dialog .Overlay.Preparing {
    display: block;
}

.Dialog .Overlay span {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    height: 15px;
}

.Dialog .Overlay em {
    font-style: normal;
    line-height: 140%;
    max-width: 80%;
    display: block;
    margin: 0px auto;
}

.Dialog .Overlay span i {
    position: absolute;
    margin-left: -6px;
    left: 50%;
    display: none;
}

.Dialog .Overlay.Preparing span i.Active {
    display: block;
}

.Dialog .Overlay span i.Success {
    color: green;
}

.Dialog .Overlay span i.Error {
    color: red;
}

.Dialog .WidgetSimple .Content .Code {
    padding: 0px 20px;
    margin: 0px -8px -10px -8px;
    white-space: pre-wrap;
    font-family: monospace;
    line-height: 150%;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
}

/**
 * @subsubsection     Deployment
 */

#DialogDeployment {
    min-height: 80px;
}

#DialogDeployment > p {
    margin-bottom: 10px;
}

#DialogDeployment + .ContentFooter .ButtonsRegular,
#DialogDeployment + .ContentFooter .ButtonsFinish,
#DialogDeployment + .ContentFooter .ButtonsTryAgain {
    display: none;
    gap: var(--padding-lg);
}

.TableLike.DeploymentData label,
.TableLike.DeploymentData .Field {
    min-height: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.TableLike.DeploymentData label {
    padding-top: 1px;
    color: #000;
}

.TableLike.DeploymentData .FieldExplanation {
    margin-bottom: 0px;
}

/**
 * @subsubsection     Widgets
 */

.WidgetSimple.Setting {
    position: relative;
}

.WidgetSimple > .Content {
    position: relative;
    overflow: hidden;
}

.WidgetSimple.Setting .ResetButton {
    display: none;
}

.WidgetSimple.Setting.IsLockedByMe .ResetButton {
    display: inline-block;
}

.WidgetSimple.Setting.IsModified,
.Legend span.IsModified {
    border-left: 8px var(--border-solid) var(--gray-dark-semi);
}

.RTL .WidgetSimple.Setting.IsModified,
.RTL .Legend span.IsModified {
    border-left: 8px var(--border-solid) var(--gray-dark-semi);
}

.WidgetSimple.Setting.IsDirty,
.Legend span.IsDirty {
    border-left: 8px var(--border-solid) var(--success-color);
}

.RTL .WidgetSimple.Setting.IsDirty,
.RTL .Legend span.IsDirty {
    border-left: 8px var(--border-solid) var(--success-color);
}

.WidgetSimple.Setting.IsLockedByAnotherUser,
.Legend span.IsLockedByAnotherUser {
    border-left: 8px var(--border-solid) var(--warning-color);
}

.RTL .WidgetSimple.Setting.IsLockedByAnotherUser,
.RTL .Legend span.IsLockedByAnotherUser {
    border-left: 8px var(--border-solid) var(--warning-color);
}

.WidgetSimple.Setting.IsLockedByMe,
.Legend span.IsLockedByMe {
    border-left: 8px var(--border-solid) var(--primary-color);
}

.RTL .WidgetSimple.Setting.IsLockedByMe,
.RTL .Legend span.IsLockedByMe {
    border-left: 8px var(--border-solid) var(--primary-color);
}

/*.WidgetSimple.Setting.IsLockedByMe input,
.WidgetSimple.Setting.IsLockedByMe textarea,
.WidgetSimple.Setting.IsLockedByMe label {
    color: inherit;
}*/

.WidgetSimple.Setting.IsLockedByMe {
    position: relative;
}

.WidgetSimple.Setting .Header {
    cursor: pointer;
    overflow: hidden;
    z-index: 5;
}

.Comparing .WidgetSimple.Setting .Header .ActionMenu {
    padding-left: var(--padding-xs);
}

/*.WidgetSimple.Setting .Header h2 {
    float: left;
    padding-left: 15px;
}*

.RTL .WidgetSimple.Setting .Header h2 {
    float: right;
    padding-left: 3px;
    padding-right: 15px;
}*/

.WidgetSimple.Setting .Header .HeaderMessage {
    font-size: 14px;
    color: var(--gray-medium);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-weight: var(--normal);
    margin-left: auto;
    padding-right: var(--padding-lg);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.WidgetSimple.Setting .Header .HeaderMessage a {
    color: var(--primary-color);
    transition: var(--main-transition);
    font-weight: var(--semi-bold);
}

.WidgetSimple.Setting .Header .HeaderMessage a:hover {
    text-decoration: underline;
}

.WidgetSimple.Setting .Header .HeaderMessage a,
.WidgetSimple.Setting .Header .HeaderMessage span {
    opacity: 0;
    transition: opacity ease 0.2s;
}

.WidgetSimple.Setting:hover .Header .HeaderMessage a,
.WidgetSimple.Setting:hover .Header .HeaderMessage span {
    opacity: 1;
}

.WidgetSimple.Setting .Header .HeaderMessage span + span:before {
    content: ", ";
    margin-left: -4px;
}

.WidgetSimple.Setting .Content fieldset > .SettingUpdateBox {
    flex-flow: row;
    justify-content: flex-end;
    /*padding-top: var(--padding-lg);*/
    gap: var(--gap-md);
    max-width: 100%;
}

/*.WidgetSimple.Setting.IsLockedByMe .Content .SettingUpdateBox {
    display: block;
}

.RTL .WidgetSimple.Setting.IsLockedByMe .Content .SettingUpdateBox {
    right: auto;
    left: 0px;
}

.WidgetSimple.Setting.IsLockedByMe.MenuExpanded .Content .SettingUpdateBox,
.WidgetSimple.Setting.IsLockedByMe.HasOverlay .Content .SettingUpdateBox {
    right: -88px;
    padding-right: 0px;
}

.WidgetSimple.Setting.IsLockedByMe .Content .SettingUpdateBox button.Update:hover span {
    color: #5BAD5B;
}

.RTL .WidgetSimple.Setting.IsLockedByMe .Content .SettingUpdateBox button.Update,
.RTL .WidgetSimple.Setting.IsLockedByMe .Content .SettingUpdateBox button.Cancel,
.RTL .WidgetSimple.Setting.IsLockedByMe .Content .SettingUpdateBox button.Update i,
.RTL .WidgetSimple.Setting.IsLockedByMe .Content .SettingUpdateBox button.Cancel i {
    margin-left: 0px;
}

.WidgetSimple.Setting.IsLockedByMe .Content .SettingUpdateBox button.Cancel:hover span {
    color: #B8384E;
}*/

.WidgetSimple.Setting.IsLockedByMe .Content .SettingUpdateBox button span {
    transition: var(--main-transition);
}

/*.WidgetSimple.Setting.IsLockedByMe .Content .SettingUpdateBox button {
    display: inline-block;
    margin: 7px 0px 0px 3px;
}

.WidgetSimple.Setting.IsLockedByMe .Content .SettingUpdateBox button:first-child {
    margin-left: 7px;
}*/

.WidgetSimple.IsLockedByAnotherUser .SettingEdit,
.WidgetSimple.IsLockedByMe .SettingEdit,
.WidgetSimple.IsDisabled .SettingEdit,
.WidgetSimple.IsDisabled .EditAlias,
.WidgetSimple.IsDisabled .UserModificationNotActive,
.WidgetSimple.IsDisabled .UserModificationActive,
.WidgetSimple.Setting.HasOverlay .SettingEdit {
    display: none !important;
}

.WidgetSimple.Setting .SettingEdit,
.WidgetSimple.Setting .SettingEnable {
    position: absolute;
    left: 0;
    top: 0;
    background: #17172525;
    opacity: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    text-align: center;
    line-height: 100%;
    transition: all ease 0.2s;
    border-bottom-left-radius: var(--border-radius-xs);
    border-bottom-right-radius: var(--border-radius-xs);
}

.WidgetSimple.Setting:not(.IsDisabled) .SettingEnable,
.WidgetSimple.Setting.MenuExpanded .SettingEnable,
.WidgetSimple.Setting.MenuExpanded .SettingEdit {
    display: none;
}

.WidgetSimple.Setting > .Content:hover .SettingEdit,
.WidgetSimple.Setting .SettingEdit:focus,
.WidgetSimple.Setting > .Content:hover .SettingEnable,
.WidgetSimple.Setting .SettingEnable:focus {
    opacity: 1;
}

.Compare .WidgetSimple.Setting > .Content:hover .SettingWrapper,
.Compare .WidgetSimple.Setting.HasOverlay .SettingWrapper,
.WidgetSimple.Setting.IsLockedByMe > .Content:hover .SettingWrapper,
.WidgetSimple.Setting.MenuExpanded:not(.HasOverlay) > .Content:hover .SettingWrapper,
.WidgetSimple.Setting.IsLockedByAnotherUser > .Content:hover .SettingWrapper {
    opacity: 1;
}

/*.WidgetSimple:not(.ReadOnly) > .Content:hover .SettingWrapper,
.WidgetSimple.Setting.IsLockedByMe.HasOverlay .SettingWrapper,
.WidgetSimple.Setting.IsLockedByMe.HasOverlay > .Content:hover .SettingWrapper,
.WidgetSimple.Setting.HasOverlay .SettingWrapper {
    opacity: 0.3;
}*/

.WidgetSimple.Setting .SettingEdit button,
.WidgetSimple.Setting .SettingEnable button {
    height: var(--btn-min-height);
    margin: auto;
}

/* To have the edit/enable button really centered both vertically and horizontally (independent from text lengths),
    we just add a pseudo element inside the container which has 50% height minus half the height of the button - voila. */

.WidgetSimple.Setting .SettingEdit:before,
.WidgetSimple.Setting .SettingEnable:before {
    display: block;
    content: "";
    height: calc(50% - 13px);
}

.WidgetSimple.Setting.IsReadonly .SettingEdit,
.WidgetSimple.Setting.IsReadonly .SettingEnable,
.WidgetSimple.Setting.IsReadonly .EditAlias,
.WidgetSimple.Setting.IsReadonly .SettingEnabled,
.WidgetSimple.Setting.IsReadonly .SettingDisabled,
.WidgetSimple.Setting.IsReadonly .ResetSetting {
    display: none;
}

.WidgetSimple.Setting > .Content {
    /*display: table;*/
    width: 100%;
    box-sizing: border-box;
    min-height: 42px;
    padding: 0;
}

/*.WidgetSimple.Setting .SettingContainer {
    max-height: 285px;
    overflow-y: hidden;
}*/

.WidgetSimple.Setting .SettingContainer > fieldset {
    padding: 0;
    min-width: unset;
    max-width: unset;
}

.WidgetSimple.Setting .SettingContainer .Setting {
    min-width: 100%;
    overflow: auto;
    border-radius: var(--border-radius-sm);
}

.WidgetSimple.Setting.IsLockedByMe .SettingContainer .Setting {
    border: var(--border-width) var(--border-solid) var(--border-color);
}

.WidgetSimple.Setting.IsLockedByMe .SettingContainer .Setting {
    overflow: unset;
}

.WidgetSimple.Setting:not(.IsLockedByMe):not(.MenuExpanded) .SettingContainer > fieldset {
    position: relative;
    min-height: 100%;
}

/*.WidgetSimple.Setting:not(.IsLockedByMe):not(.MenuExpanded) .SettingContainer > fieldset:before*/
.WidgetSimple.Setting:not(.IsLockedByMe):not(.MenuExpanded) .SettingWrapper > form:before {
    content: "";
    position: absolute;
    left: -20px; /*account for container padding*/
    bottom: 0;
    opacity: .4;
    height: 20px;
    z-index: 100;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(244,243,244,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(244,243,244,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(244,243,244,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    width: calc(100% + 40px);
}

/*.Deployment .WidgetSimple.Setting:not(.IsLockedByMe):not(.MenuExpanded) .SettingContainer > fieldset:before*/
.Deployment .WidgetSimple.Setting:not(.IsLockedByMe):not(.MenuExpanded) .SettingWrapper > form:before {
    display: none;
}

.WidgetSimple.Setting.IsLockedByMe .SettingContainer,
.Compare .WidgetSimple.Setting .SettingContainer {
    max-height: none;
    min-width: 100%;
}

.WidgetSimple.Setting .SettingContainer::-webkit-scrollbar {
    width: 8px;
}

.WidgetSimple.Setting .SettingContainer::-webkit-scrollbar-button {
    width: 8px;
    height: 5px;
}

/*.WidgetSimple.Setting .SettingContainer::-webkit-scrollbar-track {
    background: #eee;
}

.WidgetSimple.Setting .SettingContainer::-webkit-scrollbar-thumb {
    background: #ccc;
}

.WidgetSimple.Setting .SettingContainer::-webkit-scrollbar-thumb:hover {
    background: #999;
}*/

.WidgetSimple.Setting .SettingWrapper {
    transition: opacity ease 0.3s;
    display: flex;
    align-items: flex-start;
}

.WidgetSimple.Setting .SettingWrapper .SettingContainer {
    min-width: 100%;
}

.SettingOld .SettingWrapper > .SettingContainer .Setting,
.SettingNew .SettingWrapper > .SettingContainer .Setting {
    padding: var(--padding-lg);
    border-radius: 0;
}

.WidgetSimple.Setting .SettingWrapper > .SettingDescription,
.WidgetSimple.Setting .SettingWrapper > form {
    padding: var(--padding-lg);
}

.WidgetSimple.Setting .SettingWrapper > form {
    overflow: hidden;
    min-width: 70%;
    width: 70%;
    border-right: var(--border-width) var(--border-solid) var(--border-color);
    display: flex;
    align-self: stretch;
}

.WidgetSimple.Setting .SettingWrapper > fieldset {
    color: #777;
}

.WidgetSimple.Setting .SettingWrapper > .SettingDescription {
    line-height: 17.5px;
    word-break: break-word;
    transition: padding ease 0.2s;
    letter-spacing: .1px;
    font-size: var(--font-size-sm);
    color: var(--gray-dark);
}

/*.RTL .WidgetSimple.Setting .SettingWrapper > .SettingDescription {
    border-left: 0px;
    border-right: 1px solid #ccc;
    padding-left: 0px;
    padding-right: 20px;
}*/

/* Widget Menu */
.WidgetSimple.Setting  > .WidgetMenu.Hidden {
    margin-top: -58px;
    opacity: 0;
    height: 50px;
}

.WidgetSimple.Setting  > .WidgetMenu {
    background: var(--main-bg-color);
    padding: var(--padding-sm) var(--padding-lg);
    display: none;
    min-height: 50px;
    border-bottom: var(--border-width) var(--border-solid) var(--border-color);
    align-items: center;
    gap: var(--gap-sm);
    transition: var(--main-transition);
    margin-top: 0;
    display: flex;
    height: 100%;
    max-height: 100%;
}

.WidgetSimple .WidgetMenu > a,
.WidgetSimple .WidgetMenu > span {
    display: flex;
    background: var(--pill-color-selected);
    border: var(--border-width) var(--border-solid) var(--border-color);
    padding: var(--padding-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--medium);
    color: var(--black);
    transition: var(--main-transition);
    cursor: pointer;
    border-radius: var(--border-radius-xxs);
    align-items: center;
    justify-content: center;
}

.WidgetSimple .WidgetMenu > a:focus,
.WidgetSimple .WidgetMenu > span:focus {
    border-color: var(--black);
    color: var(--black);
}

.WidgetSimple.MenuExpanded .WidgetMenu > a,
.WidgetSimple.MenuExpanded .WidgetMenu > span {
    opacity: 1;
}

.WidgetSimple .WidgetMenu > a.Right,
.WidgetSimple .WidgetMenu > span.Right {
    margin-left: auto;
}

.RTL .WidgetSimple .WidgetMenu > a.Right,
.RTL .WidgetSimple .WidgetMenu > span.Right {
    margin-right: auto;
}

.WidgetSimple .WidgetMenu > a.Hidden {
    display: none;
}

.WidgetSimple .WidgetMenu > a.SaveAlias,
.WidgetSimple .WidgetMenu > a.CancelAlias,
.WidgetSimple.IsLockedByMe .WidgetMenu > a.EditAlias {
    display: none;
}

.WidgetSimple > .WidgetMenu > .SaveAlias,
.WidgetSimple > .WidgetMenu > .CancelAlias,
.WidgetSimple > .WidgetMenu > .EditAlias {
    background: var(--primary-color);
    color: var(--white);
    border: 0;
    /*font-family: 'Poppins';*/
    font-size: var(--font-size-sm);
    font-weight: var(--semi-bold);
    border-radius: var(--border-radius-sm);
    min-height: var(--btn-min-height);
}

.WidgetSimple > .WidgetMenu > .SaveAlias:hover,
.WidgetSimple > .WidgetMenu > .CancelAlias:hover,
.WidgetSimple > .WidgetMenu > .EditAlias:hover {
    background: var(--primary-color-darker);
}

.WidgetSimple .WidgetMenu > a.SaveAlias i {
    color: #488b48;
}

.WidgetSimple .WidgetMenu > a.CancelAlias i {
    color: #942538;
}

.WidgetSimple .WidgetMenu > a:hover,
.WidgetSimple .WidgetMenu > span:hover {
    background: var(--gray-light);
    border-color: var(--black);
}

.WidgetSimple .WidgetMenu > a i,
.WidgetSimple .WidgetMenu > span i {
    font-size: 10px;
}

.RTL .WidgetSimple .WidgetMenu > a i,
.RTL .WidgetSimple .WidgetMenu > span i {
    margin-left: 5px;
}

.WidgetSimple .WidgetMenu > a i.fa-check,
.WidgetSimple .WidgetMenu > span i.fa-check {
    color: green;
}

.WidgetSimple.Setting .WidgetMessage.Bottom {
    display: none;
    position: relative;
    width: 100%;
    padding: var(--padding-sm) 0 0;
    padding-bottom: var(--padding-xs);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    z-index: 9;
    box-sizing: border-box;
    margin: 0;
    color: var(--gray-dark);
    text-indent: 5px;
}

.WidgetSimple.Setting .LockedByAnotherUser {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 99;
    background: repeating-linear-gradient(
        -45deg,
        rgba(148, 35, 55, 0.5),
        rgba(148, 35, 55, 0.5) 10px,
        rgba(184, 56, 76, 0.5) 10px,
        rgba(184, 56, 76, 0.5) 20px
    );
}

.WidgetSimple.Setting .LockedByAnotherUser p {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    background: #fff;
    border: 1px solid #ddd;
    padding: 5px 10px;
    color: #777;
    font-size: 11px;
    position: relative;
    top: 50%;
    margin-top: -12px;
}

.WidgetSimple input#FilterSettings + .ActionList,
.WidgetSimple .TableFilterContainer + .ActionList {
    display: flex;
    flex-flow: column;
    gap: 15px;
}

.WidgetSimple input#FilterSettings + .ActionList li,
.WidgetSimple .TableFilterContainer + .ActionList li {
    margin: 0;
}

.WidgetSimple p.WidgetInformation,
.ActionsSideBarComp .WidgetSimple p.WidgetInformation {
    display: flex;
    color: var(--black);
    background: #50B5FF10;
    position: relative;
    border-radius: var(--border-radius-xxs);
    align-items: center;
    justify-content: space-between;
    gap: var(--gap-md);
    padding: var(--padding-md) var(--padding-lg);
}

.WidgetSimple p.WidgetInformation i {
    font-size: var(--font-size-md);
    color: var(--alert-info-icon-color);
}

/**
 * @subsubsection     Setting Types
 */

.Array,
.Hash {
    display: flex;
    flex-flow: column;
    gap: 15px;
    width: 100%;
}

.SettingContainer > fieldset > .Setting > .Hash:empty:before,
.SettingContainer > fieldset > .Setting > .Array:empty:before {
    content: "-";
}

/*.IsLockedByMe .ArrayItem > .SettingContent {
    width: calc(100% - 16px); /* 100% minus the width of the button on the right minus the padding of combined 6px */
    /*max-width: none !important;
}

.ArrayItem > .SettingContent > div.InputField_Container,
.ArrayItem > .SettingContent > div.InputField_Container > div.InputField_InputContainer,
.ArrayItem > .SettingContent > input[type=text]:first-child:last-child,
.Setting > .SettingContent > input[type=text]:first-child:last-of-type {
    width: calc(100% - 6px); /* minus padding left and right */
    /*border: 0;
}*/

/*.ArrayItem > .SettingContent > div.InputField_Container > div.InputField_InputContainer > .InputField_Search,
.HashItem > .SettingContent > div.InputField_Container > div.InputField_InputContainer > .InputField_Search,
.HashItem .HashItem > .SettingContent > div.InputField_Container > div.InputField_InputContainer > .InputField_Search*/
.SettingContent > div.InputField_Container > div.InputField_InputContainer > .InputField_Search,
.Setting .SettingContent > input[type="text"] {
    border: 0;
    width: 100%;
    background: var(--main-bg-color);
}

/*li > div:not(.IsLockedByMe) .ArrayItem > .SettingContent > div.InputField_Container > div.InputField_InputContainer > i,
li > div:not(.IsLockedByMe) .HashItem > .SettingContent > div.InputField_Container > div.InputField_InputContainer > i,
li > div:not(.IsLockedByMe) .HashItem .HashItem > .SettingContent > div.InputField_Container > div.InputField_InputContainer > i */
.SettingContent > div.InputField_Container > div.InputField_InputContainer > input[disabled="disabled"] + i{
    visibility: hidden;
}

/*.ArrayItem > .SettingContent > div.InputField_Container > div.InputField_InputContainer > .InputField_Selection,
.HashItem > .SettingContent > div.InputField_Container > div.InputField_InputContainer > .InputField_Selection,
.HashItem .HashItem > .SettingContent > div.InputField_Container > div.InputField_InputContainer > .InputField_Selection*/
.WidgetSimple:not(.IsLockedByMe) .SettingContent > div.InputField_Container > div.InputField_InputContainer > .InputField_Selection {
    background: var(--white);
}

.HashItem > .SettingContent > div.InputField_Container {
    width: calc(100% - 20px);
}

.HashItem .HashItem > .SettingContent > div.InputField_Container {
    width: calc(100% - 20px);
}

.HashItem > .SettingContent > div.InputField_Container > div.InputField_InputContainer,
.HashItem .HashItem > .SettingContent > div.InputField_Container > div.InputField_InputContainer {
    width: 100%;
}

.IsLockedByMe .Array > .ArrayItem > .Array,
.Comparing .Array > .ArrayItem > .Array,
.IsLockedByMe .Array > .ArrayItem > .Hash,
.Comparing .Array > .ArrayItem > .Hash,
.IsLockedByMe .Setting > .Hash > .HashItem,
.Comparing .Setting > .Hash > .HashItem {
    border: var(--border-width) var(--border-solid) var(--border-color);
}

.IsLockedByMe .Setting > .Hash > .HashItem,
.Comparing .Setting > .Hash > .HashItem {
    border-radius: var(--border-radius-sm);
    padding: var(--padding-lg);
}

.IsLockedByMe .Array,
.IsLockedByMe .Hash {
    padding: var(--padding-lg);
    padding-right: var(--padding-xxl);
    position: relative;
    border-radius: var(--border-radius-sm);
    /*min-width: calc(100% + 20px);*/
    border: var(--border-width) var(--border-solid) var(--border-color);
}

.Hash.FrontendNavigationHash {
    border: var(--border-width) var(--border-solid) var(--border-color);
}

/*.RTL .IsLockedByMe .Array,
.RTL .IsLockedByMe .Hash {
    padding: 0px 0px 0px 22px;
}*/

.Array button.AddArrayItem,
.ArrayItem button.RemoveButton,
.Hash button.AddHashKey,
.HashItem button.RemoveButton,
.HashItem button.AddKey {
    position: absolute;
    width: 20px;
    background: var(--gray-light-ultra);
    height: 100%;
    top: 0;
    right: 0;
    cursor: pointer;
    transition: var(--main-transition);
    color: var(--gray-dark);
    font-size: var(--font-size-md);
    border-top-right-radius: var(--border-radius-sm);
    border-bottom-right-radius: var(--border-radius-sm);
    border: var(--border-width) var(--border-solid) transparent;
    border-left: var(--border-width) var(--border-solid) var(--border-color);
    padding: 0;
}

.HashItem button.AddKey {
    position: relative;
    height: 24px;
    width: 24px;
    max-height: 24px;
    max-width: 24px;
    border: 0;
    left: -4px;
    background: unset;
    border-radius: var(--border-radius-xxs);
    color: var(--gray-dark-semi);
}

.Array button.AddArrayItem span.InvisibleText,
.ArrayItem button.RemoveButton span.InvisibleText,
.Hash button.AddHashKey span.InvisibleText,
.HashItem button.RemoveButton span.InvisibleText,
.HashItem button.AddKey span.InvisibleText {
    position: fixed !important;
    left: -9999px;
    top: -9999px;
}

.RTL .Array button.AddArrayItem,
.RTL .ArrayItem button.RemoveButton,
.RTL .Hash button.AddHashKey,
.RTL .HashItem button.RemoveButton,
.RTL .HashItem button.AddKey {
    right: auto;
    left: 0px;
}

.Array button.AddArrayItem:hover,
.ArrayItem button.RemoveButton:hover,
.Hash button.AddHashKey:hover,
.HashItem button.RemoveButton:hover,
.HashItem button.AddKey:hover,
.Array button.AddArrayItem:focus,
.ArrayItem button.RemoveButton:focus,
.Hash button.AddHashKey:focus,
.HashItem button.RemoveButton:focus,
.HashItem button.AddKey:focus {
    background: var(--gray-light);
    outline: none;
}

.Array button.AddArrayItem i,
.Hash button.AddHashKey i {
    font-size: 15px;
}

.AddHashKey, .AddArrayItem, .RemoveButton {
    display: none;
}

.HashItem button.RemoveButton,
.ArrayItem button.RemoveButton {
    background: unset;
    border: 0;
    position: relative;
    left: -8px;
    margin-top: auto;
    margin-bottom: auto;
    min-height: 24px;
    min-width: 24px;
    border-radius: var(--border-radius-xxs);
    max-width: 24px;
    max-height: 24px;
}

.ArrayItem,
.HashItem {
    position: relative;
    transition: var(--main-transition);
    min-height: 10px;
    /*overflow: hidden;*/
    display: flex;
    align-items: flex-start;
    gap: var(--gap-sm);
}

.HashItem.hasChild {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  

/*.IsLockedByMe .ArrayItem,
.IsLockedByMe .HashItem {
    margin-bottom: 5px;
}

.RTL .HashItem .Key {
    margin-left: auto;
}

.RTL .HashItem .SettingContent {
    margin-left: auto;
    margin-right: 30px;
    position: relative;
}

.ArrayItem:last-child,
.HashItem:last-child {
    margin-bottom: 0px;
}

.IsLockedByMe .ArrayItem > .SettingContent,
.IsLockedByMe .HashItem > .SettingContent {
    white-space: nowrap;
}

.RTL .IsLockedByMe .ArrayItem,
.RTL .IsLockedByMe .HashItem {
    padding: 8px 8px 8px 30px;
    border-left: 1px solid #ddd;
    border-right: 0px;
}

.IsLockedByMe .ArrayItem:last-of-type,
.IsLockedByMe .HashItem:last-of-type {
    border-bottom: 0px;
}*/

.ArrayItem .SettingContent {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
    gap: var(--gap-sm);
}

/*.Setting .ArrayItem .SettingContent > input[type="checkbox"] {
    border: var(--border-width) var(--border-solid) var(--border-color);
}

.Array > div:last-of-type .SettingContent {
    margin-bottom: 0px;
}*/

.ArrayItem .SettingContent textarea {
    width: 100%;
}

.HashItem .SettingContent textarea {
    /*width: calc(100% - 20px);*/
    min-width: unset;
    min-height: var(--text-area-min-height);

}

/*.ArrayItem + .ArrayItem,
.HashItem + .HashItem {
    border-top: 0px;
}

.SettingContent input[type=text],
.SettingContent input[type=password],
.SettingContent .InputField_Search,
.HashItem .Key {
    width: 90%;
}*/

.SettingContent input[type=text],
.SettingContent input[type=password],
.SettingContent .InputField_Search,
.Setting input.Key {
    display: flex;
    text-overflow: ellipsis;
    min-width: 170px;
    color: var(--gray-dark);
    background: var(--main-bg-color);
    border-color: transparent;
}

.IsLockedByMe .SettingContent input[type=text],
.IsLockedByMe .SettingContent input[type=password],
.IsLockedByMe .SettingContent .InputField_Search,
.IsLockedByMe .Setting input.Key {
    text-overflow: inherit;
    /*min-width: 200px;*/
    /*min-width: unset;*/
}

/*.IsLockedByMe .SettingContent input[type="text"][readonly], 
.IsLockedByMe .SettingContent input[type="password"][readonly], 
.IsLockedByMe .SettingContent .InputField_Search[readonly], 
.IsLockedByMe .Setting input.Key[readonly],
.IsLockedByMe .Setting input.Key[readonly]:not(:checked)*/
.IsLockedByMe .Setting input[type="text"][readonly]:not(:checked) {
    background-color: var(--gray-light);
    cursor: no-drop;
}

/*.Hash .SettingContent input[type=text],
.Hash .SettingContent input[type=password],
.Hash .SettingContent .InputField_Search {
    width: 45%;
}

.HashItem .HashItem input[type=text].Key,
.HashItem .Key {
    width: 100px;
}*/

/*.HashItem .SettingContent input[type=text],
.HashItem .SettingContent input[type=password],
.HashItem .SettingContent .InputField_Search {
    /*width: calc(100% - 30px)*/
    /*width: 100%;
}*/

.Setting.IsLockedByMe .SettingContent input[type="text"]:not(:checked), 
.Setting.IsLockedByMe .SettingContent input[type="password"], 
.Setting.IsLockedByMe .SettingContent .InputField_Search, 
.Setting.IsLockedByMe .SettingContent > input.Entry[type="password"],
.Setting.IsLockedByMe .SettingContent > textarea {
    background: var(--white);
    border: var(--border-width) var(--border-solid) var(--border-color);
    color: var(--black);
    min-width: 72px;
}

.Setting > .SettingContent > .Type_String {
    width: 100%;
}

.SettingContent textarea {
    display: block;
    height: 70px;
    width: 100%;
    box-sizing: border-box;
    padding: 5px;
    font-family: inherit;
    font-size: inherit;
}

.SettingContent input.VacationDays,
.SettingContent input.VacationDaysOneTime {
    width: 50%;
    margin-left: 5px;
}

/*.SettingContent span.TimeZoneText {
    margin-left: 10px;
}*/

.SettingContent p.WorkingHoursDayName {
    min-width: 100%;
    padding: var(--padding-lg) 0 var(--padding-xs) 0;
}

.SettingContent p.WorkingHoursDayName:nth-child(1) {
    padding-top: 0;
}

.SettingContent .WorkingHoursItem {
    float:left;
    display: table;
    margin-bottom: 2px;
    margin-right: 2px;
}

.SettingContent .WorkingHoursItem > div > div {
    border-radius: var(--border-radius-xs);
    border-color: transparent;
    background: var(--main-bg-color);
}

.IsLockedByMe .SettingContent .WorkingHoursItem > div > div {
    border: var(--border-width) var(--border-solid) var(--border-color);
    background: var(--white);
}

.SettingContent .WorkingHoursItem.Checked > div > div {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.SettingContent .WorkingHoursItem.Checked > div > div > label {
    transition: var(--main-transition);
    color: var(--white);
}

.IsLockedByMe .SettingContent .WorkingHoursItem > div > div label:hover,
.IsLockedByMe .SettingContent .WorkingHoursItem > div > div:hover {
    cursor: pointer;
    color: var(--gray-dark-semi);
    border-color: var(--border-color);
    background: var(--gray-light-semi);
}

.IsLockedByMe .SettingContent .WorkingHoursItem.Checked > div > div {
    overflow: hidden;
    position: relative;
}

/*.IsLockedByMe .SettingContent .WorkingHoursItem.Checked > div > div:before {
    content: "";
    position: absolute;
    width: 30px;
    height: 10px;
    transform: rotate(30deg);
    top: -4px;
    right: -9px;
    background: #5BAD5B;
}*/

.SettingContent .WorkingHoursItem > div > div input {
    display: none;
}

.SettingContent .WorkingHoursItem label {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: unset;
}

.SettingContent .BadEffectiveValue p {
    color: var(--warning-color);
    margin-left: 5px;
}

.SettingsList.Compare .BadEffectiveValue {
    display: none;
}

.HashItem .SettingContent .BadEffectiveValue {
    margin-left: 22px;
}

.HashItem .Key {
    float: left;
}

.HashItem > .SettingContent:before,
.RTL .HashItem > .SettingContent:after {
    content: "\f178";
    color: var(--black);
    font-family: FontAwesome;
    font-size: 14px;
    align-self: start;
    margin-top: 10px;
}

.RTL .HashItem > .SettingContent:before {
    display: none;
}

.RTL .HashItem > .SettingContent:after {
    content: "\f177";
    position: absolute;
    right: -25px;
}

.HashItem .SettingContent {
    display: flex;
    align-items: center;
    gap: var(--gap-sm);
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.IsLockedByMe .HashItem .SettingContent {
    min-width: calc(100% - 190px); /* full width minus key + arrow width */
}

.ArrayItem .HashItem .SettingContent,
.HashItem .HashItem .SettingContent {
    min-width: calc(100% - 170px); /* full width minus key + arrow width */
}

.HashItem .HashItem .SettingContent {
    /*min-width: calc(100% - 170px); - edit by b on 27/MAR/2023 */
    min-width: unset;
    width: auto;
    flex: 1;
}

.Hash > .HashItem > .SettingContent > .Hash > .HashItem  {
    flex-wrap: wrap;
}



/*
.HashItem .SettingContent > .Array,
.HashItem .SettingContent > .Hash {
    margin-left: 17px;
}
*/
/* Comparison Mode */

.SettingsList {
    display: flex;
    flex-flow: column;
    gap: var(--gap-md);
}

.SettingsList.Compare .Content > .WidgetMessage {
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: flex-start;
    padding: var(--padding-sm) var(--padding-lg);
    background: var(--main-bg-color);
    border-bottom: var(--border-width) var(--border-solid) var(--border-color);
    border-radius: 0;
}

.SettingsList.Compare .Content > .WidgetMessage.Top > p {
    padding: 0;
    display: flex;
    flex-flow: column;
    gap: var(--gap-xs);
    line-height: normal;
    width: 50%;
    padding-bottom: var(--padding-md);
}

/*.SettingsList.Compare .Setting .WidgetMessage strong {
    transition: all ease 2s;
    padding: 0px 3px;
}*/

.SettingsList.Compare .Setting .WidgetMessage {
    display: none;
}

.SettingsList.Compare .Setting .WidgetMessage strong.Different {
    color: var(--primary-color);
}

.SettingsList.Compare > li > .SettingContainer {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.SettingsList.Compare > li > .SettingContainer.Comparing {
    gap: var(--gap-lg);
}

.SettingsList.Compare h2 > input[type=checkbox] {
    /*display: none;*/
    min-width: 16px;
    min-height: 16px;
}

.SettingsList.Compare .Comparing h2 + .HeaderMessage {
    display: none;
}

/*.SettingsList.Compare.Deployment h2 > input[type=checkbox] {
    display: block;
    position: absolute;
    left: 7px;
    top: 3px;
}*/

.SettingsList.Compare.Deployment li > .SettingContainer {
    transition: opacity ease 0.5s;
    opacity: 0.5;
}

.SettingContainer.Comparing .Header > h2 {
    width: 100%;
}

.SettingsList.Compare.Deployment li > .SettingContainer.Selected {
    opacity: 1;
}

/*.SettingsList.Compare.Deployment .SettingNew h2 {
    margin-left: 20px;
    cursor: pointer;
}*/

.SettingsList .SettingNew .HeaderMessage {
    padding-bottom: 0;
}

.SettingsList.Compare > li > .SettingContainer > div {
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.SettingsList.Compare > li > .SettingContainer > div.SettingOld {
    width: 0px;
    height: 0px;
}

.SettingsList.Compare .SettingOld .WidgetSimple {
    position: relative;
}

/*.SettingsList.Compare .SettingOld .WidgetSimple .SettingContent {
    white-space: nowrap;
}

.SettingsList.Compare .Comparing .WidgetSimple .SettingContent {
    margin-bottom: 25px;
}*/

.SettingsList.Compare .Comparing .WidgetSimple .Hash .SettingContent,
.SettingsList.Compare .Comparing .WidgetSimple .Array .SettingContent {
    margin-bottom: 0px;
}

.SettingsList.Compare .WidgetSimple {
    margin-bottom: 0px;
    z-index: 1;
}

.SettingsList.Compare .WidgetSimple h2 {
    display: flex;
    align-items: center;
}

.SettingsList.Compare .WidgetSimple h2 .Label {
    display: none;
    background: var(--main-bg-color);
    line-height: normal;
    margin-left: auto;
}

.SettingsList.Compare > li > .SettingContainer:after {
    content: "\f178";
    color: var(--black);
    font-family: FontAwesome;
    font-size: var(--main-font-color);
    margin-right: -6px;
    position: absolute;
    right: 50%;
    top: 50%;
}

.Icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

h2 > .Icon {
    display: inline;
}

.RTL .Icon {
    float: right;
}

.Icon .fa {
    /*margin-left: -10px;
    margin-right: 5px;*/
    cursor: help;
}

.Icon .fa + .fa {
    margin-left: 0px;
}

.RTL .Icon .fa {
    margin-left: 5px;
    margin-right: -10px;
}

.fa.fa-ban,
.Icon .fa-exclamation-triangle {
    color: var(--warning-color);
}

.fa.Hidden {
    display: none;
}

/* Sidebar */
form.ImportExport fieldset {
    padding: 0;
}

.SidebarColumn .WidgetSimple.SystemConfigurationTree div.InputField_Container,
.SidebarColumn .WidgetSimple.SystemConfigurationTree div.InputField_InputContainer,
.SidebarColumn .WidgetSimple.SystemConfigurationTree #Category_Search {
    box-sizing: border-box;
    width: 100% !important;
}

.SidebarColumn .WidgetSimple.SystemConfigurationTree div.InputField_Selection {
    top: 3px;
}

.SidebarColumn .WidgetSimple.SystemConfigurationTree div.InputField_InputContainer .InputField_Search {
    padding-bottom: 4px;
    position: relative;
    top: -1px;
}

.RTL .SidebarColumn .WidgetSimple.SystemConfigurationTree .SystemConfigurationCategories {
    float: right;
    margin-left: -1px;
}

.SystemConfigurationCategories {
    flex: 1;
}

/* Responsive */
@media only screen and (min-width: 0px) and (max-width: 480px) {
    .WidgetSimple.Setting > .WidgetMenu {
        flex-flow: column;
        align-items: stretch;
    }
}

@media only screen and (min-width: 0px) and (max-width: 750px) {

    .GettingStarted li {
        margin-right: 0px;
        width: 95%;
    }
}

@media only screen and (min-width: 0px) and (max-width: 1024px) {

    /*.WidgetSimple .WidgetMenu,
    .WidgetSimple.Setting .WidgetMessage.Bottom {
        display: block;
    }*/

    .WidgetSimple .WidgetMenu {
        padding-bottom: 0px;
    }

    .WidgetSimple .WidgetMenu > a,
    .WidgetSimple .WidgetMenu > span {
        opacity: 1 !important;
        zoom: 1.1;
    }

    .WidgetSimple.Setting .Header .ActionMenu {
        margin-right: 0px;
        top: 3px;
    }

    /*.WidgetSimple.Setting .Header .ActionMenu .Expand {
        display: none;
    }*/

    .WidgetSimple.Setting .Header .ActionMenu a {
        font-size: 18px;
        margin-bottom: 2px;
    }

    /*.WidgetSimple.Setting .SettingWrapper > form {
        padding-right: 0px;
    }*/

    .WidgetSimple.Setting .SettingWrapper > .SettingDescription,
    .WidgetSimple.Setting .SettingWrapper > form {
        display: block;
        width: auto;
    }

    /*.WidgetSimple.Setting .SettingWrapper > .SettingDescription {
        padding-left: 10px;
    }

    .WidgetSimple.Setting div.Content {
        padding-bottom: 35px !important;
    }*/

    /* .WidgetSimple.Setting.IsLockedByMe .Content .SettingUpdateBox {
        display: none !important;
    } */

    .WidgetSimple .WidgetMenu > a.Right,
    .WidgetSimple .WidgetMenu > span.Right {
        float: none;
    }

}

@media only screen and (max-width: 1250px) {
    .WidgetSimple.Setting .SettingWrapper {
        flex-flow: column-reverse;
    }

    .WidgetSimple.Setting .SettingWrapper > form {
        min-width: unset;
        width: auto;
        border: 0;
    }
}

} /* end @media */
