s for text-only, multiline content!
+ */
+p {
+ /* increase line-height for readability */
+ line-height: 1.3em;
+}
+
+/**
+ * @subsection Code Examples
+ */
+code {
+ font-family: monospace;
+}
+
+/**
+ * @subsection Text modifiers
+ */
+strong {
+ font-weight: bold;
+}
+
+em {
+ font-style: italic;
+}
+
+/**
+ * @subsection Regular lists
+ * @note List elements (ul, ol) are being reset by default to avoid browser styling, so we
+ need to define our own 'default' lists using a class.
+ */
+
+ul.Default {
+ list-style-type: square;
+ margin: 5px 0px;
+ padding-left: 20px;
+}
+
+ul.Default li {
+ line-height: 130%;
+ margin-bottom: 3px;
+}
+
+/**
+ * @subsection Definition lists
+ */
+dl {
+ margin: 5px 0;
+}
+
+dt {
+ font-size: 13px;
+ font-weight: bold;
+ line-height: 1.3em;
+ margin-top: 5px;
+}
+
+dd {
+ line-height: 1.3em;
+ margin-left: 15px;
+ margin-right: 0;
+}
+
+.RTL dd {
+ margin-left: 0;
+ margin-right: 15px;
+}
+
+/**
+ * @subsection Text
+ */
+.Center {
+ text-align: center;
+}
+
+.Left {
+ text-align: left;
+}
+
+.FloatLeft {
+ text-align: left;
+}
+
+.Right {
+ text-align: right;
+}
+
+.FloatRight {
+ float: right;
+}
+
+.Error {
+ color: #ea2400;
+}
+
+.Warning {
+ color: #f5af36;
+}
+
+.Notice {
+ color: #c8c6c4;
+}
+
+.Confirmation {
+ color: #069d07;
+}
+
+.Small {
+ font-size: 90%;
+}
+
+/**
+ * @subsection Errors
+ * @note Error fields for forms
+ */
+
+.ErrorBox,
+.SuccessBox {
+ display: block;
+ padding: 5px 8px 4px;
+ cursor: default;
+}
+
+.ErrorBox.Hidden,
+.SuccessBox.Hidden {
+ display: none;
+}
+
+.ErrorBox {
+ color: rgba(255, 255, 255, 0.9);
+ background: #B83850;
+}
+
+.SuccessBox {
+ color: #FFF;
+ background: #8FB738;
+}
+
+.ErrorBox span a,
+.SuccessBox span a {
+ color: #fff;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+ transition: all ease 0.2s;
+}
+
+.ErrorBox span a:hover,
+.SuccessBox span a:hover {
+ border-color: #fff;
+}
+
+/**
+ * @subsection Drag & drop upload
+ */
+
+div.DnDUploadBox {
+ overflow-y: hidden;
+ width: 622px;
+ padding: 0 !important;
+}
+
+div.DnDUpload {
+ border: 1px solid #272727;
+ border-radius: 10px;
+ color: #aaa;
+ min-height: 60px;
+ text-align: center;
+ position: relative;
+ margin-bottom: 5px;
+ max-width: 622px;
+ box-sizing: border-box;
+ background-color: #1f1f1f;
+}
+
+span.ReadyForUpload {
+ padding: 30px 0px 5px;
+ display: block;
+}
+
+div.DnDUpload:focus {
+ border-color: #c8c6c4;
+ color: #c8c6c4;
+}
+
+input.AjaxDnDUpload.Error + div.DnDUpload {
+ color: #ea2400;
+ border-color: #ea2400;
+}
+
+div.DnDUpload.DragOver {
+ border-style: dashed;
+ background: #eee;
+ color: #444;
+}
+
+div.DnDUpload i {
+ position: absolute;
+ top: 10px;
+ left: 50%;
+ margin-left: -20px;
+ font-size: 20px;
+ margin-bottom: 10px;
+}
+
+div.DnDUpload i.fa-spinner {
+ display: none;
+}
+
+div.DnDUpload.Uploading i.fa-download {
+ display: none;
+}
+
+div.DnDUpload.Uploading i.fa-spinner {
+ display: block;
+}
+
+div.DnDUpload .UploadRunning {
+ display: none;
+}
+
+div.DnDUpload.Uploading .ReadyForUpload {
+ display: none;
+}
+
+div.DnDUpload.Uploading .UploadRunning {
+ display: block;
+}
+
+.AttachmentListContainer {
+ position: relative;
+ max-width: 622px;
+}
+
+.AttachmentListContainer .Busy {
+ position: absolute;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ top: 0px;
+ background: rgba(255, 255, 255, 0.5);
+ text-align: center;
+ box-sizing: border-box;
+ display: none;
+}
+
+.AttachmentListContainer .Busy i {
+ vertical-align: middle;
+ line-height: 100%;
+ position: absolute;
+ top: 50%;
+ font-size: 20px;
+ margin-top: -10px;
+}
+
+table.AttachmentList {
+ clear: none;
+ margin-bottom: 10px;
+ margin-top: 0px;
+ max-width: 622px;
+ table-layout: fixed;
+}
+
+table.AttachmentList .Filename {
+ width: 40%;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+table.AttachmentList .Progress {
+ display: block;
+ height: 4px;
+ margin: 3px 0px;
+ background: #fef235;
+ width: 0px;
+}
+
+table.AttachmentList .Filetype {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+table.AttachmentList .Filesize {
+ width: 15%;
+}
+
+table.AttachmentList .Delete {
+ width: 15px;
+ text-align: center;
+}
+
+table.AttachmentList .AttachmentDelete:focus i {
+ color: #c8c6c4;
+}
+
+table.AttachmentList.DataTable thead th {
+ line-height: 12px;
+}
+
+/**
+ * @note Use the class InvisibleText to hide text from the screen,
+ * while it is still recognized and read by screen readers.
+ */
+.InvisibleText {
+ width: 0;
+ height: 0;
+ display: inline-block;
+ text-indent: -9999px;
+ white-space: nowrap;
+ position: absolute !important;
+}
+
+/**
+ * @subsection Spacings
+ */
+.Spacing {
+ margin: 13px;
+}
+
+.SpacingTop {
+ margin-top: 13px;
+}
+
+.SpacingTopSmall {
+ margin-top: 8px;
+}
+
+.SpacingTopLarge {
+ margin-top: 89px;
+}
+
+.SpacingBottom {
+ margin-bottom: 13px;
+}
+
+.SpacingBottomMedium {
+ margin-bottom: 34px !important;
+}
+
+.SpacingBottomLarge {
+ margin-bottom: 89px;
+}
+
+.SpacingLeft {
+ margin-left: 10px;
+}
+
+.SpacingRight {
+ margin-right: 10px;
+}
+
+/**
+ * @subsection Indents
+ */
+.Indent {
+ padding-left: 13px !important;
+}
+
+/**
+ * @subsection Box alignment
+ */
+.CenterBox {
+ margin-left: auto !important;
+ margin-right: auto !important;
+}
+
+/**
+ * @subsection Controlling the display: value
+ * @note This is especially helpful for links. When
+ * they have this class, the entire block will be clickable.
+ */
+.AsBlock {
+ display: block;
+}
+
+/**
+ * @subsection Clear
+ */
+.Clear {
+ float: none !important;
+ clear: both !important;
+}
+
+.ClearNone {
+ clear: none !important;
+}
+
+.ClearLeft,
+.RTL .ClearRight {
+ float: none !important;
+ clear: left !important;
+}
+
+.ClearRight,
+.RTL .ClearLeft {
+ float: none !important;
+ clear: right !important;
+}
+
+/**
+ * @subsection MainBox
+ */
+.MainBox {
+ position: relative;
+ padding: 16px 10px 7px 10px;
+}
+
+.RTL .MainBox {
+ padding: 4px 8px 8px 16px;
+}
+
+.OverviewBox {
+ position: relative;
+}
+
+.MainBox > h1 {
+ margin: 0;
+ padding: 10px 8px 15px 8px;
+ position: relative;
+}
+
+.MainBox > .AsteriskExplanation {
+ padding-left: 8px;
+ margin-bottom: 10px;
+}
+
+.RTL .MainBox > .AsteriskExplanation {
+ padding-left: 0px;
+ padding-right: 8px;
+}
+
+.AsteriskExplanation {
+ color: #999;
+}
+
+.MainBox.FormScreen > h1,
+.MainBox.FormScreen > .AsteriskExplanation {
+ margin-left: 24%;
+}
+
+.MainBox.FormScreen.NoSidebar > h1,
+.MainBox.FormScreen.NoSidebar > .AsteriskExplanation {
+ margin-left: 30%;
+}
+
+.RTL .MainBox.FormScreen > h1,
+.RTL .MainBox.FormScreen > .AsteriskExplanation {
+ margin-right: 24%;
+}
+
+.RTL .MainBox.FormScreen.NoSidebar > h1,
+.RTL .MainBox.FormScreen.NoSidebar > .AsteriskExplanation {
+ margin-right: 30%;
+}
+
+.OverviewBox > h1 {
+ margin: 10px 0px;
+ padding: 8px 11px 7px;
+ position: relative;
+}
+
+/**
+ * @subsection Bread crumb
+ */
+
+.BreadCrumb {
+ list-style-type: none;
+ margin: 0px 2px 15px 0px;
+ padding: 7px 15px 4px 0px;
+ background: #1f1f1f;
+ position: relative;
+ padding-left: 0px;
+ padding-right: 15px;
+ overflow-y: hidden;
+ overflow-x: auto;
+ white-space: nowrap;
+ box-shadow: 1px 1px 0px #000;
+}
+
+.RTL .BreadCrumb {
+ padding-right: 10px;
+ padding-left: 15px;
+}
+
+.BreadCrumb li {
+ display: inline-block;
+ margin: 0px 2px 0px 2px;
+ padding-left: 35px;
+ color: #dbd9d7;
+ position: relative;
+ white-space: nowrap;
+ vertical-align: middle;
+}
+
+.BreadCrumb li > a,
+.BreadCrumb li > span {
+ line-height: 14px;
+ display: inline-block;
+ padding: 0px 2px 3px 2px;
+}
+
+.BreadCrumb li:first-child {
+ padding-left: 20px;
+}
+
+.BreadCrumb li:first-child a i {
+ font-size: 16px;
+ color: #c8c6c4;
+}
+
+.BreadCrumb li:first-child a:hover i {
+ color: #dbd9d7;
+}
+
+.RTL .BreadCrumb li {
+ padding-left: 0px;
+ padding-right: 35px;
+}
+
+.RTL .BreadCrumb li:first-child {
+ padding-right: 20px;
+}
+
+.BreadCrumb li:first-child:after,
+.BreadCrumb li:first-child:before {
+ display: none;
+}
+
+.BreadCrumb a {
+ color: #c8c6c4;
+ position: relative;
+}
+
+.BreadCrumb a:after {
+ position: absolute;
+ left: 0px;
+ width: 0px;
+ content: "";
+ bottom: 0px;
+ border-bottom: 1px solid #3ab5e4;
+ transition: all ease 0.3s;
+}
+
+.BreadCrumb a:hover:after,
+.BreadCrumb a:focus:after,
+.BreadCrumb a:active:after {
+ width: 100%;
+}
+
+.BreadCrumb li:before,
+.BreadCrumb li:after {
+ top: 50%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-width: 22px;
+ margin-top: -24px;
+}
+
+.BreadCrumb li:after {
+ left: 0px;
+ border-color: rgba(255, 255, 255, 0);
+ border-left-color: #141414;
+}
+
+.RTL .BreadCrumb li:after {
+ border-left-color: transparent;
+ border-right-color: #141414;
+ left: auto;
+ right: 0px;
+}
+
+.BreadCrumb li:before {
+ left: -5px;
+ border-color: rgba(238, 238, 238, 0);
+ border-left-color: #1f1f1f;
+ z-index: 2;
+}
+
+.RTL .BreadCrumb li:before {
+ left: auto;
+ right: -5px;
+ border-right-color: #141414;
+ border-left-color: transparent;
+}
+
+/**
+ * @subsection Standard Widths
+ */
+.W10pc {
+ width: 10%;
+}
+
+.W20pc {
+ width: 20%;
+}
+
+.W25pc {
+ width: 25%;
+}
+
+.W33pc {
+ width: 33%;
+}
+
+.W50pc {
+ width: 50%;
+}
+
+.W60pc {
+ width: 60%;
+}
+
+.W70pc {
+ width: 70%;
+}
+
+.W75pc {
+ width: 75%;
+}
+
+.W80pc {
+ width: 80%;
+}
+
+.W90pc {
+ width: 90%;
+}
+
+.W95pc {
+ width: 95%;
+}
+
+.W100pc {
+ width: 100%;
+}
+
+.W50px {
+ width: 50px;
+}
+
+.W950px {
+ width: 950px;
+}
+
+/**
+ * @subsection MessageBox
+ */
+
+.MessageBox {
+ margin: 0px;
+ background: #F6A72B;
+ position: relative;
+ z-index: 1;
+}
+
+.MessageBox.WithIcon {
+ padding-left: 20px;
+}
+
+.MessageBox.WithIcon > i {
+ position: absolute;
+ left: 12px;
+ top: 12px;
+}
+
+.MessageBox p {
+ padding: 10px 10px 10px 19px;
+}
+
+.MessageBox p,
+.MessageBox a {
+ color: rgba(255,255,255,0.8);
+}
+
+.MessageBox.Info a,
+.MessageBox.Error a {
+ transition: color ease 0.3s;
+}
+
+.MessageBox a:hover,
+.MessageBox a:hover {
+ color: #fff;
+}
+
+.MessageBox a:hover {
+ text-decoration: none;
+}
+
+.MessageBox > p + p {
+ margin-top: 2px;
+}
+
+.MessageBox.Notice p,
+.MessageBox.Notice a {
+ color: #1f1f1f;
+}
+
+.MessageBox.Notice a:hover {
+ color: #000;
+}
+
+.MessageBox.Error {
+ background: #DA3633;
+}
+
+.MessageBox.Confirmation {
+ background: #133c4d;
+}
+
+.MessageBox p a:after {
+ content: "\2192";
+ display: inline-block;
+ font-size: 15px;
+ transition: margin ease 0.3s;
+}
+
+.MessageBox p a:hover:after {
+ margin-left: 5px;
+}
+
+.MessageBox.Info {
+ background-color: #133c4d;
+}
+
+.MessageBox a.Button:after {
+ content: "";
+}
+
+.MessageBox a.Button {
+ display: inline;
+ padding: 3px 7px;
+}
+
+.MessageBox a.Button:hover {
+ text-decoration: none;
+}
+
+.MessageBox.Info a.Button {
+ background-color: #333;
+}
+
+.MessageBox.Info a.Button:hover {
+ background-color: #444;
+}
+
+.MessageBox.Info a.Button i {
+ color: #3ab5e4;
+}
+
+form .MessageBox{
+ margin-left: 0px;
+ margin-right: 0px;
+ margin-top: 0px;
+}
+
+/**
+ * @subsection Flag
+ */
+
+.Flag.Small {
+ width: 17px;
+ height: 8px;
+ margin: 0px auto;
+}
+
+.Flag span {
+ display: block;
+ height: 100%;
+ text-indent: -9999px;
+ cursor: pointer;
+ /* set a default color for priorities */
+ background-color: #cdcdcd;
+}
+
+.Flag span.Escalated {
+ background-color:#ea2400;
+}
+
+.Flag span.New {
+ background-color: #8bef4d;
+}
+
+.Flag span.Warning {
+ background-color: #ffdd50;
+}
+
+.Flag span.PriorityID-1 {
+ background-color:#03c4f0;
+}
+
+.Flag span.PriorityID-2 {
+ background-color:#83bfc8;
+}
+
+.Flag span.PriorityID-3 {
+ background-color:#cdcdcd;
+}
+
+.Flag span.PriorityID-4 {
+ background-color:#ffaaaa;
+}
+
+.Flag span.PriorityID-5 {
+ background-color:#ea2400;
+}
+
+/**
+ * @subsection "Unread" star
+ */
+span.UnreadArticles,
+div.UnreadArticles {
+ display: block;
+ width: 16px;
+ height: 15px;
+ margin-left: 6px;
+ font-weight: normal;
+ position: relative;
+ padding: 0px 3px !important;
+}
+
+span.UnreadArticles i,
+div.UnreadArticles i {
+ display: block;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ z-index: 2;
+ font-size: 14px;
+ color: #c8c6c4;
+}
+
+span.UnreadArticles em,
+div.UnreadArticles em {
+ display: none;
+}
+
+span.UnreadArticles i:first-child,
+div.UnreadArticles i:first-child {
+ color: #c8c6c4 !important;
+ font-size: 16px;
+ z-index: 1;
+ left: -1px;
+ top: -1px;
+}
+
+span.UnreadArticles.Remarkable i,
+div.UnreadArticles.Remarkable i {
+ color: #c8c6c4;
+}
+
+span.UnreadArticles.Ordinary,
+div.UnreadArticles.Ordinary {
+ color: #c8c6c4;
+}
+
+tbody tr:hover span.UnreadArticles i {
+ color: #F6A72B;
+}
+
+span.ImportantArticles {
+ display: block;
+ width: 16px;
+ height: 16px;
+ float: right;
+ margin: -2px 0px 0px 23px;
+ color: #ea2400;
+ font-size: 13px;
+}
+
+span.ImportantArticles em {
+ display: none;
+}
+
+span.ImportantArticles i {
+ color: #ea2400;
+}
+
+/**
+ * @subsection Charts
+ */
+.Chart {
+ width: 240px;
+ height: 200px;
+}
+
+#ChartTooltip {
+ padding: 2px 8px 3px;
+ background: #000;
+ color: #FFF;
+ font-size: 11px;
+ opacity: 0.8;
+ border-radius: 8px;
+ position: absolute;
+}
+
+/**
+ * @subsection Datepicker
+ */
+.DatepickerIcon {
+ margin: 1px 0 0 4px;
+ height: 16px;
+ width: 16px;
+ display: inline-block;
+ vertical-align: top;
+ color: #999;
+}
+
+.RTL .DatepickerIcon {
+ margin: 0 4px 0 0;
+}
+
+/* Vacation Days */
+td.Highlight a.ui-state-default {
+ border: 1px solid #3ab5e4;
+ background: #3ab5e4 !important;
+ background: -moz-linear-gradient(top, #2c8bb0 0%, #3ab5e4 100%) !important;
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2c8bb0), color-stop(100%,#3ab5e4)) !important;
+ background: -webkit-linear-gradient(top, #2c8bb0 0%,#3ab5e4 100%) !important;
+ background: -o-linear-gradient(top, #2c8bb0 0%,#3ab5e4 100%) !important;
+ background: -ms-linear-gradient(top, #2c8bb0 0%,#3ab5e4 100%) !important;
+ background: linear-gradient(to bottom, #2c8bb0 0%,#3ab5e4 100%) !important;
+}
+
+/* Today */
+.ui-datepicker-current-day {
+}
+
+/*Weekend*/
+.ui-datepicker-week-end {
+}
+
+/**
+ * @subsection Autocompletion
+ */
+
+.ui-autocomplete {
+ z-index: 20 !important;
+ max-height: 200px;
+ overflow-x: hidden;
+ overflow-y: scroll;
+}
+
+.ui-autocomplete .ui-menu-item {
+ font-size: 11px;
+}
+
+.ui-overlay-autocomplete {
+ z-index: 6100 !important;
+}
+
+.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
+ border: 0px;
+ margin: 0px;
+}
+
+.ui-menu-item:hover,
+.ui-menu-item:focus,
+.ui-menu-item:active,
+.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
+ background: #666;
+}
+
+/**
+ * @subsection Icons
+ */
+.IconInline {
+ display: inline-block;
+}
+
+.IconReady {
+ width: 16px;
+ height: 16px;
+ background-image: url(../img/icons/tick.png);
+}
+
+.IconNotReady {
+ width: 16px;
+ height: 16px;
+ background-image: url(../img/icons/cross.png);
+}
+
+.IconNotReadyGrey {
+ width: 16px;
+ height: 16px;
+ background-image: url(../img/icons/cross_sw.png);
+}
+
+/**
+ * @subsection Dialog popup width
+ */
+iframe.TextOption {
+ width: 500px;
+ height: 400px;
+}
+
+iframe.TextOption.Customer {
+ width: 800px;
+}
+
+iframe.TextOption.CustomerUserAddressBook {
+ width: 960px;
+ min-height: 65vh;
+ max-height: 80vh;
+}
+
+/**
+ * @subsection global search
+ */
+#SearchForm,
+#AgentCustomerInformationCenterSearchForm, #AgentCustomerUserInformationCenterSearchForm,
+#AgentTicketCustomerIDSelection {
+ width: 760px;
+ padding-right: 20px;
+}
+
+#SearchForm #SearchProfile,
+#AgentCustomerInformationCenterSearchForm #SearchProfile {
+ max-width: 350px;
+}
+
+#ArticleFilterDialogForm {
+ width: 480px;
+ max-height: 300px;
+}
+
+#ContextSettingsDialog {
+ width: 450px;
+ max-height: 100px;
+}
+
+/**
+ * @subsection global message format
+ */
+.ArticleBody {
+ font-family: monospace,fixed;
+ word-wrap: break-word;
+ background: #FFF;
+ padding: 10px;
+ min-height: 70px;
+ color: #141414;
+}
+
+.ArticleHTML {
+ padding: 2px 5px;
+ font-size: 11px;
+ max-height: 100px;
+ background: #FFF;
+ min-height: 70px;
+}
+
+.ArticleMailContent .ArticleHTML {
+ max-height: none;
+ font-size: 12px;
+ padding: 10px;
+}
+
+/**
+ * @subsection Chat
+ */
+
+.ArticleChat .Name {
+ font-weight: bold;
+ white-space: nowrap;
+}
+
+.ArticleChat .Time {
+ padding-right: 5px;
+ color: #888;
+ white-space: nowrap;
+}
+
+.ArticleChat .SystemGenerated .Name {
+ display: none;
+}
+
+.ArticleChat .SystemGenerated .Text {
+ font-style: italic;
+ color: #888;
+}
+
+.ArticleChat .Own .Name {
+ color: red;
+}
+
+.ArticleChat > div {
+ display: table;
+}
+
+.ArticleChat > div > div {
+ display: table-row;
+}
+
+.ArticleChat > div > div > span {
+ display: table-cell;
+}
+
+#ChatStartDialog {
+ width: 500px;
+ position: relative;
+}
+
+#ChatStartDialog form {
+ display: block;
+ padding: 10px;
+}
+
+#ChatStartDialog form textarea {
+ width: 380px;
+ height: 30px;
+ font-family: Arial, sans-serif;
+ padding: 3px;
+}
+
+#ChatStartDialog form .Primary {
+ position: absolute;
+ right: 20px;
+ top: 11px;
+}
+
+#ChatStartDialog form .Primary span {
+ line-height: 26px;
+ height: 26px;
+}
+
+#ChatStartDialog form .Primary:focus {
+ border-color: #c8c6c4;
+}
+
+.ChatProtocol {
+ border: 1px solid #ccc;
+ padding: 2px;
+ overflow-y: auto;
+ max-height: 150px;
+ width: 617px;
+}
+
+/**
+ * @subsection global jQuery UI optimizations
+ */
+/*
+* Bug #8288: Autocomplete search results show up in Times font when using Internet Explorer
+*/
+.ui-widget-content {
+ border: 0px !important;
+ color: #c8c6c4 !important;
+ background: #1f1f1f !important;
+}
+
+.ui-menu-item {
+ background: #1f1f1f;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.ui-menu .ui-menu-item a {
+ color: #c8c6c4 !important;
+ display: block;
+ padding: 2px;
+ border: 0px;
+}
+
+.ui-corner-all {
+ border-radius: 0px !important;
+}
+
+.ui-widget-header {
+ background: #1f1f1f !important;
+ border: 0px !important;
+ font-weight: normal !important;
+}
+
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default {
+ background: #1f1f1f !important;
+}
+
+.ui-state-hover,
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus {
+ background: #333 !important;
+}
+
+/**
+ * @subsection global CKEditor fixes/improvements
+ */
+
+.cke_combo__fontsize .cke_combo_text {
+ width: 40px !important;
+}
+
+#cke_RichText,
+.cke_toolbar > .cke_toolgroup,
+.cke_toolbar .cke_combo_button,
+.cke_inner .cke_contents,
+.cke_dialog_body,
+input.cke_dialog_ui_input_password,
+input.cke_dialog_ui_input_text,
+textarea.cke_dialog_ui_input_textarea {
+ border-radius: 0px !important;
+}
+
+.cke_toolgroup .cke_button_on {
+ background-color: #ccc;
+}
+
+input.cke_dialog_ui_input_password:focus,
+input.cke_dialog_ui_input_text:focus,
+textarea.cke_dialog_ui_input_textarea:focus {
+ box-shadow: none !important;
+ border-color: #fef235 !important;
+}
+
+/**
+ * @subsection global nvd3 improvements/fixes
+ */
+
+.nvtooltip {
+ font-size: 11px !important;
+ border: 0px !important;
+}
+
+/*
+ * @subsection Popup-Iframe (for responsive)
+ */
+iframe.PopupIframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 9999;
+}
+
+/**
+ * @subsection Floaters
+ */
+
+body > div.MetaFloater {
+ width: 600px;
+ height: 400px;
+ background: #fff;
+ box-shadow: 2px 1px 3px #aaa;
+ position: absolute;
+ box-sizing: border-box;
+ z-index: 999;
+ margin-top: -5px;
+ border: 1px solid #eee;
+ border-top: 30px solid #eee;
+}
+
+body > div.MetaFloater:after,
+body > div.MetaFloater:before {
+ bottom: 399px;
+ left: 50%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+}
+
+body > div.MetaFloater.Left:after,
+body > div.MetaFloater.Left:before {
+ left: 15px;
+ margin-top: -1px;
+}
+
+body > div.MetaFloater.Right:after,
+body > div.MetaFloater.Right:before {
+ left: auto;
+ right: 15px;
+}
+
+body > div.MetaFloater.Bottom:after,
+body > div.MetaFloater.Bottom:before {
+ bottom: auto;
+ top: 100%;
+}
+
+body > div.MetaFloater:after {
+ border-bottom-color: #eee;
+ border-width: 15px;
+ margin-left: -15px;
+}
+
+body > div.MetaFloater.Bottom:after {
+ border-color: rgba(255, 255, 255, 0);
+ border-top-color: #fff;
+}
+
+body > div.MetaFloater:before {
+ border-color: rgba(170, 170, 170, 0);
+ border-bottom-color: #aaa;
+ border-width: 16px;
+ margin-left: -16px;
+}
+
+body > div.MetaFloater.Bottom:before {
+ border-color: rgba(170, 170, 170, 0);
+ border-top-color: #aaa;
+}
+
+body > div.MetaFloater > i.fa-spin {
+ position: absolute;
+ left: 50%;
+ font-size: 20px;
+ top: 50%;
+ margin-left: -10px;
+ margin-top: -10px;
+}
+
+body > div.MetaFloater > div.Content > iframe {
+ height: 200%;
+ left: -50%;
+ position: absolute;
+ top: -50%;
+ transform: scale(0.5);
+ width: 200%;
+}
+
+body > div.MetaFloater > div.Content > iframe.NoScale {
+ height: 100%;
+ left: 0px;
+ top: 0px;
+ transform: scale(1.0);
+ width: 100%;
+}
+
+body > div.MetaFloater > a {
+ font-size: 15px;
+ padding: 8px 10px;
+ display: block;
+ position: absolute;
+ top: -30px;
+ text-align: right;
+ box-sizing: border-box;
+ height: 30px;
+ color: #555;
+}
+
+body > div.MetaFloater > div.Content {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ overflow: hidden;
+}
+
+body > div.MetaFloater > div.NoPreview {
+ display: none;
+ text-align: center;
+ width: 50%;
+ margin: 23% auto;
+ line-height: 150%;
+ color: #777;
+}
+
+body > div.MetaFloater > div.NoPreview i {
+ display: block;
+ font-size: 20px;
+ margin-bottom: 10px;
+ color: #777;
+}
+
+body > div.MetaFloater > a.Scale {
+ left: 0px;
+}
+
+body > div.MetaFloater > a.Open {
+ left: 25px;
+}
+
+body > div.MetaFloater > a.Close {
+ right: 0px;
+}
+
+/**
+ * @subsection CKEditor Notifications
+ */
+
+/*
+Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+
+/**
+ * Progress notification structure:
+ *
+ * +---div.cke_notification cke_notification_info--------------------------+
+ * | |
+ * | +---div.cke_notification_progress-----------------------------------+ |
+ * | | | |
+ * | +-------------------------------------------------------------------+ |
+ * | |
+ * | +---p.cke_notification_message--------------------------------------+ |
+ * | | Foo | |
+ * | +-------------------------------------------------------------------+ |
+ * | |
+ * | +---a.cke_notification_close----------------------------------------+ |
+ * | | +---span.cke_label----------------------------------------------+ | |
+ * | | | X | | |
+ * | | +---------------------------------------------------------------+ | |
+ * | +-------------------------------------------------------------------+ |
+ * | |
+ * +-----------------------------------------------------------------------+
+ *
+ *
+ * Warning notification structure:
+ *
+ * +---div.cke_notification cke_notification_warning-----------------------+
+ * | |
+ * | +---p.cke_notification_message--------------------------------------+ |
+ * | | Foo | |
+ * | +-------------------------------------------------------------------+ |
+ * | |
+ * | +---a.cke_notification_close----------------------------------------+ |
+ * | | +---span.cke_label----------------------------------------------+ | |
+ * | | | X | | |
+ * | | +---------------------------------------------------------------+ | |
+ * | +-------------------------------------------------------------------+ |
+ * | |
+ * +-----------------------------------------------------------------------+
+ *
+ * Success and info notifications have the same structure as warning, but use
+ * `cke_notification_success` and `cke_notification_info` instead of `cke_notification_warning`.
+ */
+
+.cke_notifications_area {
+ /* Prevent notification margin capture clicking. */
+ pointer-events: none;
+}
+.cke_notification {
+ pointer-events: auto;
+ position: relative;
+ margin: 10px;
+ width: 300px;
+ color: white;
+ border-radius: 3px;
+ text-align: center;
+ opacity: 0.95;
+ filter: alpha(opacity = 95);
+ box-shadow: 2px 2px 3px 0px rgba(50, 50, 50, 0.3);
+ -webkit-animation: fadeIn 0.7s;
+ animation: fadeIn 0.7s;
+}
+
+.cke_notification_message a {
+ color: #12306F;
+}
+
+@-webkit-keyframes fadeIn {
+ from { opacity: 0.4; }
+ to { opacity: 0.95; }
+}
+
+@keyframes fadeIn {
+ from { opacity: 0.4; }
+ to { opacity: 0.95; }
+}
+
+.cke_notification_success {
+ background: #72B572;
+ border: 1px solid #63A563;
+}
+
+.cke_notification_warning {
+ background: #C83939;
+ border: 1px solid #902B2B;
+}
+
+.cke_notification_info {
+ background: #2E9AD0;
+ border: 1px solid #0F74A8;
+}
+
+.cke_notification_info span.cke_notification_progress {
+ background-color: #0F74A8;
+ display: block;
+ padding: 0;
+ margin: 0;
+ height: 100%;
+ overflow: hidden;
+ position: absolute;
+ z-index: 1;
+}
+
+.cke_notification_message {
+ position: relative;
+ margin: 4px 23px 3px;
+ color: #fff;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ line-height: 18px;
+ z-index: 4;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+.cke_notification_close {
+ position: absolute;
+ cursor: pointer;
+ text-align: center;
+ top: 5px;
+ right: 1px;
+ padding: 0;
+ margin: 0;
+ z-index: 5;
+ opacity: 0.6;
+ filter: alpha(opacity = 60);
+}
+
+.cke_notification_close:after {
+ display: block;
+ height: 20px;
+ width: 20px;
+ content: "x";
+ color: #fff;
+}
+
+.cke_notification_close:hover {
+ opacity: 1;
+ filter: alpha(opacity = 100);
+}
+
+.cke_notification_close span {
+ display: none;
+}
+
+.cke_notification_warning a.cke_notification_close {
+ opacity: 0.8;
+ filter: alpha(opacity = 80);
+}
+
+.cke_notification_warning a.cke_notification_close:hover {
+ opacity: 1;
+ filter: alpha(opacity = 100);
+}
+
+/**
+ * @subsection AJAX Loader
+ */
+
+.AJAXLoader {
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ margin: 4px;
+ position: relative;
+ vertical-align: bottom;
+}
+
+.AJAXLoader:after,
+#Canvas .Activity .Loader:after,
+.Loading > .Header h2:after,
+.OverviewControl.Loading .ControlRow:after {
+ -webkit-animation: fa-spin 2s infinite linear;
+ animation: fa-spin 2s infinite linear;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 100%;
+ height: 100%;
+ line-height: 14px;
+ content: "\f1ce";
+ font-family: FontAwesome;
+ font-size: 14px;
+ color: #777;
+}
+
+/* Scrollbar */
+/* width */
+::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+ border-radius: 5px;
+ background: transparent;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+ background: #444;
+ border-radius: 10px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+ background: #555;
+}
+
+/* iFrame Background */
+iframe {
+ border: 1px solid #fff;
+ border-radius: 5px;
+ background-color: #fff !important;
+}
+
+}
+
+/*
+ * @subsection Media Query Reset-CSS (for desktop screen resolutions)
+ */
+@media only screen and (min-width: 1025px) {
+
+ /*
+ * @subsection Responsive classes
+ */
+ .ScreenXL {
+ display: block !important;
+ }
+
+ .SmallerOrEqualScreenXL {
+ display: block !important;
+ }
+
+ .ScreenL, .ScreenM, .ScreenS, .ScreenXS,
+ .SmallerOrEqualScreenL, .SmallerOrEqualScreenM,
+ .SmallerOrEqualScreenS, .SmallerOrEqualScreenXS {
+ display: none !important;
+ }
+
+ /*
+ * @subsection Responsive footer classes
+ * @description Used to determinethe active screen size in JavaScript
+ */
+ #ResponsiveFooter .Visible-ScreenXL {
+ display: block !important;
+ }
+
+ #ResponsiveFooter .Visible-ScreenL,
+ #ResponsiveFooter .Visible-ScreenM,
+ #ResponsiveFooter .Visible-ScreenS,
+ #ResponsiveFooter .Visible-ScreenXS {
+ display: none !important;
+ }
+
+ .ResponsiveHandle {
+ display: none !important;
+ }
+
+ .ErrorBox, .SuccessBox {
+ margin: 0px 0px 20px 0px;
+ line-height: 150%;
+ }
+
+ /* Filters */
+
+ .TableFilterContainer {
+ position: relative;
+ }
+
+ .TableFilterContainer .FilterRemove {
+ position: absolute;
+ right: 6px;
+ top: 50%;
+ font-size: 12px;
+ margin-top: -6px;
+ display: none;
+ color: #555;
+ transition: color ease 0.3s;
+ }
+
+ .TableFilterContainer .FilterRemove:focus,
+ .TableFilterContainer .FilterRemove:hover,
+ .TableFilterContainer .FilterRemove:active {
+ color: #c8c6c4;
+ }
+
+ .TableFilterContainer input,
+ .TableFilterContainer input.FilterBox {
+ padding: 7px !important;
+ box-sizing: border-box;
+ border-radius: 10px;
+ width: 100%;
+ }
+
+ .fa {
+ color: #c8c6c4;
+ }
+}
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Default.css.blue b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Default.css.blue
new file mode 100644
index 0000000000..77a0803615
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Default.css.blue
@@ -0,0 +1,1861 @@
+/*
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+
+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 Default Settings
+ */
+
+@media screen,projection,tv,handheld {
+
+/**
+ * @subsection Fonts
+ */
+
+body {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 12px;
+ text-align: left;
+ position: relative;
+}
+
+.RTL {
+ text-align: right;
+ /* this will inherit to all elemtents because of reset.css */
+ direction: rtl;
+}
+
+#ViewModeSwitch {
+ margin: 5px 0px;
+}
+
+#AjaxErrorDialog {
+ display: none;
+}
+
+#AjaxErrorDialogInner {
+ width: 550px;
+ text-align: center;
+}
+
+#AjaxErrorDialogInner .Icon {
+ text-align: center;
+ display: block;
+ width: 30px;
+ height: 30px;
+ margin: 0px auto 20px auto;
+ line-height: 30px;
+ border-radius: 50px;
+ background: #f92;
+ color: #fff;
+ transition: background 2s ease;
+ float: none;
+}
+
+#AjaxErrorDialogInner .Icon + p {
+ margin: 0px auto 5px auto;
+ width: 90%;
+}
+
+#AjaxErrorDialogInner .Icon i {
+ font-size: 18px;
+ vertical-align: middle;
+ margin-top: -3px;
+}
+
+#AjaxErrorDialogInner .CommunicationError .Icon {
+ background: #b8384e;
+}
+
+#AjaxErrorDialogInner .Icon.Green {
+ background: green;
+}
+
+#AjaxErrorDialogInner .FullErrorMessage {
+ color: red;
+ margin: 5px 0px;
+}
+
+/**
+ * @subsection Loading Dialog
+ */
+
+.DialogWaiting {
+ text-align: center;
+}
+
+.DialogWaiting i {
+ display: block;
+ margin: 10px 0px;
+}
+
+.DialogWaiting p {
+ padding: 0px 10px 10px 10px;
+}
+
+.Dialog .InnerContent .Waiting {
+ display: none;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ height: 100%;
+ width: 100%;
+ text-align: center;
+ background: #fff;
+ z-index: 999;
+ line-height: 100%;
+}
+
+.Dialog .InnerContent .Waiting i {
+ font-size: 14px;
+ position: absolute;
+ top: 50%;
+ margin-top: -7px;
+ left: 50%;
+ margin-left: -7px;
+}
+
+/**
+ * @subsection Print elements - Only show when page is printed
+ */
+.PrintOnly {
+ display: none;
+}
+
+/**
+ * @subsection Hidden elements - Elements that are hidden at first
+ */
+.Hidden {
+ display: none;
+}
+
+.Invisible {
+ visibility: hidden;
+}
+
+/**
+ * @subsection ARIA (Accessibility)
+ * @subsubsection AlertMessage
+ * @note This definition allows to create text on the page
+ * which is not seen, but will be read by the screen reader.
+ * display: none; cannot be used in this case.
+ */
+
+.ARIAAlertMessage {
+ position: absolute !important;
+ left: -10000px;
+ right: auto;
+ top: -10000px;
+}
+
+.RTL .ARIAAlertMessage {
+ left: auto;
+ right: -10000px;
+}
+
+/**
+ * @subsection ElementPool - Hide elements for later use with JavaScript
+ */
+#UIElementPool {
+ display: none;
+}
+
+/**
+ * @subsection Links
+ */
+
+a {
+ text-decoration: none;
+}
+
+a:hover,
+a:focus {
+ color: #F72;
+}
+
+/**
+ * @subsection Headings
+ */
+h1 {
+ font-size: 16px;
+ font-weight: bold;
+ margin-bottom: 15px;
+}
+
+h2 {
+ font-size: 14px;
+ color: #474747;
+ margin-bottom: 10px;
+}
+
+h3 {
+ font-size: 14px;
+ color: #00023c;
+ margin-bottom: 5px;
+}
+
+h4 {
+ color: #00023c;
+ margin-bottom: 5px;
+ font-weight: bold;
+}
+
+h5 {
+ color: #00023c;
+ margin-bottom: 5px;
+}
+
+/**
+ * @subsection Paragraphs
+ * @note Use paragraphs instead of
s for text-only, multiline content!
+ */
+p {
+ /* increase line-height for readability */
+ line-height: 1.3em;
+}
+
+/**
+ * @subsection Code Examples
+ */
+code {
+ font-family: monospace;
+}
+
+/**
+ * @subsection Text modifiers
+ */
+strong {
+ font-weight: bold;
+}
+
+em {
+ font-style: italic;
+}
+
+/**
+ * @subsection Regular lists
+ * @note List elements (ul, ol) are being reset by default to avoid browser styling, so we
+ need to define our own 'default' lists using a class.
+ */
+
+ul.Default {
+ list-style-type: square;
+ margin: 5px 0px;
+ padding-left: 20px;
+}
+
+ul.Default li {
+ line-height: 130%;
+ margin-bottom: 3px;
+}
+
+/**
+ * @subsection Definition lists
+ */
+dl {
+ margin: 5px 0;
+}
+
+dt {
+ font-size: 13px;
+ font-weight: bold;
+ line-height: 1.3em;
+ margin-top: 5px;
+}
+
+dd {
+ line-height: 1.3em;
+ margin-left: 15px;
+ margin-right: 0;
+}
+
+.RTL dd {
+ margin-left: 0;
+ margin-right: 15px;
+}
+
+/**
+ * @subsection Text
+ */
+.Center {
+ text-align: center;
+}
+
+.Left {
+ text-align: left;
+}
+
+.FloatLeft {
+ text-align: left;
+}
+
+.Right {
+ text-align: right;
+}
+
+.FloatRight {
+ float: right;
+}
+
+.Error {
+ color: #ea2400;
+}
+
+.Warning {
+ color: #ff9050;
+}
+
+.Notice {
+ color: #00023c;
+}
+
+.Confirmation {
+ color: #069d07;
+}
+
+.Small {
+ font-size: 90%;
+}
+
+/**
+ * @subsection Errors
+ * @note Error fields for forms
+ */
+
+.ErrorBox,
+.SuccessBox {
+ display: block;
+ padding: 5px 8px 4px;
+ cursor: default;
+}
+
+.ErrorBox.Hidden,
+.SuccessBox.Hidden {
+ display: none;
+}
+
+.ErrorBox {
+ color: rgba(255, 255, 255, 0.9);
+ background: #B83850;
+}
+
+.SuccessBox {
+ color: #FFF;
+ background: #8FB738;
+}
+
+.ErrorBox span a,
+.SuccessBox span a {
+ color: #fff;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.5);
+ transition: all ease 0.2s;
+}
+
+.ErrorBox span a:hover,
+.SuccessBox span a:hover {
+ border-color: #fff;
+}
+
+/**
+ * @subsection Drag & drop upload
+ */
+
+div.DnDUploadBox {
+ overflow-y: hidden;
+ width: 622px;
+ padding: 0 !important;
+}
+
+div.DnDUpload {
+ border: 1px solid #ccc;
+ color: #aaa;
+ min-height: 60px;
+ text-align: center;
+ position: relative;
+ margin-bottom: 5px;
+ max-width: 622px;
+ box-sizing: border-box;
+}
+
+span.ReadyForUpload {
+ padding: 30px 0px 5px;
+ display: block;
+}
+
+div.DnDUpload:focus {
+ border-color: #000;
+ color: #000;
+}
+
+input.AjaxDnDUpload.Error + div.DnDUpload {
+ color: #ea2400;
+ border-color: #ea2400;
+}
+
+div.DnDUpload.DragOver {
+ border-style: dashed;
+ background: #eee;
+ color: #444;
+}
+
+div.DnDUpload i {
+ position: absolute;
+ top: 10px;
+ left: 50%;
+ margin-left: -20px;
+ font-size: 20px;
+ margin-bottom: 10px;
+}
+
+div.DnDUpload i.fa-spinner {
+ display: none;
+}
+
+div.DnDUpload.Uploading i.fa-download {
+ display: none;
+}
+
+div.DnDUpload.Uploading i.fa-spinner {
+ display: block;
+}
+
+div.DnDUpload .UploadRunning {
+ display: none;
+}
+
+div.DnDUpload.Uploading .ReadyForUpload {
+ display: none;
+}
+
+div.DnDUpload.Uploading .UploadRunning {
+ display: block;
+}
+
+.AttachmentListContainer {
+ position: relative;
+ max-width: 622px;
+}
+
+.AttachmentListContainer .Busy {
+ position: absolute;
+ left: 0px;
+ width: 100%;
+ height: 100%;
+ top: 0px;
+ background: rgba(255, 255, 255, 0.5);
+ text-align: center;
+ box-sizing: border-box;
+ display: none;
+}
+
+.AttachmentListContainer .Busy i {
+ vertical-align: middle;
+ line-height: 100%;
+ position: absolute;
+ top: 50%;
+ font-size: 20px;
+ margin-top: -10px;
+}
+
+table.AttachmentList {
+ clear: none;
+ margin-bottom: 10px;
+ margin-top: 0px;
+ max-width: 622px;
+ table-layout: fixed;
+}
+
+table.AttachmentList .Filename {
+ width: 40%;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+table.AttachmentList .Progress {
+ display: block;
+ height: 4px;
+ margin: 3px 0px;
+ background: #f92;
+ width: 0px;
+}
+
+table.AttachmentList .Filetype {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+table.AttachmentList .Filesize {
+ width: 15%;
+}
+
+table.AttachmentList .Delete {
+ width: 15px;
+ text-align: center;
+}
+
+table.AttachmentList .AttachmentDelete:focus i {
+ color: #000;
+}
+
+table.AttachmentList.DataTable thead th {
+ line-height: 12px;
+}
+
+/**
+ * @note Use the class InvisibleText to hide text from the screen,
+ * while it is still recognized and read by screen readers.
+ */
+.InvisibleText {
+ width: 0;
+ height: 0;
+ display: inline-block;
+ text-indent: -9999px;
+ white-space: nowrap;
+ position: absolute !important;
+}
+
+/**
+ * @subsection Spacings
+ */
+.Spacing {
+ margin: 13px;
+}
+
+.SpacingTop {
+ margin-top: 13px;
+}
+
+.SpacingTopSmall {
+ margin-top: 8px;
+}
+
+.SpacingTopLarge {
+ margin-top: 89px;
+}
+
+.SpacingBottom {
+ margin-bottom: 13px;
+}
+
+.SpacingBottomMedium {
+ margin-bottom: 34px !important;
+}
+
+.SpacingBottomLarge {
+ margin-bottom: 89px;
+}
+
+.SpacingLeft {
+ margin-left: 10px;
+}
+
+.SpacingRight {
+ margin-right: 10px;
+}
+
+/**
+ * @subsection Indents
+ */
+.Indent {
+ padding-left: 13px !important;
+}
+
+/**
+ * @subsection Box alignment
+ */
+.CenterBox {
+ margin-left: auto !important;
+ margin-right: auto !important;
+}
+
+/**
+ * @subsection Controlling the display: value
+ * @note This is especially helpful for links. When
+ * they have this class, the entire block will be clickable.
+ */
+.AsBlock {
+ display: block;
+}
+
+/**
+ * @subsection Clear
+ */
+.Clear {
+ float: none !important;
+ clear: both !important;
+}
+
+.ClearNone {
+ clear: none !important;
+}
+
+.ClearLeft,
+.RTL .ClearRight {
+ float: none !important;
+ clear: left !important;
+}
+
+.ClearRight,
+.RTL .ClearLeft {
+ float: none !important;
+ clear: right !important;
+}
+
+/**
+ * @subsection MainBox
+ */
+.MainBox {
+ position: relative;
+ padding: 16px 10px 7px 10px;
+}
+
+.RTL .MainBox {
+ padding: 4px 8px 8px 16px;
+}
+
+.OverviewBox {
+ position: relative;
+}
+
+.MainBox > h1 {
+ margin: 0;
+ padding: 10px 8px 15px 8px;
+ position: relative;
+}
+
+.MainBox > .AsteriskExplanation {
+ padding-left: 8px;
+ margin-bottom: 10px;
+}
+
+.RTL .MainBox > .AsteriskExplanation {
+ padding-left: 0px;
+ padding-right: 8px;
+}
+
+.AsteriskExplanation {
+ color: #999;
+}
+
+.MainBox.FormScreen > h1,
+.MainBox.FormScreen > .AsteriskExplanation {
+ margin-left: 24%;
+}
+
+.MainBox.FormScreen.NoSidebar > h1,
+.MainBox.FormScreen.NoSidebar > .AsteriskExplanation {
+ margin-left: 30%;
+}
+
+.RTL .MainBox.FormScreen > h1,
+.RTL .MainBox.FormScreen > .AsteriskExplanation {
+ margin-right: 24%;
+}
+
+.RTL .MainBox.FormScreen.NoSidebar > h1,
+.RTL .MainBox.FormScreen.NoSidebar > .AsteriskExplanation {
+ margin-right: 30%;
+}
+
+.OverviewBox > h1 {
+ margin: 10px 0px;
+ padding: 8px 11px 7px;
+ position: relative;
+}
+
+/**
+ * @subsection Bread crumb
+ */
+
+.BreadCrumb {
+ list-style-type: none;
+ margin: 0px 2px 15px 0px;
+ padding: 7px 15px 4px 0px;
+ background: #f5f5f5;
+ position: relative;
+ padding-left: 0px;
+ padding-right: 15px;
+ overflow-y: hidden;
+ overflow-x: auto;
+ white-space: nowrap;
+ box-shadow: 1px 1px 0px #e9e9e9;
+}
+
+.RTL .BreadCrumb {
+ padding-right: 10px;
+ padding-left: 15px;
+}
+
+.BreadCrumb li {
+ display: inline-block;
+ margin: 0px 2px 0px 2px;
+ padding-left: 35px;
+ color: #777;
+ position: relative;
+ white-space: nowrap;
+ vertical-align: middle;
+}
+
+.BreadCrumb li > a,
+.BreadCrumb li > span {
+ line-height: 14px;
+ display: inline-block;
+ padding: 0px 2px 3px 2px;
+}
+
+.BreadCrumb li:first-child {
+ padding-left: 20px;
+}
+
+.BreadCrumb li:first-child a i {
+ font-size: 16px;
+ color: #777;
+}
+
+.BreadCrumb li:first-child a:hover i {
+ color: #00023c;
+}
+
+.RTL .BreadCrumb li {
+ padding-left: 0px;
+ padding-right: 35px;
+}
+
+.RTL .BreadCrumb li:first-child {
+ padding-right: 20px;
+}
+
+.BreadCrumb li:first-child:after,
+.BreadCrumb li:first-child:before {
+ display: none;
+}
+
+.BreadCrumb a {
+ color: #000;
+ position: relative;
+}
+
+.BreadCrumb a:after {
+ position: absolute;
+ left: 0px;
+ width: 0px;
+ content: "";
+ bottom: 0px;
+ border-bottom: 1px solid #bbb;
+ transition: all ease 0.3s;
+}
+
+.BreadCrumb a:hover:after,
+.BreadCrumb a:focus:after,
+.BreadCrumb a:active:after {
+ width: 100%;
+}
+
+.BreadCrumb li:before,
+.BreadCrumb li:after {
+ top: 50%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-width: 22px;
+ margin-top: -24px;
+}
+
+.BreadCrumb li:after {
+ left: 0px;
+ border-color: rgba(255, 255, 255, 0);
+ border-left-color: #fff;
+}
+
+.RTL .BreadCrumb li:after {
+ border-left-color: transparent;
+ border-right-color: #fff;
+ left: auto;
+ right: 0px;
+}
+
+.BreadCrumb li:before {
+ left: -5px;
+ border-color: rgba(238, 238, 238, 0);
+ border-left-color: #f5f5f5;
+ z-index: 2;
+}
+
+.RTL .BreadCrumb li:before {
+ left: auto;
+ right: -5px;
+ border-right-color: #f5f5f5;
+ border-left-color: transparent;
+}
+
+/**
+ * @subsection Standard Widths
+ */
+.W10pc {
+ width: 10%;
+}
+
+.W20pc {
+ width: 20%;
+}
+
+.W25pc {
+ width: 25%;
+}
+
+.W33pc {
+ width: 33%;
+}
+
+.W50pc {
+ width: 50%;
+}
+
+.W60pc {
+ width: 60%;
+}
+
+.W70pc {
+ width: 70%;
+}
+
+.W75pc {
+ width: 75%;
+}
+
+.W80pc {
+ width: 80%;
+}
+
+.W90pc {
+ width: 90%;
+}
+
+.W95pc {
+ width: 95%;
+}
+
+.W100pc {
+ width: 100%;
+}
+
+.W50px {
+ width: 50px;
+}
+
+.W950px {
+ width: 950px;
+}
+
+/**
+ * @subsection MessageBox
+ */
+
+.MessageBox {
+ margin: 0px;
+ background: #F7AE40;
+ position: relative;
+ z-index: 1;
+}
+
+.MessageBox.WithIcon {
+ padding-left: 20px;
+}
+
+.MessageBox.WithIcon > i {
+ position: absolute;
+ left: 12px;
+ top: 12px;
+}
+
+.MessageBox p {
+ padding: 10px 10px 10px 19px;
+}
+
+.MessageBox p,
+.MessageBox a {
+ color: #442A0B;
+}
+
+.MessageBox a:hover {
+ text-decoration: none;
+}
+
+.MessageBox > p + p {
+ margin-top: 2px;
+}
+
+.MessageBox.Error {
+ background: #b8384e;
+}
+
+.MessageBox.Confirmation {
+ background: #049E35;
+}
+
+.MessageBox.Error p,
+.MessageBox.Error a,
+.MessageBox.Confirmation p,
+.MessageBox.Confirmation a {
+ color: rgba(255, 255, 255, 0.8);
+}
+
+.MessageBox p a:after {
+ content: "\2192";
+ display: inline-block;
+ font-size: 15px;
+ transition: margin ease 0.3s;
+}
+
+.MessageBox p a:hover:after {
+ margin-left: 5px;
+}
+
+.MessageBox.Info {
+ background-color: #2A5464;
+}
+
+.MessageBox.Info p,
+.MessageBox.Info a {
+ color: rgba(255, 255, 255, 0.8);
+}
+
+.MessageBox.Info a,
+.MessageBox.Error a {
+ transition: color ease 0.3s;
+}
+
+.MessageBox.Info a:hover,
+.MessageBox.Error a:hover {
+ color: #fff;
+}
+
+.MessageBox a.Button:after {
+ content: "";
+}
+
+.MessageBox a.Button {
+ display: inline;
+ padding: 3px 7px;
+}
+
+.MessageBox a.Button:hover {
+ text-decoration: none;
+}
+
+.MessageBox.Info a.Button {
+ background-color: #3E6C7C;
+}
+
+.MessageBox.Info a.Button:hover {
+ background-color: #4B7C8E;
+}
+
+.MessageBox.Info a.Button i {
+ color: #89C6D1;
+}
+
+form .MessageBox{
+ margin-left: 0px;
+ margin-right: 0px;
+ margin-top: 0px;
+}
+
+/**
+ * @subsection Flag
+ */
+
+.Flag.Small {
+ width: 17px;
+ height: 8px;
+ margin: 0px auto;
+}
+
+.Flag span {
+ display: block;
+ height: 100%;
+ text-indent: -9999px;
+ cursor: pointer;
+ /* set a default color for priorities */
+ background-color: #cdcdcd;
+}
+
+.Flag span.Escalated {
+ background-color:#ea2400;
+}
+
+.Flag span.New {
+ background-color: #8bef4d;
+}
+
+.Flag span.Warning {
+ background-color: #ffdd50;
+}
+
+.Flag span.PriorityID-1 {
+ background-color:#03c4f0;
+}
+
+.Flag span.PriorityID-2 {
+ background-color:#83bfc8;
+}
+
+.Flag span.PriorityID-3 {
+ background-color:#cdcdcd;
+}
+
+.Flag span.PriorityID-4 {
+ background-color:#ffaaaa;
+}
+
+.Flag span.PriorityID-5 {
+ background-color:#ea2400;
+}
+
+/**
+ * @subsection "Unread" star
+ */
+span.UnreadArticles,
+div.UnreadArticles {
+ display: block;
+ width: 16px;
+ height: 15px;
+ margin-left: 6px;
+ font-weight: normal;
+ position: relative;
+ padding: 0px 3px !important;
+}
+
+span.UnreadArticles i,
+div.UnreadArticles i {
+ display: block;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ z-index: 2;
+ font-size: 14px;
+ color: #bfbfce;
+}
+
+span.UnreadArticles em,
+div.UnreadArticles em {
+ display: none;
+}
+
+span.UnreadArticles i:first-child,
+div.UnreadArticles i:first-child {
+ color: #777 !important;
+ font-size: 16px;
+ z-index: 1;
+ left: -1px;
+ top: -1px;
+}
+
+span.UnreadArticles.Remarkable i,
+div.UnreadArticles.Remarkable i {
+ color: #F2BD0E;
+}
+
+span.UnreadArticles.Ordinary,
+div.UnreadArticles.Ordinary {
+ color: #bfbfce;
+}
+
+tbody tr:hover span.UnreadArticles i {
+ color: #fff;
+}
+
+span.ImportantArticles {
+ display: block;
+ width: 16px;
+ height: 16px;
+ float: right;
+ margin: -2px 0px 0px 23px;
+ color: #C10505;
+ font-size: 13px;
+}
+
+span.ImportantArticles em {
+ display: none;
+}
+
+span.ImportantArticles i {
+ color: #C10505;
+}
+
+/**
+ * @subsection Charts
+ */
+.Chart {
+ width: 240px;
+ height: 200px;
+}
+
+#ChartTooltip {
+ padding: 2px 8px 3px;
+ background: #000;
+ color: #FFF;
+ font-size: 11px;
+ opacity: 0.8;
+ border-radius: 8px;
+ position: absolute;
+}
+
+/**
+ * @subsection Datepicker
+ */
+.DatepickerIcon {
+ margin: 1px 0 0 4px;
+ height: 16px;
+ width: 16px;
+ display: inline-block;
+ vertical-align: top;
+ color: #00023c;
+}
+
+.RTL .DatepickerIcon {
+ margin: 0 4px 0 0;
+}
+
+/* Vacation Days */
+td.Highlight a.ui-state-default {
+ border: 1px solid #fad42e;
+ background: #ffe45c !important;
+ background: -moz-linear-gradient(top, #fff0a5 0%, #ffe45c 100%) !important;
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff0a5), color-stop(100%,#ffe45c)) !important;
+ background: -webkit-linear-gradient(top, #fff0a5 0%,#ffe45c 100%) !important;
+ background: -o-linear-gradient(top, #fff0a5 0%,#ffe45c 100%) !important;
+ background: -ms-linear-gradient(top, #fff0a5 0%,#ffe45c 100%) !important;
+ background: linear-gradient(to bottom, #fff0a5 0%,#ffe45c 100%) !important;
+}
+
+/* Today */
+.ui-datepicker-current-day {
+}
+
+/*Weekend*/
+.ui-datepicker-week-end {
+}
+
+/**
+ * @subsection Autocompletion
+ */
+
+.ui-autocomplete {
+ z-index: 20 !important;
+ max-height: 200px;
+ overflow-x: hidden;
+ overflow-y: scroll;
+}
+
+.ui-autocomplete .ui-menu-item {
+ font-size: 11px;
+}
+
+.ui-overlay-autocomplete {
+ z-index: 6100 !important;
+}
+
+.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
+ border: 0px;
+ margin: 0px;
+}
+
+.ui-menu-item:hover,
+.ui-menu-item:focus,
+.ui-menu-item:active,
+.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
+ background: #eee;
+}
+
+/**
+ * @subsection Icons
+ */
+.IconInline {
+ display: inline-block;
+}
+
+.IconReady {
+ width: 16px;
+ height: 16px;
+ background-image: url(../img/icons/tick.png);
+}
+
+.IconNotReady {
+ width: 16px;
+ height: 16px;
+ background-image: url(../img/icons/cross.png);
+}
+
+.IconNotReadyGrey {
+ width: 16px;
+ height: 16px;
+ background-image: url(../img/icons/cross_sw.png);
+}
+
+/**
+ * @subsection Dialog popup width
+ */
+iframe.TextOption {
+ width: 500px;
+ height: 400px;
+}
+
+iframe.TextOption.Customer {
+ width: 800px;
+}
+
+iframe.TextOption.CustomerUserAddressBook {
+ width: 960px;
+ min-height: 65vh;
+ max-height: 80vh;
+}
+
+/**
+ * @subsection global search
+ */
+#SearchForm,
+#AgentCustomerInformationCenterSearchForm, #AgentCustomerUserInformationCenterSearchForm,
+#AgentTicketCustomerIDSelection {
+ width: 760px;
+ padding-right: 20px;
+}
+
+#SearchForm #SearchProfile,
+#AgentCustomerInformationCenterSearchForm #SearchProfile {
+ max-width: 350px;
+}
+
+#ArticleFilterDialogForm {
+ width: 480px;
+ max-height: 300px;
+}
+
+#ContextSettingsDialog {
+ width: 450px;
+ max-height: 100px;
+}
+
+/**
+ * @subsection global message format
+ */
+.ArticleBody {
+ font-family: monospace,fixed;
+ word-wrap: break-word;
+ background: #FFF;
+ padding: 10px;
+ min-height: 70px;
+}
+
+.ArticleHTML {
+ padding: 2px 5px;
+ font-size: 11px;
+ max-height: 100px;
+ background: #FFF;
+ min-height: 70px;
+}
+
+.ArticleMailContent .ArticleHTML {
+ max-height: none;
+ font-size: 12px;
+ padding: 10px;
+}
+
+/**
+ * @subsection Chat
+ */
+
+.ArticleChat .Name {
+ font-weight: bold;
+ white-space: nowrap;
+}
+
+.ArticleChat .Time {
+ padding-right: 5px;
+ color: #888;
+ white-space: nowrap;
+}
+
+.ArticleChat .SystemGenerated .Name {
+ display: none;
+}
+
+.ArticleChat .SystemGenerated .Text {
+ font-style: italic;
+ color: #888;
+}
+
+.ArticleChat .Own .Name {
+ color: red;
+}
+
+.ArticleChat > div {
+ display: table;
+}
+
+.ArticleChat > div > div {
+ display: table-row;
+}
+
+.ArticleChat > div > div > span {
+ display: table-cell;
+}
+
+#ChatStartDialog {
+ width: 500px;
+ position: relative;
+}
+
+#ChatStartDialog form {
+ display: block;
+ padding: 10px;
+}
+
+#ChatStartDialog form textarea {
+ width: 380px;
+ height: 30px;
+ font-family: arial, sans-serif;
+ padding: 3px;
+}
+
+#ChatStartDialog form .Primary {
+ position: absolute;
+ right: 20px;
+ top: 11px;
+}
+
+#ChatStartDialog form .Primary span {
+ line-height: 26px;
+ height: 26px;
+}
+
+#ChatStartDialog form .Primary:focus {
+ border-color: #00023c;
+}
+
+.ChatProtocol {
+ border: 1px solid #ccc;
+ padding: 2px;
+ overflow-y: auto;
+ max-height: 150px;
+ width: 617px;
+}
+
+/**
+ * @subsection global jQuery UI optimizations
+ */
+/*
+* Bug #8288: Autocomplete search results show up in Times font when using Internet Explorer
+*/
+.ui-menu-item {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+}
+
+.ui-menu .ui-menu-item a {
+ display: block;
+ padding: 2px;
+ border: 0px;
+}
+
+.ui-corner-all {
+ border-radius: 0px !important;
+}
+
+.ui-widget-header {
+ background: #eee !important;
+ border: 0px !important;
+ font-weight: normal !important;
+}
+
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default {
+ background: #f2f2f2 !important;
+}
+
+.ui-state-hover,
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus {
+ background: #ddd !important;
+}
+
+/**
+ * @subsection global CKEditor fixes/improvements
+ */
+
+.cke_combo__fontsize .cke_combo_text {
+ width: 40px !important;
+}
+
+#cke_RichText,
+.cke_toolbar > .cke_toolgroup,
+.cke_toolbar .cke_combo_button,
+.cke_inner .cke_contents,
+.cke_dialog_body,
+input.cke_dialog_ui_input_password,
+input.cke_dialog_ui_input_text,
+textarea.cke_dialog_ui_input_textarea {
+ border-radius: 0px !important;
+}
+
+.cke_toolgroup .cke_button_on {
+ background-color: #ccc;
+}
+
+input.cke_dialog_ui_input_password:focus,
+input.cke_dialog_ui_input_text:focus,
+textarea.cke_dialog_ui_input_textarea:focus {
+ box-shadow: none !important;
+ border-color: #f92 !important;
+}
+
+/**
+ * @subsection global nvd3 improvements/fixes
+ */
+
+.nvtooltip {
+ font-size: 11px !important;
+ border: 0px !important;
+}
+
+/*
+ * @subsection Popup-Iframe (for responsive)
+ */
+iframe.PopupIframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ z-index: 9999;
+}
+
+/**
+ * @subsection Floaters
+ */
+
+body > div.MetaFloater {
+ width: 600px;
+ height: 400px;
+ background: #fff;
+ box-shadow: 2px 1px 3px #aaa;
+ position: absolute;
+ box-sizing: border-box;
+ z-index: 999;
+ margin-top: -5px;
+ border: 1px solid #eee;
+ border-top: 30px solid #eee;
+}
+
+body > div.MetaFloater:after,
+body > div.MetaFloater:before {
+ bottom: 399px;
+ left: 50%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+}
+
+body > div.MetaFloater.Left:after,
+body > div.MetaFloater.Left:before {
+ left: 15px;
+ margin-top: -1px;
+}
+
+body > div.MetaFloater.Right:after,
+body > div.MetaFloater.Right:before {
+ left: auto;
+ right: 15px;
+}
+
+body > div.MetaFloater.Bottom:after,
+body > div.MetaFloater.Bottom:before {
+ bottom: auto;
+ top: 100%;
+}
+
+body > div.MetaFloater:after {
+ border-bottom-color: #eee;
+ border-width: 15px;
+ margin-left: -15px;
+}
+
+body > div.MetaFloater.Bottom:after {
+ border-color: rgba(255, 255, 255, 0);
+ border-top-color: #fff;
+}
+
+body > div.MetaFloater:before {
+ border-color: rgba(170, 170, 170, 0);
+ border-bottom-color: #aaa;
+ border-width: 16px;
+ margin-left: -16px;
+}
+
+body > div.MetaFloater.Bottom:before {
+ border-color: rgba(170, 170, 170, 0);
+ border-top-color: #aaa;
+}
+
+body > div.MetaFloater > i.fa-spin {
+ position: absolute;
+ left: 50%;
+ font-size: 20px;
+ top: 50%;
+ margin-left: -10px;
+ margin-top: -10px;
+}
+
+body > div.MetaFloater > div.Content > iframe {
+ height: 200%;
+ left: -50%;
+ position: absolute;
+ top: -50%;
+ transform: scale(0.5);
+ width: 200%;
+}
+
+body > div.MetaFloater > div.Content > iframe.NoScale {
+ height: 100%;
+ left: 0px;
+ top: 0px;
+ transform: scale(1.0);
+ width: 100%;
+}
+
+body > div.MetaFloater > a {
+ font-size: 15px;
+ padding: 8px 10px;
+ display: block;
+ position: absolute;
+ top: -30px;
+ text-align: right;
+ box-sizing: border-box;
+ height: 30px;
+ color: #555;
+}
+
+body > div.MetaFloater > div.Content {
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ overflow: hidden;
+}
+
+body > div.MetaFloater > div.NoPreview {
+ display: none;
+ text-align: center;
+ width: 50%;
+ margin: 23% auto;
+ line-height: 150%;
+ color: #777;
+}
+
+body > div.MetaFloater > div.NoPreview i {
+ display: block;
+ font-size: 20px;
+ margin-bottom: 10px;
+ color: #777;
+}
+
+body > div.MetaFloater > a.Scale {
+ left: 0px;
+}
+
+body > div.MetaFloater > a.Open {
+ left: 25px;
+}
+
+body > div.MetaFloater > a.Close {
+ right: 0px;
+}
+
+/**
+ * @subsection CKEditor Notifications
+ */
+
+/*
+Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
+For licensing, see LICENSE.md or http://ckeditor.com/license
+*/
+
+/**
+ * Progress notification structure:
+ *
+ * +---div.cke_notification cke_notification_info--------------------------+
+ * | |
+ * | +---div.cke_notification_progress-----------------------------------+ |
+ * | | | |
+ * | +-------------------------------------------------------------------+ |
+ * | |
+ * | +---p.cke_notification_message--------------------------------------+ |
+ * | | Foo | |
+ * | +-------------------------------------------------------------------+ |
+ * | |
+ * | +---a.cke_notification_close----------------------------------------+ |
+ * | | +---span.cke_label----------------------------------------------+ | |
+ * | | | X | | |
+ * | | +---------------------------------------------------------------+ | |
+ * | +-------------------------------------------------------------------+ |
+ * | |
+ * +-----------------------------------------------------------------------+
+ *
+ *
+ * Warning notification structure:
+ *
+ * +---div.cke_notification cke_notification_warning-----------------------+
+ * | |
+ * | +---p.cke_notification_message--------------------------------------+ |
+ * | | Foo | |
+ * | +-------------------------------------------------------------------+ |
+ * | |
+ * | +---a.cke_notification_close----------------------------------------+ |
+ * | | +---span.cke_label----------------------------------------------+ | |
+ * | | | X | | |
+ * | | +---------------------------------------------------------------+ | |
+ * | +-------------------------------------------------------------------+ |
+ * | |
+ * +-----------------------------------------------------------------------+
+ *
+ * Success and info notifications have the same structure as warning, but use
+ * `cke_notification_success` and `cke_notification_info` instead of `cke_notification_warning`.
+ */
+
+.cke_notifications_area {
+ /* Prevent notification margin capture clicking. */
+ pointer-events: none;
+}
+.cke_notification {
+ pointer-events: auto;
+ position: relative;
+ margin: 10px;
+ width: 300px;
+ color: white;
+ border-radius: 3px;
+ text-align: center;
+ opacity: 0.95;
+ filter: alpha(opacity = 95);
+ box-shadow: 2px 2px 3px 0px rgba(50, 50, 50, 0.3);
+ -webkit-animation: fadeIn 0.7s;
+ animation: fadeIn 0.7s;
+}
+
+.cke_notification_message a {
+ color: #12306F;
+}
+
+@-webkit-keyframes fadeIn {
+ from { opacity: 0.4; }
+ to { opacity: 0.95; }
+}
+
+@keyframes fadeIn {
+ from { opacity: 0.4; }
+ to { opacity: 0.95; }
+}
+
+.cke_notification_success {
+ background: #72B572;
+ border: 1px solid #63A563;
+}
+
+.cke_notification_warning {
+ background: #C83939;
+ border: 1px solid #902B2B;
+}
+
+.cke_notification_info {
+ background: #2E9AD0;
+ border: 1px solid #0F74A8;
+}
+
+.cke_notification_info span.cke_notification_progress {
+ background-color: #0F74A8;
+ display: block;
+ padding: 0;
+ margin: 0;
+ height: 100%;
+ overflow: hidden;
+ position: absolute;
+ z-index: 1;
+}
+
+.cke_notification_message {
+ position: relative;
+ margin: 4px 23px 3px;
+ color: #fff;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 12px;
+ line-height: 18px;
+ z-index: 4;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+.cke_notification_close {
+ position: absolute;
+ cursor: pointer;
+ text-align: center;
+ top: 5px;
+ right: 1px;
+ padding: 0;
+ margin: 0;
+ z-index: 5;
+ opacity: 0.6;
+ filter: alpha(opacity = 60);
+}
+
+.cke_notification_close:after {
+ display: block;
+ height: 20px;
+ width: 20px;
+ content: "x";
+ color: #fff;
+}
+
+.cke_notification_close:hover {
+ opacity: 1;
+ filter: alpha(opacity = 100);
+}
+
+.cke_notification_close span {
+ display: none;
+}
+
+.cke_notification_warning a.cke_notification_close {
+ opacity: 0.8;
+ filter: alpha(opacity = 80);
+}
+
+.cke_notification_warning a.cke_notification_close:hover {
+ opacity: 1;
+ filter: alpha(opacity = 100);
+}
+
+/**
+ * @subsection AJAX Loader
+ */
+
+.AJAXLoader {
+ display: inline-block;
+ width: 14px;
+ height: 14px;
+ margin: 4px;
+ position: relative;
+ vertical-align: bottom;
+}
+
+.AJAXLoader:after,
+#Canvas .Activity .Loader:after,
+.Loading > .Header h2:after,
+.OverviewControl.Loading .ControlRow:after {
+ -webkit-animation: fa-spin 2s infinite linear;
+ animation: fa-spin 2s infinite linear;
+ position: absolute;
+ left: 0px;
+ top: 0px;
+ width: 100%;
+ height: 100%;
+ line-height: 14px;
+ content: "\f1ce";
+ font-family: FontAwesome;
+ font-size: 14px;
+ color: #777;
+}
+
+}
+
+/*
+ * @subsection Media Query Reset-CSS (for desktop screen resolutions)
+ */
+@media only screen and (min-width: 1025px) {
+
+ /*
+ * @subsection Responsive classes
+ */
+ .ScreenXL {
+ display: block !important;
+ }
+
+ .SmallerOrEqualScreenXL {
+ display: block !important;
+ }
+
+ .ScreenL, .ScreenM, .ScreenS, .ScreenXS,
+ .SmallerOrEqualScreenL, .SmallerOrEqualScreenM,
+ .SmallerOrEqualScreenS, .SmallerOrEqualScreenXS {
+ display: none !important;
+ }
+
+ /*
+ * @subsection Responsive footer classes
+ * @description Used to determinethe active screen size in JavaScript
+ */
+ #ResponsiveFooter .Visible-ScreenXL {
+ display: block !important;
+ }
+
+ #ResponsiveFooter .Visible-ScreenL,
+ #ResponsiveFooter .Visible-ScreenM,
+ #ResponsiveFooter .Visible-ScreenS,
+ #ResponsiveFooter .Visible-ScreenXS {
+ display: none !important;
+ }
+
+ .ResponsiveHandle {
+ display: none !important;
+ }
+
+ .ErrorBox, .SuccessBox {
+ margin: 0px 0px 20px 0px;
+ line-height: 150%;
+ }
+
+ /* Filters */
+
+ .TableFilterContainer {
+ position: relative;
+ }
+
+ .TableFilterContainer .FilterRemove {
+ position: absolute;
+ right: 6px;
+ top: 50%;
+ font-size: 12px;
+ margin-top: -6px;
+ display: none;
+ color: #aaa;
+ transition: color ease 0.3s;
+ }
+
+ .TableFilterContainer .FilterRemove:focus,
+ .TableFilterContainer .FilterRemove:hover,
+ .TableFilterContainer .FilterRemove:active {
+ color: #000;
+ }
+
+ .TableFilterContainer input,
+ .TableFilterContainer input.FilterBox {
+ padding: 7px !important;
+ box-sizing: border-box;
+ width: 100%;
+ }
+}
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Dialog.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Dialog.css
new file mode 100644
index 0000000000..db6e31a77d
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Dialog.css
@@ -0,0 +1,298 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section Dialogs
+ */
+
+@media screen,projection,tv,handheld {
+
+/**
+ * @subsection Overlay
+ */
+#Overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #000;
+ opacity: 0.5;
+ filter: alpha(opacity = 50);
+ z-index: 3500;
+}
+
+/**
+ * @subsection Dialog
+ */
+.Dialog {
+ position: absolute;
+ z-index: 6000;
+ min-width: 150px;
+ background: #1f1f1f;
+ border-radius: 10px;
+ border: 10px solid #1f1f1f;
+}
+
+.Dialog.Modal.Alert {
+ z-index: 6500;
+}
+
+.Dialog.Fullsize {
+ width: 100%;
+ height: 100%;
+ left: 0px !important;
+}
+
+.Dialog > .Header {
+ cursor: move;
+ display: block;
+ position: relative;
+ height: 25px;
+}
+
+.Dialog > .Header .Close {
+ display: block;
+ position: absolute;
+ height: 12px;
+ width: 12px;
+ right: 8px;
+ top: 7px;
+ color: #c8c6c4;
+}
+
+.RTL .Dialog > .Header .Close {
+ right: auto;
+ left: 8px;
+}
+
+.Dialog > .Header .Close:hover i {
+ color: #E57633;
+}
+
+.Dialog > .Header h1 {
+ padding: 5px 10px;
+ font-weight: normal;
+ font-size: 14px;
+ padding-top: 5px;
+}
+
+.Dialog > .Content {
+ position: relative;
+ overflow-x: hidden;
+}
+
+.Dialog > .Content > .InnerContent {
+ padding: 10px 25px 10px 10px;
+ background: #1f1f1f;
+ overflow-y: auto;
+ overflow-x: auto;
+ max-height: 200px;
+ position: relative;
+}
+
+#AgentSplitSelection {
+ min-width: 330px;
+}
+
+#TimeLineOverflow {
+ overflow-y: hidden;
+ max-height: 1173px;
+ padding: 10px;
+}
+
+.RTL .Dialog > .Content > .InnerContent {
+ padding: 10px 10px 10px 25px;
+}
+
+.Dialog > .Content > .ContentFooter {
+ padding: 6px 0 5px;
+ min-height: 20px;
+}
+
+.Dialog > .Footer {
+ padding: 6px 0 5px;
+ display: block;
+ position: relative;
+}
+
+.Dialog > .Footer.ContentFooter {
+ display: none;
+}
+
+/**
+ * subsection Alert
+ */
+
+.Dialog.Alert .InnerContent .fa {
+ display: block;
+ font-size: 25px;
+ text-align: center;
+ color: #ff505e;
+ margin-bottom: 10px;
+}
+
+.Dialog.Alert h2,
+.Dialog.Alert p {
+ text-align: center;
+}
+
+.Dialog.Alert {
+ width: 450px;
+ top: 100px;
+ left: 300px;
+}
+
+/**
+ * subsection Settings
+ */
+
+.Dialog fieldset {
+ margin-bottom: 15px;
+}
+
+.Dialog .WidgetSettingsForm fieldset,
+.Dialog fieldset.NoMargin {
+ margin-bottom: 0px;
+}
+
+.Dialog .Field.LayoutGrid {
+ padding-top: 7px;
+}
+
+.Dialog .Field.LayoutGrid .Tablelike {
+ width: 98%;
+}
+
+.Dialog .Field .FocusField {
+ position: absolute;
+ left: -9999px;
+ z-index: -1;
+}
+
+.Dialog .Buttons {
+ background: #ddd;
+ border-top: 1px solid #ccc;
+ margin: 15px -8px -8px;
+ padding: 10px 10px 9px 10px;
+ text-align: center;
+}
+
+.Dialog .Field.LayoutGrid .AllocationList {
+ max-height: 192px;
+ overflow: auto;
+}
+
+.Field.LayoutGrid .AllocationList.AvailableFields {
+ max-height: 155px;
+}
+
+.Dialog .Field.LayoutGrid .AllocationList.OrderNumbers {
+ list-style: decimal inside;
+}
+
+.FilterInputContainer {
+ width: 98%;
+ border-left: 1px solid #333;
+ border-right: 1px solid #333;
+ background-color: #333;
+}
+
+.FilterInputContainer input {
+ width: 95%;
+ display: block;
+ margin: 7px auto;
+}
+
+#ContextSettingsDialogOverviewSmall {
+ width: 950px;
+ max-height: 600px;
+}
+
+/* Pure continuous text dialogs */
+
+.TextDialog {
+ padding: 10px;
+ line-height: 150%;
+ width: 550px;
+ font-size: 13px;
+ max-height: 450px;
+ overflow: auto;
+}
+
+.TextDialog p,
+.TextDialog li,
+.TextDialog a {
+ font-size: 12px;
+}
+
+.TextDialog ul {
+ list-style-type: square;
+ margin: 0px 0px 7px 20px;
+}
+
+.TextDialog ul li {
+ margin-bottom: 5px;
+ line-height: 130%;
+}
+
+.TextDialog h1 {
+ margin-bottom: 4px;
+ margin-top: 7px;
+ font-size: 14px;
+}
+
+.TextDialog > p {
+ margin-bottom: 12px;
+ margin-left: 8px;
+}
+
+/* Elasticsearch QuickResults */
+
+#ElasticsearchQuickResult td {
+ max-width: 400px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+#ElasticsearchQuickResult h3 {
+ padding: 8px 0px 4px 20px;
+ margin: 0px;
+}
+
+/* Error screens in overlays */
+
+.Dialog.Modal #AppWrapper > #Header,
+.Dialog.Modal .ErrorScreen ~ #Footer {
+ display: none;
+}
+
+.Dialog.Modal .ErrorScreen {
+ margin-top: 0px !important;
+}
+
+.Dialog.Modal .ErrorScreen .CenterBox {
+ width: auto !important;
+}
+
+.Dialog.Modal .ErrorScreen .WidgetSimple .Content {
+ max-height: 200px;
+ overflow: auto;
+}
+
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Footer.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Footer.css
new file mode 100644
index 0000000000..c76f68576c
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Footer.css
@@ -0,0 +1,71 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section Footer
+ */
+
+@media screen,projection,tv,handheld {
+
+#Footer {
+ margin-top: 1px;
+ min-height: 15px;
+ padding: 12px 9px 8px;
+ font-size: 10px;
+ clear: both;
+ text-align: center;
+ position: relative;
+}
+
+#Footer a,
+#Footer ul li a {
+ color: #bbb;
+}
+
+#Footer a:hover,
+#Footer ul li a:hover {
+ text-decoration: underline;
+}
+
+#Footer ul {
+ position: absolute;
+ top: 12px;
+ left: 212px;
+ right: auto;
+}
+
+.RTL #Footer ul {
+ left: auto;
+ right: 212px;
+}
+
+#Footer ul li {
+ float: left;
+ padding: 0 4px 0 4px;
+ border-left: 1px solid #9E9E9E;
+}
+
+.RTL #Footer ul li {
+ float: right;
+ border-left: none;
+ border-right: 1px solid #9E9E9E;
+}
+
+#Footer ul li:first-child {
+ border: none;
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Form.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Form.css
new file mode 100644
index 0000000000..f57fb18b46
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Form.css
@@ -0,0 +1,883 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section Forms
+ */
+
+@media screen,projection,tv,handheld {
+
+/* Dark mode for select fields */
+select {
+ background: #141414;
+ color: #c8c6c4;
+ border: 1px solid #555;
+}
+
+/**
+ * @subsection Input focus
+ * @note Does not work in IE6, only partially in IE7 (no focus)
+ */
+
+input[type=text],
+input[type=password],
+input[type=email],
+textarea,
+select[multiple=multiple] {
+ border: 1px solid #333;
+ border-top-color: #444;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ /* Opera 10.5 has per default a grey background */
+ background-color: #141414;
+ -webkit-box-shadow: inset 1px 1px 3px #222, inset -1px -1px 3px #222;
+ box-shadow: inset 1px 1px 3px #222, inset -1px -1px 3px #222;
+}
+
+select[multiple=multiple] {
+ min-width: 300px;
+ padding: 3px;
+ box-shadow: inset 1px 1px 3px #222, inset -1px -1px 3px #222;
+}
+
+.DataTable select[multiple=multiple] {
+ min-width: 0px;
+}
+
+select[multiple=multiple] option {
+ padding: 2px;
+}
+
+select[multiple=multiple] option:nth-child(odd) {
+ background-color: #141414;
+}
+
+input#Subject {
+ font-size: 13px;
+ padding: 5px;
+ font-weight: bold;
+}
+
+input[type=text],
+input[type=password],
+input[type=email],
+textarea {
+ padding: 3px;
+ font-size: 12px;
+ color: #c8c6c4;
+}
+
+input[type=text]:focus,
+input[type=password]:focus,
+input[type=email]:focus,
+textarea:focus {
+ border-color: #777;
+ outline: 0;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+ color: #aaa;
+ transition: color ease 0.3s;
+}
+
+:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+ color: #aaa;
+ transition: color ease 0.3s;
+ opacity: 1;
+}
+
+::-moz-placeholder { /* Mozilla Firefox 19+ */
+ color: #aaa;
+ transition: color ease 0.3s;
+ opacity: 1;
+}
+
+:-ms-input-placeholder { /* Internet Explorer 10-11 */
+ color: #aaa;
+ transition: color ease 0.3s;
+}
+
+::-ms-input-placeholder { /* Microsoft Edge */
+ color: #aaa;
+ transition: color ease 0.3s;
+}
+
+:focus::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+ color: #555;
+}
+
+:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+ color: #555;
+ opacity: 1;
+}
+
+:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
+ color: #555;
+ opacity: 1;
+}
+
+:focus:-ms-input-placeholder { /* Internet Explorer 10-11 */
+ color: #555;
+}
+
+:focus::-ms-input-placeholder { /* Microsoft Edge */
+ color: #555;
+}
+
+/**
+ * @subsection Textarea
+ * @note Fixed font needed in textareas because otherwise the line wrapping is incorrect.
+ */
+textarea {
+ font-family: monospace,fixed;
+}
+
+
+/**
+ * @subsection Input Readonly
+ */
+input[type=text][readonly],
+input[type=password][readonly],
+input[type=email][readonly],
+textarea[readonly] {
+ background-color: #333;
+}
+
+/**
+ * @subsection Buttons
+ */
+button.Primary {
+ font-weight: bold;
+}
+
+a.CertificateRelationAdd,
+button.CertificateRelationAdd,
+a.CertificateRead,
+button.Add,
+a.Add,
+button.Remove,
+a.Remove,
+button.TrashCan,
+a.TrashCan,
+a.Pencil,
+button.Reset,
+a.Reset {
+ height: 16px;
+ width: 16px;
+ padding: 1px;
+ margin-top: 0;
+ margin-bottom: 1px;
+ border-style: none;
+ text-indent: -9999px;
+ display: inline-block;
+ vertical-align: middle;
+ cursor: pointer;
+ position: relative;
+ z-index: 999;
+}
+
+button.Add,
+a.Add {
+ background: url(../img/filter_add.png) no-repeat center;
+}
+
+button.Add:hover,
+button.Add:focus,
+a.Add:hover,
+a.Add:focus {
+ background: url(../img/filter_add_hover.png) no-repeat center;
+}
+
+button.CertificateRelationAdd,
+a.CertificateRelationAdd {
+ background: url(../img/icons/certificate-plus.png) no-repeat center;
+}
+
+a.CertificateRead {
+ background: url(../img/icons/certificate.png) no-repeat center;
+}
+
+button.Remove,
+a.Remove {
+ background: url(../img/filter_remove.png) no-repeat center;
+}
+
+button.Remove:hover,
+button.Remove:focus,
+a.Remove:hover,
+a.Remove:focus {
+ background: url(../img/filter_remove_hover.png) no-repeat center;
+}
+
+a.TrashCan i.fa-trash-o,
+a.Pencil i.fa-edit {
+ text-indent: 0px;
+ position: absolute;
+ left: 0px;
+ top: 4px;
+ z-index: 998;
+}
+
+button.Reset,
+a.Reset{
+ height: 22px;
+ width: 22px;
+ padding: 3px;
+}
+
+.AddButton,
+.RemoveButton {
+ color: #c8c6c4;
+ font-size: 14px;
+ vertical-align: middle;
+}
+
+/**
+ * @note Push-lookalike for active state
+ */
+button.Add:active,
+a.Add:active,
+button.Remove:active,
+a.Remove:active,
+button.TrashCan:active,
+a.TrashCan:active,
+button.Reset:active {
+ margin-top: 1px;
+ margin-bottom: 0;
+}
+
+
+.GetAllAJAX {
+ width: 16px;
+ height: 16px;
+ margin-left: 3px;
+ display: inline-block;
+ color: #c8c6c4;
+}
+
+.GetAllAJAX span {
+ position: absolute;
+ left: -9999px;
+ top: -9999px;
+}
+
+.RTL .GetAllAJAX {
+ margin: 0 3px 0 0;
+}
+
+.AdditionlFieldIcon {
+ width: 16px;
+ height: 16px;
+ margin-left: 3px;
+ display: inline-block;
+ color: #c8c6c4;
+}
+
+.AdditionlFieldIcon span {
+ position: absolute;
+ left: -9999px;
+ top: -9999px;
+}
+
+.RTL .AdditionlFieldIcon {
+ margin: 0 3px 0 0;
+}
+
+/**
+ * @subsection GenericAgent ClearSelect
+ */
+
+.GenericAgentClearSelect {
+ width: 16px;
+ height: 16px;
+ margin-left: 3px;
+ color: #c8c6c4;
+}
+
+.GenericAgentClearSelect span {
+ position: absolute;
+ left: -9999px;
+ top: -9999px;
+}
+
+/**
+ * @subsection Tree selection icon and overlay for select boxes
+ */
+
+.ShowTreeSelection {
+ width: 16px;
+ height: 16px;
+ margin-left: 3px;
+ display: none;
+ color: #c8c6c4;
+}
+
+.ShowTreeSelection span {
+ position: absolute;
+ left: -9999px;
+ top: -9999px;
+}
+
+.ShowTreeSelection:focus {
+ color: #fef235;
+}
+
+.Field .ShowTreeSelection, .WidgetSettingsForm .ShowTreeSelection {
+ display: inline-block;
+}
+
+.WidgetSettingsForm .ShowTreeSelection {
+ position: relative;
+ top: -4px;
+}
+
+#TreeContainer #TreeSearch {
+ position: relative;
+}
+
+#TreeContainer #TreeSearch span {
+ color: #AAAAAA;
+ cursor: pointer;
+ font-size: 12px;
+ font-weight: bold;
+ height: 12px;
+ position: absolute;
+ right: 9px;
+ top: 4px;
+ width: 16px;
+}
+
+.DialogTreeSearch span {
+ color: #AAAAAA;
+ cursor: pointer;
+ font-weight: bold;
+ position: relative;
+ right: 10px;
+}
+
+#TreeContainer #TreeSearch input {
+ display: block;
+ margin: 10px 12px 0px 12px;
+ width: 92%;
+}
+
+.JSTreeField {
+ background-color: #FFFFFF;
+ border: 1px solid #ccc;
+ height: 72%;
+ margin: 10px 12px;
+ -moz-box-shadow: inset 0px 0px 6px #ccc;
+ -webkit-box-shadow: inset 0px 0px 6px #ccc;
+ box-shadow: inset 0px 0px 6px #ccc;
+ overflow: auto;
+ padding: 0px 10px 10px 10px;
+}
+
+.JSTreeField.InOverlay {
+ margin: 5px 5px 5px 0px;
+ width: 85%;
+ float: left;
+}
+
+.JSTreeField .Disabled > a {
+ color: #aaa;
+ font-style: italic;
+}
+
+.JSTreeField .jstree-search {
+ color: #E07006;
+}
+
+.JSTreeField .jstree-search.jstree-clicked {
+ color: #c8c6c4;
+}
+
+.JSTreeField .jstree-clicked {
+ background: #f3960d;
+ background: -moz-linear-gradient(top, #ffe7bd 0%, #fbba49 20%, #f6ad3e 51%, #f3960d 51%, #e98207 95%, #e07006 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffe7bd), color-stop(20%,#fbba49), color-stop(51%,#f6ad3e), color-stop(51%,#f3960d), color-stop(95%,#e98207), color-stop(100%,#e07006));
+ background: -webkit-linear-gradient(top, #ffe7bd 0%,#fbba49 20%,#f6ad3e 51%,#f3960d 51%,#e98207 95%,#e07006 100%);
+ background: -o-linear-gradient(top, #ffe7bd 0%,#fbba49 20%,#f6ad3e 51%,#f3960d 51%,#e98207 95%,#e07006 100%);
+ background: -ms-linear-gradient(top, #ffe7bd 0%,#fbba49 20%,#f6ad3e 51%,#f3960d 51%,#e98207 95%,#e07006 100%);
+ background: linear-gradient(to bottom, #ffe7bd 0%,#fbba49 20%,#f6ad3e 51%,#f3960d 51%,#e98207 95%,#e07006 100%);
+ border-color: #f3960d;
+ padding: 0px 3px;
+}
+
+.JSTreeField .jstree-hovered {
+ background-color: #eee;
+ border-color: #ddd;
+}
+
+.JSTreeField a:focus {
+ background-color: #eee;
+ border-color: #ddd;
+}
+
+#SubmitTree {
+ display: block;
+ width: 120px;
+ margin: 0px auto;
+}
+
+.RTL .ShowTreeSelection {
+ margin: 0 3px 0 0;
+}
+
+.OverlayTreeSelector {
+ width: 400px;
+ height: 300px;
+}
+
+/**
+ * @subsection Form
+ */
+
+form fieldset {
+ display: block;
+ border: none;
+}
+
+.TableLikeOverflow {
+ overflow: auto;
+ line-height: initial;
+}
+
+fieldset > legend {
+ display: block;
+ width: 100%;
+}
+
+.WidgetSettingsForm fieldset legend {
+ padding-top: 10px;
+}
+
+fieldset > legend > span {
+ border-bottom: 1px solid #333;
+ display: block;
+ font-weight: bold;
+ padding: 5px 0px 5px 30%;
+ text-indent: 8px;
+ margin-bottom: 5px;
+}
+
+form fieldset > p.NoValue {
+ padding: 5px 0px 5px 30%;
+ text-indent: 8px;
+}
+
+.FieldExplanation {
+ color: #888;
+ margin: 5px 0;
+}
+
+.SidebarColumn .FieldExplanation.Error {
+ border: 1px solid #F03432;
+ color: #F03432;
+ line-height: 150%;
+ margin: 7px 0px;
+ padding: 7px 10px;
+}
+
+form label.Mandatory {
+ color: #c8c6c4 !important;
+}
+
+form label.Mandatory span.Marker {
+ font-size: 18px;
+ font-weight: bold;
+ position: relative;
+ top: 0.35em;
+ line-height: 1px;
+ right: 2px;
+ left: auto;
+}
+
+.RTL form label.Mandatory span.Marker {
+ left: 2px;
+ right: auto;
+}
+
+form label.LabelError {
+ color: #ff505e !important;
+}
+
+.CustomerContainer,
+.CcCustomerContainer,
+.BccCustomerContainer {
+ background-color: #141414;
+ border: 1px solid #272727;
+ -moz-box-shadow: inset 1px 1px 5px #000;
+ -webkit-box-shadow: inset 1px 1px 5px #000;
+ box-shadow: inset 1px 1px 5px #000;
+ padding: 5px 7px 10px 6px;
+ width: 74%;
+ position: relative;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ border-radius: 2px;
+}
+
+.CustomerContainer > div,
+.CcCustomerContainer > div,
+.BccCustomerContainer > div {
+ margin-top: 5px;
+}
+
+.CustomerContainer .CustomerTicketText,
+.CcCustomerContainer .CustomerTicketText,
+.BccCustomerContainer .CustomerTicketText {
+ width: 89%;
+ margin-left: 7px;
+}
+
+.CustomerContainer .CustomerTicketText {
+ transition: background-color 1s ease, border 1s ease;
+}
+
+.CustomerContainer .CustomerTicketText.MainCustomer {
+ background-color: #fffccc;
+ border: 1px solid #e5e5eb;
+}
+
+.CustomerContainer .CustomerTicketText.Radio {
+ width: 84%;
+ margin-left: 0px;
+}
+
+.CustomerContainer .BoxLabel,
+.CcCustomerContainer .BoxLabel,
+.BccCustomerContainer .BoxLabel {
+ background-color: #1f1f1f;
+ font-size: 11px;
+ right: 100%;
+ top: 10px;
+ padding: 0 5px;
+ position: absolute;
+ text-align: center;
+ text-shadow: 1px 1px 1px #000;
+ min-width: 20px;
+ color: #c8c6c4;
+}
+
+#EmailRecipientsList span,
+#EmailRecipientsList a.Collapse {
+ display: none;
+}
+
+#EmailRecipientsList.Expanded span,
+#EmailRecipientsList.Expanded a.Expand {
+ display: inline;
+}
+
+/**
+ * @note Give the user a hint about linked label elements (they are clickable and
+ * give focus to the linked element.
+ */
+
+form label[for] {
+ cursor: pointer;
+}
+
+form input.Error,
+form textarea.Error,
+form input.Error:focus,
+form textarea.Error:focus {
+ border-color: #ea2400;
+}
+
+/*
+ * This will be displayed by Core.UI.Tooltips
+ */
+div.TooltipErrorMessage {
+ display: none;
+}
+
+/**
+ * @subsection TableLike
+ * @description Provides a table-like, aligned label-value structure
+ */
+
+fieldset.TableLike > label,
+fieldset.TableLike > .Row > label {
+ display: block;
+ float: left;
+ line-height: 1.9em;
+ width: 30%;
+ text-align: right;
+ color: #929292;
+ min-height: 17px;
+ padding-top: 0.3em;
+ padding-bottom: 1px;
+ text-shadow: 0 1px 0 #000;
+}
+
+
+.RTL fieldset.TableLike > label,
+.RTL fieldset.TableLike > .Row > label {
+ float: right;
+ text-align: left;
+}
+
+.oooTitle > p ,
+.oooTitle > p {
+ line-height: 1.9em;
+ padding-top: 3px;
+ padding-bottom: 3px;
+ min-height: 20px;
+ text-shadow: 0 1px 0 #000;
+}
+
+fieldset.TableLike > .Field,
+fieldset.TableLike > .Row > .Field {
+ line-height: 1.9em;
+ margin-left: 30%;
+ margin-right: 0;
+ padding-top: 3px;
+ padding-bottom: 3px;
+ padding-left: 10px;
+ padding-right: 0px;
+ min-height: 20px;
+}
+
+.RTL fieldset.TableLike > .Field,
+.RTL fieldset.TableLike > .Row > .Field {
+ margin-left: 0;
+ margin-right: 30%;
+ padding-left: 0;
+ padding-right: 10px;
+}
+
+fieldset.TableLike select {
+ margin-top: 3px;
+}
+
+/**
+ * @note Also make labels grey which occur inside of a field,
+ * for example for complex input elements.
+ */
+fieldset.TableLike > .Field label,
+fieldset.TableLike > .Row > .Field label {
+ color: #929292;
+}
+
+fieldset.TableLike > .Field > select,
+fieldset.TableLike > .Row > .Field > select,
+fieldset.TableLike > .Field > input,
+fieldset.TableLike > .Row > .Field > input {
+ max-width: 100%;
+ border-radius: 4px;
+}
+
+/*fieldset.TableLike > .Field > select#ConfigFile,
+fieldset.TableLike > .Row > .Field > select#ConfigFile,
+fieldset.TableLike > .Field > input#ConfigFile,
+fieldset.TableLike > .Row > .Field > input#ConfigFile,
+fieldset.TableLike > .Field > select#WebserviceName,
+fieldset.TableLike > .Row > .Field > select#WebserviceName,
+fieldset.TableLike > .Field > input#WebserviceName,
+fieldset.TableLike > .Row > .Field > input#WebserviceName {
+ max-width: 250px;
+ border: none;
+}*/
+
+/**
+ * @note The RichText field needs to float, otherwise it breaks
+ * in small screens.
+ * Additionally we have a generic FloatingField class,
+ * RichTextField is for backwards compatibility.
+ */
+fieldset.TableLike > .Row > .RichTextField,
+fieldset.TableLike > .FloatingField,
+fieldset.TableLike > .Row > .FloatingField {
+ padding-bottom: 10px;
+ padding-left: 10px;
+ padding-right: 0;
+ float: left;
+}
+
+fieldset.TableLike > .RichTextField {
+ padding-bottom: 10px;
+ padding-left: 10px;
+ padding-right: 10px;
+ margin-left: 30%;
+ margin-right: 0;
+}
+
+body.Popup fieldset.TableLike > .Row > .RichTextField,
+body.Popup fieldset.TableLike > .FloatingField,
+body.Popup fieldset.TableLike > .Row > .FloatingField {
+ margin: 7px 7px 0px 7px;
+}
+
+body.Popup fieldset.TableLike > .RichTextField {
+ padding-top: 7px;
+ padding-left: 17px;
+ padding-right: 0px;
+ margin-left: 170px;
+ margin-right: 0;
+}
+
+.RTL fieldset.TableLike > .Row > .RichTextField,
+.RTL fieldset.TableLike > .FloatingField,
+.RTL fieldset.TableLike > .Row > .FloatingField {
+ padding-left: 0;
+ padding-right: 10px;
+ float: right;
+}
+
+.RTL fieldset.TableLike > .RichTextField {
+ padding-bottom: 10px;
+ padding-right: 10px;
+ padding-left: 10px;
+ margin-right: 30%;
+ margin-left: 0;
+}
+
+body.RealPopup.RTL fieldset.TableLike > .Row > .RichTextField,
+body.RealPopup.RTL fieldset.TableLike > .FloatingField,
+body.RealPopup.RTL fieldset.TableLike > .Row > .FloatingField {
+ margin: 7px 7px 0px 7px;
+}
+
+body.RealPopup.RTL fieldset.TableLike > .RichTextField {
+ padding-top: 7px;
+ padding-right: 17px;
+ padding-left: 0px;
+ margin-right: 170px;
+ margin-left: 0;
+}
+
+fieldset.TableLike > .Value,
+fieldset.TableLike > .Row > .Value {
+ margin-left: 30%;
+ padding: 5px 0 3px 8px;
+ line-height: 1.9em;
+}
+
+.RTL fieldset.TableLike > .Value,
+.RTL fieldset.TableLike > .Row > .Value {
+ margin: 0 30% 0 0;
+ padding: 5px 8px 3px 0;
+}
+
+fieldset.TableLike > .Value img,
+fieldset.TableLike > .Row > .Value img {
+ vertical-align: top;
+}
+
+/**
+ * @note FixedLabel - this additional class for TableLike
+ * makes the labels have a fixed size
+ */
+fieldset.TableLike.FixedLabel > label,
+fieldset.TableLike.FixedLabel > .Row > label {
+ width: 170px;
+}
+
+fieldset.TableLike.FixedLabel > .Field,
+fieldset.TableLike.FixedLabel > .Row > .Field,
+fieldset.TableLike.FixedLabel > .Value,
+fieldset.TableLike.FixedLabel > .Row > .Value {
+ margin-left: 170px;
+ margin-right: 0;
+ padding-left: 17px;
+ padding-right: 0;
+}
+
+.RTL fieldset.TableLike.FixedLabel > .Field,
+.RTL fieldset.TableLike.FixedLabel > .Row > .Field,
+.RTL fieldset.TableLike.FixedLabel > .Value,
+.RTL fieldset.TableLike.FixedLabel > .Row > .Value {
+ margin-left: 0;
+ margin-right: 170px;
+ padding-left: 0;
+ padding-right: 17px;
+}
+
+/**
+ * @note FixedLabelSmall - this additional class for TableLike
+ * makes the labels have a small fixed size
+ */
+fieldset.TableLike.FixedLabelSmall > label,
+fieldset.TableLike.FixedLabelSmall > .Row > label {
+ width: 100px;
+}
+
+fieldset.TableLike.FixedLabelSmall > .Field,
+fieldset.TableLike.FixedLabelSmall > .Row > .Field,
+fieldset.TableLike.FixedLabelSmall > .Value,
+fieldset.TableLike.FixedLabelSmall > .Row > .Value {
+ margin-left: 100px;
+ margin-right: 7px;
+ word-wrap: break-word;
+}
+
+.RTL fieldset.TableLike.FixedLabelSmall > .Field,
+.RTL fieldset.TableLike.FixedLabelSmall > .Row > .Field,
+.RTL fieldset.TableLike.FixedLabelSmall > .Value,
+.RTL fieldset.TableLike.FixedLabelSmall > .Row > .Value {
+ margin-left: 0;
+ margin-right: 100px;
+}
+
+fieldset.TableLike.FixedLabelSmall > .FixedValueSmall,
+fieldset.TableLike.FixedLabelSmall > .Row > .FixedValueSmall {
+ width: 143px;
+}
+fieldset.TableLike.FixedLabelSmall > p.FixedValueSmall > em.Error {
+ display: block;
+ font-size: 11px;
+ margin-top: 3px;
+}
+
+fieldset.TableLike.Narrow > label,
+fieldset.TableLike.Narrow > .Row > label,
+fieldset.TableLike.Narrow > .Value,
+fieldset.TableLike.Narrow > .Row > .Value {
+ line-height: 1.3em;
+}
+
+fieldset.TableLike.Narrow > label,
+fieldset.TableLike.Narrow > .Row > label,
+fieldset.TableLike.Narrow > .Value,
+fieldset.TableLike.Narrow > .Row > .Value,
+fieldset.TableLike > label,
+fieldset.TableLike > .Row > label {
+ word-wrap: break-word;
+ overflow-wrap: break-word;
+}
+
+iframe.Signature {
+ border: 1px solid #888;
+}
+
+/**
+ * @subsection freetext fields
+ */
+
+input[type=text].TicketFreeText,
+input[type=text].ArticleFreeText {
+ width: 75%;
+}
+
+input[type=text].TicketFreeKey,
+input[type=text].ArticleFreeKey {
+ width: 50%;
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Header.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Header.css
new file mode 100644
index 0000000000..88324061d4
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Header.css
@@ -0,0 +1,608 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section Header
+ */
+
+@media screen,projection,tv,handheld {
+
+/**
+ * @subsection Header
+ */
+#Header {
+ height: 72px;
+ padding: 10px 0 12px;
+ background: #0a0a0a;
+ color: #FFF;
+ position: relative;
+}
+
+/**
+ * @subsection Logo
+ */
+#Logo {
+ top: 25px;
+ right: 24px;
+ width: 300px;
+ height: 55px;
+ background: url(../img/logo_bg.png) no-repeat;
+ background-size: contain;
+ position: absolute;
+}
+
+.RTL #Header #Logo {
+ right: auto;
+ left: 38px;
+}
+
+
+/**
+ * @subsection Toolbar
+ */
+#ToolBar {
+ left: 10px;
+ top: 15px;
+ position: absolute;
+}
+
+#ToolBar:last-child {
+ margin-left: 0px;
+}
+
+.RTL #ToolBar {
+ left: auto;
+ right: 10px;
+}
+
+#ToolBar li {
+ width: 24px;
+ height: 34px;
+ margin: 0 5px;
+ float: left;
+ position: relative;
+}
+
+.RTL #ToolBar li {
+ float: right;
+}
+
+#ToolBar li.ToolBarItemSeparator {
+ width: 0px;
+ height: 20px;
+ margin: 3px 20px 0 20px;
+ border-right: 1px solid #fff;
+ opacity: 0.35;
+ float: left;
+ position: relative;
+}
+
+#ToolBar li.Extended {
+ width: auto;
+}
+
+#ToolBar li.Extended form * {
+ float: left;
+}
+
+#ToolBar li.Extended form select {
+ margin-top: 1px;
+}
+
+#ToolBar li.UserAvatar {
+ margin: -5px 25px 0px 10px;
+}
+
+#ToolBar li.UserAvatar .Initials {
+ background: #777;
+ display: block;
+ height: 35px;
+ width: 35px;
+ border-radius: 50px;
+ color: #ccc;
+ text-indent: 0px;
+ text-align: center;
+ line-height: 37px;
+ text-shadow: 1px 1px 1px #1f1f1f;
+ border: 1px solid transparent;
+}
+
+#ToolBar li.UserAvatar i {
+ display: none !important;
+}
+
+#ToolBar li.UserAvatar > a {
+ display: block;
+ width: 37px;
+ height: 37px;
+ border-radius: 50px;
+ border: 2px solid transparent;
+ padding: 0px;
+ margin-top: -3px;
+ transition: border-color ease 0.3s;
+}
+
+body.Visible-ScreenXL #ToolBar li.UserAvatar:hover > a,
+body.Visible-ScreenXL #ToolBar li.UserAvatar > a.Active {
+ animation-name: border-fill;
+ animation-duration: 0.3s;
+ animation-timing-function: ease;
+ animation-fill-mode: forwards;
+}
+
+@keyframes border-fill {
+ 0% { border-bottom: 2px solid #3ab5e4; }
+ 25% { border-bottom: 2px solid #3ab5e4; border-left: 2px solid #3ab5e4; }
+ 50% { border-bottom: 2px solid #3ab5e4; border-left: 2px solid #3ab5e4; border-top: 2px solid #3ab5e4; }
+ 100% { border-bottom: 2px solid #3ab5e4; border-left: 2px solid #3ab5e4; border-top: 2px solid #3ab5e4; border-right: 2px solid #3ab5e4; }
+}
+
+#ToolBar li.UserAvatar img {
+ width: 35px;
+ height: 35px;
+ border: 1px solid transparent;
+ display: block;
+ border-radius: 50px;
+ cursor: pointer;
+}
+
+#ToolBar li.UserAvatar div {
+ display: none;
+ min-width: 180px;
+ background: #555;
+ z-index: 999;
+ position: absolute;
+ top: 100%;
+ left: -10px;
+ margin-top: 22px;
+ background-color: #333;
+}
+
+#ToolBar li.UserAvatar div:after {
+ bottom: 100%;
+ left: 15px;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-color: rgba(85, 85, 85, 0);
+ border-bottom-color: #333;
+ border-width: 15px;
+}
+
+#ToolBar li.UserAvatar div a,
+#ToolBar li.UserAvatar div span {
+ text-indent: 0px;
+ height: auto;
+ width: auto;
+ line-height: 18px;
+ color: #fff;
+ display: block;
+ padding: 5px 10px;
+ white-space: nowrap;
+ background-color: #141414;
+}
+
+body.Visible-ScreenXL #ToolBar li.UserAvatar div a:hover {
+ background: #333;
+ color: #3ab5e4;
+}
+
+#ToolBar li.UserAvatar div a:last-child {
+ padding-bottom: 10px;
+}
+
+#ToolBar li.UserAvatar div span {
+ color: white;
+ font-size: 12px;
+ border-bottom: 1px solid #3ab5e4;
+ padding-bottom: 5px;
+ margin-bottom: 5px;
+ padding-top: 10px;
+ background-color: #333;
+}
+
+#ToolBar li.UserAvatar div strong {
+ font-weight: normal;
+}
+
+#ToolBar a {
+ height: 20px;
+ width: 24px;
+ text-indent: -9999px;
+ position: relative;
+ display: block;
+}
+
+#ToolBar a i {
+ display: block !important;
+ font-size: 18px;
+ font-style: normal;
+ font-weight: normal !important;
+ padding: 0;
+ text-align: center;
+ text-indent: 0;
+ text-shadow: 1px 1px 0 #000000;
+ width: 24px;
+ position: relative;
+ top: -9px;
+ color: #3ab5e4 !important;
+}
+
+#ToolBar a i.icon-small {
+ font-size: 12px !important;
+ position: absolute;
+ right: -7px;
+ text-align: center;
+ top: -3px;
+ width: 15px;
+ display: none !important;
+}
+
+#ToolBar .New .icon-small.icon-show-new {
+ display: block !important;
+}
+
+#ToolBar .Reached .icon-small.icon-show-reached {
+ display: block !important;
+}
+
+#ToolBar a span.Counter {
+ bottom: -14px;
+ color: #FFFFFF;
+ display: block;
+ font-size: 11px;
+ left: 50%;
+ margin-left: -12px;
+ position: absolute;
+ text-align: center;
+ text-indent: 0 !important;
+ width: 24px;
+}
+
+#ToolBar .Extended.SearchProfile {
+ position: relative;
+ padding-left: 10px;
+ margin-right: 0px;
+}
+
+#ToolBar .Extended.SearchProfile input[type=text] {
+ margin-right: 0px;
+}
+
+#ToolBar .Extended input[type=text] {
+ padding: 4px 15px 4px 29px;
+ background: #141414;
+ border: 1px solid #3ab5e4;
+ box-shadow: none;
+ position: relative;
+/* top: -1px;
+ margin-right: -5px; */
+ margin-left: 10px;
+ text-overflow: ellipsis;
+ font-size: 11px;
+ transition: all ease 0.3s;
+ color: #1f1f1f;
+ border-radius: 4px;
+}
+
+#ToolBar .Extended input[type=text]:focus {
+ background: #3ab5e4;
+}
+
+#ToolBar .Extended input[type=text]:not(.InputField_Search) {
+ width: 90px !important;
+}
+
+#ToolBar .Extended.SearchFulltext {
+ position: relative;
+}
+
+#ToolBar .Extended.SearchFulltext:before {
+ content: "\f002";
+ font-family: FontAwesome;
+ font-size: 11px;
+ display: inline-block;
+ position: absolute;
+ left: 20px;
+ z-index: 2;
+ color: #3ab5e4;
+ top: 6px;
+}
+
+#ToolBar .Extended input[type=text]:focus {
+ position: relative;
+ z-index: 3;
+}
+
+#ToolBar .Extended input[type=text]:not(.InputField_Search):focus {
+ padding-left: 7px;
+ width: 120px !important;
+}
+
+#ToolBar .Extended input[type=text]::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+ color: #999;
+}
+
+#ToolBar .Extended input[type=text]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+ color: #999;
+}
+
+#ToolBar .Extended input[type=text]::-moz-placeholder { /* Mozilla Firefox 19+ */
+ color: #999;
+}
+
+#ToolBar .Extended input[type=text]:-ms-input-placeholder { /* Internet Explorer 10-11 */
+ color: #999;
+}
+
+#ToolBar .Extended input[type=text]::-ms-input-placeholder { /* Microsoft Edge */
+ color: #999;
+}
+
+#ToolBar .Extended input[type=text]:focus::-webkit-input-placeholder { /* WebKit, Blink, Edge */
+ color: #555;
+}
+
+#ToolBar .Extended input[type=text]:focus:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+ color: #555;
+}
+
+#ToolBar .Extended input[type=text]:focus::-moz-placeholder { /* Mozilla Firefox 19+ */
+ color: #555;
+}
+
+#ToolBar .Extended input[type=text]:focus:-ms-input-placeholder { /* Internet Explorer 10-11 */
+ color: #555;
+}
+
+#ToolBar .Extended input[type=text]:focus::-ms-input-placeholder { /* Microsoft Edge */
+ color: #555;
+}
+
+/**
+ * @subsection Navigation Level-0
+ */
+
+#NavigationContainer {
+ position: absolute;
+ top: 55px;
+ left: 10px;
+ z-index: 20;
+ width: 98%;
+ height: 34px;
+ overflow: hidden;
+}
+
+.NavContainerZIndex{
+ z-index: 5500 !important;
+}
+
+#NavigationContainer #Navigation {
+ left: 0px;
+ position: absolute;
+}
+
+.RTL #NavigationContainer {
+ left: auto;
+ right: 10px;
+}
+
+#NavigationContainer > a {
+ background: #f3960d;
+ color: #FFFFFF;
+ font-weight: bold;
+ font-size: 13px;
+ height: 34px;
+ line-height: 28px;
+ position: absolute;
+ text-align: center;
+ width: 20px;
+ z-index: 100;
+}
+
+#NavigationContainer > a.NavigationBarNavigateRight {
+ right: 0px;
+}
+
+#NavigationContainer > a.NavigationBarNavigateLeft {
+ left: 0px;
+}
+
+#NavigationContainer > a:hover {
+ padding-top: 1px;
+ padding-left: 1px;
+ width: 19px;
+ height: 33px;
+}
+
+#NavigationContainer > a i {
+ margin-top: 10px;
+ display: block;
+}
+
+#NavigationContainer > .fa-check {
+ position: absolute;
+ font-size: 15px;
+ top: 8px;
+ color: #777;
+ display: none;
+}
+
+/**
+ * @subsection Main hover effect
+ */
+#Navigation > li {
+ float: left;
+ position: relative;
+}
+
+#Navigation > li > a {
+ display: block;
+ height: 21px;
+ padding: 8px 10px 4px 10px;
+ font-size: 12px;
+ line-height: 12px;
+ color: #c8c6c4;
+ position: relative;
+}
+
+#Navigation > li > a:after {
+ width: 100%;
+ height: 3px;
+ position: absolute;
+ bottom: 0px;
+ left: 0px;
+ background: #3ab5e4;
+ content: "";
+ transform: scale(0, 1);
+ transform-origin: 0;
+ transition: transform 300ms ease;
+ will-change: transform;
+}
+
+#Navigation > li > a#GlobalSearchNav {
+ padding-right: 21px;
+}
+
+#Navigation > li > a#GlobalSearchNav i {
+ font-size: 15px;
+ margin-top: 5px;
+}
+
+.RTL #Navigation > li {
+ float: right;
+}
+
+.RTL #Navigation > li > a {
+ padding: 4px 4px 3px 15px;
+}
+
+.RTL #Navigation > li > a#GlobalSearchNav {
+ padding-right: 4px;
+ padding-left: 26px;
+}
+
+#Navigation > li:hover {
+ cursor: pointer;
+}
+
+#Navigation > li:hover > a,
+#Navigation > li:active > a {
+ color: #3ab5e4;
+}
+
+
+#Navigation > li:hover > a:after,
+#Navigation > li:active > a:after,
+#Navigation > li > a:hover:after,
+#Navigation > li > a:active:after,
+#Navigation > li > a:focus:after,
+#Navigation > li.Selected > a:after {
+ transform: scale(1, 1);
+}
+
+#Navigation > .Selected {
+ z-index: 90;
+}
+
+#Navigation > .Selected > a {
+ color: #FFF;
+}
+
+/**
+ * @subsection Search icon
+ */
+#Navigation .Search {
+ width: 16px;
+}
+
+#Navigation a i {
+ top: 2px;
+ left: 15px;
+ font-size: 20px;
+ position: absolute;
+ color: #3ab5e4;
+}
+
+#Navigation a i.fa.fa-search {
+ color: white !important;
+}
+
+/**
+ * @subsection Navigation Second level
+ */
+
+#Navigation > li > ul {
+ display: none;
+}
+
+#Navigation > .Active > ul {
+ position: absolute;
+ top: 34px;
+ left: 0px;
+ display: block;
+ z-index: 99;
+ background: #c8c6c4;
+ min-width: 100%;
+}
+
+.RTL #Navigation > .Active > ul {
+ left: auto;
+ right: -9px;
+}
+
+#Navigation > .Active > ul > li {
+ font-size: 11px;
+ line-height: 11px;
+ margin-top: -1px;
+ position: relative;
+ white-space: nowrap;
+}
+
+#Navigation > .Active > ul > li:hover {
+ background: #3ab5e4;
+}
+
+#Navigation > .Active > ul > li:hover > a {
+ color: #c8c6c4;
+}
+
+#Navigation > .Active > ul > li > a {
+ display: block;
+ position: relative;
+ color: #c8c6c4;
+ padding: 8px 10px;
+ border-bottom: 1px solid #1a1a1a;
+ background-color: #1a1a1a;
+}
+
+#Navigation > .Active > ul > li > a:hover {
+ display: block;
+ position: relative;
+ color: #3ab5e4;
+ padding: 8px 10px;
+ border-bottom: 1px solid #1a1a1a;
+ background-color: #1a1a1a;
+}
+
+#Navigation > .Active > ul > li:last-child > a {
+ border-bottom: none;
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Icons.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Icons.css
new file mode 100644
index 0000000000..5b39e27a16
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Icons.css
@@ -0,0 +1,171 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+@font-face {
+ font-family: 'otobo';
+ src: url('/otobo-web/common/fonts/otobo.eot?8f3wlj');
+ src: url('/otobo-web/common/fonts/otobo.eot?8f3wlj#iefix') format('embedded-opentype'),
+ url('/otobo-web/common/fonts/otobo.ttf?8f3wlj') format('truetype'),
+ url('/otobo-web/common/fonts/otobo.woff?8f3wlj') format('woff'),
+ url('/otobo-web/common/fonts/otobo.svg?8f3wlj#otobo') format('svg');
+ font-weight: normal;
+ font-style: normal;
+ font-display: block;
+}
+
+.ooofo {
+ /* use !important to prevent issues with browser extensions that change fonts */
+ font-family: 'otobo' !important;
+ speak: none;
+ font-style: normal;
+ font-weight: normal;
+ font-variant: normal;
+ text-transform: none;
+ line-height: 1;
+
+ /* Better Font Rendering =========== */
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.ooofo-add:before {
+ content: "\e900";
+}
+.ooofo-archive:before {
+ content: "\e901";
+}
+.ooofo-arrow_d:before {
+ content: "\e902";
+}
+.ooofo-arrow_l:before {
+ content: "\e903";
+}
+.ooofo-arrow_r:before {
+ content: "\e904";
+}
+.ooofo-arrow_r2:before {
+ content: "\e905";
+}
+.ooofo-arrow_u:before {
+ content: "\e906";
+}
+.ooofo-attachment:before {
+ content: "\e907";
+}
+.ooofo-boxcheck_ed:before {
+ content: "\e908";
+}
+.ooofo-boxcheck_ooo:before {
+ content: "\e909";
+}
+.ooofo-boxcheck_semi:before {
+ content: "\e90a";
+}
+.ooofo-boxcheck:before {
+ content: "\e90b";
+}
+.ooofo-calendar:before {
+ content: "\e90c";
+}
+.ooofo-close:before {
+ content: "\e90d";
+}
+.ooofo-dashboard:before {
+ content: "\e90e";
+}
+.ooofo-delete_outl:before {
+ content: "\e90f";
+}
+.ooofo-delete:before {
+ content: "\e910";
+}
+.ooofo-faq:before {
+ content: "\e911";
+}
+.ooofo-filter_list:before {
+ content: "\e912";
+}
+.ooofo-filter:before {
+ content: "\e913";
+}
+.ooofo-help:before {
+ content: "\e914";
+}
+.ooofo-info:before {
+ content: "\e915";
+}
+.ooofo-invisible:before {
+ content: "\e916";
+}
+.ooofo-menu:before {
+ content: "\e917";
+}
+.ooofo-more_h:before {
+ content: "\e918";
+}
+.ooofo-more_v:before {
+ content: "\e919";
+}
+.ooofo-pdf:before {
+ content: "\e91a";
+}
+.ooofo-photo_library:before {
+ content: "\e91b";
+}
+.ooofo-photo:before {
+ content: "\e91c";
+}
+.ooofo-print:before {
+ content: "\e91d";
+}
+.ooofo-radio_checked:before {
+ content: "\e91e";
+}
+.ooofo-radio:before {
+ content: "\e91f";
+}
+.ooofo-remove:before {
+ content: "\e920";
+}
+.ooofo-rplus:before {
+ content: "\e921";
+}
+.ooofo-save:before {
+ content: "\e922";
+}
+.ooofo-search:before {
+ content: "\e923";
+}
+.ooofo-sort:before {
+ content: "\e924";
+}
+.ooofo-text:before {
+ content: "\e925";
+}
+.ooofo-ticketlist:before {
+ content: "\e926";
+}
+.ooofo-time:before {
+ content: "\e927";
+}
+.ooofo-toggle_off:before {
+ content: "\e928";
+}
+.ooofo-toggle_on:before {
+ content: "\e929";
+}
+.ooofo-visible:before {
+ content: "\e92a";
+}
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.InputFields.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.InputFields.css
new file mode 100644
index 0000000000..991db2c67d
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.InputFields.css
@@ -0,0 +1,711 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section Input Fields
+ */
+
+@media screen,projection,tv,handheld {
+
+/**
+ * @subsection General
+ */
+
+div.InputField_Container {
+ position: static;
+ display: inline-block;
+}
+
+div.InputField_InputContainer {
+ position: relative;
+ display: inline-block;
+ line-height: 11px;
+}
+
+.InputField_Search::-ms-clear {
+ display: none;
+ width : 0;
+ height: 0;
+}
+
+.InputField_Search,
+.InputField_Autocomplete {
+ min-width: 190px;
+}
+
+.InputField_Search.Small {
+ min-width: 130px;
+}
+
+.InputField_Search[readonly=readonly]:focus {
+ border-color: #333;
+}
+
+.InputField_Search[readonly=readonly].Error:focus {
+ border-color: #ff505e;
+}
+
+.SidebarColumn .WidgetSimple .InputField_Search,
+.SidebarColumn .WidgetSimple .InputField_Autocomplete {
+ min-width: 80px;
+}
+
+.WidgetSettingsForm .InputField_Search,
+.WidgetSettingsForm .InputField_Autocomplete {
+ min-width: 0px;
+}
+
+@media only screen and (min-width: 1025px) {
+ fieldset.TableLike > .Field > .Modernize#TypeID,
+ fieldset.TableLike > .Field > .Modernize#Dest,
+ fieldset.TableLike > .Field > .Modernize#NewQueueID,
+ fieldset.TableLike > .Field > .Modernize#ServiceID,
+ fieldset.TableLike > .Field > .Modernize#SLAID,
+ fieldset.TableLike > .Field > .Modernize#NewUserID,
+ fieldset.TableLike > .Field > .Modernize#NewOwnerID,
+ fieldset.TableLike > .Field > .Modernize#NewResponsibleID,
+ fieldset.TableLike > .Field > .Modernize#StandardTemplateID,
+ fieldset.TableLike > .Field > .Modernize#NextStateID,
+ fieldset.TableLike > .Field > .Modernize#NewStateID,
+ fieldset.TableLike > .Field > .Modernize#PriorityID,
+ fieldset.TableLike > .Field > .Modernize#NewPriorityID,
+ fieldset.TableLike > .Row > .Field > select.Modernize {
+ min-width: 300px;
+ }
+
+ fieldset.TableLike > .Field > input.W50pc,
+ fieldset.TableLike > .Row > .Field > input.W50pc {
+ max-width: 300px;
+ }
+
+ fieldset.TableLike > .Field > input.W75pc,
+ fieldset.TableLike > .Row > .Field > input.W75pc {
+ max-width: 614px;
+ }
+
+ fieldset.TableLike > .Field > input#Subject {
+ width: calc( 75% - 4px );
+ max-width: 610px;
+ }
+
+ fieldset.TableLike > .Field > div.CustomerContainer,
+ fieldset.TableLike > .Field > div.CcCustomerContainer,
+ fieldset.TableLike > .Field > div.BccCustomerContainer {
+ width: calc( 75% - 7px );
+ max-width: 607px;
+ }
+}
+
+#Header div.InputField_Container {
+ color: #c8c6c4;
+}
+
+#ToolBar li.Extended form div.InputField_Container * {
+ float: none;
+}
+
+#ToolBar div.InputField_Container li {
+ height: auto;
+ margin: inherit;
+ width: auto;
+}
+
+#ToolBar div.InputField_Container a {
+ display: inline-block;
+ height: auto;
+ text-indent: 0;
+ width: auto;
+}
+
+#ToolBar .InputField_Search,
+#ToolBar .InputField_Autocomplete {
+ min-width: 65px;
+}
+
+.InputField_Search[disabled="disabled"] {
+ color: #aaa;
+}
+
+div.InputField_InputContainer .InputField_Search {
+ margin: 0;
+ border-radius: 4px;
+}
+
+#ContextSettingsDialog div.InputField_InputContainer .InputField_Search {
+ min-width: 0px;
+}
+
+a.InputField_Action {
+ position: absolute;
+ display: block;
+ color: #c8c6c4;
+ top: 5px;
+}
+
+a.InputField_Action:hover {
+ color: #33321f;
+}
+
+div.InputField_Selection {
+ display: none;
+ position: absolute;
+ top: 4px;
+ height: 17px;
+ line-height: 11px;
+ text-shadow: none;
+}
+
+div.InputField_Selection div {
+ display: inline-block;
+ font-size: 11px;
+}
+
+div.InputField_Selection div.Text {
+ background: #333;
+ padding: 2px 4px;
+}
+
+div.InputField_Selection div.Remove {
+ background: #555;
+ color: #fff;
+ cursor: pointer;
+}
+
+.AlreadyDisabled div.InputField_Selection div.Text {
+ background: #141414;
+ cursor: default;
+}
+
+.AlreadyDisabled div.InputField_Selection div.Remove {
+ visibility: hidden;
+ display: none;
+}
+
+div.InputField_Selection div.Remove a {
+ color: #fff;
+ padding: 2px 4px;
+ display: block;
+ border-bottom: none;
+}
+
+div.InputField_More {
+ position: absolute;
+ white-space: nowrap;
+ top: 6px;
+}
+
+div.InputField_ListContainer {
+ position: absolute;
+ z-index: 6100;
+ display: none;
+ text-shadow: none;
+}
+
+div.InputField_TreeContainer {
+ background-color: #1f1f1f;
+ border: 1px solid #333;
+ border-top: none;
+ overflow-y: auto;
+ box-sizing: content-box;
+ line-height: 18px;
+}
+
+.ExpandToTop div.InputField_TreeContainer {
+ border-top: 1px solid #333;
+ border-bottom: none;
+}
+
+div.InputField_ToolbarContainer {
+ background-color: #1f1f1f;
+ border: 1px solid #333;
+ border-top: none;
+ line-height: 21px;
+ box-sizing: content-box;
+ min-height: 21px;
+}
+
+div.InputField_ToolbarContainer ul {
+ width: 100%;
+ display: table;
+}
+
+div.InputField_ToolbarContainer ul li {
+ display: table-cell;
+ text-align: center;
+}
+
+div.InputField_ToolbarContainer ul li:after {
+ color: #bbb;
+ content: "|";
+ display: inline-block;
+ float: right;
+ cursor: default;
+}
+
+div.InputField_ToolbarContainer ul li:last-child:after {
+ display: none;
+}
+
+.RTL div.InputField_ToolbarContainer ul li:last-child:after {
+ display: inline-block;
+}
+
+.RTL div.InputField_ToolbarContainer ul li:first-child:after {
+ display: none;
+}
+
+div.InputField_ToolbarContainer ul li a {
+ color: #c8c6c4;
+ display: inline-block;
+ margin: 2px 5px;
+ font-size: 11px;
+ line-height: 15px;
+}
+
+div.InputField_ToolbarContainer i {
+ color: #c8c6c4;
+}
+
+div.InputField_ToolbarContainer ul li a:hover {
+ border-bottom: 2px solid #33321f;
+ margin-bottom: 0;
+}
+
+.InputField_Confirm,
+.InputField_Filters.Active {
+ font-weight: bold;
+}
+
+.InputField_FiltersList {
+ background: #141414;
+ white-space: nowrap;
+ border-top: 1px solid #ccc;
+ z-index: 1500;
+ line-height: 1.5em;
+ width: 100%;
+ font-size: 11px;
+}
+
+.InputField_FiltersList span {
+ margin-right: 5px;
+ cursor: default;
+}
+
+.InputField_FiltersList input[disabled="disabled"] + span {
+ font-style: italic;
+ color: #aaa;
+}
+
+/**
+ * @subsection jsTree theme
+ */
+.jstree-InputField {
+ font-size: 11px;
+ border: none;
+ box-shadow: none;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+.jstree-InputField .jstree-node,
+.jstree-InputField .jstree-children,
+.jstree-InputField .jstree-container-ul {
+ display: block;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ list-style-image: none;
+ text-align: left;
+}
+
+.RTL .jstree-InputField .jstree-node,
+.RTL .jstree-InputField .jstree-children,
+.RTL .jstree-InputField .jstree-container-ul {
+ text-align: right;
+}
+
+.jstree-InputField .jstree-node {
+ white-space: nowrap;
+}
+
+.jstree-InputField .jstree-node.jstree-hidden {
+ display: none;
+}
+
+.jstree-InputField .jstree-anchor {
+ display: inline-block;
+ color: #c8c6c4;
+ white-space: nowrap;
+ padding: 0 4px 0 1px;
+ margin: 0;
+ vertical-align: top;
+}
+
+.jstree-InputField .jstree-anchor:focus {
+ outline: 0;
+ background: transparent !important;
+}
+
+.jstree-InputField .jstree-anchor,
+.jstree-InputField .jstree-anchor:link,
+.jstree-InputField .jstree-anchor:visited,
+.jstree-InputField .jstree-anchor:hover,
+.jstree-InputField .jstree-anchor:active {
+ text-decoration: none;
+ color: inherit;
+}
+
+.jstree-InputField .jstree-icon {
+ display: inline-block;
+ text-decoration: none;
+ margin: 0;
+ padding: 0;
+ vertical-align: top;
+ text-align: center;
+}
+
+.jstree-InputField .jstree-icon:empty {
+ display: inline-block;
+ text-decoration: none;
+ margin: 0;
+ padding: 0;
+ vertical-align: top;
+ text-align: center;
+}
+
+.jstree-InputField .jstree-ocl {
+ cursor: pointer;
+}
+
+.jstree-InputField .jstree-leaf > .jstree-ocl {
+ cursor: default;
+}
+
+.jstree-InputField .jstree .jstree-open > .jstree-children {
+ display: block;
+}
+
+.jstree-InputField .jstree .jstree-closed > .jstree-children,
+.jstree-InputField .jstree .jstree-leaf > .jstree-children {
+ display: none;
+}
+
+.jstree-InputField .jstree-anchor > .jstree-themeicon {
+ margin-right: 2px;
+}
+
+.jstree-InputField .jstree-no-icons .jstree-themeicon,
+.jstree-InputField .jstree-anchor > .jstree-themeicon-hidden {
+ display: none;
+}
+
+.jstree-InputField .jstree-rtl .jstree-anchor {
+ padding: 0 1px 0 4px;
+}
+
+.jstree-InputField .jstree-rtl .jstree-anchor > .jstree-themeicon {
+ margin-left: 2px;
+ margin-right: 0;
+}
+
+.jstree-InputField .jstree-rtl .jstree-node {
+ margin-left: 0;
+}
+
+.jstree-InputField .jstree-rtl .jstree-container-ul > .jstree-node {
+ margin-right: 0;
+}
+
+.jstree-InputField .jstree-hovered {
+ background-color: transparent !important;
+}
+
+.jstree-InputField .Disabled > .jstree-anchor {
+ color: #aaa !important;
+ font-style: italic;
+ cursor: default;
+}
+
+.jstree-InputField .jstree-open,
+.jstree-InputField .jstree-closed {
+ cursor: pointer;
+}
+
+.jstree-InputField .jstree-wholerow-ul {
+ position: relative;
+ display: inline-block;
+ min-width: 100%;
+}
+
+.jstree-InputField .jstree-wholerow-ul .jstree-leaf > .jstree-ocl {
+ cursor: pointer;
+}
+
+.jstree-InputField .jstree-wholerow-ul .jstree-anchor,
+.jstree-InputField .jstree-wholerow-ul .jstree-icon {
+ position: relative;
+}
+
+.jstree-InputField .jstree-wholerow-ul .jstree-wholerow {
+ width: 100%;
+ cursor: pointer;
+ position: absolute;
+ left: 0;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+.jstree-InputField .jstree-wholerow-ul .jstree-wholerow-clicked {
+ background-color: #333;
+}
+
+.jstree-InputField .jstree-wholerow-ul .jstree-wholerow:hover,
+.jstree-InputField .jstree-wholerow-ul .jstree-wholerow-hovered,
+.jstree-InputField .jstree-focused > .jstree-wholerow {
+ background-color: #33321f;
+}
+
+.jstree-InputField .jstree-wholerow-ul .jstree-wholerow-clicked:hover,
+.jstree-InputField .jstree-wholerow-ul .jstree-wholerow-clicked.jstree-wholerow-hovered,
+.jstree-InputField .jstree-focused > .jstree-wholerow-clicked {
+ background-color: #4d4b2f;
+}
+
+.jstree-InputField .Disabled > .jstree-wholerow:hover,
+.jstree-InputField .Disabled > .jstree-wholerow-hovered {
+ background-color: #1f1f1f;
+ cursor: default;
+}
+
+.jstree-InputField .Disabled.jstree-open > .jstree-anchor,
+.jstree-InputField .Disabled.jstree-closed > .jstree-anchor {
+ cursor: pointer !important;
+}
+
+.jstree-InputField .jstree-clicked {
+ background: transparent !important;
+ border: none !important;
+ padding: 0 4px 0 1px !important;
+}
+
+.jstree-InputField.jstree-rtl .jstree-node {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
+ background-position: 100% 1px;
+ background-repeat: repeat-y;
+}
+
+.jstree-InputField.jstree-rtl .jstree-last {
+ background: transparent;
+}
+
+.jstree-InputField.jstree-rtl .jstree-open > .jstree-ocl {
+ background-position: -135px -39px;
+}
+
+.jstree-InputField.jstree-rtl .jstree-closed > .jstree-ocl {
+ background-position: -103px -39px;
+}
+
+.jstree-InputField.jstree-rtl .jstree-leaf > .jstree-ocl {
+ background-position: -71px -39px;
+}
+
+.jstree-InputField.jstree-rtl > .jstree-no-dots .jstree-node,
+.jstree-InputField.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
+ background: transparent;
+}
+
+.jstree-InputField.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
+ background-position: -39px -39px;
+}
+.jstree-InputField.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
+ background-position: -7px -39px;
+}
+
+.jstree-InputField .jstree-themeicon-custom {
+ background-color: transparent;
+ background-image: none;
+ background-position: 0 0;
+}
+
+.jstree-InputField.jstree-rtl .jstree-node {
+ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAACAQMAAABv1h6PAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMHBgAAiABBI4gz9AAAAABJRU5ErkJggg==');
+}
+
+.jstree-InputField.jstree-rtl .jstree-last {
+ background: transparent;
+}
+
+.jstree-InputField .jstree-search {
+ font-style: italic;
+}
+
+.jstree-InputField .jstree-no-match .jstree-ocl {
+ display: none;
+}
+
+.jstree-InputField .jstree-no-match {
+ margin-left: 2px !important;
+}
+
+.jstree-InputField.jstree-rtl .jstree-no-match {
+ margin-right: 2px !important;
+}
+
+/**
+ * @subsection jsTree theme - Tree variant
+ */
+.jstree-InputField-Tree .jstree-node {
+ min-height: 18px;
+ line-height: 18px;
+ margin-left: 18px;
+ min-width: 18px;
+}
+
+.RTL .jstree-InputField-Tree .jstree-node {
+ margin-right: 18px;
+ margin-left: 0;
+}
+
+.jstree-InputField-Tree > .jstree-container-ul > .jstree-node,
+.RTL .jstree-InputField-Tree > .jstree-container-ul > .jstree-node {
+ margin-left: 0;
+ margin-right: 0;
+}
+
+.jstree-InputField-Tree .jstree-anchor {
+ height: 18px;
+ line-height: 18px;
+}
+
+.jstree-InputField-Tree .jstree-icon {
+ width: 18px;
+ height: 18px;
+ line-height: 18px;
+}
+
+.jstree-InputField-Tree .jstree-icon:empty {
+ width: 18px;
+ height: 18px;
+ line-height: 18px;
+}
+
+.jstree-InputField-Tree.jstree-rtl .jstree-node {
+ margin-right: 18px;
+}
+
+.jstree-InputField-Tree .jstree-wholerow {
+ height: 18px;
+}
+
+.jstree-InputField-Tree .jstree-node,
+.jstree-InputField-Tree .jstree-icon {
+ background-image: url('../img/inputfield_tree.png');
+}
+
+.jstree-InputField-Tree .jstree-node {
+ background-position: -295px -7px;
+ background-repeat: repeat-y;
+}
+
+.jstree-InputField-Tree .jstree-last {
+ background: transparent;
+}
+
+.jstree-InputField-Tree .jstree-open > .jstree-ocl {
+ background-position: -135px -7px;
+}
+
+.RTL .jstree-InputField-Tree .jstree-open > .jstree-ocl {
+ background-position: -135px -39px;
+}
+
+.jstree-InputField-Tree .jstree-closed > .jstree-ocl {
+ background-position: -103px -7px;
+}
+
+.RTL .jstree-InputField-Tree .jstree-closed > .jstree-ocl {
+ background-position: -103px -39px;
+}
+
+.jstree-InputField-Tree .jstree-leaf > .jstree-ocl {
+ background-position: -71px -7px;
+}
+
+.RTL .jstree-InputField-Tree .jstree-leaf > .jstree-ocl {
+ background-position: -71px -39px;
+}
+
+.jstree-InputField-Tree .jstree-themeicon {
+ background-position: -263px -7px;
+}
+
+.RTL .jstree-InputField-Tree .jstree-themeicon {
+ background-position: -263px -39px;
+}
+
+.jstree-InputField-Tree > .jstree-no-dots .jstree-node,
+.jstree-InputField-Tree > .jstree-no-dots .jstree-leaf > .jstree-ocl {
+ background: transparent;
+}
+
+.jstree-InputField-Tree > .jstree-no-dots .jstree-open > .jstree-ocl {
+ background-position: -39px -7px;
+}
+
+.RTL .jstree-InputField-Tree > .jstree-no-dots .jstree-open > .jstree-ocl {
+ background-position: -39px -39px;
+}
+
+.jstree-InputField-Tree > .jstree-no-dots .jstree-closed > .jstree-ocl {
+ background-position: -7px -7px;
+}
+
+.RTL .jstree-InputField-Tree > .jstree-no-dots .jstree-closed > .jstree-ocl {
+ background-position: -7px -39px;
+}
+
+/**
+ * @subsection jsTree theme - No Tree variant
+ */
+.jstree-InputField-NoTree .jstree-node {
+ min-height: 18px;
+ line-height: 18px;
+ margin-left: 2px;
+ min-width: 18px;
+}
+
+.jstree-InputField-NoTree .jstree-anchor {
+ height: 18px;
+ line-height: 18px;
+}
+
+.jstree-InputField-NoTree .jstree-icon {
+ display: none;
+}
+
+.jstree-InputField-NoTree.jstree-rtl .jstree-node {
+ margin-right: 2px;
+}
+
+.jstree-InputField-NoTree .jstree-wholerow {
+ height: 18px;
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Installer.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Installer.css
new file mode 100644
index 0000000000..20c6914ffe
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Installer.css
@@ -0,0 +1,65 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section Installer
+ */
+
+@media screen,projection,tv,handheld {
+
+#InstallerContinueWithJS {
+ display: none;
+}
+
+#InstallerContinueWithJS form {
+ display: inline;
+}
+
+div.License {
+ font-family: monospace;
+ white-space: pre;
+ border: 1px solid #000;
+ background-color: #FFF;
+ width: 600px;
+ height: 500px;
+ overflow-x: scroll;
+ text-align: left;
+ padding: 5px;
+ margin: auto;
+}
+
+div.DBItem {
+ padding: 2px;
+ margin-left: 350px;
+}
+
+div.Result {
+ color: #049e35;
+ font-weight: bold;
+ padding: 6px 8px 10px;
+}
+
+span.Emphasis {
+ color: #049e35;
+ font-weight: bold;
+}
+
+#FormDB fieldset > h4 {
+ margin-left: 31%;
+ margin-top: 15px;
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Login.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Login.css
new file mode 100644
index 0000000000..2530d6bfdd
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Login.css
@@ -0,0 +1,153 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section Login screen
+ */
+
+@media screen,projection,tv,handheld {
+
+.LoginScreen {
+ padding-top: 90px;
+ height: calc(100vh - 90px);
+ min-height: 430px;
+}
+
+.LoginScreen .MainBox {
+ padding: 0px;
+}
+
+.LoginScreen .ErrorBox,
+.LoginScreen .SuccessBox {
+ margin-bottom: 10px;
+ padding: 10px 25px;
+ border-radius: 10px;
+}
+
+.LoginScreen .SuccessBox {
+ background-color: #c4cdfa;
+ color: #c8c6c4;
+ border-radius: 10px;
+}
+
+#LostPassword,
+#BackToLogin {
+ color: #999;
+}
+
+.LoginScreen #Header {
+ display: none;
+}
+
+.LoginScreen #Footer {
+ border: 0px;
+ bottom: 0px;
+ box-sizing: border-box;
+ padding: 15px 0px;
+ position: relative;
+ text-align: center;
+ text-shadow: 1px 1px 1px #000;
+ text-transform: uppercase;
+ width: 100%;
+}
+
+.LoginScreen #Footer a {
+ padding-left: 0px;
+}
+
+#Footer a {
+ color: #999;
+ font-size: 11px;
+ display: inline-block;
+ position: relative;
+ padding-left: 18px;
+ margin-bottom: 5px;
+ transition: all ease 0.4s;
+ text-transform: none;
+}
+
+#Footer a span {
+ display: block;
+ width: 20px;
+ height: 20px;
+ background: url(../img/otobo-signet.svg);
+ background-size: cover;
+ margin: 20px auto 10px auto;
+ transition: all ease 0.4s;
+ opacity: 0.7;
+}
+
+#Footer a:hover {
+ text-decoration: none;
+ color: #c8c6c4;
+}
+
+#Footer a:hover span {
+ opacity: 1;
+}
+
+.LoginBox,
+#PasswordBox {
+ width: 350px;
+ margin: 0px auto;
+}
+
+.LoginBox > .WidgetSimple,
+#PasswordBox > .WidgetSimple {
+ padding: 15px;
+}
+
+.LoginBox > .WidgetSimple form > fieldset > div,
+#PasswordBox > .WidgetSimple form > fieldset > div {
+ position: relative;
+}
+
+.LoginBox input,
+#PasswordBox input {
+ display: block;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 10px;
+ margin-bottom: 15px;
+ border-radius: 10px;
+}
+
+.LoginBox .Error.Center.Spacing:empty,
+#PasswordBox .Error.Center.Spacing:empty {
+ display: none;
+}
+
+.LoginBox .CallForAction.Fullsize,
+#PasswordBox .CallForAction.Fullsize {
+ width: 100%;
+}
+
+.LoginBox .CallForAction.Fullsize span,
+#PasswordBox .CallForAction.Fullsize span {
+ padding: 7px 10px;
+}
+
+/**
+ * @subsection Customizable logos
+ */
+#LoginLogo {
+ background: transparent url(../img/Otobo_Wortmarke_Digital_Blau_RGB.svg) center no-repeat;
+ background-size: contain;
+ height: 220px;
+ margin-bottom: 30px;
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.MigrateFromOTRS.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.MigrateFromOTRS.css
new file mode 100644
index 0000000000..5f76dce6e8
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.MigrateFromOTRS.css
@@ -0,0 +1,105 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section MigrateFromOTRS
+ */
+
+@media screen,projection,tv,handheld {
+
+#MigrateFromOTRSContinueWithJS,
+#MigrateFromOTRSContinueWithJSIntro {
+ display: none;
+}
+
+#MigrateFromOTRSContinueWithJS form {
+ display: inline;
+}
+
+.WidgetSimple h2 {
+ color: #c8c6c4;
+ font-family: Quicksand;
+}
+
+.WidgetSimple > .Header h2 {
+ font-size: 20px;
+}
+
+.WidgetSimple {
+ margin-bottom: 15px;
+ background: white;
+ box-shadow: 0 1px 4px 0 rgba(4,0,71,0.16);
+ margin-right: 2px;
+ margin-left: 2px;
+ border-radius: 10px;
+ padding: 1.5rem;
+ line-height: 1.4;
+}
+
+#WebMigrateFromOTRSBox ul {
+ list-style: disc;
+ padding-left: 16px;
+}
+
+#WebMigrateFromOTRSBox li:last-child {
+ margin-top: 8px;
+ margin-bottom: 8px;
+}
+
+div.License {
+ font-family: monospace;
+ white-space: pre;
+ border: 1px solid #000;
+ background-color: #FFF;
+ width: 600px;
+ height: 500px;
+ overflow-x: scroll;
+ text-align: left;
+ padding: 5px;
+ margin: auto;
+}
+
+div.DBItem {
+ padding: 2px;
+ margin-left: 350px;
+}
+
+div.Result {
+ color: #049e35;
+ font-weight: bold;
+ padding: 6px 8px 10px;
+}
+
+span.Emphasis {
+ color: #049e35;
+ font-weight: bold;
+}
+
+#FormDB fieldset > h4 {
+ margin-left: 31%;
+ margin-top: 15px;
+}
+
+.PackageComment {
+ margin-left: 24px;
+ color: #929292;
+}
+
+#DBSkipped {
+ display: none;
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.OverviewControl.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.OverviewControl.css
new file mode 100644
index 0000000000..03267dfd56
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.OverviewControl.css
@@ -0,0 +1,155 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section OverviewControls
+ */
+
+@media screen,projection,tv,handheld {
+
+/**
+ * @subsection Overview Control General
+ */
+.OverviewActions {
+ min-height: 28px;
+}
+
+.OverviewControl {
+ background-color: #1f1f1f;
+}
+
+.OverviewControl > div {
+ padding: 0 16px 0 8px;
+ background: #141414;
+}
+
+.RTL .OverviewControl > div {
+ padding: 0 8px 0 16px;
+}
+
+/**
+ * @subsection Control Row View Zoom
+ */
+.OverviewZoom {
+ float: right;
+ margin: 0px 10px;
+}
+
+.RTL .OverviewZoom {
+ float: left;
+}
+
+.OverviewZoom li {
+ display: inline-block;
+}
+
+.OverviewZoom a {
+ display: inline-block;
+ line-height: 18px;
+ width: 20px;
+ text-align: center;
+ margin-top: 5px;
+ vertical-align: middle;
+ background: #333;
+ color: #c8c6c4;
+}
+
+.OverviewZoom .Active a,
+.OverviewZoom .Active a:hover {
+ background: #c8c6c4;
+ color: #1f1f1f;
+}
+
+.OverviewZoom a:hover {
+ border-bottom: 0px !important;
+ padding-bottom: 0px !important;
+ background: #BBBBBB;
+ color: #333;
+}
+
+.OverviewZoom + .Pagination {
+ height: 10px;
+ margin-top: 5px;
+ padding-right: 12px;
+}
+
+/**
+ * @subsection Control Row Overview Header for Medium and Large View
+ */
+.OverviewHeaderMediumLarge div.IconContainer {
+ float: left;
+ width: 40px;
+ height: 30px;
+ padding-left: 4px;
+ background: transparent url(../img/overviewcontrol_line.png) no-repeat bottom right;
+}
+
+.RTL .OverviewHeaderMediumLarge div.IconContainer {
+ float: right;
+ padding-left: 0;
+ padding-right: 4px;
+ background-position: bottom left;
+}
+
+.OverviewHeaderMediumLarge div.IconContainer span.Checkbox {
+ display: block;
+ height: 14px;
+ width: 40px;
+ background: transparent url(../img/overviewcontrol_checkbox.png) no-repeat center;
+}
+
+.OverviewHeaderMediumLarge div.IconContainer span.Flag {
+ display: block;
+ height: 9px;
+ width: 16px;
+ margin-left: 10px;
+ margin-top: 3px;
+ background-color: #999;
+}
+
+.RTL .OverviewHeaderMediumLarge div.IconContainer span.Flag {
+ margin-left: 0;
+ margin-right: 13px;
+}
+
+.OverviewHeaderMediumLarge div.Filter {
+ height: 25px;
+ padding-top: 5px;
+}
+
+.RTL .OverviewHeaderMediumLarge div.Filter {
+ margin-left: 0;
+ margin-right: 55px;
+}
+
+/**
+ * @subsection Control Row Overview Header for Small View
+ */
+.OverviewHeaderSmall {
+ margin-left: 8px;
+ margin-right: 8px;
+}
+
+/**
+ * @subsection Control Row Fix for Ticket Create Masks with Datepicker
+ */
+
+#CustomerTickets {
+ position: relative;
+ z-index: 1;
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.OverviewLarge.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.OverviewLarge.css
new file mode 100644
index 0000000000..2f62ef399d
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.OverviewLarge.css
@@ -0,0 +1,455 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section OverviewLarge
+ */
+
+@media screen,projection,tv,handheld {
+
+/**
+ * @subsection Large View Overview
+ */
+
+#TicketOverviewLarge {
+ margin-top: 10px;
+}
+
+.OverviewLarge {
+ margin: 0px 16px 8px 8px;
+}
+
+.RTL .OverviewLarge {
+ margin-right: 8px;
+ margin-left: 16px;
+}
+
+.OverviewLarge .ActionRow {
+ cursor: default;
+}
+
+#EmptyMessageLarge {
+ padding: 7px;
+ border: 1px solid #272727;
+ min-height: 0px;
+}
+
+.OverviewLarge > li {
+ position: relative;
+ border-bottom: 1px solid #272727;
+ border-left: 1px solid #272727;
+ border-right: 1px solid #272727;
+}
+
+.OverviewLarge > li:first-child {
+ border-top: 1px solid #272727;
+}
+
+.OverviewLarge > li ul.InlineActions {
+ position: absolute;
+ top: -35px;
+ right: 0px;
+ background-color: #141414;
+ padding-left: 5px;
+ height: 35px;
+ cursor: auto;
+ transition: all ease-in 0.2s;
+}
+
+.OverviewLarge > li ul.InlineActions li {
+ height: auto;
+ min-height: 0;
+ border: none;
+}
+
+.OverviewLarge > li ul.InlineActions.Actions li:after {
+ margin-top: 5px;
+}
+
+.OverviewLarge > li ul.InlineActions li form {
+ padding-top: 7px;
+}
+
+.OverviewLarge > li ul.InlineActions li form select {
+ font-size: 11px;
+}
+
+.OverviewLarge > li ul.InlineActions li a {
+ color: #c8c6c4;
+}
+
+.OverviewLarge > li ul.InlineActions li:last-child a {
+ margin-right: 0px;
+}
+
+.OverviewLarge > li ul.InlineActions li:nth-child(even) {
+ background-color: transparent;
+}
+
+.OverviewLarge > li ul.InlineActions li.ResponsiveActionMenu {
+ display: none;
+}
+
+.OverviewLarge > li ul.InlineActions li.ResponsiveActionMenu:after {
+ content: "";
+ display: inline;
+ float: none;
+ margin: 0;
+ margin-left: 8px;
+}
+
+body.TouchDevice .OverviewLarge > li ul.InlineActions li.ResponsiveActionMenu.Opened:after {
+ content: " | ";
+ display: block;
+ float: right;
+ margin: 5px 3px;
+}
+
+body.TouchDevice .OverviewLarge > li ul.InlineActions {
+ top: 0px;
+ transition: none;
+}
+
+body.TouchDevice .OverviewLarge > li ul.InlineActions li.ResponsiveActionMenu {
+ display: inline-block;
+}
+
+.OverviewLarge .Content {
+ padding-top: 12px;
+ position: relative;
+ cursor: pointer;
+ border-left: 5px solid #1f1f1f;
+ overflow: hidden;
+ padding-bottom: 10px;
+}
+
+.OverviewLarge .Content.ArticleBody {
+ cursor: text;
+}
+
+.OverviewLarge .Content.ShowInlineActions {
+ padding-top: 32px;
+}
+
+.OverviewLarge > li:hover > .Content,
+.OverviewLarge > li:hover {
+ border-left-color: #F6A72B !important;
+}
+
+.OverviewLarge > li:last-child {
+ border-bottom: 1px solid #272727;
+}
+
+.OverviewLarge > li:nth-child(odd) .Content.ShowInlineActions {
+ background-color: #1f1f1f;
+}
+
+.OverviewLarge > li:nth-child(even) {
+ background-color: #242424;
+}
+
+.OverviewLarge > li:nth-child(even) .Content {
+ border-left-color: #242424;
+}
+
+.OverviewLarge div.Checkbox {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 35px;
+ height: 35px;
+ cursor: default !important;
+}
+
+.OverviewLarge div.Checkbox input {
+ margin-top: 12px;
+ margin-left: 8px;
+}
+
+.RTL .OverviewLarge input.Checkbox {
+ left: auto;
+ right: 0px;
+}
+
+.RTL .OverviewLarge div.Checkbox input {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.OverviewLarge div.Flag {
+ position: absolute;
+ left: 5px;
+ top: 37px;
+ width: 25px;
+ height: 15px;
+ border: 1px solid #272727;
+}
+
+.RTL .OverviewLarge div.Flag {
+ left: auto;
+ right: -10px;
+}
+
+.OverviewLarge div.UnreadArticles {
+ position: absolute;
+ left: 4px;
+ top: 60px;
+}
+
+.RTL .OverviewLarge div.UnreadArticles {
+ left: auto;
+ right: 4px;
+}
+
+.OverviewLarge li:hover span.UnreadArticles {
+ background-position: 0 -40px;
+}
+
+.OverviewLarge .Infos {
+ width: 40%;
+ float: left;
+}
+
+.RTL .OverviewLarge .Infos {
+ float: right;
+}
+
+.OverviewLarge div.Content.ShowInlineActions .Infos {
+ margin-top: -20px;
+}
+
+.OverviewLarge h2 {
+ width: 90%;
+ height: 15px;
+ margin: 0 10px 5px 50px;
+ font-weight: bold;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.RTL .OverviewLarge h2 {
+ margin: 0 50px 5px 10px;
+}
+
+.OverviewLarge h2 a {
+ color: #c8c6c4;
+ display: block;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.OverviewLarge .Infos table {
+ margin: 0 10px 0 50px;
+ table-layout: fixed;
+ width: 75%;
+}
+
+.RTL .OverviewLarge .Infos table {
+ margin: 0 50px 0 10px;
+}
+
+.OverviewLarge .Infos table tr:last-child td {
+ padding: 0 0 0 10px;
+}
+
+.OverviewLarge .Infos table tr.Middle {
+ border-top: 1px dotted #272727;
+}
+
+.OverviewLarge .Infos table tr.Middle td {
+ padding-top: 10px;
+}
+
+.OverviewLarge .Infos table td {
+ width: 50%;
+ padding: 0 0 8px 10px;
+ overflow: hidden;
+ border-left: 1px dotted #272727;
+ line-height: 16px;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.OverviewLarge .Infos table td > div {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+}
+
+.OverviewLarge .Infos table td:first-child {
+ padding: 0 0 8px 0;
+ border-left: none;
+}
+
+.OverviewLarge .Infos table tr:last-child td:first-child {
+ padding: 0;
+}
+
+.OverviewLarge .Infos table td label {
+ display: block;
+ color: #999;
+ font-weight: bold;
+}
+
+.OverviewLarge .ItemActions {
+ cursor: default;
+ position: relative;
+ overflow: hidden;
+ background: #1f1f1f;
+ border-bottom: 1px solid #272727;
+ min-height: 28px;
+}
+
+.OverviewLarge .Preview {
+ width: 60%;
+ float: right;
+}
+
+.RTL .OverviewLarge .Preview {
+ float: left;
+}
+
+.OverviewLarge .Preview > ul {
+ margin: 0 5px 2px;
+ background-color: #1f1f1f;
+ border: 1px solid #272727;
+}
+
+.OverviewLarge .Preview li {
+ border: none;
+ min-height: 0;
+}
+
+.OverviewLarge .Preview h3 {
+ margin: 0;
+ font-size: 12px;
+ background: #333;
+ border: 1px solid #242424;
+}
+
+.OverviewLarge .Preview li.Active h3 {
+ background: #333;
+ border-color: #333;
+}
+
+.RTL .OverviewLarge .Preview li.Active h3 {
+ margin-left: 0;
+ margin-right: -1px;
+}
+
+.OverviewLarge .Preview h3 a {
+ height: 17px;
+ padding: 0 4px;
+ line-height: 16px;
+ color: #777;
+ display: block;
+ overflow: hidden;
+}
+
+.OverviewLarge li:hover .Preview h3 a {
+ color: #659ac6;
+}
+
+.OverviewLarge .Preview li.Active h3 a {
+ color: #777;
+}
+
+.OverviewLarge li:hover .Preview li.Active h3 a {
+ color: #659ac6;
+}
+
+.OverviewLarge .Preview h3 .Subject {
+ color: #c8c6c4;
+}
+
+.OverviewLarge .Preview h3 .Headline {
+ float: left;
+}
+
+.RTL .OverviewLarge .Preview h3 .Headline {
+ float: right;
+}
+
+.OverviewLarge .Preview h3 span.DateTime {
+ float: right;
+}
+
+.RTL .OverviewLarge .Preview h3 span.DateTime {
+ float: left;
+}
+
+.OverviewLarge .Preview li div.HiddenBlock {
+ display: none;
+ border-right: 1px solid #272727;
+ padding-top: 0;
+ padding-bottom: 0;
+ overflow: auto;
+}
+
+.OverviewLarge .Preview li.Active div.HiddenBlock {
+ display: block;
+}
+
+.OverviewLarge .Preview li div.HiddenBlock div.Content {
+ padding: 5px;
+ line-height: 1.3;
+ border: none;
+}
+
+.OverviewLarge .Preview .ArticleCount5 li div.HiddenBlock div.Content {
+ height: 124px;
+}
+
+.OverviewLarge .Preview .ArticleCount4 li div.HiddenBlock div.Content {
+ height: 144px;
+}
+
+.OverviewLarge .Preview .ArticleCount3 li div.HiddenBlock div.Content {
+ height: 164px;
+}
+
+.OverviewLarge .Preview .ArticleCount2 li div.HiddenBlock div.Content {
+ height: 184px;
+}
+
+.OverviewLarge .Preview .ArticleCount1 li div.HiddenBlock div.Content {
+ height: 204px;
+}
+
+.OverviewLarge .Preview .ArticleCount5 li div.HiddenBlock div.ActionRow + div.Content {
+ height: 97px;
+}
+
+.OverviewLarge .Preview .ArticleCount4 li div.HiddenBlock div.ActionRow + div.Content {
+ height: 117px;
+}
+
+.OverviewLarge .Preview .ArticleCount3 li div.HiddenBlock div.ActionRow + div.Content {
+ height: 137px;
+}
+
+.OverviewLarge .Preview .ArticleCount2 li div.HiddenBlock div.ActionRow + div.Content {
+ height: 157px;
+}
+
+.OverviewLarge .Preview .ArticleCount1 li div.HiddenBlock div.ActionRow + div.Content {
+ height: 177px;
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.OverviewMedium.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.OverviewMedium.css
new file mode 100644
index 0000000000..7739eaa479
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.OverviewMedium.css
@@ -0,0 +1,295 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section OverviewMedium
+ */
+
+@media screen,projection,tv,handheld {
+
+/**
+ * @subsection Medium View Overview
+ */
+#TicketOverviewMedium {
+ margin-top: 10px;
+}
+
+.OverviewMedium {
+ margin: 0px 16px 8px 8px;
+}
+
+.RTL .OverviewMedium {
+ margin-right: 8px;
+ margin-left: 16px;
+}
+
+#EmptyMessageMedium {
+ padding: 7px;
+ border: 1px solid #272727;
+ min-height: 0px;
+}
+
+.OverviewMedium li {
+ position: relative;
+ border-bottom: 1px solid #272727;
+ min-height: 105px;
+ border-left: 1px solid #272727;
+ border-right: 1px solid #272727;
+}
+
+.OverviewMedium li:first-child {
+ border-top: 1px solid #272727;
+}
+
+.OverviewMedium li ul.InlineActions {
+ position: absolute;
+ top: -35px;
+ right: 0px;
+ height: 35px;
+ background-color: #141414;
+ margin-right: 0px;
+ padding-left: 5px;
+ cursor: auto;
+ transition: all ease-in 0.2s;
+}
+
+.OverviewMedium > li ul.InlineActions.Actions li:after {
+ margin-top: 5px;
+}
+
+.OverviewMedium li ul.InlineActions li {
+ height: auto;
+ min-height: 0;
+ border: none;
+}
+
+.OverviewMedium li ul.InlineActions li form {
+ padding-top: 7px;
+}
+
+.OverviewMedium li ul.InlineActions li form select{
+ font-size: 11px;
+}
+
+.OverviewMedium li ul.InlineActions li a {
+ color: #c8c6c4;
+}
+
+.OverviewMedium li ul.InlineActions li:nth-child(even) {
+ background-color: transparent;
+}
+
+.OverviewMedium li ul.InlineActions li.ResponsiveActionMenu {
+ display: none;
+}
+
+.OverviewMedium li ul.InlineActions li.ResponsiveActionMenu:after {
+ content: "";
+ display: inline;
+ float: none;
+ margin: 0;
+ margin-left: 8px;
+}
+
+body.TouchDevice .OverviewMedium li ul.InlineActions li.ResponsiveActionMenu.Opened:after {
+ content: " | ";
+ display: block;
+ float: right;
+ margin: 5px 3px;
+}
+
+body.TouchDevice .OverviewMedium li ul.InlineActions {
+ top: 0px;
+ transition: none;
+}
+
+body.TouchDevice .OverviewMedium li ul.InlineActions li.ResponsiveActionMenu {
+ display: inline-block;
+}
+
+.OverviewMedium li div.Content {
+ padding-top: 12px;
+ padding-bottom: 12px;
+ cursor: pointer;
+ position: relative;
+ border-left: 5px solid #1f1f1f;
+ overflow: hidden;
+}
+
+.OverviewMedium li:nth-child(even) div.Content {
+ border-left-color: #242424;
+}
+
+.OverviewMedium li:hover div.Content,
+.OverviewMedium li:hover {
+ border-left-color: #F6A72B !important;
+}
+
+.OverviewMedium li:last-child {
+ border-bottom: 1px solid #272727;
+}
+
+.OverviewMedium li:nth-child(odd) div.Content {
+ background-color: #1f1f1f;
+}
+
+.OverviewMedium li:nth-child(even) {
+ background-color: #242424;
+}
+
+.OverviewMedium div.Checkbox {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ width: 35px;
+ height: 35px;
+ cursor: default !important;
+}
+
+.OverviewMedium div.Checkbox input {
+ margin-top: 12px;
+ margin-left: 8px;
+}
+
+.RTL .OverviewMedium input.Checkbox {
+ left: auto;
+ right: 0px;
+}
+
+.RTL .OverviewMedium div.Checkbox input {
+ margin-left: 0px;
+ margin-right: 8px;
+}
+
+.OverviewMedium div.Flag {
+ top: 37px;
+ left: 8px;
+ position: absolute;
+ width: 22px;
+ height: 12px;
+ border: 1px solid #272727;
+}
+
+.RTL .OverviewMedium div.Flag {
+ left: auto;
+ right: 8px;
+}
+
+.OverviewMedium div.UnreadArticles {
+ position: absolute;
+ left: 4px;
+ top: 60px;
+}
+
+.RTL .OverviewMedium div.UnreadArticles {
+ left: auto;
+ right: 4px;
+}
+
+.OverviewMedium li:hover span.UnreadArticles {
+ background-position: 0 -40px;
+}
+
+.OverviewMedium h2 {
+ margin-left: 45px;
+ font-size: 14px;
+ font-weight: bold;
+ width: 97%;
+}
+
+.RTL .OverviewMedium h2 {
+ margin-left: 0;
+ margin-right: 45px;
+}
+
+.OverviewMedium h2 a {
+ color: #c8c6c4;
+ display: block;
+}
+
+.OverviewMedium table.Infos {
+ margin-top: 2px;
+ margin-left: 45px;
+ table-layout: fixed;
+ width: 97%;
+}
+
+.RTL .OverviewMedium table.Infos {
+ margin-left: 0;
+ margin-right: 45px;
+}
+
+.OverviewMedium table.Infos tr:last-child td {
+ padding: 0 0 0 10px;
+}
+
+.RTL .OverviewMedium table.Infos tr:last-child td {
+ padding: 0 10px 0 0;
+}
+
+.OverviewMedium table.Infos td {
+ width: 16.67%;
+ padding: 0 10px 5px 10px;
+ overflow: hidden;
+ line-height: 16px;
+ border-left: none;
+ border-right: 1px dotted #272727;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.OverviewMedium table.Infos td > div {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.OverviewMedium table.Infos td:last-child {
+ border-right: none;
+}
+
+.OverviewMedium table.Infos td:first-child {
+ padding: 0 0 5px 0;
+ border-left: none;
+}
+
+.RTL .OverviewMedium table.Infos td:first-child {
+ padding: 0 10px 5px 10px;
+}
+
+.OverviewMedium table.Infos tr:last-child td:first-child {
+ padding: 0;
+}
+
+.RTL .OverviewMedium table.Infos tr:last-child td:first-child {
+ padding: 0 10px 5px 10px;
+}
+
+.OverviewMedium table.Infos td label {
+ display: block;
+ margin-bottom: 2px;
+ color: #999;
+ font-weight: bold;
+}
+
+.OverviewMedium div.DynamicFieldSeparator {
+ border-bottom: 1px dotted #272727;
+ margin-left: 2pc;
+ margin-right: 2pc;
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.OverviewSmall.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.OverviewSmall.css
new file mode 100644
index 0000000000..ba27a7ccb1
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.OverviewSmall.css
@@ -0,0 +1,63 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section OverviewSmall
+ */
+
+@media screen,projection,tv,handheld {
+
+/**
+ * @subsection Overview Holder
+ */
+
+#OverviewBody {
+ margin: 10px 16px 8px 8px;
+ border-left: 1px solid #272727;
+ border-right: 1px solid #272727;
+}
+
+.RTL #OverviewBody {
+ margin-right: 8px;
+ margin-left: 16px;
+}
+
+#EmptyMessageSmall {
+ padding: 7px;
+ border: 1px solid #272727;
+ border-left: 0px;
+}
+
+.Overview thead tr {
+ background: #1f1f1f;
+ z-index: 15;
+}
+
+.Overview thead tr th {
+ height: 19px;
+ padding-top: 0;
+}
+
+.Overview table tbody tr {
+ cursor: pointer;
+}
+
+.Overview table tbody tr td.Checkbox{
+ cursor: default !important;
+}
+
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.PageLayout.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.PageLayout.css
new file mode 100644
index 0000000000..473841e46c
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.PageLayout.css
@@ -0,0 +1,341 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section Grid
+ */
+
+@media screen,projection,tv,handheld {
+
+/**
+ * @subsection LayoutFixedSidebar
+ */
+
+.LayoutFixedSidebar {
+ display: block;
+}
+
+.LayoutFixedSidebar > .ContentColumn {
+ /**
+ * @note force own Block Formatting Context for nested floats
+ */
+ overflow: hidden;
+}
+
+.TicketZoom .LayoutFixedSidebar > .ContentColumn {
+ min-height: 500px;
+}
+
+.LayoutFixedSidebar > .SidebarColumn {
+ overflow-x: hidden;
+}
+
+.LayoutFixedSidebar.SidebarLast > .SidebarColumn {
+ width: 270px;
+ float: right;
+ margin-left: 16px;
+ margin-right: 0;
+}
+
+.RTL .LayoutFixedSidebar.SidebarLast > .SidebarColumn {
+ float: left;
+ margin-left: 0;
+ margin-right: 16px;
+}
+
+.LayoutFixedSidebar.SidebarFirst > .SidebarColumn {
+ width: 270px;
+ float: left;
+ margin-left: 0;
+ margin-right: 10px;
+}
+
+.RTL .LayoutFixedSidebar.SidebarFirst > .SidebarColumn {
+ float: right;
+ margin-left: 10px;
+ margin-right: 0;
+}
+
+/**
+ * @subsection LayoutGrid
+ */
+.LayoutGrid {
+ /**
+ * @note force own Block Formatting Context for nested floats
+ */
+ overflow: hidden;
+}
+
+.LayoutGrid > div,
+.LayoutGrid > li {
+ float: left;
+}
+
+.RTL .LayoutGrid > div,
+.RTL .LayoutGrid > li {
+ float: right;
+}
+
+.LayoutGrid > .Size1of2 {
+ width: 50%;
+}
+
+.LayoutGrid > .Size1of3 {
+ width: 33.333%;
+}
+
+.LayoutGrid > .Size2of3 {
+ width: 66.666%;
+}
+
+.LayoutGrid > .Size1of4 {
+ width: 25%;
+}
+
+.LayoutGrid > .Size2of4 {
+ width: 50%;
+}
+
+.LayoutGrid > .Size3of4 {
+ width: 75%;
+}
+
+.LayoutGrid > div > div,
+.LayoutGrid > li > div {
+ /**
+ * @note force own Block Formatting Context for nested floats
+ */
+ overflow: hidden;
+}
+
+/**
+ * @note ColumnsWithSpacing: inserts margins between the grid elements,
+ * but not on the outside.
+ */
+
+.LayoutGrid.ColumnsWithSpacing > div > div {
+ margin-left: 10px;
+ margin-right: 0;
+ margin-bottom: 10px;
+}
+
+.RTL .LayoutGrid.ColumnsWithSpacing > div > div {
+ margin-left: 0;
+ margin-right: 10px;
+}
+
+.LayoutGrid.ColumnsWithSpacing > li > * {
+ padding-right: 10px;
+}
+
+/**
+ * do not add left margin for first element in each row
+ */
+.LayoutGrid.ColumnsWithSpacing > div:first-child > div,
+.LayoutGrid.ColumnsWithSpacing > div.Clear + div > div {
+ margin-left: 0;
+ margin-right: 0;
+}
+
+/**
+ * @subsection LayoutPopup
+ */
+.LayoutPopup > .Header {
+ padding: 7px 20px;
+ background-color: #141414;
+}
+
+.RTL .LayoutPopup > .Header {
+ padding: 7px 20px 7px 5px;
+}
+
+.LayoutPopup > .Header h1 {
+ font-size: 14px;
+ font-weight: bold;
+ padding: 0px 5px 0 0;
+ margin-bottom: 0px;
+ line-height: 20px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.RTL .LayoutPopup > .Header h1 {
+ padding: 5px 0 0 5px;
+}
+
+.LayoutPopup > .Header p {
+ padding: 15px 5px 0 0;
+}
+
+.RTL .LayoutPopup > .Header p {
+ padding: 5px 10px 0 5px;
+}
+
+.LayoutPopup .Notice {
+ color: red;
+}
+
+.LayoutPopup > .Content {
+ padding: 20px;
+ background-color: #141414;
+}
+
+.RTL .LayoutPopup > .Content {
+ padding: 5px 20px 5px 5px;
+}
+
+.LayoutPopup > .Footer {
+ padding: 5px;
+ text-align: center;
+ min-height: 28px;
+}
+
+.LayoutPopup > .Footer .CallForAction {
+ display: inline-block;
+ margin: 10px 0px 5px 0px;
+ min-width: 150px;
+}
+
+/**
+ * @subsection ItemListGrid
+ */
+
+.ItemListGrid {
+ overflow: hidden;
+ padding-top: 10px;
+}
+
+.ItemListGrid > li {
+ float: left;
+ line-height: 140%;
+ width: 24%;
+ min-width: 240px;
+ max-width: 320px;
+ height: 80px;
+ margin-left: 10px;
+ margin-bottom: 10px;
+ line-height: 140%;
+}
+
+.ItemListGrid.WithIcons > li {
+ height: 102px;
+}
+
+.ItemListGrid > li.FilterMessage {
+ height: auto;
+ line-height: 90%;
+ margin: -7px 0px 3px 5px;
+ color: #777;
+}
+
+.ItemListGrid > li.FilterMessage.Hidden {
+ display: none;
+}
+
+.ItemListGrid > li > a {
+ padding-top: 20px;
+ text-align: center;
+ display: block;
+ height: 100%;
+ background: #272727;
+ box-sizing: border-box;
+ text-align: center;
+ border: 1px solid #555;
+ position: relative;
+}
+
+.ItemListGrid.WithIcons > li > a {
+ padding-top: 56px;
+ transition: all ease 0.4s;
+}
+
+.ItemListGrid.WithIcons > li > a.Disabled {
+ cursor: not-allowed;
+ opacity: 0.7;
+}
+
+.ItemListGrid > li > a:not(.Disabled):hover,
+.ItemListGrid > li > a:not(.Disabled):active,
+.ItemListGrid > li > a:not(.Disabled):focus,
+.ItemListGrid > li > a.Active {
+ background: #333;
+ border-color: #999;
+}
+
+.ItemListGrid > li span.Icons {
+ border: 1px solid #999;
+ border-radius: 30px;
+ height: 20px;
+ left: 50%;
+ margin-left: -20px;
+ padding: 10px;
+ position: absolute;
+ top: 8px;
+ width: 20px;
+ transition: all ease 0.4s;
+}
+
+.ItemListGrid.WithIcons > li a:not(.Disabled):hover span.Icons,
+.ItemListGrid.WithIcons > li a.Active span.Icons,
+.ItemListGrid.WithIcons > li a:not(.Disabled):hover span.Icons i.Icon2,
+.ItemListGrid.WithIcons > li a.Active span.Icons i.Icon2 {
+ background: #444;
+}
+
+.ItemListGrid.WithIcons > li span.Icons i {
+ color: #999;
+ font-size: 20px;
+}
+
+.ItemListGrid.WithIcons > li span.Icons i.Icon2 {
+ background: #272727;
+ border: 1px solid #999;
+ border-radius: 20px;
+ font-size: 12px;
+ height: 15px;
+ line-height: 15px;
+ padding: 3px;
+ position: absolute;
+ right: -14px;
+ text-align: center;
+ top: -5px;
+ width: 15px;
+ transition: all ease 0.4s;
+}
+
+.ItemListGrid > li span.Title {
+ font-size: 15px;
+ width: 80%;
+ margin: 0px auto;
+ margin-bottom: 3px;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+.ItemListGrid > li span.Description {
+ display: block;
+ width: 80%;
+ margin: 0px auto;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ color: #c8c6c4;
+}
+
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Print.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Print.css
new file mode 100644
index 0000000000..f51ef2f16b
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Print.css
@@ -0,0 +1,441 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section CSS for printing
+ */
+
+@media print {
+
+/**
+ * @subsection Fonts
+ */
+body {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 12px;
+ text-align: left;
+}
+
+/**
+ * @subsection Generic elements
+ */
+p {
+ line-height: 1.3em;
+}
+
+h1 {
+ font-size: 24px;
+ font-weight: bold;
+ margin-bottom: 10px;
+ margin-top: 20px;
+}
+
+h2 {
+ font-size: 16px;
+ font-weight: bold;
+ margin-top: 20px;
+ margin-bottom: 7px;
+}
+
+h3 {
+ font-size: 14px;
+ font-weight: bold;
+ margin-bottom: 5px;
+}
+
+td, th {
+ border-left: 1px dotted #E5E5E5;
+ padding: 0 10px 0 10px;
+}
+
+th {
+ font-weight: bold;
+}
+/**
+ * @subsection Navigation
+ */
+#Header,
+#NavigationContainer,
+#ToolBar,
+body > .MessageBox,
+.ResponsiveHandle,
+.AdditionalInformation.ControlRow,
+#ArticleItems ul.Actions,
+#ArticleTree,
+.Headline > .Flag {
+ display: none;
+}
+
+/**
+ * @subsection Footer
+ */
+#Footer {
+ border-top:1px solid #999999;
+ font-size:10px;
+ margin-top:10px;
+ padding:12px 9px 8px;
+ padding:10px;
+}
+
+#Footer ul {
+ display: none;
+}
+
+/**
+ * @subsection Generic elements
+ */
+#Navigation{
+ display:none;
+}
+
+a {
+ color:#000000;
+ text-decoration:none;
+}
+
+.DontPrint {
+ display: none;
+}
+
+.PrintOnly {
+ display: block;
+}
+
+.ContextFunctions {
+ display: none;
+}
+
+.ActionRow {
+ display: none;
+}
+
+#ArticleTable {
+ display: none;
+}
+
+.WidgetAction {
+ display: none;
+}
+
+.Flag {
+ padding: 5px;
+ margin-top: 5px;
+ margin-bottom: 10px;
+ width: 100%;
+}
+
+td:last-child{
+ border-right: 1px dotted #CCCCCC;
+}
+
+.Tab.Actions li a{
+ padding: 13px 8px 5px 8px;
+}
+
+.Tab.Actions li a:focus{
+ font:bold;
+}
+
+.div.Pagination{
+ margin-top:5px;
+ margin-bottom:5px;
+}
+
+.Hidden, .Checkbox{
+ display:none;
+}
+
+/*
+ Ticket Overview Small
+*/
+
+.QueueOverview {
+ color:gray;
+ font-size:12px;
+ margin:0 16px 10px 8px;
+ padding:0 0 4px;
+}
+
+.QueueOverviewList a {
+ color:#000000;
+}
+
+.Overview.FixedHeader thead tr th {
+ height:19px;
+ border-right:1px solid #C9C9C9;
+ padding-top:0;
+}
+
+.TableSmall{
+ margin-top:10px;
+ margin-bottom:10px;
+}
+
+.TableSmall thead {
+ margin-top:15px;
+ border: 1px solid #C9C9C9;
+}
+.TableSmall thead a, .TableSmall thead span {
+ color:#4A4A4A;
+ display:block;
+ font-size:11px;
+ height:15px;
+ line-height:15px;
+ margin:0 2px 1px 1px;
+ padding:0 10px;
+ text-transform:uppercase;
+}
+
+/*
+ Ticket Overview Medium
+*/
+
+.OverviewMedium h2 a {
+ color:#000000;
+ display:block;
+}
+
+.OverviewMedium .Flag {
+ width:150px;
+ height: 12px;
+ border: 1px dashed #C9C9C9;
+ padding:8px;
+ color:#FF9922;
+}
+
+.OverviewMedium li div.Content {
+ padding:10px;
+ margin-top:15px;
+ border:1px solid #C9C9C9;
+}
+
+.OverviewMedium table.Infos td label {
+ color:#CCCCCC;
+ margin: 8px 0 4px 0;
+ display:block;
+ font-weight:bold;
+ margin-bottom:2px;
+}
+
+.OverviewMedium table.Infos td div {
+ margin-left:15px;
+}
+
+.OverviewMedium .UnreadArticles span{
+ width:150px;
+ height: 12px;
+ border: 1px dashed #C9C9C9;
+ padding:8px;
+ border-top:none;
+ color:#FF9922;
+}
+/*
+ Ticket Overview Large
+*/
+
+.OverviewLarge .Flag {
+ width:150px;
+ height: 12px;
+ border: 1px dashed #C9C9C9;
+ padding:8px;
+ color:#FF9922;
+}
+
+.OverviewLarge > li > .Content {
+ margin-bottom:15px;
+ padding:12px;
+ border:1px solid #000000;
+}
+
+.OverviewLarge .Infos {
+ margin-bottom:10px;
+}
+
+.OverviewLarge .Infos table {
+ border-bottom:1px dotted #C9C9C9;
+ border-top:1px dotted #C9C9C9;
+}
+
+.OverviewLarge .Infos table td label {
+ color:#CCCCCC;
+ margin: 8px 0 2px 0;
+ display:block;
+ font-weight:bold;
+}
+
+.OverviewLarge .Preview {
+ margin-top:10px;
+}
+
+.OverviewLarge .Preview ul li {
+ margin-top : 10px;
+}
+
+.OverviewLarge .Preview h3 a {
+ display:block;
+ height:17px;
+ margin-top:15px;
+}
+
+.OverviewLarge .Preview li div.HiddenBlock div.Content {
+ border:medium none;
+ padding:5px;
+ display:block;
+}
+
+.OverviewLarge .Preview .ArticleCount2 li div.HiddenBlock div.Content {
+ height:auto;
+ padding: 10px;
+ border:1px dotted #C9C9C9;
+}
+
+.OverviewLarge .Preview li div.HiddenBlock div.Content {
+ border:medium none;
+ padding:5px;
+}
+
+.OverviewLarge .UnreadArticles span{
+ width:150px;
+ height: 12px;
+ border: 1px dashed #C9C9C9;
+ padding:8px;
+ border-top:none;
+ color:#FF9922;
+}
+
+/*
+ Ticket Zoom
+*/
+
+div.Headline .Flag{
+ border:1px solid #CCCCCC;
+ width: 150px;
+ color:#FF9922;
+ font-weight: bold;
+ font-size:16px;
+}
+
+.WidgetSimple > .Header h2 {
+ margin: 0 0 5px 0;
+ padding:0 0 5px 0;
+ border-bottom: 1px dotted #CCCCCC;
+}
+
+div.Headline h1 {
+ font-size:20px;
+ margin: 10px 0 10px 0;
+ padding:0;
+}
+
+#DestQueueID{
+ display: none;
+}
+
+/**
+ * @subsection SidebarColumn
+ */
+.SidebarColumn .WidgetSimple {
+ width: 46%;
+ float: left;
+ padding: 10px;
+ border: 1px solid #CCC;
+ margin-right: 10px;
+ margin-bottom: 10px;
+}
+
+/**
+ * @subsection ContentColumn
+ */
+.ContentColumn {
+ clear: both;
+}
+
+.WidgetBox {
+ margin-top: 20px;
+ padding: 10px;
+ border: 1px solid #CCC;
+}
+
+.WidgetBox .InvisibleText{
+ display:none;
+}
+
+.WidgetBox .Actions{
+ display:none;
+}
+
+.WidgetBox .ArticleMailHeader {
+ margin: 0;
+ padding: 0;
+}
+
+.WidgetBox > .Header h2 {
+ padding:0;
+ margin:0 0 15px 0;
+}
+
+.ArticleMailContent body{
+}
+
+/**
+ * @subsection Tablelike elements
+ */
+.WidgetSimple fieldset {
+ margin-bottom:15px;
+}
+
+fieldset.TableLike > label {
+ display: block;
+ float: left;
+ text-align: left;
+ padding-top: 4px;
+ font-weight: bold;
+}
+
+fieldset.TableLike.FixedLabelSmall > label {
+ width:100px;
+ display:block;
+}
+
+
+fieldset.TableLike > .Value {
+ margin-left:130px;
+ margin-right:0;
+ padding-top: 4px;
+}
+
+.ItemRow{
+ margin-top:10px;
+ border-top: 1px dotted #CCC;
+ display:block;
+ padding-top: 10px;
+}
+
+.ItemRow li{
+ display:block;
+ padding-top: 4px;
+ font-weight:bold;
+}
+
+/**
+ * @subsection Popups
+ */
+
+.LayoutPopup .Header {
+ display: none;
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Reset.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Reset.css
new file mode 100644
index 0000000000..d2aecb6dd0
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Reset.css
@@ -0,0 +1,108 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section Reset CSS
+ * @note The definitions in this file are used to reset browser-specific
+ * settings to defined default values.
+ *
+ */
+
+/**
+ * @see YUI Reset CSS, http://developer.yahoo.com/yui/reset/
+ */
+
+@media all {
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, font, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td, hr {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ outline: 0;
+ font-weight: inherit;
+ font-style: inherit;
+ font-size: 100%;
+ font-family: inherit;
+ vertical-align: baseline;
+ background-image: none;
+ direction: inherit;
+}
+
+body {
+ line-height: 1;
+ color: #c8c6c4;
+ background: #141414;
+ text-align: left;
+ margin: 0;
+ padding: 0;
+}
+
+ol, ul {
+ list-style: none;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+caption, th, td {
+ text-align: left;
+ font-weight: normal;
+}
+
+.RTL caption,
+.RTL th,
+.RTL td {
+ text-align: right;
+}
+
+blockquote:before, blockquote:after, q:before, q:after {
+ content: "";
+}
+
+blockquote, q {
+ quotes: "" "";
+}
+
+a {
+ text-decoration: none;
+}
+
+strong {
+ font-weight: bold;
+}
+
+/**
+ * @note Move selects a bit to the top. This is ignored by some browsers,
+ * and seems to be needed for some linux environments (Firefox, Arora / Qt).
+ */
+select {
+ margin-top: -1px;
+}
+
+*:visited {
+ color: #001bff;
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Responsive.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Responsive.css
new file mode 100644
index 0000000000..d7a662e62e
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Responsive.css
@@ -0,0 +1,1575 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/* All devices capable of OTOBO minimum solution. Used to hide elements for mobile devices. */
+/* This code has been moved to Core.Defaults.css */
+
+/* All devices with a smaller resolution than the current OTOBO minimum solution */
+@media only screen and (min-width: 0px) and (max-width: 1024px) {
+
+ body, html {
+ font-size: 1em;
+ overflow-x: hidden;
+ }
+
+ .ArticleBody {
+ font-size: 12px;
+ }
+
+ .WidgetSimple.MobileNotAvailableWidget {
+ display: block;
+ }
+
+ html.NoScroll,
+ html.NoScroll body {
+ overflow: hidden;
+ }
+
+ html.NoScroll body {
+ position: static;
+ }
+
+ html.NoScroll #AppWrapper {
+ overflow: hidden;
+ position: fixed;
+ }
+
+ .MessageBox, .RTL .MessageBox {
+ margin: 0px;
+ }
+
+ #Header {
+ height: 60px;
+ overflow: hidden;
+ padding: 0px;
+ border-bottom: 0px;
+ }
+
+ #ToolBar,
+ .RTL #ToolBar {
+ position: static;
+ float: none;
+ margin: 0px;
+ text-align: center;
+ white-space: nowrap;
+ overflow-x: scroll;
+ border: 0px;
+ background: #141414;
+ overflow: auto;
+ height: 0px;
+ }
+
+ #ToolBar li:not(.UserAvatar),
+ .RTL #ToolBar li:not(.UserAvatar),
+ #ToolBar li.UserAvatar div a,
+ #ToolBar li.UserAvatar div span {
+ float: none;
+ display: inline-block;
+ padding: 8px;
+ margin-bottom: 10px;
+ margin-top: 10px;
+ }
+
+ #ToolBar li.UserAvatar > a,
+ #ToolBar li.UserAvatar div:after,
+ #ToolBar li.UserAvatar div span {
+ display: none;
+ }
+
+ #ToolBar li.UserAvatar {
+ display: inline-block;
+ float: none;
+ display: inline-block;
+ background-color: #444;
+ padding: 8px;
+ margin-bottom: 10px;
+ margin-top: 10px;
+ background: none;
+ width: auto;
+ }
+
+ #ToolBar li.UserAvatar i {
+ display: block !important;
+ color: #3ab5e4;
+ }
+
+ #ToolBar li.UserAvatar div a:last-child {
+ padding-bottom: 0px;
+ }
+
+ #ToolBar li.UserAvatar a strong {
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+ }
+
+ #ToolBar li.UserAvatar {
+ margin: 0px;
+ }
+
+ #ToolBar li.UserAvatar a {
+ width: 24px;
+ height: 34px;
+ margin: 0 5px;
+ float: left;
+ position: relative;
+ }
+
+ #ToolBar li.UserAvatar div {
+ display: inline-block !important;
+ position: static;
+ background: none;
+ width: auto;
+ margin: 0px;
+ }
+
+ #ToolBar li i {
+ color: #3ab5e4;
+ text-shadow: none;
+ font-size: 20px;
+ top: -15px;
+ }
+
+ #ToolBar li i.icon-small {
+ top: -7px !important;
+ right: -9px !important;
+ }
+
+ #ToolBar li a span.Counter {
+ bottom: -16px;
+ font-weight: normal;
+ font-size: 12px;
+ color: #aaa;
+ }
+
+ #ToolBar li.Extended {
+ background: none;
+ display: inline-block;
+ margin: -25px 0px 0px 5px;
+ padding: 0;
+ vertical-align: middle;
+ }
+
+ #ToolBar li.Extended input {
+ padding: 10px;
+ }
+
+ #ToolBar li.Extended .InputField_InputContainer input {
+ padding: 8px;
+ }
+
+ #ToolBar li.Extended form {
+ display: inline;
+ }
+
+ #Header #Logo {
+ width: 208px !important;
+ background-size: contain;
+ position: static;
+ margin: -2px auto 0px auto;
+ background-position: center;
+ max-height: 100%;
+ }
+
+ .MainBox, .RTL .MainBox {
+ padding: 5px 15px;
+ }
+
+ #UserInfo {
+ top: 20px;
+ right: 25px;
+ }
+
+ #UserInfo a.LogoutButton {
+ font-size: 30px;
+ top: -5px;
+ }
+
+ .ResponsiveSidebarContainer {
+ background: rgba(22, 22, 22, 0.7);
+ height: 100%;
+ position: fixed;
+ left: 0px;
+ top: 0px;
+ width: 100%;
+ display: none;
+ z-index: 998;
+ }
+
+ .ResponsiveHandle {
+ font-size: 30px;
+ color: #3ab5e4;
+ cursor: pointer;
+ display: block;
+ position: fixed;
+ top: 10px;
+ width: 25px;
+ height: 30px;
+ padding: 5px 10px;
+ background: #222;
+ background-color: rgba(22, 22, 22, 0.5);
+ text-align: center;
+ z-index: 999;
+ }
+
+ #ResponsiveNavigationHandle {
+ left: 0px;
+ }
+
+ #ResponsiveSidebarHandle {
+ right: 0px;
+ }
+
+ #ResponsiveSidebarNotification {
+ top: 60px;
+ left: -45px;
+ display: none;
+ color: #ccc;
+ cursor: default;
+ }
+
+ #NavigationContainer,
+ .RTL #NavigationContainer {
+ left: -280px;
+ right: auto;
+ top: 0px;
+ height: 100%;
+ position: fixed;
+ background: #141414;
+ width: 280px;
+ overflow: auto;
+ }
+
+ #NavigationContainer #Navigation {
+ position: static;
+ width: auto !important;
+ margin-top: 80px;
+ }
+
+ #NavigationContainer > a {
+ display: none !important;
+ }
+
+ #Navigation > li {
+ background: none;
+ float: none;
+ box-shadow: none !important;
+ border: 0px !important;
+ border-top: 1px solid #444 !important;
+ }
+
+ #Navigation > li > a {
+ font-size: 14px;
+ font-weight: normal;
+ padding: 10px 15px;
+ height: auto;
+ }
+
+ .RTL #Navigation > li > a {
+ padding: 10px 15px;
+ }
+
+ #Navigation > .Active > ul > li > a {
+ font-size: 14px;
+ margin-left: 5px;
+ }
+
+ #Navigation > li:first-child {
+ border-top: 0px !important;
+ }
+
+ #Navigation > .Selected,
+ #Navigation > li:hover {
+ color: #3ab5e4;
+ }
+
+ #Navigation > .Active > ul {
+ position: static;
+ min-width: 0px;
+ box-shadow: none;
+ }
+
+ #Navigation > .Active > ul li a {
+ padding: 7px 10px;
+ border: 0px;
+ }
+
+ #Navigation .Search {
+ width: auto !important;
+ }
+
+ .WidgetSimple span.Pagination,
+ .OverviewActions span.Pagination {
+ text-align: center;
+ float: none;
+ display: block;
+ }
+
+ .WidgetSimple .AllocationListContainer,
+ .WidgetSimple .AllocationListContainer ul,
+ .WidgetSimple .AllocationListContainer .FilterInputContainer {
+ margin: 0px auto !important;
+ }
+
+ .WidgetSimple span.Pagination {
+ display: none;
+ }
+
+ .WidgetSimple span.Pagination.AsBlock {
+ display: block;
+ margin: 10px 0px;
+ }
+
+ .WidgetSimple span.Pagination a,
+ .OverviewActions span.Pagination a {
+ display: inline-block;
+ background-color: #aaa;
+ color: #fff;
+ font-size: 12px;
+ padding: 5px 7px;
+ float: none;
+ }
+
+ .WidgetSimple span.Pagination a.Selected,
+ .OverviewActions span.Pagination a.Selected {
+ font-weight: normal;
+ background-color: #555;
+ }
+
+ .WidgetSimple > .Header h2,
+ .WidgetSimple > .Header h3 {
+ font-size: 14px;
+ }
+
+ .Dashboard .ContentColumn .WidgetSimple > .Header {
+ padding: 7px 5px;
+ }
+
+ .WidgetSimple .Buttons {
+ margin: 0px;
+ }
+
+ .WidgetSimple .Buttons span {
+ font-size: 14px;
+ }
+
+ .WidgetSimple .Content form {
+ display: block;
+ width: 100%;
+ overflow-y: hidden;
+ overflow-x: auto;
+ }
+
+ .WidgetSimple .Content form table.DataTable {
+ min-width: 500px;
+ }
+
+ .WidgetSimple .ActionMenu {
+ margin-right: 10px;
+ border: 0px;
+ }
+
+ .RTL .WidgetSimple .ActionMenu {
+ margin-left: 10px;
+ }
+
+ .WidgetSimple .WidgetAction,
+ .RTL .WidgetSimple .WidgetAction {
+ display: inline-block;
+ margin-right: 5px;
+ }
+
+ .WidgetSimple .WidgetAction a {
+ font-size: 22px;
+ display: inline-block;
+ margin-right: 5px;
+ }
+
+ /* Ticket creation screens */
+
+ .ShowTreeSelection {
+ display: none !important;
+ }
+
+ .MainBox.FormScreen > h1,
+ .MainBox.FormScreen > .AsteriskExplanation {
+ margin-left: 0px !important;
+ text-align: center;
+ }
+
+ .RTL .MainBox.FormScreen > h1,
+ .RTL .MainBox.FormScreen > .AsteriskExplanation {
+ margin-right: 0px;
+ }
+
+ .GetAllAJAX span {
+ display: none;
+ }
+
+ .AdditionlFieldIcon span {
+ display: none;
+ }
+
+ .MainBox.FormScreen > .AsteriskExplanation {
+ margin: -10px 0px 10px 0px;
+ }
+
+ fieldset.TableLike.Hidden {
+ display: none;
+ }
+
+ fieldset.TableLike > .Field,
+ fieldset.TableLike > .Row > .Field {
+ padding: 0px;
+ }
+
+ fieldset.TableLike > .Field input[type=file],
+ fieldset.TableLike > .Row > .Field input[type=file] {
+ width: 95%;
+ }
+
+ fieldset.TableLike > .RichTextField,
+ fieldset.TableLike > .Row > .RichTextField,
+ fieldset.TableLike > .FloatingField,
+ fieldset.TableLike > .Row > .FloatingField {
+ padding: 0px;
+ float: none;
+ margin: 0;
+ }
+
+ body.Popup fieldset.TableLike > .RichTextField,
+ body.RealPopup.RTL fieldset.TableLike > .RichTextField {
+ padding: 0px;
+ margin: 0;
+ }
+
+ fieldset.TableLike > .Field > select,
+ fieldset.TableLike > .Row > .Field > select,
+ fieldset.TableLike > .Field > input,
+ fieldset.TableLike > .Row > .Field > input {
+ padding: 3px;
+ font-size: 0.9em;
+ width: 93%;
+ }
+
+ fieldset.TableLike > .Field > input,
+ fieldset.TableLike > .Row > .Field > input {
+ width: 90%;
+ }
+
+ fieldset.TableLike > .Field > input[type=radio],
+ fieldset.TableLike > .Row > .Field > input[type=radio],
+ fieldset.TableLike > .Field > input[type=radio],
+ fieldset.TableLike > .Row > .Field > input[type=checkbox] {
+ width: auto;
+ }
+
+ form label.Mandatory span.Marker {
+ display: inline-block;
+ margin-right: 3px;
+ position: static;
+ }
+
+ form .FieldExplanation {
+ font-size: 0.8em;
+ }
+
+ .AJAXLoader {
+ position: relative;
+ top: -10px;
+ }
+
+ iframe.Signature {
+ width: 98% !important;
+ }
+
+ .CustomerContainer,
+ .CcCustomerContainer,
+ .BccCustomerContainer {
+ width: auto;
+ margin-top: 15px;
+ }
+
+ .LayoutPopup .CustomerContainer,
+ .LayoutPopup .CcCustomerContainer,
+ .LayoutPopup .BccCustomerContainer {
+ margin-left: 30px;
+ }
+
+ .ui-overlay-autocomplete li.ui-menu-item {
+ font-size: 1em;
+ line-height: 150%;
+ }
+
+ fieldset.TableLike > .Field > select ~ a i,
+ fieldset.TableLike > .Row > .Field > select ~ a i {
+ font-size: 1.3em;
+ }
+
+ .DatepickerIcon {
+ font-size: 1.2em;
+ margin: 8px 7px 0px 4px;
+ width: auto;
+ }
+
+ #Day, .Validate_DateDay,
+ #Month, .Validate_DateMonth,
+ #Year, .Validate_DateYear,
+ #Hour, .Validate_DateHour,
+ #Minute, .Validate_DateMinute,
+ .DateSelection {
+ width: auto !important;
+ }
+
+ fieldset.TableLike > label,
+ fieldset.TableLike > .Row > label,
+ .RTL fieldset.TableLike > label,
+ .RTL fieldset.TableLike > .Row > label {
+ float: none;
+ width: auto;
+ text-align: left;
+ font-size: 0.9em;
+ }
+
+ .RTL fieldset.TableLike > label,
+ .RTL fieldset.TableLike > .Row > label {
+ text-align: right;
+ }
+
+ .ResponsiveSidebarContainer fieldset.TableLike > label,
+ .ResponsiveSidebarContainer fieldset.TableLike > .Row > label {
+ float: none;
+ display: inline;
+ margin: 0px;
+ padding: 0px;
+ }
+
+ .ResponsiveSidebarContainer fieldset.TableLike.FixedLabel > .Field,
+ .ResponsiveSidebarContainer fieldset.TableLike.FixedLabel > .Row > .Field,
+ .ResponsiveSidebarContainer fieldset.TableLike.FixedLabel > .Value,
+ .ResponsiveSidebarContainer fieldset.TableLike.FixedLabel > .Row > .Value {
+ float: none;
+ display: inline;
+ margin: 0px;
+ padding: 0px;
+ }
+
+ fieldset.TableLike > .Field,
+ fieldset.TableLike > .Row > .Field {
+ margin-left: 2px;
+ }
+
+ .RTL fieldset.TableLike > .Field,
+ .RTL fieldset.TableLike > .Row > .Field {
+ margin-right: 2px;
+ }
+
+ .RichTextField > .cke {
+ width: auto !important;
+ max-width: 100% !important;
+ }
+
+ #submitRichText span {
+ font-size: 15px;
+ }
+
+ .CallForAction,
+ .cke_dialog_footer_buttons a.cke_dialog_ui_button {
+ margin: 0px auto;
+ }
+
+ .CallForAction span,
+ .cke_dialog_footer_buttons td a.cke_dialog_ui_button span {
+ height: auto;
+ }
+
+ #submitRichText span i {
+ font-size: 1em;
+ width: 20px;
+ }
+
+ /* Widget Actions */
+
+ .OverviewActions, .DashboardActions {
+ position: relative;
+ }
+
+ .Actions, .RTL .Actions {
+ white-space: nowrap;
+ overflow-x: auto;
+ float: none;
+ }
+
+ .Actions li,
+ .RTL .Actions li {
+ display: inline-block;
+ font-size: 14px;
+ float: none;
+ }
+
+ .DashboardActions .Actions li:after,
+ .Actions li:after {
+ display: inline-block;
+ float: none;
+ }
+
+ .DashboardActions .Actions:after {
+ bottom: -15px;
+ }
+
+ /* Tables */
+
+ .DataTable tr td,
+ .TableSmall tr td {
+ font-size: 14px;
+ }
+
+ .DataTable tr td,
+ .TableSmall tr td,
+ .DataTable tr td div,
+ .TableSmall tr td div,
+ .DataTable tr td span,
+ .TableSmall tr td span,
+ .DataTable tr td a.AsBlock,
+ .TableSmall tr td a.AsBlock {
+ overflow: hidden;
+ white-space: nowrap;
+ max-width: 200px;
+ text-overflow: ellipsis;
+ }
+
+ .DataTable .ColumnSettingsTrigger,
+ .TableSmall .ColumnSettingsTrigger {
+ display: none !important;
+ }
+
+ /* SidebarColumn */
+
+ .ResponsiveSidebarContainer .WidgetSimple {
+ background: #1f1f1f;
+ }
+
+ .ResponsiveSidebarContainer .SettingsWidget label {
+ font-size: 14px;
+ }
+
+ .LayoutFixedSidebar.SidebarLast .ResponsiveSidebarContainer > .SidebarColumn,
+ .LayoutFixedSidebar.SidebarFirst .ResponsiveSidebarContainer > .SidebarColumn {
+ position: fixed;
+ height: 100%;
+ top: 0px;
+ z-index: 999;
+ width: 280px;
+ right: -300px;
+ overflow: auto;
+ background: #141414;
+ padding: 0px 10px;
+ }
+
+ .LayoutFixedSidebar.SidebarLast .ResponsiveSidebarContainer > .SidebarColumn > :first-child,
+ .LayoutFixedSidebar.SidebarFirst .ResponsiveSidebarContainer > .SidebarColumn > :first-child {
+ margin-top: 60px;
+ }
+
+ #ContextSettingsDialog,
+ #ContextSettingsDialogOverviewSmall {
+ width: auto;
+ max-height: 100%;
+ }
+
+ .OverviewActions > ul.Actions {
+ float: none;
+ display: block;
+ height: auto;
+ overflow: hidden;
+ text-align: center;
+ }
+
+ .OverviewActions > span.Pagination {
+ height: 22px;
+ }
+
+ .OverviewZoom a {
+ padding: 5px 7px;
+ font-size: 12px;
+ line-height: 12px;
+ width: auto;
+ }
+
+ .OverviewZoom a:hover {
+ padding-bottom: 5px !important;
+ }
+
+ /* Login */
+ .LoginScreen .W33pc {
+ width: 80%;
+ text-align: center;
+ }
+
+ .LoginScreen fieldset.TableLike > label,
+ .LoginScreen fieldset.TableLike > .Row > label,
+ .LoginScreen fieldset.TableLike.FixedLabelSmall > label,
+ .LoginScreen fieldset.TableLike.FixedLabelSmall > .Row > label {
+ text-align: center;
+ margin-right: 0px;
+ }
+
+ .LoginScreen fieldset.TableLike input {
+ padding: 7px;
+ }
+
+ .LoginScreen .WidgetSimple {
+ background: none;
+ }
+
+ .LoginScreen .WidgetSimple .Header {
+ display: none;
+ }
+
+ .LoginScreen fieldset button.Primary.CallForAction {
+ margin-top: 10px;
+ }
+
+ .LoginScreen fieldset button.Primary.CallForAction span {
+ padding: 10px;
+ font-size: 15px;
+ }
+
+ /* Dialogs */
+ .Dialog > .Content > .ContentFooter button {
+ font-size: 16px;
+ }
+
+ #SearchForm, #AgentCustomerInformationCenterSearchForm, #AgentCustomerUserInformationCenterSearchForm {
+ width: auto;
+ }
+
+ #AgentCustomerInformationCenterSearchForm fieldset.TableLike > .Field > input,
+ #AgentCustomerInformationCenterSearchForm fieldset.TableLike > .Row > .Field > input,
+ #AgentCustomerUserInformationCenterSearchForm fieldset.TableLike > .Field > input,
+ #AgentCustomerUserInformationCenterSearchForm fieldset.TableLike > .Row > .Field > input {
+ width: 100%;
+ }
+
+ /* Ticket zoom */
+ fieldset.TableLike.FixedLabelSmall > .Field,
+ fieldset.TableLike.FixedLabelSmall > .Row > .Field,
+ fieldset.TableLike.FixedLabelSmall > .Value,
+ fieldset.TableLike.FixedLabelSmall > .Row > .Value {
+ margin-left: 0px;
+ font-size: 1.2em;
+ }
+
+ .RTL fieldset.TableLike.FixedLabelSmall > .Field,
+ .RTL fieldset.TableLike.FixedLabelSmall > .Row > .Field,
+ .RTL fieldset.TableLike.FixedLabelSmall > .Value,
+ .RTL fieldset.TableLike.FixedLabelSmall > .Row > .Value {
+ margin-right: 0px;
+ }
+
+ fieldset.TableLike > label,
+ fieldset.TableLike > .Row > label,
+ fieldset.TableLike.FixedLabelSmall > label,
+ fieldset.TableLike.FixedLabelSmall > .Row > label {
+ width: auto;
+ margin-right: 5px;
+ }
+
+ fieldset.TableLike.FixedLabel > label,
+ fieldset.TableLike.FixedLabel > .Row > label {
+ width: auto;
+ min-height: 0px;
+ padding: 0px;
+ }
+
+ div.Headline {
+ height: unset;
+ margin: 5px 0px;
+ position: relative;
+ }
+
+ div.Headline h1 {
+ font-size: 1.3em;
+ line-height: 24px;
+ margin: 0;
+ white-space: normal;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ #ArticleItems .WidgetSimple .Header h2,
+ #ArticleItems .WidgetSimple .Header .AdditionalInformation {
+ float: none;
+ }
+
+ #ArticleTableBody .Scroller {
+ overflow: auto !important;
+ }
+
+ .Scroller + .Handle {
+ display: none;
+ }
+
+ .ArticleMailHeader label,
+ .ArticleMailHeader .Value {
+ padding: 0px !important;
+ }
+
+ .TicketZoom fieldset.TableLike > label,
+ .TicketZoom fieldset.TableLike > .Row > label,
+ .TicketZoom fieldset.TableLike > .Row .FixedValueSmall {
+ float: left;
+ }
+
+ .TicketZoom fieldset.TableLike.FixedLabelSmall > .FixedValueSmall,
+ .TicketZoom fieldset.TableLike.FixedLabelSmall > .Row > .FixedValueSmall {
+ width: auto;
+ }
+
+ .TicketZoom .ResponsiveSidebarContainer .ItemRow {
+ margin: 10px 0px 0px 0px;
+ }
+
+ .ResponsiveSidebarContainer fieldset.Narrow {
+ padding: 0px 10px;
+ }
+
+ .ResponsiveSidebarContainer div.Content {
+ font-size: 0.9em;
+ }
+
+ .ResponsiveSidebarContainer fieldset.TableLike > label,
+ .ResponsiveSidebarContainer fieldset.TableLike > .Row > label,
+ .ResponsiveSidebarContainer fieldset.TableLike.FixedLabelSmall > .Field,
+ .ResponsiveSidebarContainer fieldset.TableLike.FixedLabelSmall > .Row > .Field,
+ .ResponsiveSidebarContainer fieldset.TableLike.FixedLabelSmall > .Value,
+ .ResponsiveSidebarContainer fieldset.TableLike.FixedLabelSmall > .Row > .Value {
+ font-size: 1em;
+ float: none;
+ padding: 0px;
+ margin: 0px;
+ display: inline;
+ }
+
+ .ResponsiveSidebarContainer fieldset.TableLike {
+ margin-bottom: 10px;
+ line-height: 1.7em;
+ }
+
+ .ResponsiveSidebarContainer fieldset.TableLike:empty {
+ display: none;
+ }
+
+ .TicketZoom .Actions form {
+ padding: 0px;
+ display: inline-block;
+ margin-bottom: -4px;
+ }
+
+ .TicketZoom .Actions form select {
+ max-width: 200px;
+ }
+
+ .TicketZoom .Actions li:after {
+ display: inline-block;
+ float: none;
+ }
+
+ .ArticleMailContent.WithMeta .ArticleBody,
+ .ArticleMailContent.WithMeta .ArticleMailContentHTMLWrapper {
+ width: auto;
+ float: none;
+ }
+
+ .ArticleMailContent.WithMeta .ArticleMeta {
+ width: auto;
+ float: none;
+ }
+
+ /* Errors */
+
+ .MainBox.ErrorScreen {
+ margin-top: 15px;
+ }
+
+ .MainBox.ErrorScreen .CenterBox {
+ width: auto;
+ margin-bottom: 15px;
+ }
+
+ /* Preferences */
+
+ .PreferencesScreen .LayoutGrid > .Size1of3 {
+ width: auto;
+ float: none;
+ }
+
+ .PreferencesScreen .LayoutGrid.ColumnsWithSpacing > div > div {
+ margin-left: 0px;
+ margin-right: 0px;
+ }
+
+ .PreferencesScreen .Size1of3 > .WidgetSimple > .Header {
+ background: #E8E8E8;
+ border-bottom: 0px;
+ margin: 10px 0px 0px 0px;
+ padding: 5px 0px;
+ }
+
+ .PreferencesScreen .FieldExplanation {
+ text-align: center;
+ }
+
+ .PreferencesScreen .Content form label {
+ width: auto;
+ display: block;
+ }
+
+ .PreferencesScreen .Content form .OutOfOffice label {
+ width: auto;
+ display: inline;
+ }
+
+ .PreferencesScreen .Content form .OutOfOffice .Field,
+ .PreferencesScreen .Content form .Field {
+ margin-left: 0px;
+ }
+
+ .PreferencesScreen fieldset.TableLike > .Row > .Field > input[type=radio] {
+ width: auto;
+ }
+
+ .PreferencesScreen .Content form .Field.NoMargin select[multiple="multiple"] {
+ height: auto;
+ }
+
+ .PreferencesScreen .WidgetSimple .Content form table.DataTable {
+ min-width: 0px;
+ }
+
+ .PreferencesScreen .Size1of3 > .WidgetSimple > .Header .WidgetAction {
+ display: block;
+ }
+
+ .PreferencesScreen fieldset.TableLike > label,
+ .PreferencesScreen fieldset.TableLike > .Row > label {
+ font-size: 0.9em;
+ line-height: 150%;
+ }
+
+ /* Admin Screen */
+
+ .Admin > h1 {
+ display: none;
+ }
+
+ .Admin > #Row1 {
+ margin-top: 15px;
+ }
+
+ .Admin .LayoutGrid > .Size1of3 {
+ width: auto;
+ float: none;
+ }
+
+ .Admin .LayoutGrid > .Size1of2 {
+ width: auto;
+ float: none;
+ }
+
+ .Admin #Row1.LayoutGrid .WidgetSimple,
+ .Admin #Row2.LayoutGrid .WidgetSimple {
+ min-height: 0px;
+ margin: 0px 0px 15px 0px !important;
+ font-size: 0.9em;
+ }
+
+ .Admin .WidgetSimple > .Content {
+ padding: 0px !important;
+ }
+
+ .Admin .WidgetSimple > .Content li {
+ border-top: 1px solid #ccc;
+ padding: 5px 10px;
+ }
+
+ .Admin .WidgetSimple > .Content li:first-child,
+ .Admin .WidgetSimple > .Content li.Clear {
+ border-top: 0px;
+ }
+
+ .Admin .WidgetSimple > .Content li.Clear {
+ padding: 0px;
+ }
+
+ /*
+ * @subsection Ticket Overview Large
+ */
+
+ ul.OverviewZoom {
+ text-align: center;
+ float: none;
+ display: block;
+ }
+
+ .OverviewLarge .Infos {
+ width: 100%;
+ float: none;
+ margin-bottom: 20px;
+ }
+
+ .OverviewLarge .Preview {
+ width: 100%;
+ float: none;
+ }
+
+ .OverviewLarge div.Infos table td {
+ border: none;
+ padding-left: 0px;
+ width: 100%;
+ }
+
+ .OverviewLarge .Infos table tr.Middle {
+ border: none;
+ }
+
+ .OverviewLarge .Infos table tr.Middle td {
+ padding-top: 0px;
+ }
+
+ .OverviewLarge .Infos {
+ margin-top: 0px !important;
+ }
+
+ .OverviewLarge div.Checkbox {
+ top: -2px;
+ left: 0px;
+ }
+
+ .OverviewLarge div.Flag {
+ top: 8px;
+ left: 35px;
+ }
+
+ .OverviewLarge div.UnreadArticles {
+ top: 11px;
+ left: 60px;
+ }
+
+ .OverviewLarge h2 {
+ width: 100%;
+ margin-left: 5px;
+ }
+
+ .OverviewLarge .Infos table {
+ width: 100%;
+ margin-left: 5px;
+ }
+
+ .OverviewLarge h2 {
+ height: auto;
+ font-size: 18px;
+ line-height: 22px;
+ }
+
+ .OverviewLarge .Preview h3 {
+ font-size: 14px;
+ }
+
+ .OverviewLarge .Preview h3 a {
+ height: auto;
+ min-height: 20px;
+ line-height: 20px;
+ }
+
+ /*
+ * @subsection Ticket Overview Medium
+ */
+ .OverviewMedium h2 {
+ height: auto;
+ font-size: 18px;
+ line-height: 22px;
+ }
+
+ .OverviewMedium div.Checkbox {
+ top: -2px;
+ left: 0px;
+ }
+
+ .OverviewMedium div.Flag {
+ top: 8px;
+ left: 35px;
+ }
+
+ .OverviewMedium div.UnreadArticles {
+ top: 11px;
+ left: 60px;
+ }
+
+ .OverviewMedium h2 {
+ margin-left: 5px;
+ margin-top: 15px;
+ }
+
+ .OverviewMedium table.Infos {
+ margin-top: 0px;
+ margin-left: 5px;
+ }
+
+ /* Popups */
+
+ .LayoutPopup fieldset.TableLike.FixedLabel > label,
+ .LayoutPopup fieldset.TableLike.FixedLabel > .Row > label {
+ width: auto;
+ }
+
+ .LayoutPopup > .Header h1 {
+ white-space: normal;
+ }
+
+ .LayoutPopup fieldset.TableLike.FixedLabel > .Field,
+ .LayoutPopup fieldset.TableLike.FixedLabel > .Row > .Field,
+ .LayoutPopup fieldset.TableLike.FixedLabel > .Value,
+ .LayoutPopup fieldset.TableLike.FixedLabel > .Row > .Value {
+ margin-left: 0px;
+ padding-left: 0px;
+ }
+
+ .LayoutPopup fieldset.TableLike > .Field > select,
+ .LayoutPopup fieldset.TableLike > .Row > .Field > select {
+ width: auto;
+ }
+
+ /* Statistics */
+
+ .WidgetSimple .PreviewContainer .CallForAction {
+ position: static;
+ margin-top: 0px;
+ display: inline-block;
+ }
+
+ .PreviewContainer {
+ text-align: center;
+ }
+
+ .PreviewContainer .Preview {
+ width: auto;
+ }
+
+ fieldset > legend > span {
+ padding-left: 0px;
+ }
+
+ fieldset.TableLike > .Value,
+ fieldset.TableLike > .Row > .Value {
+ margin-left: 0px;
+ }
+
+ /* Process dialogs */
+
+ #ActivityDialogContent .LayoutPopup > .Content {
+ padding: 0px;
+ border-top: 1px solid #ccc;
+ }
+
+ /* Cluster */
+
+ .Cluster .ClusterLink {
+ display: none;
+ }
+
+ .Cluster ul ul {
+ opacity: 100;
+ visibility: visible;
+ display: inline;
+ position: static;
+ height: auto;
+ background: none;
+ box-shadow: none;
+ min-width: 0px;
+ }
+
+ .Cluster ul.Actions {
+ margin-right: 35px;
+ }
+
+ .Cluster ul ul li {
+ display: inline-block;
+ border: 0px;
+ }
+
+ .Cluster ul ul li a {
+ display: inline-block;
+ padding: 5px 2px !important;
+ }
+
+ .Cluster ul ul li:after {
+ display: inline-block !important;
+ margin: 0px;
+ }
+
+ .Cluster ul ul li a:hover {
+ background: none;
+ border-bottom: 2px solid #ff9922;
+ padding-bottom: 0px !important;
+ }
+
+ .Cluster .WidgetAction.ArticleView {
+ z-index: 100;
+ background: #f5f5f5;
+ background: #f5f5f5;
+ width: 35px;
+ text-align: center;
+ margin: 0px !important;
+ right: 0px;
+ top: 0px;
+ line-height: 35px;
+ height: 35px;
+ }
+
+ /* Input Fields */
+
+ div.InputField_Container {
+ width: 90%;
+ margin-right: 10px;
+ }
+
+ div.InputField_InputContainer {
+ width: 100%;
+ }
+
+ div.InputField_InputContainer input.InputField_Search {
+ padding: 3px;
+ font-size: 0.9em;
+ width: 100% !important;
+ }
+
+ div.InputField_ListContainer {
+ margin-top: -1px;
+ }
+
+ div.InputField_Selection {
+ height: 1.4em;
+ line-height: 0.8em;
+ }
+
+ div.InputField_Selection div,
+ div.InputField_FiltersList,
+ div.InputField_ToolbarContainer ul li a {
+ font-size: 0.8em;
+ }
+
+ div.InputField_More {
+ top: 8px;
+ }
+
+ div.InputField_FiltersList span {
+ vertical-align: 10%;
+ }
+
+ .jstree-InputField {
+ font-size: 0.9em;
+ }
+
+ div.InputField_TreeContainer {
+ max-height: 103px;
+ line-height: 1.4em;
+ }
+
+ .jstree-InputField-Tree .jstree-node,
+ .jstree-InputField-Tree .jstree-anchor,
+ .jstree-InputField-NoTree .jstree-node,
+ .jstree-InputField-NoTree .jstree-anchor,
+ .jstree-InputField-Tree .jstree-icon:empty {
+ line-height: 1.4em;
+ }
+
+ .jstree-InputField-Tree .jstree-wholerow,
+ .jstree-InputField-NoTree .jstree-wholerow {
+ line-height: 1.4em;
+ height: 1.5em;
+ }
+
+ /* Breadcrumb */
+
+ .BreadCrumb {
+ overflow-x: auto;
+ }
+
+ .BreadCrumb li,
+ .BreadCrumb a {
+ font-size: 12px;
+ max-width: none;
+ white-space: nowrap;
+ }
+
+ .BreadCrumb li:before,
+ .BreadCrumb li:after {
+ top: 50%;
+ border-width: 22px;
+ margin-top: -22px;
+ }
+
+
+ #OverviewBody.Overview.TicketList {
+ overflow-y:auto;
+ }
+
+
+}
+
+/* ~ Tablet landscape */
+@media only screen and (min-width: 768px) and (max-width: 1024px) {
+ /*
+ * @subsection Responsive classes
+ */
+ .ScreenL {
+ display: block !important;
+ }
+
+ .SmallerOrEqualScreenL, .SmallerOrEqualScreenM,
+ .SmallerOrEqualScreenS, .SmallerOrEqualScreenXS {
+ display: block !important;
+ }
+
+ .ScreenXL, .ScreenM, .ScreenS, .ScreenXS,
+ .SmallerOrEqualScreenXL {
+ display: none !important;
+ }
+
+ /*
+ * @subsection Responsive classes
+ * @description Special treatment of screen sizes in real popup
+ */
+ .RealPopup .ScreenXL {
+ display: block !important;
+ }
+
+ .RealPopup .ScreenL,
+ .RealPopup .SmallerOrEqualScreenL,
+ .RealPopup .SmallerOrEqualScreenM,
+ .RealPopup .SmallerOrEqualScreenS,
+ .RealPopup .SmallerOrEqualScreenXS {
+ display: none !important;
+ }
+
+ /*
+ * @subsection Responsive footer classes
+ * @description Used to determinethe active screen size in JavaScript
+ */
+ #ResponsiveFooter .Visible-ScreenL {
+ display: block;
+ }
+
+ #ResponsiveFooter .Visible-ScreenXL,
+ #ResponsiveFooter .Visible-ScreenM,
+ #ResponsiveFooter .Visible-ScreenS,
+ #ResponsiveFooter .Visible-ScreenXS {
+ display: none;
+ }
+}
+
+/* All devices smaller than tablet landscape */
+@media only screen and (min-width: 0px) and (max-width: 767px) {
+
+ .MainBox > h1 {
+ font-size: 20px;
+ font-weight: normal;
+ text-align: center;
+ }
+
+ .AllocationListContainer.LayoutGrid > div.Size1of2 {
+ float: none;
+ width: 100%;
+ margin-bottom: 15px;
+ }
+
+ .OverviewLarge div.Infos table td {
+ display: block;
+ }
+
+ .OverviewLarge > li ul.InlineActions {
+ display: none;
+ }
+
+ .OverviewMedium > li ul.InlineActions {
+ display: none;
+ }
+
+ .OverviewMedium table.Infos td {
+ display: block;
+ width: 100%;
+ border: none;
+ padding-left: 0px !important;
+ padding-bottom: 10px !important;
+ }
+
+}
+
+/* ~ Tablet portrait */
+@media only screen and (min-width: 480px) and (max-width: 767px) {
+ /*
+ * @subsection Responsive classes
+ */
+ .ScreenM {
+ display: block !important;
+ }
+
+ .SmallerOrEqualScreenM, .SmallerOrEqualScreenS, .SmallerOrEqualScreenXS {
+ display: block !important;
+ }
+
+ .ScreenXL, .ScreenL, .ScreenS, .ScreenXS,
+ .SmallerOrEqualScreenS, .SmallerOrEqualScreenXS {
+ display: none !important;
+ }
+
+ /*
+ * @subsection Responsive classes
+ * @description Special treatment of screen sizes in real popup
+ */
+ .RealPopup .ScreenXL {
+ display: block;
+ }
+
+ .RealPopup .ScreenM,
+ .RealPopup .SmallerOrEqualScreenXL,
+ .RealPopup .SmallerOrEqualScreenL,
+ .RealPopup .SmallerOrEqualScreenM,
+ .RealPopup .SmallerOrEqualScreenS,
+ .RealPopup .SmallerOrEqualScreenXS {
+ display: none;
+ }
+
+ /*
+ * @subsection Responsive footer classes
+ * @description Used to determinethe active screen size in JavaScript
+ */
+ #ResponsiveFooter .Visible-ScreenM {
+ display: block;
+ }
+
+ #ResponsiveFooter .Visible-ScreenXL,
+ #ResponsiveFooter .Visible-ScreenL,
+ #ResponsiveFooter .Visible-ScreenS,
+ #ResponsiveFooter .Visible-ScreenXS {
+ display: none;
+ }
+}
+
+/* ~ Smartphone landscape */
+@media only screen and (min-width: 320px) and (max-width: 479px) {
+ /*
+ * @subsection Responsive classes
+ */
+ .LoginBox, #PasswordBox {
+ width: 320px;
+ }
+
+ .ScreenS {
+ display: block !important;
+ }
+
+ .SmallerOrEqualScreenS, .SmallerOrEqualScreenXS {
+ display: block !important;
+ }
+
+ .ScreenXL, .ScreenL, .ScreenM, .ScreenXS,
+ .SmallerOrEqualScreenXS {
+ display: none !important;
+ }
+
+ /*
+ * @subsection Responsive classes
+ * @description Special treatment of screen sizes in real popup
+ */
+ .RealPopup .ScreenXL {
+ display: block;
+ }
+
+ .RealPopup .ScreenS,
+ .RealPopup .SmallerOrEqualScreenXL,
+ .RealPopup .SmallerOrEqualScreenL,
+ .RealPopup .SmallerOrEqualScreenM,
+ .RealPopup .SmallerOrEqualScreenS,
+ .RealPopup .SmallerOrEqualScreenXS {
+ display: none;
+ }
+
+ /*
+ * @subsection Responsive footer classes
+ * @description Used to determinethe active screen size in JavaScript
+ */
+ #ResponsiveFooter .Visible-ScreenS {
+ display: block;
+ }
+
+ #ResponsiveFooter .Visible-ScreenXL,
+ #ResponsiveFooter .Visible-ScreenL,
+ #ResponsiveFooter .Visible-ScreenM,
+ #ResponsiveFooter .Visible-ScreenXS {
+ display: none;
+ }
+}
+
+/* ~ Smartphone portrait */
+@media only screen and (max-width: 319px) {
+ /*
+ * @subsection Responsive classes
+ */
+ .ScreenXS {
+ display: block !important;
+ }
+
+ .SmallerOrEqualScreenXS {
+ display: block !important;
+ }
+
+ .ScreenXL, .ScreenL, .ScreenM, .ScreenS {
+ display: none !important;
+ }
+
+ /*
+ * @subsection Responsive classes
+ * @description Special treatment of screen sizes in real popup
+ */
+ .RealPopup .ScreenXL {
+ display: block;
+ }
+
+ .RealPopup .ScreenXS,
+ .RealPopup .SmallerOrEqualScreenXL,
+ .RealPopup .SmallerOrEqualScreenL,
+ .RealPopup .SmallerOrEqualScreenM,
+ .RealPopup .SmallerOrEqualScreenS,
+ .RealPopup .SmallerOrEqualScreenXS {
+ display: none;
+ }
+
+ /*
+ * @subsection Responsive footer classes
+ * @description Used to determinethe active screen size in JavaScript
+ */
+ #ResponsiveFooter .Visible-ScreenXS {
+ display: block;
+ }
+
+ #ResponsiveFooter .Visible-ScreenXL,
+ #ResponsiveFooter .Visible-ScreenL,
+ #ResponsiveFooter .Visible-ScreenM,
+ #ResponsiveFooter .Visible-ScreenS {
+ display: none;
+ }
+}
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Table.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Table.css
new file mode 100644
index 0000000000..6458135ee1
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Table.css
@@ -0,0 +1,931 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section Tables
+ */
+
+@media screen,projection,tv,handheld {
+
+/**
+ * @subsection General stuff
+ */
+
+/*
+ * FF3.6 has a problem with setting the position:relative only on :hover state.
+ * As a workaround it is set always and a special z-index on hover.
+ */
+.DataTable tbody tr,
+.TableSmall tbody tr {
+ position: relative;
+}
+
+.DataTable tbody tr:hover,
+.TableSmall tbody tr:hover {
+ z-index: 10;
+}
+
+.DataTable tbody td:last-child,
+.TableSmall tbody td:last-child {
+ border-right: none;
+}
+
+.DataTable tbody tr:hover td,
+.TableSmall tbody tr:hover td,
+.DataTable tbody tr:active td.Clickable,
+.TableSmall tbody tr:active td.Clickable,
+.DataTable tr:nth-child(even):hover td.Highlight {
+/* background: #f5af36;*/
+ background: #33321f;
+}
+
+/**
+ * @subsection Generic table elements
+ */
+tbody tr.UnreadArticles td {
+ font-weight: bold !important;
+}
+
+.DataTable td,
+.TableSmall td {
+ line-height: 15px;
+ vertical-align: middle;
+}
+
+.DataTable tr:hover,
+.TableSmall tr:hover {
+ color: #c8c6c4;
+}
+
+table tr.MasterAction {
+ cursor: pointer;
+}
+
+/**
+ * @subsection Standard DataTable
+ */
+.DataTable {
+ width: 100%;
+ background-color: #1f1f1f;
+ border: 1px solid #272727;
+ clear: both;
+ border-collapse: separate;
+}
+
+.DataTable.FixedLayout {
+ table-layout: fixed;
+}
+
+.DataTable.VariableWidth {
+ width: auto;
+}
+
+.DataTable thead {
+ background: #333;
+}
+
+.DataTable thead th {
+ padding: 4px 10px 3px;
+ color: #dbd9d7;
+ font-size: 11px;
+ text-transform: uppercase;
+ background: #333;
+ border-bottom: 1px solid #333;
+ border-right: 1px dotted #333;
+ vertical-align: bottom;
+ white-space: nowrap;
+}
+
+.DataTable thead th.UnreadArticles {
+ padding: 4px 0px 3px 0px;
+ text-align: center;
+}
+
+.RTL .DataTable thead th {
+ border-left: 1px solid #333;
+ border-right:none;
+}
+
+.DataTable thead th label {
+ color: #4B4B4B !important;
+}
+
+.DataTable thead th:last-child {
+ border-right: none;
+}
+
+.RTL .DataTable thead th:last-child {
+ border-left: none;
+}
+
+.DataTable thead th a {
+ background-image: none;
+ color: #dbd9d7;
+ font-size: 11px;
+ height: 12px;
+ line-height: 12px;
+ display: block;
+}
+
+.DataTable thead .SortAscending a,
+.DataTable thead .SortDescending a {
+ color: #c8c6c4;
+ padding-right: 15px;
+ background: #333;
+}
+
+.DataTable thead .SortDescending > a:after,
+.TableSmall thead .SortDescending > a:after {
+ content: "\25BC";
+ display: block;
+ position: absolute;
+ left: 2px;
+ top: 3px;
+}
+
+.DataTable thead .SortAscending > a:after,
+.TableSmall thead .SortAscending > a:after {
+ content: "\25B2";
+ display: block;
+ position: absolute;
+ left: 2px;
+ top: 3px;
+}
+
+.DataTable tbody tr.Invalid {
+ color: #555;
+}
+
+.DataTable tbody td {
+ padding: 0 10px;
+ border-right: 1px dotted #333;
+}
+
+.DataTable.FixedLayout tbody td a.AsBlock {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+.DataTable tbody td.UnreadArticles {
+ padding: 0px;
+}
+
+.RTL .DataTable tbody td {
+ border-left: 1px dotted #333;
+ border-right: none;
+}
+
+.DataTable tbody tr:hover td {
+ border-right-color: #1f1f1f;
+}
+
+.DataTable tbody td:last-child {
+ border-right: none;
+}
+
+.RTL .DataTable tbody td:last-child {
+ border-left: none;
+}
+
+.DataTable tr td {
+ line-height: 20px;
+}
+
+.DataTable tr:first td {
+ border-top: 1px solid #333;
+}
+
+.DataTable tr td.Highlight {
+ background-color: #333;
+}
+
+.DataTable tr:nth-child(even) td {
+ background-color: #242424;
+}
+
+.DataTable tr:nth-child(even) td.Highlight {
+ background-color: #242424;
+}
+
+.DataTable tr td.Highlight {
+ border-right: 1px solid #333;
+}
+
+.DataTable tr td.Highlight:last-child {
+ border-right: none;
+}
+
+.DataTable tr:hover td a {
+ color: #82c7ff;
+}
+
+.DataTable td:first-child input {
+ margin: 0;
+}
+
+
+/**
+ * @subsection QueueOverviewTotals DataTable
+ */
+
+.DataTable thead th.QueueOverviewTotals,
+.Row td.QueueOverviewTotals,
+.Row a.QueueOverviewTotals {
+ font-weight: bold;
+}
+
+.DataTable .Row td.QueueOverviewTotals {
+ text-transform: uppercase;
+ color: #aaa;
+ border-top: 1px dotted #333;
+}
+
+/**
+ * @subsection Sortable DataTable
+ */
+
+.Sortable.DataTable th {
+ padding: 0;
+}
+
+.Sortable.DataTable th a,
+.Sortable.DataTable th span {
+ padding: 4px 10px 3px;
+ display: block;
+ position: relative;
+}
+
+.Sortable.DataTable th.SortAscending a,
+.Sortable.DataTable th.SortDescending a {
+ padding-left: 15px;
+}
+
+.Sortable.DataTable .SortAscending,
+.Sortable.DataTable .SortDescending {
+ border-top-color: #333;
+ border-right-color: #333;
+ border-bottom-color: #333;
+}
+
+/**
+ * @subsection Overview Small View Table
+ */
+.TableSmall {
+ width: 100%;
+ font-size: 12px;
+ color: #c8c6c4;
+ border-top: 1px solid #333;
+ border-bottom: 1px solid #333;
+ background: #1f1f1f;
+}
+
+.TableSmall thead {
+ border-bottom: none;
+}
+
+.TableSmall .Checkbox {
+ margin-left: 7px;
+}
+
+th.Checkbox,
+td.Checkbox {
+ width: 30px;
+}
+
+th.Flags {
+ width: 34px;
+}
+
+td.Flags {
+ width: 29px;
+}
+
+th.UnreadArticles,
+td.UnreadArticles {
+ width: 30px;
+}
+
+th.Direction,
+td.Direction {
+ width: 30px;
+ text-align: center;
+}
+
+th.Attachment,
+td.Attachment {
+ width: 40px;
+ padding-left: 5px !important;
+}
+
+.TableSmall thead th {
+ border-right: 1px solid #333;
+ border-bottom: 1px solid #333;
+ vertical-align: bottom;
+ background: #333;
+}
+
+.TableSmall thead th:last-child {
+ border-right: 0px;
+}
+
+.TableSmall thead th a {
+ padding-top: 2px;
+ padding-bottom: 2px;
+}
+
+.RTL .TableSmall thead th {
+ background-position: left bottom;
+}
+
+.TableSmall thead a,
+.TableSmall thead span {
+ margin: 0 2px 1px 1px;
+ padding: 0 10px;
+ color: #dbd9d7;
+ font-size: 11px;
+ line-height: 15px;
+ height: 15px;
+ text-transform: uppercase;
+ display: block;
+ white-space: nowrap;
+}
+
+.RTL .TableSmall thead a,
+.RTL .TableSmall thead span {
+ margin: 0 1px 1px 2px;
+}
+
+.TableSmall thead span {
+ color: #c8c6c4;
+}
+
+.TableSmall thead .UnreadArticles a {
+ padding: 0 0 0 5px;
+}
+
+.RTL .TableSmall thead .UnreadArticles a {
+ padding: 0 5px 0 0;
+}
+
+.TableSmall thead span.UnreadArticles a i {
+ font-size: 12px;
+}
+
+.TableSmall thead span.UnreadArticles i:first-child {
+ font-size: 16px !important;
+}
+
+thead .SortAscending a,
+thead .headerSortUp a,
+thead .SortDescending a,
+thead .headerSortDown a {
+ color: #c8c6c4;
+}
+
+.TableSmall thead a span,
+.DataTable thead a span {
+ height: 15px;
+ width: 16px;
+ display: block;
+ text-align: center;
+}
+
+.TableSmall thead a span.Flag {
+ height: 9px;
+ width: 16px;
+ background-color: #999;
+ margin-top: 6px;
+}
+
+.TableSmall td {
+ padding: 0 10px;
+ background-color: #242424;
+ border-right: 1px dotted #272727;
+}
+
+.RTL .TableSmall td {
+ border-right:none;
+ border-left: 1px dotted #272727;
+}
+
+.TableSmall td.NonTextContent {
+ padding-left: 0;
+ padding-right: 0;
+}
+
+.TableSmall tbody tr.Active td,
+.DataTable tbody tr.Active td {
+ color: #c8c6c4;
+}
+
+.DataTable tbody tr.Active td {
+ background-color: #272727;
+}
+
+.TableSmall tbody tr td:last-child {
+ border-right: 1px solid transparent;
+}
+
+.RTL .TableSmall tbody tr td:last-child {
+ border-left: none;
+}
+
+.TableSmall tbody tr.Active td:last-child {
+ border-right: 1px solid #000;
+}
+
+.RTL .TableSmall tbody tr td:first-child {
+ border-left: 1px dotted #272727;
+}
+
+.TableSmall tbody tr.Active td:first-child {
+ border-left: 1px solid #000;
+}
+
+.TableSmall td a {
+ color: #c8c6c4;
+}
+
+.TableSmall tr:hover td a,
+.TableSmall tr.Active td a {
+ color: #c8c6c4;
+}
+
+.TableSmall td a.DynamicFieldLink {
+ color: #FF7722;
+}
+
+.TableSmall tr:hover td a.DynamicFieldLink,
+.TableSmall tr.Active td a.DynamicFieldLink {
+ color: #1f1f1f;
+}
+
+.TableSmall tr:nth-child(even) td {
+ background-color: #1f1f1f;
+}
+
+.TableSmall td:first-child {
+ padding-top: 1px;
+}
+
+.TableSmall tbody .Flags {
+ line-height: 11px;
+ padding-top: 2px;
+ padding-left: 5px;
+}
+
+.TableSmall tbody td span.Direction,
+.DataTable tbody td span.Direction {
+ text-align: center;
+ display: block;
+ position: relative;
+ font-size: 14px;
+ width: 30px;
+}
+
+.TableSmall tbody td span.Direction i,
+.DataTable tbody td span.Direction i {
+ color: #555;
+}
+
+.TableSmall tbody td span.Direction.Incoming .fa-long-arrow-left,
+.DataTable tbody td span.Direction.Incoming .fa-long-arrow-left,
+.TableSmall tbody td span.Direction.Outgoing .fa-long-arrow-right,
+.DataTable tbody td span.Direction.Outgoing .fa-long-arrow-right {
+ color: #c8c6c4;
+ font-size: 12px;
+}
+
+.TableSmall tbody td.Attachment,
+.DataTable tbody td.Attachment {
+ text-align: center;
+}
+
+.TableSmall tbody td a.Attachment,
+.DataTable tbody td a.Attachment {
+ cursor: pointer;
+ font-size: 16px;
+ font-weight: normal;
+ text-align: center;
+}
+
+.TableSmall tbody td a.Attachment i,
+.DataTable tbody td a.Attachment i {
+ color: #c8c6c4;
+}
+
+.TableSmall td h2 {
+ font-size: 12px;
+ margin-bottom: 0;
+}
+
+/**
+ * @subsection Table Context Settings
+ */
+.TableContextSettings {
+ position: absolute;
+ right: 0;
+ top: 28px;
+}
+
+.TableContextSettings a {
+ display: block;
+ width: 18px;
+ height: 19px;
+ background: url(../img/contextsettings.png) no-repeat 5px 4px;
+ text-indent: -9999px;
+}
+
+/**
+ * @subsection Ticket List Tables
+ */
+
+.TicketList {
+ overflow: auto;
+}
+
+.TicketList table {
+ border-collapse: separate;
+ position: relative;
+ overflow: hidden;
+}
+
+.TicketList td {
+ line-height: 18px;
+}
+
+.TicketList td.From div,
+.TicketList td.Subject div,
+.TicketList td.Created a {
+ height: 20px;
+ overflow: hidden;
+ display: block;
+}
+
+.TicketList .No {
+ width: 30px;
+ text-align: center;
+}
+
+.TicketList .Attachments {
+ width: 20px;
+}
+
+#ArticleTable thead {
+ background: #f0f0f0;
+ background: -moz-linear-gradient(top, #f0f0f0 0%, #272727 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#272727));
+ background: -webkit-linear-gradient(top, #f0f0f0 0%,#272727 100%);
+ background: -o-linear-gradient(top, #f0f0f0 0%,#272727 100%);
+ background: -ms-linear-gradient(top, #f0f0f0 0%,#272727 100%);
+ background: linear-gradient(to bottom, #f0f0f0 0%,#272727 100%);
+}
+
+#OverviewBody.Overview.TicketList {
+ overflow-x: auto;
+}
+
+#OverviewBody.Overview.TicketList table.TableSmall.NoCellspacing {
+ overflow: visible;
+}
+
+/**
+ * @subsection Handle for resizing tables
+ */
+.Handle {
+ width: 100%;
+}
+
+.Handle a {
+ display: block;
+ margin: auto;
+ height: 14px;
+ width: 79px;
+ background: transparent url(../img/handle.png) no-repeat;
+ text-indent: -9999px;
+ cursor: ns-resize;
+}
+
+.Handle.ui-resizable-s {
+ cursor:auto;
+ height:auto !important;
+ left:auto;
+}
+
+.Handle.ui-resizable-handle {
+ display: block;
+ font-size: inherit;
+ z-index: 19;
+}
+
+
+
+/**
+ * @subsection Table headers-filters
+ */
+ .TableSmall thead span.Gray {
+ color: #dbd9d7;
+ padding-bottom: 2px;
+}
+
+.DataTable .ColumnFilter {
+ width: 80%;
+ text-transform: none;
+ float: left;
+}
+
+.ColumnFilter + .AJAXLoader {
+ float: right;
+ margin: 3px 0px 0px 2px;
+ background-color: #333;
+ position: relative;
+ z-index: 99;
+ text-align: center;
+}
+
+select.ColumnFilter {
+ width: 100px;
+}
+
+.DataTable thead .SortAscendingLarge a,
+.DataTable thead .SortDescendingLarge a,
+.TableSmall thead .SortAscendingLarge a,
+.TableSmall thead .SortDescendingLarge a {
+ color: #c8c6c4;
+ height: 16px;
+ font-weight: bold;
+ position: relative;
+}
+
+.DataTable thead .SortDescendingLarge > a:after,
+.TableSmall thead .SortDescendingLarge > a:after {
+ content: "\25BC";
+ position: absolute;
+ left: -6px;
+ text-shadow: 1px 1px 0px #1f1f1f;
+ z-index: 1;
+}
+
+thead .headerSortUp > a:before,
+thead .tablesorter-headerDesc > div.tablesorter-header-inner > a:before {
+ content: "\25BC";
+ display: inline-block;
+ margin-right: 2px;
+}
+
+thead .headerSortDown > a:before,
+thead .tablesorter-headerAsc > div.tablesorter-header-inner > a:before {
+ content: "\25B2";
+ display: inline-block;
+ margin-right: 2px;
+}
+
+.DataTable thead .SortAscendingLarge > a:after,
+.TableSmall thead .SortAscendingLarge > a:after {
+ content: "\25B2";
+ position: absolute;
+ left: -6px;
+ text-shadow: 1px 1px 0px #1f1f1f;
+ z-index: 1;
+}
+
+.DataTable thead th.DashboardHeader a,
+.TableSmall thead th.OverviewHeader a,
+.DataTable thead th.DashboardHeader span.Gray {
+ height: 16px;
+ line-height: 16px;
+ padding-left: 5px;
+}
+
+.DataTable thead th.DashboardHeader .ColumnSettingsTrigger,
+.TableSmall thead th.OverviewHeader .ColumnSettingsTrigger {
+ display: block;
+ width: 17px;
+ height: 17px;
+ float: right;
+ opacity: 0.5;
+ padding: 0px;
+ margin: 0px -19px 0px 0px;
+ position: relative;
+ z-index: 2;
+}
+
+.DataTable thead th.DashboardHeader .ColumnSettingsTrigger i,
+.TableSmall thead th.OverviewHeader .ColumnSettingsTrigger i {
+ color: #777777;
+ margin-left: 4px;
+ vertical-align: middle;
+}
+
+.TableSmall thead th.OverviewHeader .ColumnSettingsTrigger {
+ margin: 2px -18px 0px 0px;
+}
+
+.DataTable thead th.DashboardHeader.FilterActive .ColumnSettingsTrigger,
+.DataTable thead th.DashboardHeader .ColumnSettingsTrigger:hover,
+.DataTable thead th.DashboardHeader .ColumnSettingsTrigger.Active,
+.TableSmall thead th.OverviewHeader.FilterActive .ColumnSettingsTrigger,
+.TableSmall thead th.OverviewHeader .ColumnSettingsTrigger:hover,
+.TableSmall thead th.OverviewHeader .ColumnSettingsTrigger.Active {
+
+ border-radius: 2px;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ opacity: 1.0;
+ box-shadow: 1px 1px 1px #a9a9a9 inset, -1px -1px 1px #a9a9a9 inset;
+}
+
+.DataTable thead th.DashboardHeader.FilterActive .ColumnSettingsTrigger i,
+.DataTable thead th.DashboardHeader .ColumnSettingsTrigger.Active i,
+.TableSmall thead th.OverviewHeader.FilterActive .ColumnSettingsTrigger i,
+.TableSmall thead th.OverviewHeader .ColumnSettingsTrigger.Active i {
+
+ color: #c8c6c4;
+}
+
+.DataTable thead th.DashboardHeader .ColumnSettingsTrigger:after,
+.TableSmall thead th.OverviewHeader .ColumnSettingsTrigger:after {
+ content: "";
+}
+
+.DataTable thead th.DashboardHeader .ColumnSettingsContainer,
+.TableSmall thead th.OverviewHeader .ColumnSettingsContainer {
+ position: relative;
+}
+
+.DataTable thead th.DashboardHeader .ColumnSettingsBox,
+.TableSmall thead th.OverviewHeader .ColumnSettingsBox {
+ background-color: #272727;
+ border: 1px solid #272727;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ box-shadow: 1px 1px 3px #333333, -1px -1px 3px #333333;
+ display: none;
+ padding: 4px;
+ position: absolute;
+ right: 0px;
+ top: 2px;
+ width: 180px;
+ z-index: 100;
+}
+
+.MainBox.Dashboard .DataTable thead th.DashboardHeader .ColumnSettingsBox,
+.MainBox.Dashboard .TableSmall thead th.OverviewHeader .ColumnSettingsBox {
+ top: -10px;
+}
+
+.DataTable thead th.DashboardHeader .ColumnSettingsBox select,
+.TableSmall thead th.OverviewHeader .ColumnSettingsBox select {
+ margin-top: 0px;
+}
+
+.DataTable thead th.DashboardHeader .ColumnSettingsBox span.SelectedValue,
+.TableSmall thead th.OverviewHeader .ColumnSettingsBox span.SelectedValue {
+ display: block;
+ text-transform: none;
+ margin-bottom: 8px;
+ position: relative;
+ padding: 4px;
+ border: 1px solid #333;
+}
+
+.DataTable thead th.DashboardHeader .ColumnSettingsBox span.SelectedValue span,
+.TableSmall thead th.OverviewHeader .ColumnSettingsBox span.SelectedValue span {
+ display: block;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ overflow: hidden;
+}
+
+.DataTable thead th.DashboardHeader .ColumnSettingsBox span.SelectedValue a,
+.TableSmall thead th.OverviewHeader .ColumnSettingsBox span.SelectedValue a {
+ background: #272727;
+ border-radius: 14px;
+ color: #1f1f1f;
+ display: block;
+ font-size: 10px;
+ height: 15px;
+ line-height: 13px;
+ left: 0;
+ position: absolute;
+ text-align: left;
+ top: -1px;
+ width: 10px;
+ padding: 0px 0px 0px 5px;
+}
+
+.DataTable thead th.DashboardHeader .ColumnSettingsBox a.DeleteFilter,
+.TableSmall thead th.OverviewHeader .ColumnSettingsBox a.DeleteFilter {
+ display: inline-block;
+ font-size: 13px;
+ line-height: 12px;
+}
+
+.DataTable thead th.DashboardHeader .ColumnSettingsBox a.DeleteFilter.Hidden,
+.TableSmall thead th.OverviewHeader .ColumnSettingsBox a.DeleteFilter.Hidden {
+ display: none;
+}
+
+.DataTable thead th.DashboardHeader .ColumnSettingsBox span.SelectedValue a:hover,
+.TableSmall thead th.OverviewHeader .ColumnSettingsBox span.SelectedValue a:hover {
+ background: #888;
+}
+
+.DataTable thead th.OverviewHeader .ColumnSettingsBox input[type="text"] ,
+.TableSmall thead th.OverviewHeader .ColumnSettingsBox input[type="text"] {
+ width: 100px;
+}
+
+
+.DataTable thead th.DashboardHeader,
+.TableSmall thead th.OverviewHeader {
+ padding: 0px 20px 0px 1px;
+}
+
+.DataTable thead th.DashboardHeader.SortDescendingLarge,
+.DataTable thead th.DashboardHeader.SortAscendingLarge,
+.TableSmall thead th.OverviewHeader.SortDescendingLarge,
+.TableSmall thead th.OverviewHeader.SortAscendingLarge {
+ padding-left: 8px;
+}
+
+.DataTable thead span.Gray {
+ height: 16px !important;
+ display: block !important;
+ padding-left: 10px;
+ line-height: 12px;
+}
+
+.TableSmall .ColumnFilter {
+ font-size: 10px;
+ float: left;
+}
+
+/* Delete filters */
+.ContextSettings.RemoveFilters a {
+ display: block;
+}
+
+.ContextSettings.RemoveFilters a i {
+ display: block !important;
+ font-size: 14px;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.DataTable + p.SpacingTopSmall {
+ text-align: center;
+}
+
+/**
+ * @subsection Package manager
+ */
+
+p.IntroInstall {
+ width: 70%;
+ padding-left: 10px;
+ margin-bottom: 7px;
+}
+
+.OTOBOVerifyLogoBig {
+ float: right;
+}
+
+.OTOBOVerifyLogo {
+ display: block;
+ float: right;
+ margin: 3px 0px 0px 3px;
+}
+
+/**
+ * @subsection Icons in tables
+ */
+
+td i,
+td a i {
+ color: #999;
+ margin-right: 3px;
+}
+
+tr:hover td i,
+tr:hover td a i,
+td a:hover i {
+ color: #c8c6c4;
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.TicketDetail.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.TicketDetail.css
new file mode 100644
index 0000000000..1ec3b0b47b
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.TicketDetail.css
@@ -0,0 +1,1475 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section TicketDetails
+ */
+
+@media screen,projection,tv,handheld {
+
+/**
+ * @subsection Headline
+ */
+div.Headline {
+ height: 24px;
+ margin: 5px 0px;
+ position: relative;
+}
+
+div.Headline h1 {
+ font-size: 15px;
+ line-height: 24px;
+ margin: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+div.Headline h1 span {
+ padding: 0 3px;
+}
+
+div.Headline .Flag + h1 {
+ margin-left: 30px;
+}
+
+.RTL div.Headline .Flag + h1 {
+ margin-left: 0;
+ margin-right: 30px;
+}
+
+div.Headline .Flag {
+ position: absolute;
+ top: 5px;
+ left: 0px;
+ width: 20px;
+ height: 15px;
+}
+
+.RTL div.Headline .Flag {
+ left: auto;
+ right: 0;
+}
+
+/**
+ * @subsection Article view settings
+ */
+
+.ArticleView {
+ position: absolute;
+ right: 3px;
+ top: 7px;
+}
+
+/**
+ * @subsection Article table head
+ */
+
+.ActionRow .TableContextSettings + .TableSmall {
+ margin-right: 17px;
+}
+
+/**
+ * @subsection Article table body
+ */
+
+#ArticleItems .Header h2 {
+ float: left;
+}
+
+#ArticleItems .WidgetSimple .Header {
+ overflow: hidden;
+}
+
+#ArticleItems .WidgetSimple .Header h2 {
+ max-width: 80%;
+}
+
+#ArticleItems .WidgetSimple .Header .AdditionalInformation {
+ position: static;
+ line-height: 22px;
+ font-size: 11px;
+ float: right;
+}
+
+#ArticleItems .WidgetMenu .LightRow {
+ background: #E8E8E8;
+ border-bottom: none;
+}
+
+#ArticleTableBody {
+ position: relative;
+ overflow: hidden;
+ border-bottom: none;
+ margin: 0px;
+}
+
+#ArticleTableBody .Scroller {
+ height: 82px;
+ overflow-y: auto;
+ overflow-x: hidden;
+ margin-bottom: 10px;
+ border: 0px;
+ background: #1f1f1f;
+}
+
+#ArticleTableBody .Scroller::-webkit-scrollbar-track {
+ background-color: #1f1f1f;
+ border-left: 0px;
+}
+
+#ArticleTableBody .Scroller::-webkit-scrollbar {
+ width: 8px;
+ background-color: #1f1f1f;
+}
+
+#ArticleTableBody .Scroller::-webkit-scrollbar-thumb {
+ background-color: #444;
+}
+
+#ArticleTableBody .Scroller::-webkit-scrollbar-thumb:hover {
+ background-color: #555;
+}
+
+#ArticleTableBody .Scroller .DataTable {
+ border: 0px;
+}
+
+.ArticleMailHeader {
+ font-size: 11px;
+ margin: 10px 0px -5px 0px;
+}
+
+.Outgoing .ArticleMailHeader fieldset.TableLike.FixedLabelSmall > label,
+.Outgoing .ArticleMailHeader fieldset.TableLike.FixedLabelSmall > .Row > label {
+ width: 105px;
+ float: left;
+}
+
+#ArticleItems .ItemActions {
+ padding: 0px 10px;
+ box-sizing: border-box;
+ margin-right: 105px;
+ margin-right: 115px;
+ min-height: 28px;
+ position: relative;
+ top: -4px;
+}
+
+#ArticleItems .ItemActions li .InputField_Container {
+ margin-left: 3px;
+}
+
+@media only screen and (min-width: 0px) and (max-width: 1024px) {
+
+ #ArticleItems .ItemActions li .InputField_Container {
+ width: auto;
+ }
+
+}
+
+#ArticleItems .ItemActions li .InputField_Container input[type=text] {
+ padding: 2px;
+}
+
+#ArticleItems .Outgoing .ItemActions {
+ margin-left: 75px;
+ margin-right: 0px;
+}
+
+#ArticleItems .ArticleMailHeader label,
+#ArticleItems .ArticleMailHeader p.Value {
+ display: block;
+ margin: 0px;
+ padding: 0px;
+ line-height: 2.4em;
+}
+
+#ArticleItems .ArticleMailHeader p.Value {
+ width: calc(100% - 112px);
+ float: right;
+}
+
+#ArticleItems .Incoming .ArticleMailHeader p.Value {
+ width: calc(100% - 103px);
+}
+
+.ArticleMailContent {
+ padding: 3px 12px;
+ line-height: 1.3;
+ position: relative;
+}
+
+.ArticleMailContent .ArticleMeta {
+ background: #fff;
+ padding: 12px 12px 4px 12px;
+ text-align: right;
+ box-sizing: border-box;
+ margin-left: 75px;
+ margin-top: -9px;
+ border-top: 1px solid #ddd !important;
+ position: relative;
+ z-index: 2;
+}
+
+.Incoming .ArticleMailContent .ArticleMeta {
+ margin-left: 0px;
+ margin-right: 75px;
+}
+
+.ArticleMailContent .ArticleMeta h2 {
+ font-size: 12px;
+ color: #999;
+ display: inline-block;
+ margin-right: 10px;
+}
+
+.ArticleMailContent .ArticleMeta ul {
+ display: inline-block;
+}
+
+.ArticleMailContent .ArticleMeta ul li {
+ display: inline-block;
+}
+
+.ArticleMailContent .ArticleMeta ul li a {
+ white-space: nowrap;
+ display: block;
+ background: #eee;
+ color: #333;
+ font-size: 11px;
+ padding: 3px 7px;
+ margin-bottom: 4px;
+}
+
+.Avatar {
+ border: 1px solid #444;
+ border-radius: 27px;
+ position: absolute;
+ top: 30px;
+ background: #333;
+ padding: 2px;
+ width: 50px;
+ height: 50px;
+}
+
+.Avatar img {
+ width: 100%;
+ height: 100%;
+ border-radius: 25px;
+}
+
+.Outgoing .Avatar {
+ left: 7px;
+}
+
+.Incoming .Avatar {
+ right: 6px;
+}
+
+#ArticleItems .ArticleMailContentHTMLWrapper,
+#ArticleItems .ArticleHTML,
+#ArticleItems .ArticleBody {
+ -webkit-overflow-scrolling: touch;
+ margin-left: 75px;
+ position: relative;
+}
+
+#ArticleItems .Incoming .ArticleMailContentHTMLWrapper,
+#ArticleItems .Incoming .ArticleHTML,
+#ArticleItems .Incoming .ArticleBody {
+ margin-left: 0px;
+ margin-right: 75px;
+ border-radius: 10px;
+}
+
+body.TouchDevice #ArticleItems .ArticleMailContentHTMLWrapper {
+ overflow-x: scroll;
+}
+
+.Outgoing .ArticleMailContentHTMLWrapper:before,
+.Incoming .ArticleMailContentHTMLWrapper:before,
+.Outgoing .ArticleHTML:before,
+.Incoming .ArticleHTML:before,
+.Outgoing .ArticleBody:before,
+.Incoming .ArticleBody:before,
+.Outgoing .ArticleMailContentHTMLWrapper:after,
+.Incoming .ArticleMailContentHTMLWrapper:after,
+.Outgoing .ArticleHTML:after,
+.Incoming .ArticleHTML:after,
+.Outgoing .ArticleBody:after,
+.Incoming .ArticleBody:after {
+ border-color: rgba(255, 255, 255, 0);
+ top: 24px;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+}
+
+.Outgoing .ArticleMailContentHTMLWrapper:before,
+.Incoming .ArticleMailContentHTMLWrapper:before,
+.Outgoing .ArticleHTML:before,
+.Incoming .ArticleHTML:before,
+.Outgoing .ArticleBody:before,
+.Incoming .ArticleBody:before {
+ border-right-color: #fff;
+ border-width: 10px;
+ margin-top: -10px;
+ z-index: 2;
+ left: -18px;
+}
+
+.Outgoing .ArticleMailContentHTMLWrapper:after,
+.Incoming .ArticleMailContentHTMLWrapper:after,
+.Outgoing .ArticleHTML:after,
+.Incoming .ArticleHTML:after,
+.Outgoing .ArticleBody:after,
+.Incoming .ArticleBody:after {
+ border-width: 13px;
+ margin-top: -13px;
+ z-index: 1;
+ left: -24px;
+}
+
+.Outgoing .ArticleMailContentHTMLWrapper:after,
+.Outgoing .ArticleHTML:after,
+.Outgoing .ArticleBody:after {
+ border-right-color: #eee;
+}
+
+.Incoming .ArticleMailContentHTMLWrapper:after,
+.Incoming .ArticleHTML:after,
+.Incoming .ArticleBody:after {
+ left: auto;
+ right: -24px;
+ border-left-color: #eee;
+}
+
+.Incoming .ArticleBody:after {
+ right: -26px;
+}
+
+.Incoming .ArticleMailContentHTMLWrapper:before,
+.Incoming .ArticleHTML:before,
+.Incoming .ArticleBody:before {
+ left: auto;
+ right: -18px;
+ border-left-color: #fff;
+ border-right-color: transparent;
+}
+
+.Incoming .ArticleBody:before,
+.Incoming .ArticleHTML:before {
+ right: -20px;
+}
+
+.Outgoing .ArticleBody:before,
+.Outgoing .ArticleHTML:before {
+ left: -20px;
+}
+
+.Outgoing .ArticleBody:after,
+.Outgoing .ArticleHTML:after {
+ left: -26px;
+}
+
+.Incoming.NotVisibleForCustomer .ArticleMailContentHTMLWrapper:after,
+.Incoming.NotVisibleForCustomer .ArticleHTML:after,
+.Incoming.NotVisibleForCustomer .ArticleBody:after {
+ border-left-color: #ffcccc;
+}
+
+.Outgoing.NotVisibleForCustomer .ArticleMailContentHTMLWrapper:after,
+.Outgoing.NotVisibleForCustomer .ArticleHTML:after,
+.Outgoing.NotVisibleForCustomer .ArticleBody:after {
+ border-right-color: #ffcccc;
+}
+
+.ArticleSenderInitials {
+ text-align: center;
+}
+
+.ArticleSenderInitials span {
+ font-size: 22px;
+ line-height: 50px;
+ color: #CCC;
+}
+
+.ArticleMailContent iframe {
+ background: #fff;
+ padding: 5px;
+ box-sizing: border-box;
+ height: 60px;
+}
+
+.DataTable tbody td a.Attachment {
+ font-size: 12px;
+}
+
+#ArticleItems .WidgetSimple .Content label.Switchable {
+ cursor: pointer;
+}
+
+/**
+ * @subsection ControlRow Icons
+ */
+
+.ArticleFilter,
+.ArticlePages {
+ float: left;
+ margin-left: 10px;
+}
+
+.RTL .ArticleFilter,
+.RTL .ArticlePages {
+ float: right;
+}
+
+.ControlRow .Icons a {
+ width: 26px;
+ height: 24px;
+ line-height: 24px;
+ vertical-align: middle;
+ display: block;
+ float: left;
+}
+
+.ControlRow .Icons a.Active {
+ background: #5D5D5D;
+}
+
+.ControlRow .Icons a:hover {
+ background-color: #ccc;
+}
+
+.ControlRow .Icons a {
+ text-align: center;
+}
+
+.ControlRow .Icons a i {
+ color: #777;
+ font-size: 15px;
+ margin-top: 5px;
+ display: block;
+}
+
+.ControlRow .Icons a.Active i {
+ color: #fff;
+}
+
+.ControlRow .Icons a span {
+ margin: 4px auto;
+ width: 16px;
+ height: 16px;
+ text-indent: -9999px;
+ display: block;
+}
+
+.ControlRow .ArticleFilter.Icons .Active span {
+ background-position: 0 -16px;
+}
+
+/**
+ * @subsection Attachment Dialog Content
+ */
+
+.Dialog > .Content > .Attachment.InnerContent {
+ padding: 0;
+}
+
+.AttachmentContent {
+ width: 300px;
+ height: 500px;
+ overflow: hidden;
+ overflow-y: scroll;
+}
+
+.AttachmentElement {
+ margin: 5px 9px;
+ border-bottom: 1px solid #E6E6E6;
+ padding-bottom: 2px;
+}
+
+.AttachmentElement:last-child {
+ border-bottom: 0px;
+}
+
+.AttachmentPreview {
+ height: 80px;
+ width: 60px;
+ border: 1px solid #DDD;
+ float: left;
+ margin-right: 15px;
+ background-color: #E6E6E6;
+ background-position: center;
+ background-repeat: no-repeat;
+ clear: left;
+}
+
+.AttachmentPreview a {
+ display: block;
+ height: 100%;
+ width: 100%;
+}
+
+.AttachmentElement h3 {
+ font-size: 12px;
+ font-weight: bold;
+}
+
+/**
+ * @subsection ItemRow
+ * @note contains random items and is positioned in the sidebar
+ */
+
+.ItemRow {
+ margin-left: 15px;
+}
+
+.RTL .ItemRow {
+ margin-left: 0;
+ margin-right: 15px;
+}
+
+.ItemRow li {
+ padding: 3px 0 5px 8px;
+}
+
+.RTL .ItemRow li {
+ padding: 3px 8px 5px 0;
+}
+
+.ItemRow a {
+ line-height: 14px;
+ color: #c8c6c4;
+ text-decoration: underline;
+}
+
+.ItemRow a:hover {
+ color: #001bff;
+}
+
+/**
+ * @subsection ArticleBody
+ * @note Styles for article body
+ */
+
+.SmallBox,
+.MessageBrowser {
+ margin: 11px 11px 6px 11px;
+ position: relative;
+}
+
+.WidgetSimple .WidgetMessage.Top {
+ margin-top: -8px !important;
+}
+
+.MessageBrowser p {
+ padding: 5px 25px 5px 25px;
+ background-color: #DDD;
+ font-size: 11px;
+ text-align: center;
+}
+
+.SmallBox p {
+ padding: 5px 25px 5px 25px;
+ font-size: 11px;
+ text-align: center;
+}
+
+.MessageBrowser a.Close {
+ display: block;
+ width: 12px;
+ height: 12px;
+ position: absolute;
+ right: 4px;
+ top: 4px;
+ color: #5D5D5D;
+}
+
+.MessageBrowser a.Close:hover {
+ color: #c8c6c4;
+}
+
+/**
+ * @subsection ArticleColors
+ * @note article colors
+ */
+
+#ArticleTable.DataTable tbody td {
+ border-right-style: dashed;
+}
+
+#ArticleTable.DataTable tbody td:last-child {
+ border-right: 0px;
+}
+
+.UseArticleColors td,
+.UseArticleColors tr:nth-child(even) td {
+ transition: background ease 0.3s;
+ background: #1f1f1f;
+ border-color: #272727;
+ border-bottom: 1px solid #272727;
+}
+
+.UseArticleColors tr.Active > td,
+.UseArticleColors tr:hover > td {
+ background-color: #383838 !important;
+ border-color: #383838;
+ border-right-color: #383838 !important;
+}
+
+.UseArticleColors tr.customer > td {
+ background: #193200 !important;
+ border-bottom-color: #264d00;
+ border-color: #264d00;
+}
+
+.UseArticleColors tr.customer.Active > td,
+.UseArticleColors tr.customer:hover > td {
+ background-color: #2d5900 !important;
+ border-color: #2d5900 !important;
+}
+
+.UseArticleColors tr.agent > td {
+ background: #0d2833 !important;
+ border-bottom-color: #133c4d;
+ border-color: #133c4d;
+}
+
+.UseArticleColors tr.agent.Active > td,
+.UseArticleColors tr.agent:hover > td {
+ background-color: #1a5066 !important;
+ border-color: #1a5066 !important;
+}
+
+.UseArticleColors tr.NotVisibleForCustomer > td {
+ background: #4d000d !important;
+ border-bottom-color: #30000b;
+ border-color: #30000b;
+}
+
+.UseArticleColors tr.NotVisibleForCustomer.Active > td,
+.UseArticleColors tr.NotVisibleForCustomer:hover > td {
+ background-color: #660011 !important;
+ border-color: #660011 !important;
+}
+
+.UseArticleColors tr.system > td {
+ background: #1f1f1f !important;
+ border-bottom-color: #272727;
+ border-color: #272727;
+}
+
+.UseArticleColors tr.system.Active > td,
+.UseArticleColors tr.system:hover > td {
+ background-color: #292929 !important;
+ border-color: #292929 !important;
+}
+
+/*
+.UseArticleColors td,
+.UseArticleColors tr:nth-child(even) td {
+ transition: background ease 0.3s;
+ background: #fff;
+ border-color: #ccc;
+ border-bottom: 1px solid #eee;
+}
+
+.UseArticleColors tr.Active > td,
+.UseArticleColors tr:hover > td {
+ background-color: #f2f2f2 !important;
+ border-color: #f2f2f2;
+ border-right-color: #ccc !important;
+}
+
+.UseArticleColors tr.NotVisibleForCustomer > td {
+ background: #FFCCCC !important;
+ border-bottom-color: #e7abab;
+ border-color: #e7abab;
+}
+
+.UseArticleColors tr.NotVisibleForCustomer.Active > td,
+.UseArticleColors tr.NotVisibleForCustomer:hover > td {
+ background-color: #e7abab !important;
+ border-color: #e7abab;
+}
+
+.UseArticleColors tr.system > td {
+ background: #fff7be !important;
+ border-bottom-color: #ffef80;
+ border-color: #ffef80;
+}
+
+.UseArticleColors tr.system.Active > td,
+.UseArticleColors tr.system:hover > td {
+ background-color: #ffef80 !important;
+ border-color: #ffef80;
+}
+*/
+.ArticleMailContent iframe,
+.ArticleMailContent .ArticleBody,
+.ArticleMailContent .ArticleHTML,
+.ArticleMailContent .ArticleMeta {
+ border: 2px solid #eee;
+ border-radius: 3px;
+}
+
+.UseArticleColors #ArticleItems .NotVisibleForCustomer .ArticleMailContent iframe,
+.UseArticleColors #ArticleItems .NotVisibleForCustomer .ArticleMailContent .ArticleBody,
+.UseArticleColors #ArticleItems .NotVisibleForCustomer .ArticleMailContent .ArticleHTML,
+.UseArticleColors #ArticleItems .NotVisibleForCustomer .ArticleMailContent .ArticleMeta {
+ border: 2px solid #FFCCCC;
+}
+
+.UseArticleColors .Incoming.NotVisibleForCustomer .ArticleMailContentHTMLWrapper:after,
+.UseArticleColors .Incoming.NotVisibleForCustomer .ArticleHTML:after,
+.UseArticleColors .Incoming.NotVisibleForCustomer .ArticleBody:after {
+ border-left-color: #ffcccc;
+}
+
+.UseArticleColors .Outgoing.NotVisibleForCustomer .ArticleMailContentHTMLWrapper:after,
+.UseArticleColors .Outgoing.NotVisibleForCustomer .ArticleHTML:after,
+.UseArticleColors .Outgoing.NotVisibleForCustomer .ArticleBody:after {
+ border-right-color: #ffcccc;
+}
+
+.UseArticleColors #ArticleItems .system .ArticleMailContent iframe,
+.UseArticleColors #ArticleItems .system .ArticleMailContent .ArticleBody,
+.UseArticleColors #ArticleItems .system .ArticleMailContent .ArticleHTML,
+.UseArticleColors #ArticleItems .system .ArticleMailContent .ArticleMeta {
+ border: 2px solid #3ab5e4;
+}
+
+.UseArticleColors .Incoming.system .ArticleMailContentHTMLWrapper:after,
+.UseArticleColors .Incoming.system .ArticleHTML:after,
+.UseArticleColors .Incoming.system .ArticleBody:after {
+ border-left-color: #3ab5e4;
+}
+
+.UseArticleColors .Outgoing.system .ArticleMailContentHTMLWrapper:after,
+.UseArticleColors .Outgoing.system .ArticleHTML:after,
+.UseArticleColors .Outgoing.system .ArticleBody:after {
+ border-right-color: #3ab5e4;
+}
+
+.UseArticleColors #ArticleTable a {
+ color: #c8c6c4;
+}
+
+.UseArticleColors #ArticleTable i.fa-spin {
+ color: #333;
+}
+
+/*
+* Agent article types
+*/
+.UseArticleColors .agent-phone > td,
+.UseArticleColors .agent-phone .Header {
+ background: #d1e8d1 !important;
+}
+.UseArticleColors .agent-email-external > td,
+.UseArticleColors .agent-email-external .Header {
+ background: #D3E5B5 !important;
+}
+.UseArticleColors .agent-email-internal > td,
+.UseArticleColors .agent-email-internal .Header {
+ background: #ffd1d1 !important;
+}
+.UseArticleColors .agent-note-external > td,
+.UseArticleColors .agent-note-external .Header {
+ background: #d1d1d1 !important;
+}
+.UseArticleColors .agent-note-internal > td,
+.UseArticleColors .agent-note-internal .Header {
+ background: #FFCCCC !important;
+}
+
+/*
+* System article types
+*/
+.UseArticleColors .system-note-internal > td,
+.UseArticleColors .system-note-internal .Header,
+.UseArticleColors .system-note-external > td,
+.UseArticleColors .system-note-external .Header,
+.UseArticleColors .system-note-report > td,
+.UseArticleColors .system-note-report .Header,
+.UseArticleColors .system-email-external > td,
+.UseArticleColors .system-email-external .Header,
+.UseArticleColors .system-email-internal > td,
+.UseArticleColors .system-email-internal .Header,
+.UseArticleColors .system-email-notification-int > td,
+.UseArticleColors .system-email-notification-int .Header,
+.UseArticleColors .system-email-notification-ext > td,
+.UseArticleColors .system-email-notification-ext .Header {
+ background: #ffffd1 !important;
+}
+
+/*
+* Customer artcle types
+*/
+
+.UseArticleColors .customer-webrequest > td,
+.UseArticleColors .customer-webrequest .Header,
+.UseArticleColors .customer-email-external > td,
+.UseArticleColors .customer-email-external .Header,
+.UseArticleColors .customer-note-external > td,
+.UseArticleColors .customer-note-external .Header,
+.UseArticleColors .customer-phone > td,
+.UseArticleColors .customer-phone .Header {
+ background: #D4DEFC !important;
+}
+
+.UseArticleColors .agent-phone:hover > td,
+.UseArticleColors .agent-email-external:hover > td,
+.UseArticleColors .agent-email-internal:hover > td,
+.UseArticleColors .agent-note-external:hover > td,
+.UseArticleColors .agent-note-internal:hover > td,
+.UseArticleColors .system-note-internal:hover > td,
+.UseArticleColors .system-note-external:hover > td,
+.UseArticleColors .system-note-report:hover > td,
+.UseArticleColors .system-email-external:hover > td,
+.UseArticleColors .system-email-internal:hover > td,
+.UseArticleColors .customer-webrequest:hover > td,
+.UseArticleColors .customer-email-external:hover > td,
+.UseArticleColors .customer-note-external:hover > td,
+.UseArticleColors .customer-phone:hover > td {
+ background: #fffccc !important;
+}
+
+/**
+ * @subsection Timeline View
+ */
+
+.TimelineView {
+ position: relative;
+ padding: 5px 5px 15px 5px;
+}
+
+.TimelineView:after {
+ content: ' ';
+ width: 4px;
+ height: 20px;
+ background-color: #F5F5F5;
+ display: block;
+ position: absolute;
+ left: 50%;
+ margin-left: -2px;
+ top: 16px;
+}
+
+.TimelineView > ul {
+ display: block;
+ width: 49.9%;
+ float: left;
+ margin-top: 20px;
+ border-left: 1px solid #aaa;
+ margin-left: -1px;
+ padding-bottom: 65px;
+}
+
+.TimelineView > ul:first-child {
+ margin-right: 0px;
+ border-right: 1px solid #aaa;
+ border-left: 0px;
+}
+
+.TimelineView > ul > li {
+ background-color: #fff;
+ margin: 0px 20px 0px 25px;
+ padding: 10px 10px 5px 10px;
+ border: 1px solid #ddd;
+}
+
+.TimelineView > ul:first-child > li {
+ margin-right: 25px;
+ margin-left: 20px;
+}
+
+.TimelineView > ul:first-child > li.NoEvents {
+ width: 500px;
+ position: absolute;
+ left: 50%;
+ top: 15px;
+ margin-right: 0px;
+ margin-left: -253px;
+ z-index: 100;
+ padding: 5px;
+ text-align: center;
+ border: 0px;
+ background-color: #F5F5F5;
+}
+
+.TimelineView > ul > li:first-child {
+ margin-top: -7px;
+}
+
+.TimelineView > ul > li h3 {
+ margin: -10px -10px 5px -10px;
+ padding: 6px 10px;
+ background: #fff;
+ font-size: 12px;
+ position: relative;
+}
+
+.TimelineView > ul > li.NewTicket h3 {
+ background: #ddd;
+}
+
+.TimelineView > ul > li h3 .fa-info-circle {
+ display: none;
+}
+
+.TimelineView > ul > li.Important h3 .fa-info-circle {
+ display: inline-block;
+ color: #777;
+}
+
+.TimelineView > ul > li.Important:hover h3 .fa-info-circle {
+ color: #c8c6c4;
+}
+
+.TimelineView > ul > li.HasArticle h3 strong {
+ font-weight: bold;
+}
+
+.TimelineView > ul > li h3 strong,
+.TimelineView > ul > li.Seen h3 strong {
+ font-weight: normal;
+}
+
+.TimelineView > ul > li h3 a {
+ float: right;
+ color: #666;
+}
+
+.TimelineView > ul > li p {
+ max-height: 106px;
+ white-space: pre;
+ overflow: hidden;
+ position: relative;
+}
+
+.TimelineView > ul > li.TypeTicketAction p {
+ max-height: none;
+}
+
+.TimelineView > ul > li.NoFixedMaxHeight p {
+ max-height: none;
+}
+
+.TimelineView > ul > li p span.FadeOut {
+ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
+ background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
+ background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
+ background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
+ background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
+ background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C */
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
+ position: absolute;
+ width: 100%;
+ height: 20px;
+ bottom: 0px;
+ left: 0px;
+}
+
+.TimelineView > ul > li.NoFadeOut .FadeOut {
+ display: none;
+}
+
+.TimelineView > ul > li.Connected * {
+ font-size: 11px;
+}
+
+.TimelineView > ul > li.Connected h3 {
+ padding: 4px 10px;
+}
+
+.TimelineView > ul > li.Connected p {
+ margin-bottom: -4px;
+}
+
+.TimelineView > ul > li.Connected h3 span {
+ display: none;
+}
+
+.TimelineView > ul > li.Connected {
+ margin-right: 40px !important;
+ margin-left: 40px !important;
+ padding-bottom: 10px;
+}
+
+.TimelineView > ul > li h3 a:hover {
+ color: #c8c6c4;
+}
+
+.TimelineView > ul > li h3:last-child {
+ margin-bottom: -10px;
+}
+
+.TimelineView > ul > li h3:after {
+ right: 100%;
+ top: 50%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-color: rgba(221, 221, 221, 0);
+ border-right-color: #ccc;
+ border-width: 13px;
+ margin-top: -13px;
+}
+
+.TimelineView ul.ListLeft li h3:after {
+ left: 100%;
+ border-left-color: #ddd;
+ border-right-color: transparent;
+}
+
+.TimelineView > ul > li.Connected h3:after {
+ left: 50%;
+ content: "";
+ right: auto;
+ border-color: #ccc;
+ top: -7px;
+ height: 3px;
+ margin-top: 0px;
+ border-width: 2px;
+}
+
+.TimelineView ul.ListLeft li h3 > span {
+ right: -31px;
+ left: auto;
+}
+
+.TimelineView > ul > li h3 > span {
+ display: block;
+ position: absolute;
+ top: 6px;
+ left: -31px;
+ background-color: #aaa;
+ height: 9px;
+ width: 9px;
+ z-index: 1;
+ -webkit-transition: all 0.1s ease-in;
+ -moz-transition: all 0.1s ease-in;
+ -o-transition: all 0.1s ease-in;
+ transition: all 0.1s ease-in;
+}
+
+.TimelineView > ul > li h3 > span span {
+ position: absolute;
+ width: 160px;
+ background-color: #777;
+ color: #fff;
+ font-size: 11px;
+ text-align: center;
+ left: 50%;
+ top: -37px;
+ margin-left: -80px;
+ padding: 7px 0px;
+ display: none;
+}
+
+.TimelineView > ul > li h3 > span:hover {
+ z-index: 99;
+}
+
+.TimelineView > ul > li h3 > span:hover span {
+ display: block;
+ z-index: 999;
+}
+
+.TimelineView > ul > li h3 > span span:after {
+ top: 100%;
+ left: 50%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-color: rgba(119, 119, 119, 0);
+ border-top-color: #777;
+ border-width: 8px;
+ margin-left: -8px;
+}
+
+.TimelineView > ul > li:hover h3 > span,
+.TimelineView > ul > li h3 > span:hover {
+ width: 15px;
+ height: 15px;
+ left: -34px;
+ top: 4px;
+ background-color: #c8c6c4;
+}
+
+.TimelineView ul:first-child li:hover h3 > span,
+.TimelineView ul:first-child li h3 > span:hover {
+ right: -34px;
+ left: auto;
+ top: 4px;
+}
+
+.TimelineView li ul {
+ font-size: 11px;
+ background-color: #f2f2f2;
+ margin: -5px -10px 5px -10px;
+ padding: 2px 10px 5px 10px;
+ border-top: 1px solid #ddd;
+ position: relative;
+}
+
+.TimelineView li ul li {
+ margin-top: 3px;
+}
+
+.TimelineView li ul li.subject,
+.TimelineView li ul li.from,
+.TimelineView li ul li.to,
+.TimelineView li ul li.cc {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.TimelineView li ul li.AttachmentsLink {
+ background: #ddd;
+ color: #555;
+ cursor: pointer;
+ font-size: 13px;
+ padding: 3px 5px;
+ position: absolute;
+ right: 0px;
+ top: 5px;
+}
+
+.TimelineView li ul li.AttachmentsLink:hover {
+ color: #c8c6c4;
+}
+
+.TimelineView > span {
+ display: block;
+ margin: 70px 0px;
+ font-size: 18px;
+ text-align: center;
+}
+
+.TimelineView > .CallForAction {
+ margin: 0px auto;
+ display: block;
+ width: 120px;
+}
+
+.TimelineView > ul > li.NewTicket {
+ left: 50%;
+ bottom: 10px;
+ margin-left: -86px;
+ position: absolute;
+ width: 150px;
+ text-align: center;
+ border: 0px;
+}
+
+.TimelineView > ul > li.NewTicket h3 {
+ font-weight: bold;
+ padding-top: 5px;
+}
+
+.TimelineView > ul > li.NewTicket h3:after {
+ display: none;
+}
+
+.TimelineView > ul > li.NewTicket:after {
+ bottom: 100%;
+ left: 50%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-color: rgba(136, 183, 213, 0);
+ border-bottom-color: #DDDDDD;
+ border-width: 10px;
+ margin-left: -10px;
+}
+
+.TimelineView > ul > li.NewTicket h3 > span {
+ display: block;
+ position: static;
+ text-align: center;
+ background: none;
+ width: auto !important;
+ height: auto !important;
+ font-weight: normal;
+}
+
+.TimelineView > ul > li.NewTicket h3 > span span {
+ display: block;
+ position: static;
+ text-align: center;
+ background: none;
+ width: auto;
+ color: #c8c6c4;
+ margin: 0px;
+ padding: 0px;
+ margin-top: 4px;
+}
+
+.TimelineView > ul > li.NewTicket h3 > span span:after {
+ display: none;
+}
+
+.TimelinePlainText {
+ white-space: pre-wrap;
+ height: 400px;
+ width: 800px;
+ padding: 10px;
+ overflow: auto;
+}
+
+.TimelineView .PlainText > div.ChatMessage {
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ font-size: 11px;
+}
+
+.TimelineView .PlainText > div.ChatMessage.SystemGenerated {
+ font-style: italic;
+ color: #aaa;
+}
+
+.TimelineView .PlainText > div.ChatMessage span {
+ font-weight: bold;
+ font-style: normal;
+}
+
+.TimelinePlainText .ArticleHTML {
+ max-height: none;
+ line-height: 120%;
+ font-size: 12px;
+}
+
+.TimelineArticleiFrame {
+ width: 800px;
+ height: 400px;
+}
+
+.ActionsTimelineView .Actions li select {
+ max-width: 120px;
+}
+
+.ActionsTimelineView .ItemActions {
+ cursor: default;
+ position: relative;
+ overflow: hidden;
+ background: #EEEEEE;
+ border-bottom: 1px solid #CCC;
+}
+
+/* Define colors for different event types */
+
+.UseArticleColors .TimelineView .TypeIncoming h3 {
+ background-color: #fff;
+}
+
+.UseArticleColors .TimelineView .TypeIncoming h3:after {
+ border-right-color: #ddd;
+}
+
+.UseArticleColors .TimelineView .TypeTicketAction h3 {
+ background-color: #eee;
+ color: #555;
+}
+
+.UseArticleColors .TimelineView .TypeTicketAction {
+ background: #f7f7f7;
+}
+
+.UseArticleColors .TimelineView .TypeIncoming.SenderType_customer.ArticleType_email-internal h3 {
+ background-color: #fff;
+}
+
+.UseArticleColors .TimelineView .TypeIncoming.SenderType_customer.ArticleType_email-internal h3:after {
+ border-right-color: #ddd;
+}
+
+.UseArticleColors .TimelineView .TypeTicketAutoAction h3 {
+ background-color: #ffffd1;
+ color: #c8c6c4;
+}
+
+.UseArticleColors .TimelineView ul.ListLeft .TypeTicketAutoAction h3:after {
+ border-left-color: #EAEAAF;
+}
+
+.UseArticleColors .TimelineView .TypeNoteInternal h3 {
+ background-color: #FFCCCC;
+ color: #c8c6c4;
+}
+
+.UseArticleColors .TimelineView ul.ListLeft .TypeNoteInternal h3:after {
+ border-left-color: #EFB1B1;
+}
+
+.TimelineView > ul > li.Seen div.UnreadArticles,
+.TimelineView li div.UnreadArticles {
+ display: none;
+}
+
+.TimelineView li.HasArticle div.UnreadArticles {
+ padding: 0px !important;
+ margin-left: 0px;
+ display: inline-block;
+ height: 10px;
+ width: 12px;
+ cursor: pointer;
+}
+
+.TimelineView div.UnreadArticles i:first-child {
+ font-size: 13px;
+}
+
+.TimelineView div.UnreadArticles i {
+ font-size: 11px;
+}
+
+.ItemRow i.Unsupported,
+.ItemRow a.Unsupported {
+ opacity: 0.4;
+}
+
+.ArticleAttachments {
+ clear: both;
+ margin: 10px 0px -10px 75px;
+ overflow: hidden;
+}
+
+.Incoming .ArticleAttachments {
+ margin: 10px 105px -10px 0px;
+}
+
+.ArticleAttachments li {
+ float: left;
+ margin: 0px 10px 10px 0px;
+ background: #141414;
+ padding: 8px 45px 8px 12px;
+ font-size: 11px;
+ color: #777;
+ position: relative;
+}
+
+.ArticleAttachments li h5 {
+ font-size: 12px;
+ color: #c8c6c4;
+ margin-bottom: 1px;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ white-space: nowrap;
+}
+
+.ArticleAttachments li div {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ width: 30px;
+ height: 100%;
+ box-sizing: border-box;
+ overflow: hidden;
+}
+
+.ArticleAttachments li div a {
+ height: 50%;
+ display: block;
+ background: #555;
+ line-height: 250%;
+ text-align: center;
+ color: #aaa;
+ transition: all ease 0.3s;
+}
+
+.ArticleAttachments li div a:first-child:last-child {
+ height: 100%;
+ line-height: 450%;
+}
+
+.ArticleAttachments li div a:hover {
+ color: #333;
+}
+
+.ArticleAttachments li div a + a {
+ border-top: 1px solid #ccc;
+ margin-top: -1px;
+}
+
+@media only screen and (min-width: 0px) and (max-width: 1024px) {
+
+ .Avatar,
+ .ArticleMailContentHTMLWrapper:after,
+ .ArticleHTML:after,
+ .ArticleBody:after,
+ .ArticleMailContentHTMLWrapper:before,
+ .ArticleHTML:before,
+ .ArticleBody:before {
+ display: none;
+ }
+
+ #ArticleItems .ArticleMailContentHTMLWrapper,
+ #ArticleItems .ArticleHTML,
+ #ArticleItems .ArticleBody,
+ .ArticleMailContent .ArticleMeta,
+ .ItemActions,
+ .ArticleAttachments {
+ margin-left: 0px !important;
+ margin-right: 0px !important;
+ }
+
+ #ArticleItems .ItemActions .Actions li {
+ white-space: nowrap;
+ }
+
+ #ArticleItems .ItemActions .Actions li form {
+ width: auto;
+ overflow: visible;
+ }
+
+ #ArticleItems .ArticleMailHeader > fieldset {
+ margin-left: 20px;
+ }
+
+ #ArticleItems .ArticleMailHeader label,
+ #ArticleItems .ArticleMailHeader p.Value {
+ font-size: 1.2em;
+ width: auto;
+ float: none;
+ display: inline;
+ }
+
+ #ArticleItems .ItemActions li .InputField_Container {
+ opacity: 1;
+ }
+
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Tooltip.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Tooltip.css
new file mode 100644
index 0000000000..831c75c5a4
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Tooltip.css
@@ -0,0 +1,128 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section Tooltips
+ */
+
+@media screen,projection,tv,handheld {
+
+div.TooltipContainer {
+ position: absolute;
+ z-index: 6000;
+ display: none;
+}
+
+div.Tooltip {
+ width: 244px;
+}
+
+div.Tooltip.TongueTop,
+div.Tooltip.TongueBottom {
+ width: 400px;
+}
+
+div.Tooltip.TongueLeft {
+ margin-left: -37px;
+}
+
+/* RTL intentionally the same */
+.RTL div.Tooltip.TongueLeft {
+}
+
+div.Tooltip.TongueRight {
+ margin-left: -202px;
+}
+
+div.Tooltip > div.Content {
+ background-color: #fff;
+ border: 1px solid #ccc;
+ padding: 5px;
+ position: relative;
+}
+
+div.Tooltip.TongueTop > div.Content {
+ margin-bottom: 15px;
+}
+
+div.Tooltip.TongueBottom > div.Content {
+ margin-top: 15px;
+}
+
+div.Tooltip > div.Content:after,
+div.Tooltip > div.Content:before {
+ left: 50%;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+}
+
+div.Tooltip.TongueTop > div.Content:after,
+div.Tooltip.TongueTop > div.Content:before {
+ top: 100%;
+}
+
+div.Tooltip.TongueBottom > div.Content:after,
+div.Tooltip.TongueBottom > div.Content:before {
+ bottom: 100%;
+}
+
+div.Tooltip.TongueLeft > div.Content:after,
+div.Tooltip.TongueLeft > div.Content:before {
+ left: 10%;
+}
+
+div.Tooltip.TongueRight > div.Content:after,
+div.Tooltip.TongueRight > div.Content:before {
+ left: 90%;
+ right: 10%;
+}
+
+div.Tooltip > div.Content:after {
+ border-color: rgba(255, 255, 255, 0);
+ border-width: 6px;
+ margin-left: -6px;
+}
+
+div.Tooltip > div.Content:before {
+ border-color: rgba(204, 204, 204, 0);
+ margin-left: -7px;
+}
+
+div.Tooltip.TongueTop > div.Content:after {
+ border-top-color: #fff;
+ border-width: 6px;
+}
+
+div.Tooltip.TongueTop > div.Content:before {
+ border-top-color: #ccc;
+ border-width: 7px;
+}
+
+div.Tooltip.TongueBottom > div.Content:after {
+ border-bottom-color: #fff;
+ border-width: 6px;
+}
+
+div.Tooltip.TongueBottom > div.Content:before {
+ border-bottom-color: #ccc;
+ border-width: 7px;
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Widget.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Widget.css
new file mode 100644
index 0000000000..56205c2bad
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Widget.css
@@ -0,0 +1,1335 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section Widgets
+ */
+
+@media screen,projection,tv,handheld {
+
+/**
+ * @subsection Widget Tablelike list
+ */
+ul.Tablelike {
+ border: 1px solid #333;
+}
+
+ul.Tablelike:first-child {
+ margin-right: 8px;
+}
+
+.RTL .Size1of3:first-child ul.Tablelike {
+ margin-left: 8px;
+ margin-right: 0;
+}
+
+.StrikeThrough a {
+ text-decoration: line-through;
+}
+
+ul.Tablelike li {
+ line-height: 20px;
+ padding: 0 4px;
+ min-height: 20px;
+ background-color: #1f1f1f;
+}
+
+ul.Tablelike li.OneRow,
+ul.Tablelike li.OneRow .AsBlock {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+ul.Tablelike li:nth-child(even) {
+ background-color: #292929;
+}
+
+ul.Tablelike li:hover {
+ background: #33321f;
+}
+
+ul.Tablelike li:hover a {
+ color: #c8c6c4;
+}
+
+ul.Tablelike li.Header {
+ color: #dbd9d7;
+ font-size: 11px;
+ line-height: 20px;
+ text-transform: uppercase;
+ background: #333;
+ border-top: 1px solid #333;
+}
+
+ul.Tablelike + ul.Tablelike.AllocationList {
+ border-top: 0px;
+}
+
+ul.Tablelike li.Header + li {
+ border-top: 1px solid #333;
+}
+
+/**
+ * @subsection WidgetSimple
+ */
+
+.LayoutPopup .Content > .WidgetSimple:last-child {
+ margin-bottom: 0px;
+}
+
+.WidgetSimple {
+ margin-bottom: 15px;
+ background: #1f1f1f;
+ box-shadow: 0 1px 4px 0 rgba(4, 0, 71, 0.16);
+ margin-right: 2px;
+ margin-left: 2px;
+ border-radius: 10px;
+}
+
+.WidgetSimple.WidgetLoading i {
+ display: block;
+ text-align: center;
+ margin: 10px 0px;
+}
+
+.WidgetSimple.MobileNotAvailableWidget {
+ display: none;
+}
+
+.WidgetSimple .WidgetSimple {
+ background: #333;
+ border: 1px solid #333;
+ margin: 15px 10px;
+}
+
+.WidgetSimple .WidgetSimple .WidgetSimple {
+ background: #f5f5f5;
+}
+
+.WidgetSimple .WidgetSimple .WidgetSimple h2 {
+ font-size: 12px;
+}
+
+.WidgetSimple > .Header,
+.WidgetSimple.Collapsed.AnimationRunning > .Header {
+ padding: 2px 5px 2px 5px;
+ position: relative;
+}
+
+.WidgetSimple.Collapsed > .Header {
+ border-bottom: none;
+}
+
+.WidgetSimple > .Header h2,
+.WidgetSimple > .Header h3 {
+ padding: 4px 3px;
+ margin: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 13px;
+ text-shadow: 1px 1px #000;
+ color: #c8c6c4;
+}
+
+.WidgetSimple > .Content {
+ padding: 8px 8px 10px;
+ overflow: auto;
+ /**
+ * START IE9 Hover Bug Workaround
+ * The problem occurs when you have a container that has a fixed width set, an overflow set to
+ * auto, content long enough to trigger the horizontal scroll and a hover style set
+ * on elements inside the container.
+ * The container mysteriously increases in size.
+ * (e.g. if you have installed OTOBODashboardOverviewFilters and many dynamic fields are
+ * shown in the dashboard.)
+ */
+ min-height: 0%;
+ /* END IE9 Hover Bug Workaround */
+}
+
+.WidgetSimple > .Content.OverflowVisible {
+ overflow: visible;
+}
+
+.WidgetSimple.QueueOverview > .Content {
+ padding-bottom: 2px;
+}
+
+.WidgetSimple.Collapsed > .Content {
+ display: none;
+}
+
+.WidgetSimple .WidgetSettingsForm fieldset {
+ margin-bottom: 0px;
+}
+
+.WidgetSimple .Field.LayoutGrid {
+ padding-top: 7px;
+}
+
+.WidgetSimple .Field.LayoutGrid .Tablelike {
+ width: 98%;
+}
+
+.WidgetSimple .Buttons {
+ border-top: 1px solid #333;
+ margin: 15px -8px -10px -8px;
+ padding: 10px 10px 9px 10px;
+ text-align: center;
+ font-size: 11px;
+}
+
+.WidgetSimple .Buttons.NoMargin {
+ margin-top: 5px;
+}
+
+.WidgetSimple .Field.LayoutGrid .AllocationList {
+ max-height: 192px;
+}
+
+.WidgetSimple .Field.LayoutGrid .AllocationList.OrderNumbers {
+ list-style: decimal inside;
+}
+
+#FormDraftTable td:nth-child(2) {
+ width: 10px;
+}
+
+/* Legend & Shortcuts */
+
+.WidgetSimple .Legend,
+.WidgetSimple .ShortCuts {
+ margin: 5px;
+}
+
+.WidgetSimple .Legend {
+ margin-left: 8px;
+}
+
+.WidgetSimple .Legend li,
+.WidgetSimple .ShortCuts li {
+ margin-bottom: 7px;
+ font-size: 11px;
+ position: relative;
+ padding-left: 10px;
+ color: #999;
+}
+
+.RTL .WidgetSimple .Legend li,
+.RTL .WidgetSimple .ShortCuts li {
+ padding-left: 0px;
+ padding-right: 10px;
+}
+
+.WidgetSimple .Legend li:last-child,
+.WidgetSimple .ShortCuts li:last-child {
+ margin-bottom: 0px;
+}
+
+.WidgetSimple .Legend li span {
+ position: absolute;
+ left: 0px;
+ top: 50%;
+ height: 12px;
+ margin-top: -6px;
+ width: 5px;
+}
+
+.RTL .WidgetSimple .Legend li span {
+ left: auto;
+ right: 0px;
+}
+
+.WidgetSimple .ShortCuts {
+ margin-top: 7px;
+ display: table;
+}
+
+.WidgetSimple .ShortCuts li {
+ padding-left: 0px;
+ display: table-row;
+}
+
+.WidgetSimple .ShortCuts li em {
+ display: table-cell;
+ padding-top: 5px;
+ font-style: normal;
+}
+
+.WidgetSimple .ShortCuts li em:first-child {
+ text-align: right;
+}
+
+.WidgetSimple .ShortCuts li span {
+ display: inline-block;
+ border: 1px solid #ccc;
+ text-transform: uppercase;
+ font-size: 9px;
+ font-weight: bold;
+ margin-right: 5px;
+ color: #c8c6c4;
+ padding: 3px;
+ border-radius: 3px;
+}
+
+.RTL .WidgetSimple .ShortCuts li span {
+ margin-right: 0px;
+ margin-left: 5px;
+}
+
+/**
+ * @subsection Widgets as notices
+ */
+
+.WidgetNotice {
+ background-color: #F39C19
+}
+
+.WidgetNotice .Content {
+ border: 1px solid #F6AF2F;
+ color: #442A0B;
+ font-weight: bold;
+ padding-bottom: 8px;
+ line-height: 140%;
+}
+
+/**
+ * @subsection AJAX Loader
+ */
+
+.Loading > .Header h2 {
+ position: relative;
+}
+
+.Loading > .Header h2:after {
+ left: auto;
+ top: auto;
+ right: 3px;
+ width: 14px;
+ height: 14px;
+ line-height: 14px;
+}
+
+.RTL .Loading > .Header h2:after {
+ left: 3px;
+ right: auto;
+}
+
+.WidgetIsLoading {
+ text-align: center;
+ padding: 20px;
+ font-size: 14px;
+ color: #777;
+ border: 1px dotted #bbb;
+ margin-bottom: 15px;
+}
+
+/**
+ * @subsection WidgetBox
+ */
+.WidgetBox > .Header h2 {
+ font-size: 14px;
+ margin-left: 5px;
+}
+
+.RTL .WidgetBox > .Header h2 {
+ margin-left: 0;
+ margin-right: 5px;
+}
+
+.WidgetBox > .Header .WidgetAction + h2 {
+ margin: 0;
+ padding-left: 30px;
+ padding-right: 200px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.RTL .WidgetBox > .Header .WidgetAction + h2 {
+ padding-left: 200px;
+ padding-right: 30px;
+}
+
+.WidgetBox > .Header h2 + h3 {
+ background-color: #EEE;
+ border-top: 1px solid #FFF;
+ border-bottom: 1px solid #BBB;
+ font-size: 16px;
+ padding: 5px 5px 5px 10px;
+ color: #333;
+}
+
+.RTL .WidgetBox > .Header h2 + h3 {
+ padding: 5px 10px 5px 5px;
+}
+
+.WidgetBox > .Content {
+ background: #ffffff;
+ min-height: 200px;
+ border-left: 1px solid #C6C5C4;
+ border-right: 1px solid #C6C5C4;
+ border-bottom: 1px solid #C6C5C4;
+}
+
+.Collapsed > .Content {
+ display: none;
+}
+
+.WidgetBox > .Content.AutoHeight {
+ min-height: 0;
+}
+
+/**
+ * @subaction ActionMenu
+ */
+
+.ActionMenu {
+ top: 4px;
+ right: 7px;
+ padding-left: 3px;
+ position: absolute;
+ display: none;
+}
+
+.RTL .ActionMenu {
+ right: auto;
+ left: 0;
+ padding: 0 2px 0 0;
+ border-left: none;
+ border-right: 1px solid #DDD;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 2px;
+}
+
+.Header:hover .ActionMenu,
+.Header .ActionMenu.Visible {
+ display: block;
+}
+
+/**
+ * @subsection WidgetActions
+ */
+
+.WidgetAction {
+ height: 19px;
+ width: 16px;
+ padding-right: 1px;
+ float: left;
+ text-align: center;
+}
+
+.RTL .WidgetAction {
+ padding: 0 0 0 1px;
+ float: right;
+}
+
+.WidgetAction a {
+ font-size: 14px;
+ height: 20px;
+ display: block;
+}
+
+.WidgetAction.WithText {
+ width: auto;
+}
+
+.WidgetAction.WithText a {
+ color: #999;
+ font-size: 11px;
+ white-space: nowrap;
+ line-height: 16px;
+}
+
+.WidgetAction.WithText a i {
+ font-size: 14px;
+ position: relative;
+ top: -2px;
+ display: inline-block !important;
+ margin-left: 5px;
+}
+
+.WidgetAction.Toggle,
+.Expanded.AnimationRunning > .Header > .WidgetAction.Toggle {
+ height: 13px;
+ width: 12px;
+ margin: 5px 0px 5px 2px;
+ float: left;
+}
+
+.WidgetAction.Toggle i {
+ font-size: 17px;
+ position: absolute;
+ left: 7px;
+ top: 2px;
+ color: #c8c6c4 !important;
+}
+
+.RTL .WidgetAction.Toggle i {
+ left: auto;
+ right: 7px;
+}
+
+.Expanded > .Header > .WidgetAction.Toggle i.fa-caret-right {
+ display: none !important;
+}
+
+.RTL .WidgetSimple .Header > .WidgetAction.Toggle i.fa-caret-right {
+ transform: rotateY(180deg);
+}
+
+.Collapsed > .Header > .WidgetAction.Toggle i.fa-caret-down {
+ display: none !important;
+}
+
+.Header:active > .WidgetAction.Toggle {
+ background-position: 0 -13px;
+}
+
+.Expanded > .Header > .WidgetAction.Toggle,
+.Collapsed.AnimationRunning > .Header > .WidgetAction.Toggle {
+ background-position: 0 -26px;
+}
+
+.RTL .WidgetAction.Toggle {
+ margin: 5px 2px 5px 6px;
+ float: right;
+}
+
+.WidgetAction.Toggle a {
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ position: absolute;
+}
+
+/* Settings */
+.WidgetAction i {
+ color: #777;
+ display: block !important;
+ margin: 2px 0px 0px 2px;
+ vertical-align: middle;
+}
+
+.WidgetAction:hover i,
+.WidgetAction a:focus i {
+ color: #c8c6c4;
+}
+
+.WidgetTooltip {
+ background-color: #fff;
+ position: absolute;
+ width: 125px;
+ top: 20px;
+ right: 0px;
+}
+
+ul.WidgetTooltip {
+ width: 170px;
+ right: -3px;
+ top: 21px;
+ background: rgba(216, 216, 216, 0.85);
+}
+
+ul.WidgetTooltip li {
+ padding: 7px 13px 2px 23px;
+ text-align: left;
+ position: relative;
+ border-bottom: 1px solid #ccc;
+}
+
+ul.WidgetTooltip li i {
+ position: absolute;
+ left: 6px;
+ top: 7px;
+ color: #aaa !important;
+}
+
+ul.WidgetTooltip li:last-child {
+ border-bottom: 0px;
+}
+
+ul.WidgetTooltip li a {
+ color: #333;
+}
+
+ul.WidgetTooltip li a:hover {
+ text-decoration: underline;
+}
+
+ul.WidgetTooltip li a:hover i {
+ color: #333 !important;
+}
+
+.WidgetTooltip a {
+ padding: 0px;
+ line-height: 150%;
+ font-size: 11px;
+}
+
+/**
+ * @subsection Call for action buttons and search form
+ */
+
+.ActionList li {
+ margin-bottom: 7px;
+}
+
+.ActionList li.Separated {
+ border-bottom: 1px solid #CCCCCC;
+ margin-bottom: 15px;
+ padding-bottom: 10px;
+}
+
+.ActionList li:last-child {
+ margin-bottom: 0px;
+}
+
+.ActionList p {
+ margin: 0;
+ padding: 2px 2px 5px;
+ font-size: 11px;
+ color: #888;
+}
+
+.WidgetSimple .ActionList select {
+ margin: 0px auto;
+ padding: 2px 3px;
+ display: block;
+ width: 240px;
+}
+
+.WidgetSimple .ActionList select + .FieldExplanation {
+ margin-top: 2px;
+}
+
+.WidgetSimple .ActionList .CallForAction ~ select {
+ margin-top: -5px;
+}
+
+.CallForAction,
+.cke_dialog_footer_buttons a.cke_dialog_ui_button {
+ min-height: 12px;
+ padding: 3px 7px 6px;
+ line-height: 14px;
+ vertical-align: middle;
+ color: #c8c6c4;
+ font-size: 11px;
+ border: 1px solid #444;
+ background-color: #444;
+ border-bottom: none;
+ cursor: pointer;
+/* display: block; */
+ position: relative;
+ border-radius: 20px
+/* padding: 0px;
+ background-color: #0000fc;
+ text-align: center;
+ color: #ffffff;
+ cursor: pointer;
+ font-family: 'Quicksand', sans-serif;
+ -webkit-transition: width 0.3s ease;
+ -moz-transition: width 0.3s ease;
+ -o-transition: width 0.3s ease;
+ transition: width 0.3s ease;
+ border: none;
+ border-radius: 20px;
+ border-width: 10px 15px 10px 15px;
+ border-style: solid;
+ border-color: #0000fc;
+ border-radius: 20px;
+ width: 180px;
+ height: 35px;
+ font-size: 14px;
+ font-weight: 500;
+ line-height: 1.5;
+ letter-spacing: 0.4px */
+}
+
+.CallForAction.Inline {
+ position: relative;
+ top: -1px;
+}
+
+.CallForAction:disabled {
+ cursor: default;
+}
+
+.cke_dialog_footer_buttons a.cke_dialog_ui_button {
+ font-weight: bold !important;
+}
+
+.cke_dialog_footer_buttons a.cke_dialog_ui_button:hover {
+ background-color: #0000fc;
+}
+
+.CallForAction.Hidden {
+ display: none;
+}
+
+.CallForAction.LittleSpacingTop {
+ margin-top: 5px;
+}
+
+.ActionList li a.Fullsize,
+.CallForAction.Fullsize {
+ display: block;
+}
+
+.CallForAction.Fullsize {
+ width: 100%;
+ box-sizing: border-box;
+ text-align: center;
+}
+
+#SystemMaintenanceForm .CallForAction.LittleSpacingTop.Fullsize.Center {
+ width: 248px;
+}
+
+.CallForAction.Fullsize + .FieldExplanation {
+ border: 1px solid #ddd;
+ padding: 5px;
+ margin-top: 5px;
+}
+
+/**
+ * @css-for Firefox
+ * @note bug: button containing an element has an hidden padding
+ */
+
+.CallForAction::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+.CallForAction:hover,
+.CallForAction:focus {
+ color: #3ab5e4;
+ border-color: #aaa;
+}
+
+.CallForAction span,
+.cke_dialog_footer_buttons td a.cke_dialog_ui_button span { min-height: 12px;
+/* padding: 3px 7px 6px;
+ line-height: 14px;
+ vertical-align: middle;
+ color: #333;
+ font-size: 11px;
+ border: 1px solid #FFF;
+ border-bottom: none;
+ display: block;
+ text-shadow: 0 1px 0 #FFF;
+ cursor: pointer;
+ position: relative;*/
+}
+
+.CallForAction.Inline span {
+ padding: 2px 7px 4px 7px;
+}
+
+.CallForAction.Small span {
+ padding: 0px 3px 2px 3px;
+ font-size: 10px;
+}
+
+.CallForAction.Fullsize span {
+ padding: 3px 20px 5px 20px;
+}
+
+.CallForAction:disabled span {
+ color: rgba(31,31,31,0.5) !important;
+ cursor: default;
+}
+
+.cke_dialog_footer_buttons td a.cke_dialog_ui_button span {
+ font-size: 11px;
+ line-height: auto;
+ color: #fff;
+ font-weight: bold;
+}
+
+.CallForAction span i {
+ position: relative;
+ left: 0px;
+ top: 1px;
+ font-size: 13px;
+ width: 15px;
+ text-align: center;
+ color: #3ab5e4 !important;
+}
+
+.RTL .CallForAction span i {
+ margin-left: 5px;
+}
+
+.CallForAction.Fullsize.Center span i {
+ position: absolute;
+ left: 4px;
+ top: 4px;
+}
+
+.HeaderPopup {
+ margin-bottom: 10px;
+ margin-top: 5px;
+ margin-left: 5px;
+
+}
+
+.HeaderPopupleft {
+ float: left;
+ max-width: calc( 100% - 200px );
+}
+
+.HeaderPopupright {
+ margin-top: 5px;
+ margin-right: 5px;
+ float: right;
+}
+
+.CallForAction:active,
+.CallForAction:hover,
+.CallForAction:focus {
+ background-color: #555;
+ border-color: #555;
+ color: #c4c6c8;
+}
+
+.CallForAction.Disabled {
+ background: #141414 !important;
+ border: 1px solid #1f1f1f !important;
+ border-bottom: 1px solid #1f1f1f !important;
+ color: #c4cdfa !important;
+}
+
+.CallForAction.Disabled > span i {
+ color: #555 !important;
+}
+
+.CallForAction.Disabled, .CallForAction.Disabled span {
+ color: #999;
+ cursor: no-drop;
+}
+
+input.FilterBox {
+ padding: 4px 5px;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.SearchBox {
+ position: relative;
+ margin-bottom: 3px;
+}
+
+.SearchBox input[type='text'] {
+ height: 15px;
+ margin: 0px;
+ padding: 4px 5px;
+ font: normal 12px/15px "Helvetica Neue",Helvetica,Arial,sans-serif;
+ border-color: #999;
+ border-right: none;
+ vertical-align: bottom;
+ width: 213px;
+}
+
+.RTL .SearchBox input[type='text']{
+ border-left: none;
+ border-right: 1px solid #999;
+}
+
+.SearchBox input:focus {
+ border-color: #666;
+ border-right: none;
+}
+.RTL .SearchBox input:focus {
+ border-color: #666;
+ border-left: none;
+}
+
+.SearchBox button {
+ height: 25px;
+ width: 25px;
+ margin: 0 0 0 -4px;
+ padding: 3px 3px 4px;
+ color: #333;
+ font: bold 11px/14px "Helvetica Neue",Helvetica,Arial,sans-serif;
+ background: #333;
+ border: 1px solid #555;
+ text-shadow: 0 1px 0 #000;
+ vertical-align: baseline;
+}
+
+.RTL .SearchBox button {
+ height: 25px;
+ margin: 0 -4px 0 0;
+ text-shadow: 0 1px 0 #000;
+ vertical-align: baseline;
+ border-right: 1px solid #888;
+}
+
+.SearchBox button:hover {
+ border-color: #696969;
+ cursor: pointer;
+}
+
+.SearchBox button:active {
+ padding: 4px 3px 3px;
+ background: #e4e4e4;
+ outline: none;
+}
+
+/**
+ * @subsection Drag and Drop
+ */
+.CanDrag .Header h2 {
+ cursor: move;
+}
+
+.DropPlaceholder {
+ border: 1px dashed #DDD;
+ background: #EEE url(../img/dnd_placeholder_bg.png);
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+/**
+ * @subsection ProgressBar
+ */
+#ProgressBar {
+ margin-left: auto;
+ margin-right: auto;
+ padding: 0;
+ overflow: hidden;
+ width: 950px;
+}
+
+.ProgressBarElements1 li {
+ width: 950px;
+}
+
+.ProgressBarElements2 li {
+ width: 474px;
+}
+
+.ProgressBarElements3 li {
+ width: 316px;
+}
+
+.ProgressBarElements4 li {
+ width: 237px;
+}
+
+.ProgressBarElements5 li {
+ width: 189px;
+}
+
+.ProgressBarElements6 li {
+ width: 158px;
+}
+
+.ProgressBarElements7 li {
+ width: 135px;
+}
+
+/* Because of the minimum screen resolution of 1024px more than 7 elements are not possible at the moment */
+
+#ProgressBar li {
+ float: left;
+ list-style: none;
+ border-style: solid;
+ border-width: 1px 0px;
+ border-color: #CCC;
+ background-color: #EEE;
+}
+
+#ProgressBar li > span {
+ display: block;
+ background-image: url(../img/ProgressBarArrow.png);
+ background-repeat: no-repeat;
+ background-position: center right;
+}
+
+#ProgressBar li a {
+ padding: 12px 7px 13px 12px;
+ color: #484848;
+ text-decoration: none;
+ font: 13px/18px Helvetica Neue, sans-serif;
+ display: block;
+ height: 42px;
+ border-style: solid;
+ border-width: 1px 0px;
+ border-color: #F4F4F4;
+ background: url(../img/ProgressBarIsolator.png) no-repeat left 6px;
+ cursor: default;
+ text-align: left;
+}
+
+#ProgressBar li span a span {
+ color: #ABABAB;
+ font-size: 11px;
+ line-height: 12px;
+ text-shadow: inherit;
+ display: block;
+}
+
+#ProgressBar li:first-child, #ProgressBar li.First {
+ border-left-width: 1px;
+}
+
+#ProgressBar li:first-child a, #ProgressBar li.First a {
+ border-left-width: 1px;
+ padding-left: 14px;
+ background: none;
+}
+
+#ProgressBar li:last-child {
+ border-right-width: 1px;
+}
+
+#ProgressBar li:last-child a {
+ border-right-width: 1px;
+ padding-right: 14px;
+}
+
+#ProgressBar .Highlighted {
+ background-color: #fbb42c;
+ border-top-color: #9b6937;
+ border-bottom-color: #996634;
+}
+
+#ProgressBar li.Highlighted:first-child {
+ border-left-color: #9b6937;
+}
+
+#ProgressBar li.Highlighted > span {
+ background-image: url(../img/ProgressBarArrowActive.png);
+}
+
+#ProgressBar .Highlighted a {
+ color: #562900;
+ text-shadow: 0 1px 0 #FCD891;
+ border-top-color: #ffeec8;
+ border-bottom-color: #eaa350;
+ cursor: pointer;
+}
+
+#ProgressBar .Highlighted.NoLink a {
+ cursor: default;
+}
+
+#ProgressBar li:first-child.Highlighted a {
+ border-left-color: #f2bf5c;
+}
+
+#ProgressBar .Highlighted span a span {
+ color: #a14f00;
+ text-shadow: 0 1px 0 #f5b04e;
+}
+
+#ProgressBar .Active {
+ border-right: 1px solid #9b6937;
+ position: relative;
+ z-index: 2;
+}
+
+#ProgressBar .Active a {
+ border-right: 1px solid #f2bf5c;
+}
+
+#ProgressBar .Active + li {
+ margin-left: -2px;
+ padding-left: 1px;
+}
+
+#ProgressBar .Active + .Active {
+ z-index: 1;
+}
+
+#ProgressBar .Active + li a {
+ background: none;
+}
+
+#ProgressBar .Visited {
+ background-color: #DDD;
+}
+
+#ProgressBar .Visited.Active {
+ border-right-color: #CCC;
+}
+
+#ProgressBar .Visited.Active a {
+ border-right-color: #EEE;
+}
+
+/**
+ * @subsection Widget messages
+ */
+
+.WidgetSimple .WidgetMessage {
+ background: #eee;
+ margin: 10px -8px !important;
+ padding: 5px 20px;
+ font-size: 11px;
+ border-top: 1px solid #ddd;
+ border-bottom: 1px solid #ddd;
+ color: #555;
+ line-height: 150%;
+}
+
+.WidgetSimple .WidgetMessage p + p {
+ margin-top: 2px;
+}
+
+.WidgetSimple .WidgetMessage p + p:last-child {
+ margin-bottom: 2px;
+}
+
+.SidebarColumn .WidgetSimple .WidgetMessage {
+ margin: 5px -8px;
+ padding: 5px 8px;
+}
+
+.WidgetSimple .WidgetMessage.Bottom {
+ margin-bottom: -10px !important;
+}
+
+.WidgetSimple .WidgetMessage.Top {
+ margin-top: 0px !important;
+}
+
+.WidgetSimple .WidgetMessage.Error {
+ background: #b8384e;
+ color: rgba(255, 255, 255, 0.8);
+ border: 0px;
+}
+
+.WidgetSimple .WidgetMessage.Warning {
+ background: #F7AE40;
+ border-color: #D18F2B;
+ color: #774a06;
+}
+
+.WidgetSimple .WidgetMessage.Warning * {
+}
+
+.WidgetSimple .WidgetMessage.Success {
+ background: #6EB22A;
+ color: #fff;
+ border-color: #52891B;
+}
+
+.WidgetSimple .WidgetMessage.Notice {
+ background: #2A61AF;
+ color: #fff;
+ border-color: #15468C;
+}
+
+.WidgetSimple .WidgetMessage button {
+ background: #eee;
+ border: 1px solid #aaa;
+ display: inline-block;
+ margin-right: 5px;
+ transition: all ease 0.3s;
+}
+
+.WidgetSimple .WidgetMessage button:hover {
+ cursor: pointer;
+ background: #ddd;
+}
+
+/**
+ * @subsection Overlays
+ */
+
+.WidgetSimple.HasOverlay {
+ position: relative;
+ overflow: hidden;
+}
+
+.WidgetSimple .Overlay {
+ position: absolute;
+ box-sizing: border-box;
+ left: 0px;
+ top: 0px;
+ height: 100%;
+ width: 100%;
+ background: rgba(0, 0, 0, 0.2);
+ text-align: center;
+ font-size: 16px;
+ z-index: 2;
+}
+
+.WidgetSimple .Overlay i {
+ position: absolute;
+ top: 50%;
+ margin-top: -8px;
+ left: 50%;
+ color: #777;
+ margin-left: -8px;
+}
+
+.WidgetSimple .Overlay i.fa-check {
+ color: #5BAD5B;
+}
+
+/**
+ * @subsection Icon colors
+ */
+
+.CallForAction span i.fa-plus-square {
+ color: #1f1f1f;
+}
+
+.CallForAction span i.fa-rocket {
+ color: #1f1f1f;
+}
+.CallForAction span i.fa-download,
+.CallForAction span i.fa-upload {
+ color: #1f1f1f;
+}
+
+/**
+ * @subsection Chat icons
+ */
+
+.UserChatIcons {
+ float: right;
+}
+
+.UserChatIcons.Block {
+ float: none;
+ margin-top: 2px;
+}
+
+.UserChatIcons i {
+ color: #999;
+ margin-right: 3px;
+}
+
+.UserChatIcons .Unavailable i,
+.UserChatIcons .Unsupported i {
+ opacity: 0.4;
+}
+
+.UserStatusIcon {
+ cursor: default;
+ margin-right: 3px;
+}
+
+.UserStatusIcon.Inline {
+ margin-right: 0;
+}
+
+.UserStatusIcon.Active i {
+ color: #0a0;
+}
+
+.UserStatusIcon.Offline i {
+ color: #c8c6c4;
+}
+
+.UserStatusIcon.Unavailable i {
+ color: #d00;
+ opacity: 1;
+}
+
+.UserStatusIcon.Away i {
+ color: #fb0;
+}
+
+button.HighlightHint {
+ animation: ButtonHint 0.7s infinite alternate;
+}
+
+button.HighlightError {
+ animation: ButtonError 0.7s infinite alternate;
+}
+
+/**
+ * @subsection Tabs
+ */
+
+.WidgetSimple.Tabs > .Header {
+ padding: 0px;
+ overflow: hidden;
+}
+
+.WidgetSimple.Tabs > .Header a {
+ display: block;
+ float: left;
+ padding: 7px 9px;
+ color: #333;
+}
+
+.WidgetSimple.Tabs > .Header a.Disabled {
+ color: #999;
+ cursor: not-allowed;
+ text-shadow: 1px 1px 1px #000;
+}
+
+.WidgetSimple.Tabs > .Header a:not(.Disabled).Active,
+.WidgetSimple.Tabs > .Header a:not(.Disabled):hover,
+.WidgetSimple.Tabs > .Header a:not(.Disabled):active {
+ background: #777;
+ color: #fff;
+}
+
+.WidgetSimple.Tabs > .Content > div {
+ display: none;
+}
+
+.WidgetSimple.Tabs > .Content > div.Active {
+ display: block;
+}
+
+.LoginScreen .MessageOfTheDayBox {
+ width: 350px;
+ margin: auto;
+ text-align: justify;
+ margin-top: 15px;
+}
+
+.LoginScreen .WidgetSimple.MessageOfTheDayBox h2,
+.LoginScreen .WidgetSimple.MessageOfTheDayBox p {
+ padding: 0px 15px;
+}
+
+.LoginScreen .WidgetSimple.MessageOfTheDayBox h2 {
+ padding: 5px 0px;
+}
+
+@keyframes ButtonHint {
+ from {
+ box-shadow: none;
+ }
+ to {
+ box-shadow: 0 0 10px green;
+ }
+}
+
+@keyframes ButtonError {
+ from {
+ box-shadow: none;
+ }
+ to {
+ box-shadow: 0 0 10px red;
+ }
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Widget.css.blue b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Widget.css.blue
new file mode 100644
index 0000000000..75da836f4f
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.Widget.css.blue
@@ -0,0 +1,1284 @@
+/*
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+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 Widgets
+ */
+
+@media screen,projection,tv,handheld {
+
+/**
+ * @subsection Widget Tablelike list
+ */
+ul.Tablelike {
+ border: 1px solid #CCC;
+}
+
+ul.Tablelike:first-child {
+ margin-right: 8px;
+}
+
+.RTL .Size1of3:first-child ul.Tablelike {
+ margin-left: 8px;
+ margin-right: 0;
+}
+
+.StrikeThrough a {
+ text-decoration: line-through;
+}
+
+ul.Tablelike li {
+ line-height: 20px;
+ padding: 0 4px;
+ min-height: 20px;
+ background-color: #FFF;
+}
+
+ul.Tablelike li.OneRow,
+ul.Tablelike li.OneRow .AsBlock {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+ul.Tablelike li:nth-child(even) {
+ background-color: #F5F5F5;
+}
+
+ul.Tablelike li:hover {
+ background: #FCB24B;
+}
+
+ul.Tablelike li:hover a {
+ color: #000;
+}
+
+ul.Tablelike li.Header {
+ color: #4B4B4B;
+ font-size: 11px;
+ line-height: 20px;
+ text-transform: uppercase;
+ background: #eeeeee;
+ border-top: 1px solid #FFF;
+}
+
+ul.Tablelike + ul.Tablelike.AllocationList {
+ border-top: 0px;
+}
+
+ul.Tablelike li.Header + li {
+ border-top: 1px solid #EEE;
+}
+
+/**
+ * @subsection WidgetSimple
+ */
+
+.LayoutPopup .Content > .WidgetSimple:last-child {
+ margin-bottom: 0px;
+}
+
+.WidgetSimple {
+ margin-bottom: 15px;
+ background: #00023c;
+/* box-shadow: 1px 1px 0px #e9e9e9;
+ margin-right: 2px; */
+ border-radius: 10px;
+border-width: 2px;
+border-color: #00023c;
+/*box-shadow: 1px 1px 0px #e9e9e9;*/
+border-style: solid;
+}
+
+.WidgetSimple.WidgetLoading i {
+ display: block;
+ text-align: center;
+ margin: 10px 0px;
+}
+
+.WidgetSimple.MobileNotAvailableWidget {
+ display: none;
+}
+
+.WidgetSimple .WidgetSimple {
+ background: #F2EFEF;
+ border: 1px solid #ddd;
+ margin: 15px 10px;
+}
+
+.WidgetSimple .WidgetSimple .WidgetSimple {
+ background: #f5f5f5;
+}
+
+.WidgetSimple .WidgetSimple .WidgetSimple h2 {
+ font-size: 12px;
+}
+
+.WidgetSimple > .Header,
+.WidgetSimple.Collapsed.AnimationRunning > .Header {
+ padding: 2px 5px 2px 5px;
+ position: relative;
+/* border-bottom: 1px solid #ddd; */
+}
+
+.WidgetSimple.Collapsed > .Header {
+ border-bottom: none;
+}
+
+.WidgetSimple > .Header h2,
+.WidgetSimple > .Header h3 {
+ padding: 4px 3px;
+ margin: 0;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ font-size: 13px;
+/* text-shadow: 1px 1px #fff; */
+ color: #00023c;
+}
+
+.WidgetSimple > .Content {
+ padding: 8px 8px 10px;
+ overflow: auto;
+ background-color: #ededed;
+ /**
+ * START IE9 Hover Bug Workaround
+ * The problem occurs when you have a container that has a fixed width set, an overflow set to
+ * auto, content long enough to trigger the horizontal scroll and a hover style set
+ * on elements inside the container.
+ * The container mysteriously increases in size.
+ * (e.g. if you have installed OTOBODashboardOverviewFilters and many dynamic fields are
+ * shown in the dashboard.)
+ */
+ min-height: 0%;
+ /* END IE9 Hover Bug Workaround */
+}
+
+.WidgetSimple > .Content.OverflowVisible {
+ overflow: visible;
+}
+
+.WidgetSimple.QueueOverview > .Content {
+ padding-bottom: 2px;
+}
+
+.WidgetSimple.Collapsed > .Content {
+ display: none;
+}
+
+.WidgetSimple .WidgetSettingsForm fieldset {
+ margin-bottom: 0px;
+}
+
+.WidgetSimple .Field.LayoutGrid {
+ padding-top: 7px;
+}
+
+.WidgetSimple .Field.LayoutGrid .Tablelike {
+ width: 98%;
+}
+
+.WidgetSimple .Buttons {
+ border-top: 1px solid #ccc;
+ margin: 15px -8px -10px -8px;
+ padding: 10px 10px 9px 10px;
+ text-align: center;
+ font-size: 11px;
+}
+
+.WidgetSimple .Buttons.NoMargin {
+ margin-top: 5px;
+}
+
+.WidgetSimple .Field.LayoutGrid .AllocationList {
+ max-height: 192px;
+}
+
+.WidgetSimple .Field.LayoutGrid .AllocationList.OrderNumbers {
+ list-style: decimal inside;
+}
+
+#FormDraftTable td:nth-child(2) {
+ width: 10px;
+}
+
+/* Legend & Shortcuts */
+
+.WidgetSimple .Legend,
+.WidgetSimple .ShortCuts {
+ margin: 5px;
+}
+
+.WidgetSimple .Legend {
+ margin-left: 8px;
+}
+
+.WidgetSimple .Legend li,
+.WidgetSimple .ShortCuts li {
+ margin-bottom: 7px;
+ font-size: 11px;
+ position: relative;
+ padding-left: 10px;
+ color: #555;
+}
+
+.RTL .WidgetSimple .Legend li,
+.RTL .WidgetSimple .ShortCuts li {
+ padding-left: 0px;
+ padding-right: 10px;
+}
+
+.WidgetSimple .Legend li:last-child,
+.WidgetSimple .ShortCuts li:last-child {
+ margin-bottom: 0px;
+}
+
+.WidgetSimple .Legend li span {
+ position: absolute;
+ left: 0px;
+ top: 50%;
+ height: 12px;
+ margin-top: -6px;
+ width: 5px;
+}
+
+.RTL .WidgetSimple .Legend li span {
+ left: auto;
+ right: 0px;
+}
+
+.WidgetSimple .ShortCuts {
+ margin-top: 7px;
+ display: table;
+}
+
+.WidgetSimple .ShortCuts li {
+ padding-left: 0px;
+ display: table-row;
+}
+
+.WidgetSimple .ShortCuts li em {
+ display: table-cell;
+ padding-top: 5px;
+ font-style: normal;
+}
+
+.WidgetSimple .ShortCuts li em:first-child {
+ text-align: right;
+}
+
+.WidgetSimple .ShortCuts li span {
+ display: inline-block;
+ border: 1px solid #ccc;
+ text-transform: uppercase;
+ font-size: 9px;
+ font-weight: bold;
+ margin-right: 5px;
+ color: #555;
+ padding: 3px;
+ border-radius: 3px;
+}
+
+.RTL .WidgetSimple .ShortCuts li span {
+ margin-right: 0px;
+ margin-left: 5px;
+}
+
+/**
+ * @subsection Widgets as notices
+ */
+
+.WidgetNotice {
+ background-color: #F39C19
+}
+
+.WidgetNotice .Content {
+ border: 1px solid #F6AF2F;
+ color: #442A0B;
+ font-weight: bold;
+ padding-bottom: 8px;
+ line-height: 140%;
+}
+
+/**
+ * @subsection AJAX Loader
+ */
+
+.Loading > .Header h2 {
+ position: relative;
+}
+
+.Loading > .Header h2:after {
+ left: auto;
+ top: auto;
+ right: 3px;
+ width: 14px;
+ height: 14px;
+ line-height: 14px;
+}
+
+.RTL .Loading > .Header h2:after {
+ left: 3px;
+ right: auto;
+}
+
+.WidgetIsLoading {
+ text-align: center;
+ padding: 20px;
+ font-size: 14px;
+ color: #777;
+ border: 1px dotted #bbb;
+ margin-bottom: 15px;
+}
+
+/**
+ * @subsection WidgetBox
+ */
+.WidgetBox > .Header h2 {
+ font-size: 14px;
+ margin-left: 5px;
+}
+
+.RTL .WidgetBox > .Header h2 {
+ margin-left: 0;
+ margin-right: 5px;
+}
+
+.WidgetBox > .Header .WidgetAction + h2 {
+ margin: 0;
+ padding-left: 30px;
+ padding-right: 200px;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.RTL .WidgetBox > .Header .WidgetAction + h2 {
+ padding-left: 200px;
+ padding-right: 30px;
+}
+
+.WidgetBox > .Header h2 + h3 {
+ background-color: #EEE;
+ border-top: 1px solid #FFF;
+ border-bottom: 1px solid #BBB;
+ font-size: 16px;
+ padding: 5px 5px 5px 10px;
+ color: #333;
+}
+
+.RTL .WidgetBox > .Header h2 + h3 {
+ padding: 5px 10px 5px 5px;
+}
+
+.WidgetBox > .Content {
+ background: #ffffff;
+ min-height: 200px;
+ border-left: 1px solid #C6C5C4;
+ border-right: 1px solid #C6C5C4;
+ border-bottom: 1px solid #C6C5C4;
+}
+
+.Collapsed > .Content {
+ display: none;
+}
+
+.WidgetBox > .Content.AutoHeight {
+ min-height: 0;
+}
+
+/**
+ * @subaction ActionMenu
+ */
+
+.ActionMenu {
+ top: 4px;
+ right: 7px;
+ padding-left: 3px;
+ position: absolute;
+ display: none;
+}
+
+.RTL .ActionMenu {
+ right: auto;
+ left: 0;
+ padding: 0 2px 0 0;
+ border-left: none;
+ border-right: 1px solid #DDD;
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 2px;
+}
+
+.Header:hover .ActionMenu,
+.Header .ActionMenu.Visible {
+ display: block;
+}
+
+/**
+ * @subsection WidgetActions
+ */
+
+.WidgetAction {
+ height: 19px;
+ width: 16px;
+ padding-right: 1px;
+ float: left;
+ text-align: center;
+}
+
+.RTL .WidgetAction {
+ padding: 0 0 0 1px;
+ float: right;
+}
+
+.WidgetAction a {
+ font-size: 14px;
+ height: 20px;
+ display: block;
+}
+
+.WidgetAction.WithText {
+ width: auto;
+}
+
+.WidgetAction.WithText a {
+ color: #999;
+ font-size: 11px;
+ white-space: nowrap;
+ line-height: 16px;
+}
+
+.WidgetAction.WithText a i {
+ font-size: 14px;
+ position: relative;
+ top: -2px;
+ display: inline-block !important;
+ margin-left: 5px;
+}
+
+.WidgetAction.Toggle,
+.Expanded.AnimationRunning > .Header > .WidgetAction.Toggle {
+ height: 13px;
+ width: 12px;
+ margin: 5px 0px 5px 2px;
+ float: left;
+}
+
+.WidgetAction.Toggle i {
+ font-size: 17px;
+ position: absolute;
+ left: 7px;
+ top: 2px;
+ color: #555 !important;
+}
+
+.RTL .WidgetAction.Toggle i {
+ left: auto;
+ right: 7px;
+}
+
+.Expanded > .Header > .WidgetAction.Toggle i.fa-caret-right {
+ display: none !important;
+}
+
+.RTL .WidgetSimple .Header > .WidgetAction.Toggle i.fa-caret-right {
+ transform: rotateY(180deg);
+}
+
+.Collapsed > .Header > .WidgetAction.Toggle i.fa-caret-down {
+ display: none !important;
+}
+
+.Header:active > .WidgetAction.Toggle {
+ background-position: 0 -13px;
+}
+
+.Expanded > .Header > .WidgetAction.Toggle,
+.Collapsed.AnimationRunning > .Header > .WidgetAction.Toggle {
+ background-position: 0 -26px;
+}
+
+.RTL .WidgetAction.Toggle {
+ margin: 5px 2px 5px 6px;
+ float: right;
+}
+
+.WidgetAction.Toggle a {
+ height: 100%;
+ width: 100%;
+ top: 0;
+ left: 0;
+ position: absolute;
+}
+
+/* Settings */
+.WidgetAction i {
+ color: #bbb;
+ display: block !important;
+ margin: 2px 0px 0px 2px;
+ vertical-align: middle;
+}
+
+.WidgetAction:hover i,
+.WidgetAction a:focus i {
+ color: #000;
+}
+
+.WidgetTooltip {
+ background-color: #fff;
+ position: absolute;
+ width: 125px;
+ top: 20px;
+ right: 0px;
+}
+
+ul.WidgetTooltip {
+ width: 170px;
+ right: -3px;
+ top: 21px;
+ background: rgba(216, 216, 216, 0.85);
+}
+
+ul.WidgetTooltip li {
+ padding: 7px 13px 2px 23px;
+ text-align: left;
+ position: relative;
+ border-bottom: 1px solid #ccc;
+}
+
+ul.WidgetTooltip li i {
+ position: absolute;
+ left: 6px;
+ top: 7px;
+ color: #aaa !important;
+}
+
+ul.WidgetTooltip li:last-child {
+ border-bottom: 0px;
+}
+
+ul.WidgetTooltip li a {
+ color: #333;
+}
+
+ul.WidgetTooltip li a:hover {
+ text-decoration: underline;
+}
+
+ul.WidgetTooltip li a:hover i {
+ color: #333 !important;
+}
+
+.WidgetTooltip a {
+ padding: 0px;
+ line-height: 150%;
+ font-size: 11px;
+}
+
+/**
+ * @subsection Call for action buttons and search form
+ */
+
+.ActionList li {
+ margin-bottom: 7px;
+}
+
+.ActionList li.Separated {
+ border-bottom: 1px solid #CCCCCC;
+ margin-bottom: 15px;
+ padding-bottom: 10px;
+}
+
+.ActionList li:last-child {
+ margin-bottom: 0px;
+}
+
+.ActionList p {
+ margin: 0;
+ padding: 2px 2px 5px;
+ font-size: 11px;
+ color: #888;
+}
+
+.WidgetSimple .ActionList select {
+ margin: 0px auto;
+ padding: 2px 3px;
+ display: block;
+ width: 240px;
+}
+
+.WidgetSimple .ActionList select + .FieldExplanation {
+ margin-top: 2px;
+}
+
+.WidgetSimple .ActionList .CallForAction ~ select {
+ margin-top: -5px;
+}
+
+.CallForAction,
+.cke_dialog_footer_buttons a.cke_dialog_ui_button {
+ padding: 0px;
+ background: #eee;
+ border: 1px solid #ccc;
+ border-bottom: 1px solid #bbb;
+ display: inline-block;
+ cursor: pointer;
+ transition: all ease-in 0.2s;
+ border-radius: 0px;
+}
+
+.CallForAction.Inline {
+ position: relative;
+ top: -1px;
+}
+
+.CallForAction:disabled {
+ cursor: default;
+}
+
+.cke_dialog_footer_buttons a.cke_dialog_ui_button {
+ font-weight: bold !important;
+}
+
+.cke_dialog_footer_buttons a.cke_dialog_ui_button:hover {
+ background-color: #e5e5e5;
+ border-color: #999;
+}
+
+.CallForAction.Hidden {
+ display: none;
+}
+
+.CallForAction.LittleSpacingTop {
+ margin-top: 5px;
+}
+
+.ActionList li a.Fullsize,
+.CallForAction.Fullsize {
+ display: block;
+}
+
+.CallForAction.Fullsize {
+ width: 100%;
+ box-sizing: border-box;
+ text-align: center;
+}
+
+#SystemMaintenanceForm .CallForAction.LittleSpacingTop.Fullsize.Center {
+ width: 248px;
+}
+
+.CallForAction.Fullsize + .FieldExplanation {
+ border: 1px solid #ddd;
+ padding: 5px;
+ margin-top: 5px;
+}
+
+/**
+ * @css-for Firefox
+ * @note bug: button containing an element has an hidden padding
+ */
+
+.CallForAction::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+.CallForAction:hover,
+.CallForAction:focus {
+ color: #000;
+ border-color: #aaa;
+}
+
+.CallForAction span,
+.cke_dialog_footer_buttons td a.cke_dialog_ui_button span {
+ min-height: 12px;
+ padding: 3px 7px 6px;
+ line-height: 14px;
+ vertical-align: middle;
+ color: #333;
+ font-size: 11px;
+ border: 1px solid #FFF;
+ border-bottom: none;
+ display: block;
+ text-shadow: 0 1px 0 #FFF;
+ cursor: pointer;
+ position: relative;
+}
+
+.CallForAction.Inline span {
+ padding: 2px 7px 4px 7px;
+}
+
+.CallForAction.Small span {
+ padding: 0px 3px 2px 3px;
+ font-size: 10px;
+}
+
+.CallForAction.Fullsize span {
+ padding: 3px 20px 5px 20px;
+}
+
+.CallForAction:disabled span {
+ color: graytext !important;
+ cursor: default;
+}
+
+.cke_dialog_footer_buttons td a.cke_dialog_ui_button span {
+ font-size: 11px;
+ line-height: auto;
+ color: #000;
+ font-weight: bold;
+}
+
+.CallForAction span i {
+ position: relative;
+ left: 0px;
+ top: 1px;
+ font-size: 13px;
+ width: 15px;
+ text-align: center;
+}
+
+.RTL .CallForAction span i {
+ margin-left: 5px;
+}
+
+.CallForAction.Fullsize.Center span i {
+ position: absolute;
+ left: 4px;
+ top: 4px;
+}
+
+.CallForAction:active,
+.CallForAction:hover,
+.CallForAction:focus {
+ background-color: #e5e5e5;
+ border-color: #999;
+}
+
+.CallForAction.Disabled {
+ background: #eee !important;
+ border: 1px solid #ccc !important;
+ border-bottom: 1px solid #bbb !important;
+}
+
+.CallForAction.Disabled, .CallForAction.Disabled span {
+ color: #999;
+ cursor: no-drop;
+}
+
+input.FilterBox {
+ padding: 4px 5px;
+ width: 100%;
+ box-sizing: border-box;
+}
+
+.SearchBox {
+ position: relative;
+ margin-bottom: 3px;
+}
+
+.SearchBox input[type='text'] {
+ height: 15px;
+ margin: 0px;
+ padding: 4px 5px;
+ font: normal 12px/15px "Helvetica Neue",Helvetica,Arial,sans-serif;
+ border-color: #999;
+ border-right: none;
+ vertical-align: bottom;
+ width: 213px;
+}
+
+.RTL .SearchBox input[type='text']{
+ border-left: none;
+ border-right: 1px solid #999;
+}
+
+.SearchBox input:focus {
+ border-color: #666;
+ border-right: none;
+}
+.RTL .SearchBox input:focus {
+ border-color: #666;
+ border-left: none;
+}
+
+.SearchBox button {
+ height: 25px;
+ width: 25px;
+ margin: 0 0 0 -4px;
+ padding: 3px 3px 4px;
+ color: #333;
+ font: bold 11px/14px "Helvetica Neue",Helvetica,Arial,sans-serif;
+ background: #f2f2f2;
+ border: 1px solid #888;
+ text-shadow: 0 1px 0 #FFF;
+ vertical-align: baseline;
+}
+
+.RTL .SearchBox button {
+ height: 25px;
+ margin: 0 -4px 0 0;
+ text-shadow: 0 1px 0 #FFF;
+ vertical-align: baseline;
+ border-right: 1px solid #888;
+}
+
+.SearchBox button:hover {
+ border-color: #696969;
+ cursor: pointer;
+}
+
+.SearchBox button:active {
+ padding: 4px 3px 3px;
+ background: #e4e4e4;
+ outline: none;
+}
+
+/**
+ * @subsection Drag and Drop
+ */
+.CanDrag .Header h2 {
+ cursor: move;
+}
+
+.DropPlaceholder {
+ border: 1px dashed #DDD;
+ background: #EEE url(../img/dnd_placeholder_bg.png);
+ margin-top: 5px;
+ margin-bottom: 5px;
+}
+
+/**
+ * @subsection ProgressBar
+ */
+#ProgressBar {
+ margin-left: auto;
+ margin-right: auto;
+ padding: 0;
+ overflow: hidden;
+ width: 950px;
+}
+
+.ProgressBarElements1 li {
+ width: 950px;
+}
+
+.ProgressBarElements2 li {
+ width: 474px;
+}
+
+.ProgressBarElements3 li {
+ width: 316px;
+}
+
+.ProgressBarElements4 li {
+ width: 237px;
+}
+
+.ProgressBarElements5 li {
+ width: 189px;
+}
+
+.ProgressBarElements6 li {
+ width: 158px;
+}
+
+.ProgressBarElements7 li {
+ width: 135px;
+}
+
+/* Because of the minimum screen resolution of 1024px more than 7 elements are not possible at the moment */
+
+#ProgressBar li {
+ float: left;
+ list-style: none;
+ border-style: solid;
+ border-width: 1px 0px;
+ border-color: #CCC;
+ background-color: #EEE;
+}
+
+#ProgressBar li > span {
+ display: block;
+ background-image: url(../img/ProgressBarArrow.png);
+ background-repeat: no-repeat;
+ background-position: center right;
+}
+
+#ProgressBar li a {
+ padding: 12px 7px 13px 12px;
+ color: #484848;
+ text-decoration: none;
+ font: 13px/18px Helvetica Neue, sans-serif;
+ display: block;
+ height: 42px;
+ border-style: solid;
+ border-width: 1px 0px;
+ border-color: #F4F4F4;
+ background: url(../img/ProgressBarIsolator.png) no-repeat left 6px;
+ cursor: default;
+ text-align: left;
+}
+
+#ProgressBar li span a span {
+ color: #ABABAB;
+ font-size: 11px;
+ line-height: 12px;
+ text-shadow: inherit;
+ display: block;
+}
+
+#ProgressBar li:first-child, #ProgressBar li.First {
+ border-left-width: 1px;
+}
+
+#ProgressBar li:first-child a, #ProgressBar li.First a {
+ border-left-width: 1px;
+ padding-left: 14px;
+ background: none;
+}
+
+#ProgressBar li:last-child {
+ border-right-width: 1px;
+}
+
+#ProgressBar li:last-child a {
+ border-right-width: 1px;
+ padding-right: 14px;
+}
+
+#ProgressBar .Highlighted {
+ background-color: #fbb42c;
+ border-top-color: #9b6937;
+ border-bottom-color: #996634;
+}
+
+#ProgressBar li.Highlighted:first-child {
+ border-left-color: #9b6937;
+}
+
+#ProgressBar li.Highlighted > span {
+ background-image: url(../img/ProgressBarArrowActive.png);
+}
+
+#ProgressBar .Highlighted a {
+ color: #562900;
+ text-shadow: 0 1px 0 #FCD891;
+ border-top-color: #ffeec8;
+ border-bottom-color: #eaa350;
+ cursor: pointer;
+}
+
+#ProgressBar .Highlighted.NoLink a {
+ cursor: default;
+}
+
+#ProgressBar li:first-child.Highlighted a {
+ border-left-color: #f2bf5c;
+}
+
+#ProgressBar .Highlighted span a span {
+ color: #a14f00;
+ text-shadow: 0 1px 0 #f5b04e;
+}
+
+#ProgressBar .Active {
+ border-right: 1px solid #9b6937;
+ position: relative;
+ z-index: 2;
+}
+
+#ProgressBar .Active a {
+ border-right: 1px solid #f2bf5c;
+}
+
+#ProgressBar .Active + li {
+ margin-left: -2px;
+ padding-left: 1px;
+}
+
+#ProgressBar .Active + .Active {
+ z-index: 1;
+}
+
+#ProgressBar .Active + li a {
+ background: none;
+}
+
+#ProgressBar .Visited {
+ background-color: #DDD;
+}
+
+#ProgressBar .Visited.Active {
+ border-right-color: #CCC;
+}
+
+#ProgressBar .Visited.Active a {
+ border-right-color: #EEE;
+}
+
+/**
+ * @subsection Widget messages
+ */
+
+.WidgetSimple .WidgetMessage {
+ background: #eee;
+ margin: 10px -8px !important;
+ padding: 5px 20px;
+ font-size: 11px;
+ border-top: 1px solid #ddd;
+ border-bottom: 1px solid #ddd;
+ color: #555;
+ line-height: 150%;
+}
+
+.WidgetSimple .WidgetMessage p + p {
+ margin-top: 2px;
+}
+
+.WidgetSimple .WidgetMessage p + p:last-child {
+ margin-bottom: 2px;
+}
+
+.SidebarColumn .WidgetSimple .WidgetMessage {
+ margin: 5px -8px;
+ padding: 5px 8px;
+}
+
+.WidgetSimple .WidgetMessage.Bottom {
+ margin-bottom: -10px !important;
+}
+
+.WidgetSimple .WidgetMessage.Top {
+ margin-top: 0px !important;
+}
+
+.WidgetSimple .WidgetMessage.Error {
+ background: #b8384e;
+ color: rgba(255, 255, 255, 0.8);
+ border: 0px;
+}
+
+.WidgetSimple .WidgetMessage.Warning {
+ background: #F7AE40;
+ border-color: #D18F2B;
+ color: #774a06;
+}
+
+.WidgetSimple .WidgetMessage.Warning * {
+}
+
+.WidgetSimple .WidgetMessage.Success {
+ background: #6EB22A;
+ color: #fff;
+ border-color: #52891B;
+}
+
+.WidgetSimple .WidgetMessage.Notice {
+ background: #2A61AF;
+ color: #fff;
+ border-color: #15468C;
+}
+
+.WidgetSimple .WidgetMessage button {
+ background: #eee;
+ border: 1px solid #aaa;
+ display: inline-block;
+ margin-right: 5px;
+ transition: all ease 0.3s;
+}
+
+.WidgetSimple .WidgetMessage button:hover {
+ cursor: pointer;
+ background: #ddd;
+}
+
+/**
+ * @subsection Overlays
+ */
+
+.WidgetSimple.HasOverlay {
+ position: relative;
+ overflow: hidden;
+}
+
+.WidgetSimple .Overlay {
+ position: absolute;
+ box-sizing: border-box;
+ left: 0px;
+ top: 0px;
+ height: 100%;
+ width: 100%;
+ background: rgba(255, 255, 255, 0.1);
+ text-align: center;
+ font-size: 16px;
+ z-index: 2;
+}
+
+.WidgetSimple .Overlay i {
+ position: absolute;
+ top: 50%;
+ margin-top: -8px;
+ left: 50%;
+ color: #777;
+ margin-left: -8px;
+}
+
+.WidgetSimple .Overlay i.fa-check {
+ color: #5BAD5B;
+}
+
+/**
+ * @subsection Icon colors
+ */
+
+.CallForAction span i.fa-plus-square {
+ color: #35A835;
+}
+
+.CallForAction span i.fa-rocket {
+ color: #C4632F;
+}
+.CallForAction span i.fa-download,
+.CallForAction span i.fa-upload {
+ color: #2D6F9E;
+}
+
+/**
+ * @subsection Chat icons
+ */
+
+.UserChatIcons {
+ float: right;
+}
+
+.UserChatIcons.Block {
+ float: none;
+ margin-top: 2px;
+}
+
+.UserChatIcons i {
+ color: #999;
+ margin-right: 3px;
+}
+
+.UserChatIcons .Unavailable i,
+.UserChatIcons .Unsupported i {
+ opacity: 0.4;
+}
+
+.UserStatusIcon {
+ cursor: default;
+ margin-right: 3px;
+}
+
+.UserStatusIcon.Inline {
+ margin-right: 0;
+}
+
+.UserStatusIcon.Active i {
+ color: #0a0;
+}
+
+.UserStatusIcon.Offline i {
+ color: #000;
+}
+
+.UserStatusIcon.Unavailable i {
+ color: #d00;
+ opacity: 1;
+}
+
+.UserStatusIcon.Away i {
+ color: #fb0;
+}
+
+button.HighlightHint {
+ animation: ButtonHint 0.7s infinite alternate;
+}
+
+button.HighlightError {
+ animation: ButtonError 0.7s infinite alternate;
+}
+
+/**
+ * @subsection Tabs
+ */
+
+.WidgetSimple.Tabs > .Header {
+ padding: 0px;
+ overflow: hidden;
+}
+
+.WidgetSimple.Tabs > .Header a {
+ display: block;
+ float: left;
+ padding: 7px 9px;
+ color: #333;
+}
+
+.WidgetSimple.Tabs > .Header a.Disabled {
+ color: #999;
+ cursor: not-allowed;
+ text-shadow: 1px 1px 1px #fff;
+}
+
+.WidgetSimple.Tabs > .Header a:not(.Disabled).Active,
+.WidgetSimple.Tabs > .Header a:not(.Disabled):hover,
+.WidgetSimple.Tabs > .Header a:not(.Disabled):active {
+ background: #777;
+ color: #fff;
+}
+
+.WidgetSimple.Tabs > .Content > div {
+ display: none;
+}
+
+.WidgetSimple.Tabs > .Content > div.Active {
+ display: block;
+}
+
+.LoginScreen .MessageOfTheDayBox {
+ width: 350px;
+ margin: auto;
+ text-align: justify;
+ margin-top: 15px;
+}
+
+.LoginScreen .WidgetSimple.MessageOfTheDayBox h2,
+.LoginScreen .WidgetSimple.MessageOfTheDayBox p {
+ padding: 0px 15px;
+}
+
+.LoginScreen .WidgetSimple.MessageOfTheDayBox h2 {
+ padding: 5px 0px;
+}
+
+@keyframes ButtonHint {
+ from {
+ box-shadow: none;
+ }
+ to {
+ box-shadow: 0 0 10px green;
+ }
+}
+
+@keyframes ButtonError {
+ from {
+ box-shadow: none;
+ }
+ to {
+ box-shadow: 0 0 10px red;
+ }
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.WidgetMenu.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.WidgetMenu.css
new file mode 100644
index 0000000000..d7c8ada038
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Core.WidgetMenu.css
@@ -0,0 +1,580 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section WidgetMenu
+ */
+
+@media screen,projection,tv,handheld {
+
+/**
+ * @subsection Control Row
+ */
+.ControlRow {
+ position: relative;
+ overflow: hidden;
+ min-height: 24px;
+ background-color: #333;
+ border-top-left-radius: 10px;
+ border-top-right-radius: 10px;
+}
+
+.ControlRow a {
+ color: #c8c6c4;
+}
+
+.ControlRow a:hover {
+ color: #fff;
+}
+
+.ControlRow a.Active {
+ color: #fff;
+}
+
+/**
+ * @subsection Control Row Tabs
+ */
+.RTL .ControlRow .Tabs {
+ float: right;
+}
+
+.ControlRow li {
+ padding-left: 2px;
+ float: left;
+ position: relative;
+}
+
+.RTL .ControlRow li {
+ margin-left: 0;
+ margin-right: -3px;
+ float: right;
+}
+
+.ControlRow li:hover {
+ background: #444;
+}
+
+.ControlRow li.Active,
+.ControlRow li.Active:hover,
+.ControlRow li.Active:active {
+ background: #5D5D5D;
+ padding-left: 2px;
+}
+
+.ControlRow li > a {
+ padding: 7px 12px 7px 11px;
+ color: #c8c6c4;
+ font-size: 11px;
+ display: block;
+}
+
+.RTL .ControlRow li > a {
+ padding: 7px 11px 7px 12px;
+}
+
+.ControlRow li:hover > a {
+ color: #fff;
+}
+
+.ControlRow li.Active > a,
+.ControlRow li.Active:hover > a,
+.ControlRow li.Active:active > a {
+ color: #FFF;
+}
+
+.ControlRow li > a > span {
+ padding-left: 4px;
+}
+
+/**
+ * @subsection Context Functions
+ */
+ul.ContextFunctions {
+ position: absolute;
+ right: 0;
+ top: 0;
+}
+
+.RTL ul.ContextFunctions {
+ right: auto;
+ left: 0;
+}
+
+h1 ul.ContextFunctions {
+ top: -4px;
+}
+
+ul.ContextFunctions li {
+ padding-left: 3px;
+}
+
+ul.ContextFunctions li span {
+ position: absolute;
+ left: -9999px;
+ top: -9999px;
+}
+
+.RTL ul.ContextFunctions li {
+ float: right;
+}
+
+ul.ContextFunctions li.ContextHelp a,
+ul.ContextFunctions li.ContextSettings a {
+ display: block;
+ width: 22px;
+ height: 24px;
+ padding: 0;
+}
+
+ul.ContextFunctions li.ContextHelp a span,
+ul.ContextFunctions li.ContextSettings a span {
+ display: block;
+ width: 19px;
+ height: 24px;
+}
+
+ul.ContextFunctions li.ContextSettings .fa {
+ display: block;
+ font-size: 14px;
+ padding: 5px 0px 5px 3px;
+}
+
+ul.ContextFunctions li:last-child:hover > a {
+ background-position: 50px 50px;
+}
+
+/**
+ * @subsection Control Row Headline
+ */
+.ControlRow h2 {
+ padding-top: 1px;
+ margin-left: 8px;
+ height: 24px;
+ font-size: 13px;
+ line-height: 24px;
+ font-weight: bold;
+ color: #c8c6c4;
+ text-shadow: 0 1px 0 #000;
+ margin-bottom: 2px;
+}
+
+/**
+ * @subsection Control Row Additional Information
+ */
+
+.AdditionalInformation {
+ right: 7px;
+ top: 7px;
+ font-size: 11px;
+ position: absolute;
+}
+
+.AdditionalInformation.ControlRow {
+ top: 1px;
+ right: 0px;
+ background: none;
+}
+
+.AdditionalInformation.SpacingLoader {
+ margin-left: 0px;
+ margin-right: 23px;
+}
+
+.RTL .AdditionalInformation.SpacingLoader {
+ margin-left: 23px;
+ margin-right: 0px;
+}
+
+.RTL .AdditionalInformation {
+ right: auto;
+ left: 0;
+}
+
+/**
+ * @subsection Control Row Action Row
+ */
+.ActionRow {
+ position: relative;
+ overflow: hidden;
+ background: #1f1f1f;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+/* border-left: 1px solid #ccc;
+ border-bottom: 1px solid #ccc;
+ border-right: 1px solid #ccc;
+ box-shadow: 0 1px 4px 0 rgba(4, 0, 71, 0.16); */
+}
+
+.WidgetSimple .Content .ActionRow {
+ margin: -5px;
+ background: none;
+ border-bottom: 0px;
+}
+
+.Actions {
+ padding: 0;
+ float: left;
+}
+
+.RTL .Actions {
+ float: right;
+}
+
+.Actions li {
+ line-height: 18px;
+ font-size: 11px;
+ display: inline-block;
+ z-index: 19;
+}
+
+.Actions li:after {
+ color: #BBBBBB;
+ content: " | ";
+ display: block;
+ float: right;
+ margin: 5px 3px;
+}
+
+.Actions li.Hidden {
+ display: none;
+}
+
+.Actions li.Hidden ~ li#BulkAction {
+ margin-left: 5px;
+}
+
+.Actions li:last-child:after {
+ content: " | ";
+ display: block;
+ visibility: hidden;
+}
+
+.RTL .Actions li {
+ margin-right: 0;
+ margin-left: -3px;
+ padding: 0 3px 0 1px;
+ float: right;
+}
+
+.Actions li:first-child {
+ margin-left: 0;
+ padding-left: 5px;
+}
+
+.RTL .Actions li:first-child {
+ margin-right: 0;
+ padding-right: 0;
+ background: none;
+}
+
+.Actions li:last-child {
+ background: none;
+}
+
+.Actions li a,
+.Actions li span {
+ padding: 5px 2px 0;
+ color: #c8c6c4;
+ display: inline-block;
+ border-bottom: 1px solid transparent;
+}
+
+.Actions li a:hover,
+.Actions li span:hover,
+.OverviewZoom a:hover {
+ border-color: #bfbfce;
+}
+
+.Actions li.NoHover:hover a {
+ background: none;
+}
+
+.Actions li input#SelectAllTickets {
+ margin: 0 1px 0 3px;
+}
+
+.RTL .Actions li input#SelectAllTickets {
+ margin: 0 3px 0 1px;
+}
+
+.RTL .Actions li:first-child a {
+ background-image: none;
+}
+
+.Actions li.Inactive a {
+ color: #999;
+ text-shadow: 1px 1px #000;
+ cursor: default;
+}
+
+.Actions li.Inactive:hover a {
+ background: none;
+ border-color: transparent;
+ -webkit-box-shadow: 0 0 0;
+ box-shadow: 0 0 0;
+}
+
+.ActionMessage {
+ display: block;
+ float: left;
+ font-size: 11px;
+ padding: 9px 8px 8px 4px;
+}
+
+.Actions form {
+ padding: 4px 4px 4px 0;
+ display: inline-block;
+}
+
+.Actions li.SortBy {
+ padding: 5px 8px;
+}
+
+.Actions li select {
+ font-size: 11px;
+}
+
+.Tab.Actions li {
+ height: auto;
+ padding: 0;
+}
+
+.Tab.Actions li:after {
+ color: #bbb;
+}
+
+.Tab.Actions li:first-child a {
+ padding-left: 3px;
+}
+
+.RTL .Tab.Actions li:first-child a {
+ padding: 3px 3px 4px 8px;
+}
+
+.Tab.Actions li a {
+ padding: 5px 5px 8px 2px;
+ color: #999;
+}
+
+.Tab.Actions li a:hover {
+ color: #c8c6c4;
+ background: none;
+ text-decoration: underline;
+ border-bottom: 0px;
+}
+
+.Tab.Actions li:last-child {
+ background: none;
+}
+
+.Tab.Actions li.Selected a {
+ color: #dbd9d7;
+ font-weight: bold;
+}
+
+/**
+ * @subsection LightRow
+ */
+
+.LightRow {
+}
+
+.LightRow.Header {
+ background: #ddd;
+ padding-right: 5px;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+ position: relative;
+ -webkit-box-shadow: inset 0 -1px 0 #FFF;
+ box-shadow: inset 0 -1px 0 #FFF;
+}
+
+.RTL .LightRow.Header {
+ padding-right: 0;
+ padding-left: 5px;
+}
+
+.Collapsed .LightRow.Header {
+ border-bottom-color: #C6C5C4;
+ border-radius: 2px;
+}
+
+.LightRow.Bottom {
+ background: #1f1f1f;
+ border-bottom: 1px solid #1f1f1f;
+}
+
+.Collapsed .LightRow.Bottom {
+ display: none;
+}
+
+.LightRow h2 {
+ margin: 0;
+ padding: 4px 0 5px;
+ font-weight: normal;
+ color: #171717;
+}
+
+.Collapsed .LightRow.Header {
+ -webkit-box-shadow: 0 -1px 0 #DDD inset;
+ box-shadow: 0 -1px 0 #DDD inset;
+ border-bottom-color: #AAA;
+}
+
+.LightRow .WidgetAction.Toggle {
+ margin-left: 7px;
+}
+
+.RTL .LightRow .WidgetAction.Toggle {
+ margin-left: 6px;
+ margin-right: 7px;
+}
+
+.LightRow #AJAXImageDestQueueID {
+ display: none;
+}
+
+.LightRow select {
+ margin-top: 1px;
+}
+
+.LightRow.Bottom .Actions li span input[type="checkbox"] {
+ margin-top: 0;
+}
+
+/**
+ * @subsection Filter settings
+ */
+.Filter {
+ padding-top: 3px;
+ margin-left: 6px;
+ float: left;
+}
+
+.RTL .Filter {
+ margin-left: 0;
+ margin-right: 6px;
+ float: right;
+}
+
+.Filter select {
+ font-size: 11px;
+}
+
+.Filter .Concat {
+ padding-left: 5px;
+ padding-right: 5px;
+ padding-top: 3px;
+ font-weight: bold;
+ font-size: 14px;
+}
+
+/*
+ * @subsection Dashboard Ticket Filter
+ */
+.TicketFilter > a.Selected,
+.UserFilter > a.Selected {
+ text-decoration: underline;
+}
+
+/**
+ * @subsection Control Row Pagination
+ */
+/*
+ * form.Pagination is the new style pagination, div.Pagination the old style
+ * Both should work with this CSS
+ */
+.Pagination {
+ float: right;
+ margin-right: 0;
+ font-size: 11px;
+ padding: 3px 0px 5px 0px;
+}
+
+.RTL .Pagination {
+ float: left;
+}
+
+form.Pagination > * {
+ float: left;
+}
+
+.RTL .Pagination > * {
+ float: right;
+}
+
+.Pagination > span {
+ margin-top: 3px;
+}
+
+form.Pagination a {
+ height: 24px;
+ width: 24px;
+ display: block;
+}
+
+span.Pagination a {
+ color: #c8c6c4;
+}
+
+span.Pagination a:hover {
+ color: #F92;
+}
+
+span.Pagination a.Selected {
+ font-weight: bold;
+}
+
+span.Pagination span.PaginationLimit {
+ color: #FF0000;
+}
+
+.Pagination a span {
+ margin: 7px 6px;
+ height: 9px;
+ width: 11px;
+ text-indent: -9999px;
+ background: url(../img/arrows.png) no-repeat;
+ display: block;
+}
+
+.Pagination .ArrowLeft span {
+ background-position: left top;
+}
+
+.RTL .Pagination .ArrowLeft span {
+ background-position: right top;
+}
+
+.Pagination .ArrowRight span {
+ background-position: right top;
+}
+
+.RTL .Pagination .ArrowRight span {
+ background-position: left top;
+}
+
+.Pagination input {
+ width: 16px;
+ margin-right: 2px;
+ padding: 1px 3px;
+ font-size: 11px;
+ font-family: inherit;
+ text-align: right;
+}
+
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/DynamicFieldDB.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/DynamicFieldDB.css
new file mode 100644
index 0000000000..aad352660d
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/DynamicFieldDB.css
@@ -0,0 +1,122 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section Forms
+ */
+
+@media screen,projection,tv,handheld {
+
+/**
+ * @subsection Input focus
+ * @note Does not work in IE6, only partially in IE7 (no focus)
+ */
+
+.DynamicFieldDBContainer {
+ background-color: #F2F2F2;
+ border: 1px solid #CCCCCC;
+ -moz-box-shadow: inset 1px 1px 5px #ccc;
+ -webkit-box-shadow: inset 1px 1px 5px #ccc;
+ box-shadow: inset 1px 1px 5px #ccc;
+ padding: 5px 7px 10px 6px;
+ width: 60%;
+ position: relative;
+ -moz-border-radius: 2px;
+ -webkit-border-radius: 2px;
+ border-radius: 2px;
+ margin-top: 5px;
+}
+
+.DynamicFieldDBContainer > div {
+ margin-top: 5px;
+}
+
+.DynamicFieldDBContainer .ResultElementText {
+ width: 89%;
+ margin-left: 7px;
+}
+
+.DynamicFieldDBContainer .ResultElementText {
+ transition: background-color 1s ease, border 1s ease;
+}
+
+.DynamicFieldDBContainer .ResultElementText.MainCustomer {
+ background-color: #F7ECC3;
+ border: 1px solid #E8CC8B;
+}
+
+.DynamicFieldDBContainer .ResultElementText.Radio {
+ width: 84%;
+ margin-left: 0px;
+}
+
+#EntityUpdate .ValueRow.Card {
+ display: block;
+ float: left;
+ background: #eee;
+ padding: 15px;
+ width: 260px;
+ box-shadow: 1px 1px 0px #ccc;
+ position: relative;
+ margin-right: 10px;
+ margin-bottom: 10px;
+ border: 1px solid #ddd;
+}
+
+#EntityUpdate .ValueRow.Card .RemoveButton {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ background: #fff;
+ width: 25px;
+ line-height: 25px;
+ text-align: center;
+ color: #999;
+ transition: all ease 0.3s;
+}
+
+#EntityUpdate .ValueRow.Card .RemoveButton:hover {
+ color: #333;
+}
+
+#EntityUpdate .ValueRow.Card label {
+ display: block;
+ margin-top: 5px;
+}
+
+#EntityUpdate .ValueRow.Card label:first-child {
+ margin-top: 0px;
+}
+
+#EntityUpdate .ValueRow.Card input[type=text] {
+ width: 100% !important;
+ box-sizing: border-box;
+}
+
+#EntityUpdate .ValueRow.Card label.CheckboxLabel {
+ margin-top: 10px;
+}
+
+#EntityUpdate .ValueRow.Card label.CheckboxLabel + label.CheckboxLabel {
+ margin-top: 5px;
+}
+
+#EntityUpdate .ValueRow.Card div.InputField_InputContainer,
+#EntityUpdate .ValueRow.Card div.InputField_Container {
+ width: 100%;
+}
+
+} /* end @media */
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/FAQ.Agent.Default.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/FAQ.Agent.Default.css
new file mode 100644
index 0000000000..be009eeca1
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/FAQ.Agent.Default.css
@@ -0,0 +1,117 @@
+/*
+Copyright (C) 2001-2019 Rother OSS GmbH, https://otobo.de/
+
+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 Default Settings
+ */
+
+@media screen,projection,tv,handheld {
+
+/**
+ * @subsection ArticleList Expanding
+ */
+
+.FAQ .OverviewControl div {
+ padding: 0px;
+}
+
+.FAQ #OverviewBody {
+ margin: 0 0 8px 0;
+}
+
+/**
+ * @subsection Large SidebarColumn
+ */
+
+.LayoutFixedSidebar.SidebarLast > .SidebarColumn.Large {
+ width: 350px;
+ float: right;
+ margin-left: 16px;
+ margin-right: 0;
+}
+
+.LayoutFixedSidebar.SidebarLast > .SidebarColumn.Medium {
+ width: 290px;
+ float: right;
+ margin-left: 16px;
+ margin-right: 0;
+}
+
+/**
+ * @subsection FAQMiniList
+ */
+
+ul.FAQMiniList span {
+ display: block;
+ font-size: 10px;
+}
+
+iframe.TextOption.FAQ {
+ width: 900px;
+ min-height: 600px;
+}
+
+iframe.FAQField {
+ width: 100%;
+ frameborder: 0;
+}
+
+fieldset.TableSmall > div.Field {
+ margin-left: 24% !important;
+}
+
+fieldset.TableSmall > label {
+ width: 24% !important;
+}
+
+fieldset.TableSmall > div.FAQDivider {
+ border-bottom: 1px solid #CCCCCC;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.TableSmall tbody tr.Invalid {
+ color: #CCC;
+}
+
+#FAQRelatedArticles table {
+ clear: none;
+ width: 100%;
+ max-width: 622px;
+ line-height: 13px;
+}
+
+#FAQRelatedArticles table .FAQVotes {
+ padding: 0 3px;
+ width: 70px;
+}
+
+#FAQRelatedArticles table .FAQVotes i {
+ margin-right: 0px;
+}
+
+#FAQRelatedArticles table .FAQCategorie {
+ width: 25%;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+#FAQRelatedArticles table .FAQTitle {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+#FAQRelatedArticles table .FAQDate {
+ width: 65px;
+ overflow: hidden;
+}
+
+}
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/FAQ.Agent.Detail.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/FAQ.Agent.Detail.css
new file mode 100644
index 0000000000..b01a5ddcc1
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/FAQ.Agent.Detail.css
@@ -0,0 +1,183 @@
+/*
+Copyright (C) 2001-2019 Rother OSS GmbH, https://otobo.de/
+
+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 FAQDetails
+ */
+
+@media screen,projection,tv,handheld {
+
+
+/**
+ * @subsection Article table body
+ */
+
+.ArticleFAQContent {
+ padding: 11px 12px;
+ line-height: 1.3;
+}
+
+.ArticleFAQContent .FAQVoteForm {
+ display: block;
+ margin-top: 10px;
+ text-align: center;
+}
+
+.ArticleFAQContent p.Center {
+ padding-bottom: 10px;
+ margin: 0px 50px;
+ border-bottom: 1px solid #ccc;
+}
+
+.ArticleFAQContent .FAQVoteForm .CallForAction {
+ display: block;
+ margin: 10px auto 0px auto;
+}
+
+.ArticleFAQContent .FAQVoteForm .CallForAction.Hidden {
+ display: none;
+}
+
+.FAQStateName {
+ position: absolute;
+ right: 10px;
+ top: 7px;
+ font-size: 80%;
+ font-style: italic;
+}
+
+fieldset .FAQStateName {
+ position: static;
+}
+
+.RateButtons {
+ text-align: center;
+ display: inline-block;
+}
+
+.RateButtons > li {
+ display: inline-block;
+ text-align: center;
+ vertical-align: middle;
+}
+
+.RateButtons > li:first-child,
+.RateButtons > li:last-child {
+ font-weight: bold;
+}
+
+.Visible-ScreenS .RateButtons > li {
+ display: block;
+ margin-top: 5px;
+ margin-bottom: 15px;
+}
+
+.Visible-ScreenS .RateButtons > li span {
+ width: auto !important;
+ float: none !important;
+}
+
+.RateButton {
+ position: relative;
+ text-align: center;
+ display: block;
+ height: 30px;
+ width: 25px;
+ cursor: pointer;
+ float: left;
+ color: #c8c6c4;
+ text-align: center;
+}
+
+.RateButton i {
+ display: block;
+ font-size: 16px;
+ width: 100%;
+ text-align: center;
+ color: #777;
+}
+
+.RateButton i.fa-star {
+ display: none;
+}
+
+.RateButton.RateChecked i.fa-star {
+ display: block;
+ color: #3ab5e4;
+}
+
+.RateButton.RateChecked i.fa-star-o {
+ display: none;
+}
+
+.RateButton:hover i.fa-star-o {
+ color: #c8c6c4;
+}
+
+.RateStar {
+ display: block;
+ height: 16px;
+ float: left;
+ padding-left: 1px;
+ font-size: 10px;
+}
+
+.RateStarText {
+ text-indent:5px;
+}
+
+.RateLabelBefore,
+.RateLabelAfter {
+ color: #333;
+ padding-top: 5px;
+ font-weight: bold;
+}
+
+.RateLabelBefore {
+ float: left;
+ padding-right: 6px;
+}
+
+.RateLabelAfter {
+ float: left;
+ padding-left: 5px;
+}
+
+.ZoomSmallButton{
+ margin-left: 12px;
+}
+
+.FAQMessageBrowser {
+ margin-bottom: 10px;
+ padding: 0px;
+ border-radius: 2px;
+ position: relative;
+}
+
+.FAQMessageBrowser p {
+ padding: 5px 20px;
+ background-color: #444;
+ font-size: 11px;
+ text-align: center;
+}
+
+.FAQMessageBrowser a.Close {
+ display: block;
+ width: 12px;
+ height: 12px;
+ position: absolute;
+ right: 4px;
+ top: 6px;
+ color: #5D5D5D;
+}
+
+.FAQMessageBrowser a.Close:hover {
+ color: #000;
+}
+}
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/Survey.Agent.Default.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Survey.Agent.Default.css
new file mode 100644
index 0000000000..ad97170b8b
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/Survey.Agent.Default.css
@@ -0,0 +1,252 @@
+/* OTOBO is a web-based ticketing system for service organisations.
+
+Copyright (C) 2001-2020 OTRS AG, https://otrs.com/
+Copyright (C) 2019-2021 Rother OSS GmbH, https://otobo.de/
+
+This program is free software: you can redistribute it and/or modify it under
+the terms of the GNU General Public License as published by the Free Software
+Foundation, either version 3 of the License, or (at your option) any later version.
+This program is distributed in the hope that it will be useful, but WITHOUT
+ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
+FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
+You should have received a copy of the GNU General Public License
+along with this program. If not, see
.
+*/
+
+/**
+ * @package Skin "Default"
+ * @section Default Settings
+ */
+
+@media screen,projection,tv,handheld {
+
+/**
+ * @subsection Survey Graph
+ */
+
+fieldset.SurveyGraphs {
+ display: block;
+ margin-bottom: 20px;
+}
+
+fieldset.SurveyGraphs .Question {
+ display: block;
+ line-height: 1.5em;
+ text-align: right;
+ width: 25%;
+ font-weight: bold;
+ margin-bottom: 10px;
+}
+
+fieldset.SurveyGraphs .Answer {
+ float: left;
+ line-height: 1.3em;
+ text-align: right;
+ text-shadow: 0 1px 0 #000;
+ width: 25%;
+ margin-bottom: 5px;
+ clear: left;
+}
+
+div.SurveyGraph {
+ float: left;
+ width: 50%;
+ height: 22px;
+ padding-left: 5px;
+ padding-bottom: 3px;
+}
+
+div.SurveyGraphContainer {
+ width: 95%;
+ height: 22px;
+}
+
+div.SurveyGraphBar {
+ height: 22px;
+ background-color: #3ab5e4;
+}
+
+p.SurveyGraphLeyend {
+ float: left;
+ line-height: 1.3em;
+ text-align: left;
+ text-shadow: 0 1px 0 #000;
+ width: 10%;
+ margin-bottom: 5px;
+ height: 22px;
+}
+
+.SubLabel {
+ width: 35%;
+ text-align: right;
+ float: left;
+ display: block;
+}
+
+.SubField {
+ margin-left: 35%;
+ display: block;
+}
+
+a.ArrowUp,
+a.ArrowUpDisabled,
+a.ArrowDown,
+a.ArrowDownDisabled {
+ height: 16px;
+ padding: 1px;
+ margin-top: 0;
+ margin-bottom: 1px;
+ border-style: none;
+ vertical-align: middle;
+ text-align: center;
+}
+
+a.ArrowUp,
+a.ArrowDown {
+ cursor: pointer;
+}
+
+a.ArrowUpDisabled,
+a.ArrowDownDisabled {
+ cursor: default;
+}
+
+a.ArrowUp:active,
+a.ArrowDown:active {
+ margin-top: 1px;
+ margin-bottom: 0;
+}
+
+a.ArrowUpDisabled:active,
+a.ArrowDownDisabled:active {
+ margin-top: 0px;
+ margin-bottom: 1px;
+}
+
+a.ArrowUp i,
+a.ArrowDown i {
+ color: #3399FF;
+}
+
+a.ArrowUp:hover i,
+a.ArrowDown:hover i {
+ color: #339900 !important;
+}
+
+a.ArrowUpDisabled,
+a.ArrowDownDisabled {
+ display: inline !Important;
+}
+
+a.ArrowUpDisabled i,
+a.ArrowDownDisabled i {
+ color: #909090;
+ cursor: default;
+}
+
+a.SeeDetails {
+ height: 15px;
+ padding: 1px;
+ margin-top: -6px;
+ border-style: none;
+ vertical-align: middle;
+ cursor: pointer;
+}
+
+a.SeeDetails span {
+ background: none;
+ display: none;
+}
+
+a.SeeDetails i {
+ color: #FF9922;
+}
+
+label.Textarea,
+div.Textarea {
+ margin-bottom: 10px;
+ margin-top: 10px;
+}
+
+.Field ul li{
+ margin-left: 30px;
+ list-style: disc;
+}
+
+.Field ol li{
+ margin-left: 30px;
+ list-style: decimal;
+}
+
+.Field ul.CustomerUserConditionsList li {
+ list-style: none;
+ margin-bottom: 2px;
+}
+
+#SurveyEmptyMessageSmall {
+ border-color: #ddd;
+ border-image: none;
+ border-style: solid;
+ border-width: 1px;
+ padding: 7px;
+ background-color: white;
+}
+
+
+.TableSmall tbody tr.Invalid {
+ color: #CCC;
+}
+
+<<<<<<< HEAD
+.Navigation {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ padding-top: 3px;
+ padding-right: 10px;
+}
+
+.SurveyArrow {
+ transition: transform 0.15s ease;
+ color: #FF9922;
+}
+
+.SurveyArrowLeft {
+ float: left;
+}
+
+.SurveyArrowRight {
+ float: right;
+}
+
+.SurveyArrow i{
+ font-size: 20px;
+ margin: 0 5px;
+}
+
+.SurveyArrow:hover{
+ color: #FF8600;
+}
+
+.Disabled {
+ display: none;
+}
+.WidgetSpacingRight {
+ margin-right: 13px;
+}
+
+}
+=======
+.RemoveButtonCustomerField,
+.AddButtonCustomerCondition,
+.RemoveButtonCustomerCondition {
+ cursor: pointer;
+}
+
+.RemoveButtonCustomerCondition {
+ margin-right: 2px;
+}
+
+}
+>>>>>>> origin/feature-surveyimprovements-merged-fli-master
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/fullcalendar-3.10.2/fullcalendar.min.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/fullcalendar-3.10.2/fullcalendar.min.css
new file mode 100644
index 0000000000..ab2403ecb3
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/fullcalendar-3.10.2/fullcalendar.min.css
@@ -0,0 +1,5 @@
+/*!
+ * FullCalendar v3.10.2
+ * Docs & License: https://fullcalendar.io/
+ * (c) 2019 Adam Shaw
+ */.fc button,.fc table,body .fc{font-size:1em}.fc .fc-axis,.fc button,.fc-day-grid-event .fc-content,.fc-list-item-marker,.fc-list-item-time,.fc-time-grid-event .fc-time,.fc-time-grid-event.fc-short .fc-content{white-space:nowrap}.fc-event,.fc-event:hover,.fc-state-hover,.fc.fc-bootstrap3 a,.ui-widget .fc-event,a.fc-more{text-decoration:none}.fc{direction:ltr;text-align:left}.fc-rtl{text-align:right}.fc th,.fc-basic-view .fc-day-top .fc-week-number,.fc-basic-view td.fc-week-number,.fc-icon,.fc-toolbar{text-align:center}.fc-highlight{background:#bce8f1;opacity:.3}.fc-bgevent{background:#8fdf82;opacity:.3}.fc-nonbusiness{background:#d7d7d7}.fc button{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;height:2.1em;padding:0 .6em;cursor:pointer}.fc button::-moz-focus-inner{margin:0;padding:0}.fc-state-default{border:1px solid;background-color:#f5f5f5;background-image:-moz-linear-gradient(top,#fff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#fff,#e6e6e6);background-image:-o-linear-gradient(top,#fff,#e6e6e6);background-image:linear-gradient(to bottom,#fff,#e6e6e6);background-repeat:repeat-x;border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);color:#333;text-shadow:0 1px 1px rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 2px rgba(0,0,0,.05)}.fc-state-default.fc-corner-left{border-top-left-radius:4px;border-bottom-left-radius:4px}.fc-state-default.fc-corner-right{border-top-right-radius:4px;border-bottom-right-radius:4px}.fc button .fc-icon{position:relative;top:-.05em;margin:0 .2em;vertical-align:middle}.fc-state-active,.fc-state-disabled,.fc-state-down,.fc-state-hover{color:#333;background-color:#e6e6e6}.fc-state-hover{color:#333;background-position:0 -15px;-webkit-transition:background-position .1s linear;-moz-transition:background-position .1s linear;-o-transition:background-position .1s linear;transition:background-position .1s linear}.fc-state-active,.fc-state-down{background-color:#ccc;background-image:none;box-shadow:inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05)}.fc-state-disabled{cursor:default;background-image:none;opacity:.65;box-shadow:none}.fc-event.fc-draggable,.fc-event[href],.fc-popover .fc-header .fc-close,a[data-goto]{cursor:pointer}.fc-button-group{display:inline-block}.fc .fc-button-group>*{float:left;margin:0 0 0 -1px}.fc .fc-button-group>:first-child{margin-left:0}.fc-popover{position:absolute;box-shadow:0 2px 6px rgba(0,0,0,.15)}.fc-popover .fc-header{padding:2px 4px}.fc-popover .fc-header .fc-title{margin:0 2px}.fc-ltr .fc-popover .fc-header .fc-title,.fc-rtl .fc-popover .fc-header .fc-close{float:left}.fc-ltr .fc-popover .fc-header .fc-close,.fc-rtl .fc-popover .fc-header .fc-title{float:right}.fc-divider{border-style:solid;border-width:1px}hr.fc-divider{height:0;margin:0;padding:0 0 2px;border-width:1px 0}.fc-bg table,.fc-row .fc-bgevent-skeleton table,.fc-row .fc-highlight-skeleton table{height:100%}.fc-clear{clear:both}.fc-bg,.fc-bgevent-skeleton,.fc-helper-skeleton,.fc-highlight-skeleton{position:absolute;top:0;left:0;right:0}.fc-bg{bottom:0}.fc table{width:100%;box-sizing:border-box;table-layout:fixed;border-collapse:collapse;border-spacing:0}.fc td,.fc th{border-style:solid;border-width:1px;padding:0;vertical-align:top}.fc td.fc-today{border-style:double}a[data-goto]:hover{text-decoration:underline}.fc .fc-row{border-style:solid;border-width:0}.fc-row table{border-left:0 hidden transparent;border-right:0 hidden transparent;border-bottom:0 hidden transparent}.fc-row:first-child table{border-top:0 hidden transparent}.fc-row{position:relative}.fc-row .fc-bg{z-index:1}.fc-row .fc-bgevent-skeleton,.fc-row .fc-highlight-skeleton{bottom:0}.fc-row .fc-bgevent-skeleton td,.fc-row .fc-highlight-skeleton td{border-color:transparent}.fc-row .fc-bgevent-skeleton{z-index:2}.fc-row .fc-highlight-skeleton{z-index:3}.fc-row .fc-content-skeleton{position:relative;z-index:4;padding-bottom:2px}.fc-row .fc-helper-skeleton{z-index:5}.fc .fc-row .fc-content-skeleton table,.fc .fc-row .fc-content-skeleton td,.fc .fc-row .fc-helper-skeleton td{background:0 0;border-color:transparent}.fc-row .fc-content-skeleton td,.fc-row .fc-helper-skeleton td{border-bottom:0}.fc-row .fc-content-skeleton tbody td,.fc-row .fc-helper-skeleton tbody td{border-top:0}.fc-scroller{-webkit-overflow-scrolling:touch}.fc-day-grid-event .fc-content,.fc-icon,.fc-row.fc-rigid,.fc-time-grid-event{overflow:hidden}.fc-scroller>.fc-day-grid,.fc-scroller>.fc-time-grid{position:relative;width:100%}.fc-event{position:relative;display:block;font-size:.85em;line-height:1.3;border-radius:3px;border:1px solid #3a87ad}.fc-event,.fc-event-dot{background-color:#3a87ad}.fc-event,.fc-event:hover{color:#fff}.fc-not-allowed,.fc-not-allowed .fc-event{cursor:not-allowed}.fc-event .fc-bg{z-index:1;background:#fff;opacity:.25}.fc-event .fc-content{position:relative;z-index:2}.fc-event .fc-resizer{position:absolute;z-index:4;display:none}.fc-event.fc-allow-mouse-resize .fc-resizer,.fc-event.fc-selected .fc-resizer{display:block}.fc-event.fc-selected .fc-resizer:before{content:"";position:absolute;z-index:9999;top:50%;left:50%;width:40px;height:40px;margin-left:-20px;margin-top:-20px}.fc-event.fc-selected{z-index:9999!important;box-shadow:0 2px 5px rgba(0,0,0,.2)}.fc-event.fc-selected.fc-dragging{box-shadow:0 2px 7px rgba(0,0,0,.3)}.fc-h-event.fc-selected:before{content:"";position:absolute;z-index:3;top:-10px;bottom:-10px;left:0;right:0}.fc-ltr .fc-h-event.fc-not-start,.fc-rtl .fc-h-event.fc-not-end{margin-left:0;border-left-width:0;padding-left:1px;border-top-left-radius:0;border-bottom-left-radius:0}.fc-ltr .fc-h-event.fc-not-end,.fc-rtl .fc-h-event.fc-not-start{margin-right:0;border-right-width:0;padding-right:1px;border-top-right-radius:0;border-bottom-right-radius:0}.fc-ltr .fc-h-event .fc-start-resizer,.fc-rtl .fc-h-event .fc-end-resizer{cursor:w-resize;left:-1px}.fc-ltr .fc-h-event .fc-end-resizer,.fc-rtl .fc-h-event .fc-start-resizer{cursor:e-resize;right:-1px}.fc-h-event.fc-allow-mouse-resize .fc-resizer{width:7px;top:-1px;bottom:-1px}.fc-h-event.fc-selected .fc-resizer{border-radius:4px;border-width:1px;width:6px;height:6px;border-style:solid;border-color:inherit;background:#fff;top:50%;margin-top:-4px}.fc-ltr .fc-h-event.fc-selected .fc-start-resizer,.fc-rtl .fc-h-event.fc-selected .fc-end-resizer{margin-left:-4px}.fc-ltr .fc-h-event.fc-selected .fc-end-resizer,.fc-rtl .fc-h-event.fc-selected .fc-start-resizer{margin-right:-4px}.fc-day-grid-event{margin:1px 2px 0;padding:0 1px}tr:first-child>td>.fc-day-grid-event{margin-top:2px}.fc-day-grid-event.fc-selected:after{content:"";position:absolute;z-index:1;top:-1px;right:-1px;bottom:-1px;left:-1px;background:#000;opacity:.25}.fc-day-grid-event .fc-time{font-weight:700}.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer,.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer{margin-left:-2px}.fc-ltr .fc-day-grid-event.fc-allow-mouse-resize .fc-end-resizer,.fc-rtl .fc-day-grid-event.fc-allow-mouse-resize .fc-start-resizer{margin-right:-2px}a.fc-more{margin:1px 3px;font-size:.85em;cursor:pointer}a.fc-more:hover{text-decoration:underline}.fc-limited{display:none}.fc-day-grid .fc-row{z-index:1}.fc-more-popover{z-index:2;width:220px}.fc-more-popover .fc-event-container{padding:10px}.fc-bootstrap3 .fc-popover .panel-body,.fc-bootstrap4 .fc-popover .card-body{padding:0}.fc-now-indicator{position:absolute;border:0 solid red}.fc-bootstrap3 .fc-today.alert,.fc-bootstrap4 .fc-today.alert{border-radius:0}.fc-unselectable{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.fc-unthemed .fc-content,.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-list-view,.fc-unthemed .fc-popover,.fc-unthemed .fc-row,.fc-unthemed tbody,.fc-unthemed td,.fc-unthemed th,.fc-unthemed thead{border-color:#ddd}.fc-unthemed .fc-popover{background-color:#fff;border-width:1px;border-style:solid}.fc-unthemed .fc-divider,.fc-unthemed .fc-list-heading td,.fc-unthemed .fc-popover .fc-header{background:#eee}.fc-unthemed td.fc-today{background:#fcf8e3}.fc-unthemed .fc-disabled-day{background:#d7d7d7;opacity:.3}.fc-icon{display:inline-block;height:1em;line-height:1em;font-size:1em;font-family:"Courier New",Courier,monospace;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fc-icon:after{position:relative}.fc-icon-left-single-arrow:after{content:"\2039";font-weight:700;font-size:200%;top:-7%}.fc-icon-right-single-arrow:after{content:"\203A";font-weight:700;font-size:200%;top:-7%}.fc-icon-left-double-arrow:after{content:"\AB";font-size:160%;top:-7%}.fc-icon-right-double-arrow:after{content:"\BB";font-size:160%;top:-7%}.fc-icon-left-triangle:after{content:"\25C4";font-size:125%;top:3%}.fc-icon-right-triangle:after{content:"\25BA";font-size:125%;top:3%}.fc-icon-down-triangle:after{content:"\25BC";font-size:125%;top:2%}.fc-icon-x:after{content:"\D7";font-size:200%;top:6%}.fc-unthemed .fc-popover .fc-header .fc-close{color:#666;font-size:.9em;margin-top:2px}.fc-unthemed .fc-list-item:hover td{background-color:#f5f5f5}.ui-widget .fc-disabled-day{background-image:none}.fc-bootstrap3 .fc-time-grid .fc-slats table,.fc-bootstrap4 .fc-time-grid .fc-slats table,.fc-time-grid .fc-slats .ui-widget-content{background:0 0}.fc-popover>.ui-widget-header+.ui-widget-content{border-top:0}.fc-bootstrap3 hr.fc-divider,.fc-bootstrap4 hr.fc-divider{border-color:inherit}.ui-widget .fc-event{color:#fff;font-weight:400}.ui-widget td.fc-axis{font-weight:400}.fc.fc-bootstrap3 a[data-goto]:hover{text-decoration:underline}.fc.fc-bootstrap4 a{text-decoration:none}.fc.fc-bootstrap4 a[data-goto]:hover{text-decoration:underline}.fc-bootstrap4 a.fc-event:not([href]):not([tabindex]){color:#fff}.fc-bootstrap4 .fc-popover.card{position:absolute}.fc-toolbar.fc-header-toolbar{margin-bottom:1em}.fc-toolbar.fc-footer-toolbar{margin-top:1em}.fc-toolbar .fc-left{float:left}.fc-toolbar .fc-right{float:right}.fc-toolbar .fc-center{display:inline-block}.fc .fc-toolbar>*>*{float:left;margin-left:.75em}.fc .fc-toolbar>*>:first-child{margin-left:0}.fc-toolbar h2{margin:0}.fc-toolbar button{position:relative}.fc-toolbar .fc-state-hover,.fc-toolbar .ui-state-hover{z-index:2}.fc-toolbar .fc-state-down{z-index:3}.fc-toolbar .fc-state-active,.fc-toolbar .ui-state-active{z-index:4}.fc-toolbar button:focus{z-index:5}.fc-view-container *,.fc-view-container :after,.fc-view-container :before{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.fc-view,.fc-view>table{position:relative;z-index:1}.fc-basicDay-view .fc-content-skeleton,.fc-basicWeek-view .fc-content-skeleton{padding-bottom:1em}.fc-basic-view .fc-body .fc-row{min-height:4em}.fc-row.fc-rigid .fc-content-skeleton{position:absolute;top:0;left:0;right:0}.fc-day-top.fc-other-month{opacity:.3}.fc-basic-view .fc-day-number,.fc-basic-view .fc-week-number{padding:2px}.fc-basic-view th.fc-day-number,.fc-basic-view th.fc-week-number{padding:0 2px}.fc-ltr .fc-basic-view .fc-day-top .fc-day-number{float:right}.fc-rtl .fc-basic-view .fc-day-top .fc-day-number{float:left}.fc-ltr .fc-basic-view .fc-day-top .fc-week-number{float:left;border-radius:0 0 3px}.fc-rtl .fc-basic-view .fc-day-top .fc-week-number{float:right;border-radius:0 0 0 3px}.fc-basic-view .fc-day-top .fc-week-number{min-width:1.5em;background-color:#f2f2f2;color:grey}.fc-basic-view td.fc-week-number>*{display:inline-block;min-width:1.25em}.fc-agenda-view .fc-day-grid{position:relative;z-index:2}.fc-agenda-view .fc-day-grid .fc-row{min-height:3em}.fc-agenda-view .fc-day-grid .fc-row .fc-content-skeleton{padding-bottom:1em}.fc .fc-axis{vertical-align:middle;padding:0 4px}.fc-ltr .fc-axis{text-align:right}.fc-rtl .fc-axis{text-align:left}.fc-time-grid,.fc-time-grid-container{position:relative;z-index:1}.fc-time-grid{min-height:100%}.fc-time-grid table{border:0 hidden transparent}.fc-time-grid>.fc-bg{z-index:1}.fc-time-grid .fc-slats,.fc-time-grid>hr{position:relative;z-index:2}.fc-time-grid .fc-content-col{position:relative}.fc-time-grid .fc-content-skeleton{position:absolute;z-index:3;top:0;left:0;right:0}.fc-time-grid .fc-business-container{position:relative;z-index:1}.fc-time-grid .fc-bgevent-container{position:relative;z-index:2}.fc-time-grid .fc-highlight-container{z-index:3;position:relative}.fc-time-grid .fc-event-container{position:relative;z-index:4}.fc-time-grid .fc-now-indicator-line{z-index:5}.fc-time-grid .fc-helper-container{position:relative;z-index:6}.fc-time-grid .fc-slats td{height:1.5em;border-bottom:0}.fc-time-grid .fc-slats .fc-minor td{border-top-style:dotted}.fc-time-grid .fc-highlight{position:absolute;left:0;right:0}.fc-ltr .fc-time-grid .fc-event-container{margin:0 2.5% 0 2px}.fc-rtl .fc-time-grid .fc-event-container{margin:0 2px 0 2.5%}.fc-time-grid .fc-bgevent,.fc-time-grid .fc-event{position:absolute;z-index:1}.fc-time-grid .fc-bgevent{left:0;right:0}.fc-v-event.fc-not-start{border-top-width:0;padding-top:1px;border-top-left-radius:0;border-top-right-radius:0}.fc-v-event.fc-not-end{border-bottom-width:0;padding-bottom:1px;border-bottom-left-radius:0;border-bottom-right-radius:0}.fc-time-grid-event.fc-selected{overflow:visible}.fc-time-grid-event.fc-selected .fc-bg{display:none}.fc-time-grid-event .fc-content{overflow:hidden}.fc-time-grid-event .fc-time,.fc-time-grid-event .fc-title{padding:0 1px}.fc-time-grid-event .fc-time{font-size:.85em}.fc-time-grid-event.fc-short .fc-time,.fc-time-grid-event.fc-short .fc-title{display:inline-block;vertical-align:top}.fc-time-grid-event.fc-short .fc-time span{display:none}.fc-time-grid-event.fc-short .fc-time:before{content:attr(data-start)}.fc-time-grid-event.fc-short .fc-time:after{content:"\A0-\A0"}.fc-time-grid-event.fc-short .fc-title{font-size:.85em;padding:0}.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer{left:0;right:0;bottom:0;height:8px;overflow:hidden;line-height:8px;font-size:11px;font-family:monospace;text-align:center;cursor:s-resize}.fc-time-grid-event.fc-allow-mouse-resize .fc-resizer:after{content:"="}.fc-time-grid-event.fc-selected .fc-resizer{border-radius:5px;border-width:1px;width:8px;height:8px;border-style:solid;border-color:inherit;background:#fff;left:50%;margin-left:-5px;bottom:-5px}.fc-time-grid .fc-now-indicator-line{border-top-width:1px;left:0;right:0}.fc-time-grid .fc-now-indicator-arrow{margin-top:-5px}.fc-ltr .fc-time-grid .fc-now-indicator-arrow{left:0;border-width:5px 0 5px 6px;border-top-color:transparent;border-bottom-color:transparent}.fc-rtl .fc-time-grid .fc-now-indicator-arrow{right:0;border-width:5px 6px 5px 0;border-top-color:transparent;border-bottom-color:transparent}.fc-event-dot{display:inline-block;width:10px;height:10px;border-radius:5px}.fc-rtl .fc-list-view{direction:rtl}.fc-list-view{border-width:1px;border-style:solid}.fc .fc-list-table{table-layout:auto}.fc-list-table td{border-width:1px 0 0;padding:8px 14px}.fc-list-table tr:first-child td{border-top-width:0}.fc-list-heading{border-bottom-width:1px}.fc-list-heading td{font-weight:700}.fc-ltr .fc-list-heading-main{float:left}.fc-ltr .fc-list-heading-alt,.fc-rtl .fc-list-heading-main{float:right}.fc-rtl .fc-list-heading-alt{float:left}.fc-list-item.fc-has-url{cursor:pointer}.fc-list-item-marker,.fc-list-item-time{width:1px}.fc-ltr .fc-list-item-marker{padding-right:0}.fc-rtl .fc-list-item-marker{padding-left:0}.fc-list-item-title a{text-decoration:none;color:inherit}.fc-list-item-title a[href]:hover{text-decoration:underline}.fc-list-empty-wrap2{position:absolute;top:0;left:0;right:0;bottom:0}.fc-list-empty-wrap1{width:100%;height:100%;display:table}.fc-list-empty{display:table-cell;vertical-align:middle;text-align:center}.fc-unthemed .fc-list-empty{background-color:#eee}
\ No newline at end of file
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/fullcalendar-scheduler-1.10.1/scheduler.min.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/fullcalendar-scheduler-1.10.1/scheduler.min.css
new file mode 100644
index 0000000000..6ac6fbaee8
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/fullcalendar-scheduler-1.10.1/scheduler.min.css
@@ -0,0 +1,5 @@
+/*!
+ * FullCalendar Scheduler v1.10.1
+ * Docs & License: https://fullcalendar.io/scheduler/
+ * (c) 2019 Adam Shaw
+ */.fc-resource-area .fc-cell-content,.fc-timeline .fc-cell-text{padding-left:4px;padding-right:4px}.fc-scroller-clip{overflow:hidden;position:relative}.fc-no-scrollbars{background:rgba(255,255,255,0)}.fc-timeline .fc-body .fc-divider.ui-widget-header,.fc-timeline .fc-body .ui-widget-content{background-image:none}.fc-no-scrollbars::-webkit-scrollbar{width:0;height:0}.fc-scroller-canvas{position:relative;box-sizing:border-box;min-height:100%}.fc-scroller-canvas>.fc-bg{z-index:1}.fc-scroller-canvas>.fc-content{z-index:2;position:relative;border-style:solid;border-width:0}.ui-widget .fc-scroller-canvas>.fc-content{border-color:transparent}.fc-scroller-canvas.fc-gutter-left>.fc-content{border-left-width:1px;margin-left:-1px}.fc-scroller-canvas.fc-gutter-right>.fc-content{border-right-width:1px;margin-right:-1px}.fc-scroller-canvas.fc-gutter-top>.fc-content{border-top-width:1px;margin-top:-1px}.fc-rtl .fc-timeline{direction:rtl}.fc-timeline .fc-divider{width:3px;border-style:double}.fc-timeline .fc-head>tr>.fc-divider{border-bottom:0}.fc-timeline .fc-body>tr>.fc-divider{border-top:0}.fc-scrolled .fc-head .fc-scroller{z-index:2}.fc-timeline.fc-scrolled .fc-head .fc-scroller{box-shadow:0 3px 4px rgba(0,0,0,.075)}.fc-timeline .fc-body .fc-scroller{z-index:1}.fc-timeline .fc-scroller-canvas>div>div>table,.fc-timeline .fc-scroller-canvas>div>table{border-style:hidden}.fc-timeline .fc-scroller-canvas>.fc-content>.fc-rows>table{border-bottom-style:none}.fc-timeline td,.fc-timeline th{white-space:nowrap}.fc-timeline .fc-cell-content{overflow:hidden}.fc-timeline .fc-col-resizer{cursor:col-resize}.fc-timeline th{vertical-align:middle}.fc-timeline .fc-head .fc-cell-content{padding-top:3px;padding-bottom:3px}.fc-resource-area{width:30%}.fc-resource-area col{width:40%;min-width:70px}.fc-resource-area col.fc-main-col{width:60%}.fc-flat .fc-expander-space{display:none}.fc-ltr .fc-resource-area tr>*{text-align:left}.fc-rtl .fc-resource-area tr>*{text-align:right}.fc-resource-area .fc-super th{text-align:center}.fc-resource-area th>div{position:relative}.fc-resource-area th .fc-cell-content{position:relative;z-index:1}.fc-resource-area th .fc-col-resizer{position:absolute;z-index:2;top:0;bottom:0;width:5px}.fc-ltr .fc-resource-area th .fc-col-resizer{right:-3px}.fc-rtl .fc-resource-area th .fc-col-resizer{left:-3px}tr.fc-collapsed>td,tr.fc-transitioning>td{overflow:hidden}tr.fc-transitioning>td>div{transition:margin-top .2s}tr.fc-collapsed>td>div{margin-top:-10px}.fc-body .fc-resource-area .fc-cell-content{position:relative;padding-top:8px;padding-bottom:8px}.fc-no-overlap .fc-body .fc-resource-area .fc-cell-content{padding-top:5px;padding-bottom:5px}.fc-resource-area .fc-icon{width:1em;font-size:.9em;vertical-align:middle;margin-top:-1%}.fc-resource-area .fc-expander{cursor:pointer;color:#666}.fc-time-area col{min-width:2.2em}.fc-ltr .fc-time-area .fc-chrono th{text-align:left}.fc-rtl .fc-time-area .fc-chrono th{text-align:right}.fc-time-area .fc-slats{position:absolute;z-index:1;top:0;left:0;right:0;bottom:0}.fc-time-area .fc-slats table{height:100%}.fc-time-area .fc-slats .fc-minor{border-style:dotted}.fc-time-area .fc-slats td{border-width:0 1px}.fc-ltr .fc-time-area .fc-slats td{border-right-width:0}.fc-rtl .fc-time-area .fc-slats td{border-left-width:0}.fc-time-area .fc-bgevent-container,.fc-time-area .fc-highlight-container{position:absolute;z-index:2;top:0;bottom:0;width:0}.fc-ltr .fc-time-area .fc-bgevent-container,.fc-ltr .fc-time-area .fc-helper-container,.fc-ltr .fc-time-area .fc-highlight-container{left:0}.fc-rtl .fc-time-area .fc-bgevent-container,.fc-rtl .fc-time-area .fc-helper-container,.fc-rtl .fc-time-area .fc-highlight-container{right:0}.fc-time-area .fc-bgevent,.fc-time-area .fc-highlight{position:absolute;top:0;bottom:0}.fc-time-area .fc-rows{position:relative;z-index:3}.fc-time-area .fc-rows .ui-widget-content{background:0 0}.fc-time-area .fc-rows td>div{position:relative}.fc-time-area .fc-rows .fc-bgevent-container,.fc-time-area .fc-rows .fc-highlight-container{z-index:1}.fc-time-area .fc-event-container{position:relative;z-index:2;width:0}.fc-time-area .fc-helper-container{position:absolute;z-index:3;top:0}.fc-time-area .fc-event-container{padding-bottom:8px;top:-1px}.fc-time-area tr:first-child .fc-event-container{top:0}.fc-no-overlap .fc-time-area .fc-event-container{padding-bottom:0;top:0}.fc-timeline .fc-now-indicator{z-index:3;top:0}.fc-time-area .fc-now-indicator-arrow{margin:0 -6px;border-width:6px 5px 0;border-left-color:transparent;border-right-color:transparent}.fc-time-area .fc-now-indicator-line{margin:0 -1px;bottom:0;border-left-width:1px}.fc-timeline-event{position:absolute;border-radius:0;padding:2px 0;margin-bottom:1px}.fc-no-overlap .fc-timeline-event{padding:5px 0;margin-bottom:0}.fc-ltr .fc-timeline-event{margin-right:1px}.fc-rtl .fc-timeline-event{margin-left:1px}.fc-timeline-event .fc-content{padding:0 1px;white-space:nowrap;overflow:hidden}.fc-timeline-event .fc-time{font-weight:700;padding:0 1px}.fc-rtl .fc-timeline-event .fc-time{display:inline-block}.fc-timeline-event .fc-title{position:relative;padding:0 1px}.fc-timeline-event.fc-selected .fc-bg{display:none}.fc-ltr .fc-timeline-event .fc-title{padding-left:10px;margin-left:-8px}.fc-rtl .fc-timeline-event .fc-title{padding-right:10px;margin-right:-8px}.fc-ltr .fc-timeline-event.fc-not-start .fc-title{margin-left:-2px}.fc-rtl .fc-timeline-event.fc-not-start .fc-title{margin-right:-2px}.fc-body .fc-time-area .fc-following,.fc-timeline-event.fc-not-start .fc-title{position:relative}.fc-body .fc-time-area .fc-following:before,.fc-timeline-event.fc-not-start .fc-title:before{content:"";position:absolute;top:50%;margin-top:-5px;border:5px solid #000;border-top-color:transparent;border-bottom-color:transparent;opacity:.5}.fc-ltr .fc-body .fc-time-area .fc-following:before,.fc-ltr .fc-timeline-event.fc-not-start .fc-title:before{border-left:0;left:2px}.fc-rtl .fc-body .fc-time-area .fc-following:before,.fc-rtl .fc-timeline-event.fc-not-start .fc-title:before{border-right:0;right:2px}.fc-license-message{position:absolute;z-index:99999;bottom:1px;left:1px;background:#eee;border-color:#ddd;border-style:solid;border-width:1px 1px 0 0;padding:2px 4px;font-size:12px;border-top-right-radius:3px}
\ No newline at end of file
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/jstree-theme/default/32px.png b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/jstree-theme/default/32px.png
new file mode 100644
index 0000000000..4357b91028
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/jstree-theme/default/32px.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/jstree-theme/default/40px.png b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/jstree-theme/default/40px.png
new file mode 100644
index 0000000000..d0255223f4
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/jstree-theme/default/40px.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/jstree-theme/default/style.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/jstree-theme/default/style.css
new file mode 100644
index 0000000000..0703168bde
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/jstree-theme/default/style.css
@@ -0,0 +1,1102 @@
+/* jsTree default theme */
+.jstree-node,
+.jstree-children,
+.jstree-container-ul {
+ display: block;
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+ list-style-image: none;
+}
+.jstree-node {
+ white-space: nowrap;
+}
+.jstree-anchor {
+ display: inline-block;
+ color: black;
+ white-space: nowrap;
+ padding: 0 4px 0 1px;
+ margin: 0;
+ vertical-align: top;
+}
+.jstree-anchor:focus {
+ outline: 0;
+}
+.jstree-anchor,
+.jstree-anchor:link,
+.jstree-anchor:visited,
+.jstree-anchor:hover,
+.jstree-anchor:active {
+ text-decoration: none;
+ color: inherit;
+}
+.jstree-icon {
+ display: inline-block;
+ text-decoration: none;
+ margin: 0;
+ padding: 0;
+ vertical-align: top;
+ text-align: center;
+}
+.jstree-icon:empty {
+ display: inline-block;
+ text-decoration: none;
+ margin: 0;
+ padding: 0;
+ vertical-align: top;
+ text-align: center;
+}
+.jstree-ocl {
+ cursor: pointer;
+}
+.jstree-leaf > .jstree-ocl {
+ cursor: default;
+}
+.jstree .jstree-open > .jstree-children {
+ display: block;
+}
+.jstree .jstree-closed > .jstree-children,
+.jstree .jstree-leaf > .jstree-children {
+ display: none;
+}
+.jstree-anchor > .jstree-themeicon {
+ margin-right: 2px;
+}
+.jstree-no-icons .jstree-themeicon,
+.jstree-anchor > .jstree-themeicon-hidden {
+ display: none;
+}
+.jstree-hidden,
+.jstree-node.jstree-hidden {
+ display: none;
+}
+.jstree-rtl .jstree-anchor {
+ padding: 0 1px 0 4px;
+}
+.jstree-rtl .jstree-anchor > .jstree-themeicon {
+ margin-left: 2px;
+ margin-right: 0;
+}
+.jstree-rtl .jstree-node {
+ margin-left: 0;
+}
+.jstree-rtl .jstree-container-ul > .jstree-node {
+ margin-right: 0;
+}
+.jstree-wholerow-ul {
+ position: relative;
+ display: inline-block;
+ min-width: 100%;
+}
+.jstree-wholerow-ul .jstree-leaf > .jstree-ocl {
+ cursor: pointer;
+}
+.jstree-wholerow-ul .jstree-anchor,
+.jstree-wholerow-ul .jstree-icon {
+ position: relative;
+}
+.jstree-wholerow-ul .jstree-wholerow {
+ width: 100%;
+ cursor: pointer;
+ position: absolute;
+ left: 0;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+.jstree-contextmenu .jstree-anchor {
+ -webkit-user-select: none;
+ /* disable selection/Copy of UIWebView */
+ -webkit-touch-callout: none;
+ /* disable the IOS popup when long-press on a link */
+}
+.vakata-context {
+ display: none;
+}
+.vakata-context,
+.vakata-context ul {
+ margin: 0;
+ padding: 2px;
+ position: absolute;
+ background: #f5f5f5;
+ border: 1px solid #979797;
+ box-shadow: 2px 2px 2px #999999;
+}
+.vakata-context ul {
+ list-style: none;
+ left: 100%;
+ margin-top: -2.7em;
+ margin-left: -4px;
+}
+.vakata-context .vakata-context-right ul {
+ left: auto;
+ right: 100%;
+ margin-left: auto;
+ margin-right: -4px;
+}
+.vakata-context li {
+ list-style: none;
+}
+.vakata-context li > a {
+ display: block;
+ padding: 0 2em 0 2em;
+ text-decoration: none;
+ width: auto;
+ color: black;
+ white-space: nowrap;
+ line-height: 2.4em;
+ text-shadow: 1px 1px 0 white;
+ border-radius: 1px;
+}
+.vakata-context li > a:hover {
+ position: relative;
+ background-color: #e8eff7;
+ box-shadow: 0 0 2px #0a6aa1;
+}
+.vakata-context li > a.vakata-context-parent {
+ background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==");
+ background-position: right center;
+ background-repeat: no-repeat;
+}
+.vakata-context li > a:focus {
+ outline: 0;
+}
+.vakata-context .vakata-context-hover > a {
+ position: relative;
+ background-color: #e8eff7;
+ box-shadow: 0 0 2px #0a6aa1;
+}
+.vakata-context .vakata-context-separator > a,
+.vakata-context .vakata-context-separator > a:hover {
+ background: white;
+ border: 0;
+ border-top: 1px solid #e2e3e3;
+ height: 1px;
+ min-height: 1px;
+ max-height: 1px;
+ padding: 0;
+ margin: 0 0 0 2.4em;
+ border-left: 1px solid #e0e0e0;
+ text-shadow: 0 0 0 transparent;
+ box-shadow: 0 0 0 transparent;
+ border-radius: 0;
+}
+.vakata-context .vakata-contextmenu-disabled a,
+.vakata-context .vakata-contextmenu-disabled a:hover {
+ color: silver;
+ background-color: transparent;
+ border: 0;
+ box-shadow: 0 0 0;
+}
+.vakata-context .vakata-contextmenu-disabled > a > i {
+ filter: grayscale(100%);
+}
+.vakata-context li > a > i {
+ text-decoration: none;
+ display: inline-block;
+ width: 2.4em;
+ height: 2.4em;
+ background: transparent;
+ margin: 0 0 0 -2em;
+ vertical-align: top;
+ text-align: center;
+ line-height: 2.4em;
+}
+.vakata-context li > a > i:empty {
+ width: 2.4em;
+ line-height: 2.4em;
+}
+.vakata-context li > a .vakata-contextmenu-sep {
+ display: inline-block;
+ width: 1px;
+ height: 2.4em;
+ background: white;
+ margin: 0 0.5em 0 0;
+ border-left: 1px solid #e2e3e3;
+}
+.vakata-context .vakata-contextmenu-shortcut {
+ font-size: 0.8em;
+ color: silver;
+ opacity: 0.5;
+ display: none;
+}
+.vakata-context-rtl ul {
+ left: auto;
+ right: 100%;
+ margin-left: auto;
+ margin-right: -4px;
+}
+.vakata-context-rtl li > a.vakata-context-parent {
+ background-image: url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAINjI+AC7rWHIsPtmoxLAA7");
+ background-position: left center;
+ background-repeat: no-repeat;
+}
+.vakata-context-rtl .vakata-context-separator > a {
+ margin: 0 2.4em 0 0;
+ border-left: 0;
+ border-right: 1px solid #e2e3e3;
+}
+.vakata-context-rtl .vakata-context-left ul {
+ right: auto;
+ left: 100%;
+ margin-left: -4px;
+ margin-right: auto;
+}
+.vakata-context-rtl li > a > i {
+ margin: 0 -2em 0 0;
+}
+.vakata-context-rtl li > a .vakata-contextmenu-sep {
+ margin: 0 0 0 0.5em;
+ border-left-color: white;
+ background: #e2e3e3;
+}
+#jstree-marker {
+ position: absolute;
+ top: 0;
+ left: 0;
+ margin: -5px 0 0 0;
+ padding: 0;
+ border-right: 0;
+ border-top: 5px solid transparent;
+ border-bottom: 5px solid transparent;
+ border-left: 5px solid;
+ width: 0;
+ height: 0;
+ font-size: 0;
+ line-height: 0;
+}
+#jstree-dnd {
+ line-height: 16px;
+ margin: 0;
+ padding: 4px;
+}
+#jstree-dnd .jstree-icon,
+#jstree-dnd .jstree-copy {
+ display: inline-block;
+ text-decoration: none;
+ margin: 0 2px 0 0;
+ padding: 0;
+ width: 16px;
+ height: 16px;
+}
+#jstree-dnd .jstree-ok {
+ background: green;
+}
+#jstree-dnd .jstree-er {
+ background: red;
+}
+#jstree-dnd .jstree-copy {
+ margin: 0 2px 0 2px;
+}
+.jstree-default .jstree-node,
+.jstree-default .jstree-icon {
+ background-repeat: no-repeat;
+ background-color: transparent;
+}
+.jstree-default .jstree-anchor,
+.jstree-default .jstree-animated,
+.jstree-default .jstree-wholerow {
+ transition: background-color 0.15s, box-shadow 0.15s;
+}
+.jstree-default .jstree-hovered {
+ background: #e7f4f9;
+ border-radius: 2px;
+ box-shadow: inset 0 0 1px #cccccc;
+}
+.jstree-default .jstree-context {
+ background: #e7f4f9;
+ border-radius: 2px;
+ box-shadow: inset 0 0 1px #cccccc;
+}
+.jstree-default .jstree-clicked {
+ background: #beebff;
+ border-radius: 2px;
+ box-shadow: inset 0 0 1px #999999;
+}
+.jstree-default .jstree-no-icons .jstree-anchor > .jstree-themeicon {
+ display: none;
+}
+.jstree-default .jstree-disabled {
+ background: transparent;
+ color: #666666;
+}
+.jstree-default .jstree-disabled.jstree-hovered {
+ background: transparent;
+ box-shadow: none;
+}
+.jstree-default .jstree-disabled.jstree-clicked {
+ background: #efefef;
+}
+.jstree-default .jstree-disabled > .jstree-icon {
+ opacity: 0.8;
+ filter: url("data:image/svg+xml;utf8,
#jstree-grayscale");
+ /* Firefox 10+ */
+ filter: gray;
+ /* IE6-9 */
+ -webkit-filter: grayscale(100%);
+ /* Chrome 19+ & Safari 6+ */
+}
+.jstree-default .jstree-search {
+ font-style: italic;
+ color: #8b0000;
+ font-weight: bold;
+}
+.jstree-default .jstree-no-checkboxes .jstree-checkbox {
+ display: none !important;
+}
+.jstree-default.jstree-checkbox-no-clicked .jstree-clicked {
+ background: transparent;
+ box-shadow: none;
+}
+.jstree-default.jstree-checkbox-no-clicked .jstree-clicked.jstree-hovered {
+ background: #e7f4f9;
+}
+.jstree-default.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked {
+ background: transparent;
+}
+.jstree-default.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked.jstree-wholerow-hovered {
+ background: #e7f4f9;
+}
+.jstree-default > .jstree-striped {
+ min-width: 100%;
+ display: inline-block;
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAMAAAB/qqA+AAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMNAMM9s3UAAAAXSURBVHjajcEBAQAAAIKg/H/aCQZ70AUBjAATb6YPDgAAAABJRU5ErkJggg==") left top repeat;
+}
+.jstree-default > .jstree-wholerow-ul .jstree-hovered,
+.jstree-default > .jstree-wholerow-ul .jstree-clicked {
+ background: transparent;
+ box-shadow: none;
+ border-radius: 0;
+}
+.jstree-default .jstree-wholerow {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.jstree-default .jstree-wholerow-hovered {
+ background: #e7f4f9;
+}
+.jstree-default .jstree-wholerow-clicked {
+ background: #beebff;
+ background: -webkit-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
+ background: linear-gradient(to bottom, #beebff 0%, #a8e4ff 100%);
+}
+.jstree-default .jstree-node {
+ min-height: 24px;
+ line-height: 24px;
+ margin-left: 24px;
+ min-width: 24px;
+}
+.jstree-default .jstree-anchor {
+ line-height: 24px;
+ height: 24px;
+}
+.jstree-default .jstree-icon {
+ width: 24px;
+ height: 24px;
+ line-height: 24px;
+}
+.jstree-default .jstree-icon:empty {
+ width: 24px;
+ height: 24px;
+ line-height: 24px;
+}
+.jstree-default.jstree-rtl .jstree-node {
+ margin-right: 24px;
+}
+.jstree-default .jstree-wholerow {
+ height: 24px;
+}
+.jstree-default .jstree-node,
+.jstree-default .jstree-icon {
+ background-image: url("32px.png");
+}
+.jstree-default .jstree-node {
+ background-position: -292px -4px;
+ background-repeat: repeat-y;
+}
+.jstree-default .jstree-last {
+ background: transparent;
+}
+.jstree-default .jstree-open > .jstree-ocl {
+ background-position: -132px -4px;
+}
+.jstree-default .jstree-closed > .jstree-ocl {
+ background-position: -100px -4px;
+}
+.jstree-default .jstree-leaf > .jstree-ocl {
+ background-position: -68px -4px;
+}
+.jstree-default .jstree-themeicon {
+ background-position: -260px -4px;
+}
+.jstree-default > .jstree-no-dots .jstree-node,
+.jstree-default > .jstree-no-dots .jstree-leaf > .jstree-ocl {
+ background: transparent;
+}
+.jstree-default > .jstree-no-dots .jstree-open > .jstree-ocl {
+ background-position: -36px -4px;
+}
+.jstree-default > .jstree-no-dots .jstree-closed > .jstree-ocl {
+ background-position: -4px -4px;
+}
+.jstree-default .jstree-disabled {
+ background: transparent;
+}
+.jstree-default .jstree-disabled.jstree-hovered {
+ background: transparent;
+}
+.jstree-default .jstree-disabled.jstree-clicked {
+ background: #efefef;
+}
+.jstree-default .jstree-checkbox {
+ background-position: -164px -4px;
+}
+.jstree-default .jstree-checkbox:hover {
+ background-position: -164px -36px;
+}
+.jstree-default.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox,
+.jstree-default .jstree-checked > .jstree-checkbox {
+ background-position: -228px -4px;
+}
+.jstree-default.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox:hover,
+.jstree-default .jstree-checked > .jstree-checkbox:hover {
+ background-position: -228px -36px;
+}
+.jstree-default .jstree-anchor > .jstree-undetermined {
+ background-position: -196px -4px;
+}
+.jstree-default .jstree-anchor > .jstree-undetermined:hover {
+ background-position: -196px -36px;
+}
+.jstree-default .jstree-checkbox-disabled {
+ opacity: 0.8;
+ filter: url("data:image/svg+xml;utf8,
#jstree-grayscale");
+ /* Firefox 10+ */
+ filter: gray;
+ /* IE6-9 */
+ -webkit-filter: grayscale(100%);
+ /* Chrome 19+ & Safari 6+ */
+}
+.jstree-default > .jstree-striped {
+ background-size: auto 48px;
+}
+.jstree-default.jstree-rtl .jstree-node {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
+ background-position: 100% 1px;
+ background-repeat: repeat-y;
+}
+.jstree-default.jstree-rtl .jstree-last {
+ background: transparent;
+}
+.jstree-default.jstree-rtl .jstree-open > .jstree-ocl {
+ background-position: -132px -36px;
+}
+.jstree-default.jstree-rtl .jstree-closed > .jstree-ocl {
+ background-position: -100px -36px;
+}
+.jstree-default.jstree-rtl .jstree-leaf > .jstree-ocl {
+ background-position: -68px -36px;
+}
+.jstree-default.jstree-rtl > .jstree-no-dots .jstree-node,
+.jstree-default.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
+ background: transparent;
+}
+.jstree-default.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
+ background-position: -36px -36px;
+}
+.jstree-default.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
+ background-position: -4px -36px;
+}
+.jstree-default .jstree-themeicon-custom {
+ background-color: transparent;
+ background-image: none;
+ background-position: 0 0;
+}
+.jstree-default > .jstree-container-ul .jstree-loading > .jstree-ocl {
+ background: url("throbber.gif") center center no-repeat;
+}
+.jstree-default .jstree-file {
+ background: url("32px.png") -100px -68px no-repeat;
+}
+.jstree-default .jstree-folder {
+ background: url("32px.png") -260px -4px no-repeat;
+}
+.jstree-default > .jstree-container-ul > .jstree-node {
+ margin-left: 0;
+ margin-right: 0;
+}
+#jstree-dnd.jstree-default {
+ line-height: 24px;
+ padding: 0 4px;
+}
+#jstree-dnd.jstree-default .jstree-ok,
+#jstree-dnd.jstree-default .jstree-er {
+ background-image: url("32px.png");
+ background-repeat: no-repeat;
+ background-color: transparent;
+}
+#jstree-dnd.jstree-default i {
+ background: transparent;
+ width: 24px;
+ height: 24px;
+ line-height: 24px;
+}
+#jstree-dnd.jstree-default .jstree-ok {
+ background-position: -4px -68px;
+}
+#jstree-dnd.jstree-default .jstree-er {
+ background-position: -36px -68px;
+}
+.jstree-default .jstree-ellipsis {
+ overflow: hidden;
+}
+.jstree-default .jstree-ellipsis .jstree-anchor {
+ width: calc(100% - 29px);
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.jstree-default.jstree-rtl .jstree-node {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
+}
+.jstree-default.jstree-rtl .jstree-last {
+ background: transparent;
+}
+.jstree-default-small .jstree-node {
+ min-height: 18px;
+ line-height: 18px;
+ margin-left: 18px;
+ min-width: 18px;
+}
+.jstree-default-small .jstree-anchor {
+ line-height: 18px;
+ height: 18px;
+}
+.jstree-default-small .jstree-icon {
+ width: 18px;
+ height: 18px;
+ line-height: 18px;
+}
+.jstree-default-small .jstree-icon:empty {
+ width: 18px;
+ height: 18px;
+ line-height: 18px;
+}
+.jstree-default-small.jstree-rtl .jstree-node {
+ margin-right: 18px;
+}
+.jstree-default-small .jstree-wholerow {
+ height: 18px;
+}
+.jstree-default-small .jstree-node,
+.jstree-default-small .jstree-icon {
+ background-image: url("32px.png");
+}
+.jstree-default-small .jstree-node {
+ background-position: -295px -7px;
+ background-repeat: repeat-y;
+}
+.jstree-default-small .jstree-last {
+ background: transparent;
+}
+.jstree-default-small .jstree-open > .jstree-ocl {
+ background-position: -135px -7px;
+}
+.jstree-default-small .jstree-closed > .jstree-ocl {
+ background-position: -103px -7px;
+}
+.jstree-default-small .jstree-leaf > .jstree-ocl {
+ background-position: -71px -7px;
+}
+.jstree-default-small .jstree-themeicon {
+ background-position: -263px -7px;
+}
+.jstree-default-small > .jstree-no-dots .jstree-node,
+.jstree-default-small > .jstree-no-dots .jstree-leaf > .jstree-ocl {
+ background: transparent;
+}
+.jstree-default-small > .jstree-no-dots .jstree-open > .jstree-ocl {
+ background-position: -39px -7px;
+}
+.jstree-default-small > .jstree-no-dots .jstree-closed > .jstree-ocl {
+ background-position: -7px -7px;
+}
+.jstree-default-small .jstree-disabled {
+ background: transparent;
+}
+.jstree-default-small .jstree-disabled.jstree-hovered {
+ background: transparent;
+}
+.jstree-default-small .jstree-disabled.jstree-clicked {
+ background: #efefef;
+}
+.jstree-default-small .jstree-checkbox {
+ background-position: -167px -7px;
+}
+.jstree-default-small .jstree-checkbox:hover {
+ background-position: -167px -39px;
+}
+.jstree-default-small.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox,
+.jstree-default-small .jstree-checked > .jstree-checkbox {
+ background-position: -231px -7px;
+}
+.jstree-default-small.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox:hover,
+.jstree-default-small .jstree-checked > .jstree-checkbox:hover {
+ background-position: -231px -39px;
+}
+.jstree-default-small .jstree-anchor > .jstree-undetermined {
+ background-position: -199px -7px;
+}
+.jstree-default-small .jstree-anchor > .jstree-undetermined:hover {
+ background-position: -199px -39px;
+}
+.jstree-default-small .jstree-checkbox-disabled {
+ opacity: 0.8;
+ filter: url("data:image/svg+xml;utf8,
#jstree-grayscale");
+ /* Firefox 10+ */
+ filter: gray;
+ /* IE6-9 */
+ -webkit-filter: grayscale(100%);
+ /* Chrome 19+ & Safari 6+ */
+}
+.jstree-default-small > .jstree-striped {
+ background-size: auto 36px;
+}
+.jstree-default-small.jstree-rtl .jstree-node {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
+ background-position: 100% 1px;
+ background-repeat: repeat-y;
+}
+.jstree-default-small.jstree-rtl .jstree-last {
+ background: transparent;
+}
+.jstree-default-small.jstree-rtl .jstree-open > .jstree-ocl {
+ background-position: -135px -39px;
+}
+.jstree-default-small.jstree-rtl .jstree-closed > .jstree-ocl {
+ background-position: -103px -39px;
+}
+.jstree-default-small.jstree-rtl .jstree-leaf > .jstree-ocl {
+ background-position: -71px -39px;
+}
+.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-node,
+.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
+ background: transparent;
+}
+.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
+ background-position: -39px -39px;
+}
+.jstree-default-small.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
+ background-position: -7px -39px;
+}
+.jstree-default-small .jstree-themeicon-custom {
+ background-color: transparent;
+ background-image: none;
+ background-position: 0 0;
+}
+.jstree-default-small > .jstree-container-ul .jstree-loading > .jstree-ocl {
+ background: url("throbber.gif") center center no-repeat;
+}
+.jstree-default-small .jstree-file {
+ background: url("32px.png") -103px -71px no-repeat;
+}
+.jstree-default-small .jstree-folder {
+ background: url("32px.png") -263px -7px no-repeat;
+}
+.jstree-default-small > .jstree-container-ul > .jstree-node {
+ margin-left: 0;
+ margin-right: 0;
+}
+#jstree-dnd.jstree-default-small {
+ line-height: 18px;
+ padding: 0 4px;
+}
+#jstree-dnd.jstree-default-small .jstree-ok,
+#jstree-dnd.jstree-default-small .jstree-er {
+ background-image: url("32px.png");
+ background-repeat: no-repeat;
+ background-color: transparent;
+}
+#jstree-dnd.jstree-default-small i {
+ background: transparent;
+ width: 18px;
+ height: 18px;
+ line-height: 18px;
+}
+#jstree-dnd.jstree-default-small .jstree-ok {
+ background-position: -7px -71px;
+}
+#jstree-dnd.jstree-default-small .jstree-er {
+ background-position: -39px -71px;
+}
+.jstree-default-small .jstree-ellipsis {
+ overflow: hidden;
+}
+.jstree-default-small .jstree-ellipsis .jstree-anchor {
+ width: calc(100% - 23px);
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.jstree-default-small.jstree-rtl .jstree-node {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAACAQMAAABv1h6PAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMHBgAAiABBI4gz9AAAAABJRU5ErkJggg==");
+}
+.jstree-default-small.jstree-rtl .jstree-last {
+ background: transparent;
+}
+.jstree-default-large .jstree-node {
+ min-height: 32px;
+ line-height: 32px;
+ margin-left: 32px;
+ min-width: 32px;
+}
+.jstree-default-large .jstree-anchor {
+ line-height: 32px;
+ height: 32px;
+}
+.jstree-default-large .jstree-icon {
+ width: 32px;
+ height: 32px;
+ line-height: 32px;
+}
+.jstree-default-large .jstree-icon:empty {
+ width: 32px;
+ height: 32px;
+ line-height: 32px;
+}
+.jstree-default-large.jstree-rtl .jstree-node {
+ margin-right: 32px;
+}
+.jstree-default-large .jstree-wholerow {
+ height: 32px;
+}
+.jstree-default-large .jstree-node,
+.jstree-default-large .jstree-icon {
+ background-image: url("32px.png");
+}
+.jstree-default-large .jstree-node {
+ background-position: -288px 0px;
+ background-repeat: repeat-y;
+}
+.jstree-default-large .jstree-last {
+ background: transparent;
+}
+.jstree-default-large .jstree-open > .jstree-ocl {
+ background-position: -128px 0px;
+}
+.jstree-default-large .jstree-closed > .jstree-ocl {
+ background-position: -96px 0px;
+}
+.jstree-default-large .jstree-leaf > .jstree-ocl {
+ background-position: -64px 0px;
+}
+.jstree-default-large .jstree-themeicon {
+ background-position: -256px 0px;
+}
+.jstree-default-large > .jstree-no-dots .jstree-node,
+.jstree-default-large > .jstree-no-dots .jstree-leaf > .jstree-ocl {
+ background: transparent;
+}
+.jstree-default-large > .jstree-no-dots .jstree-open > .jstree-ocl {
+ background-position: -32px 0px;
+}
+.jstree-default-large > .jstree-no-dots .jstree-closed > .jstree-ocl {
+ background-position: 0px 0px;
+}
+.jstree-default-large .jstree-disabled {
+ background: transparent;
+}
+.jstree-default-large .jstree-disabled.jstree-hovered {
+ background: transparent;
+}
+.jstree-default-large .jstree-disabled.jstree-clicked {
+ background: #efefef;
+}
+.jstree-default-large .jstree-checkbox {
+ background-position: -160px 0px;
+}
+.jstree-default-large .jstree-checkbox:hover {
+ background-position: -160px -32px;
+}
+.jstree-default-large.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox,
+.jstree-default-large .jstree-checked > .jstree-checkbox {
+ background-position: -224px 0px;
+}
+.jstree-default-large.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox:hover,
+.jstree-default-large .jstree-checked > .jstree-checkbox:hover {
+ background-position: -224px -32px;
+}
+.jstree-default-large .jstree-anchor > .jstree-undetermined {
+ background-position: -192px 0px;
+}
+.jstree-default-large .jstree-anchor > .jstree-undetermined:hover {
+ background-position: -192px -32px;
+}
+.jstree-default-large .jstree-checkbox-disabled {
+ opacity: 0.8;
+ filter: url("data:image/svg+xml;utf8,
#jstree-grayscale");
+ /* Firefox 10+ */
+ filter: gray;
+ /* IE6-9 */
+ -webkit-filter: grayscale(100%);
+ /* Chrome 19+ & Safari 6+ */
+}
+.jstree-default-large > .jstree-striped {
+ background-size: auto 64px;
+}
+.jstree-default-large.jstree-rtl .jstree-node {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");
+ background-position: 100% 1px;
+ background-repeat: repeat-y;
+}
+.jstree-default-large.jstree-rtl .jstree-last {
+ background: transparent;
+}
+.jstree-default-large.jstree-rtl .jstree-open > .jstree-ocl {
+ background-position: -128px -32px;
+}
+.jstree-default-large.jstree-rtl .jstree-closed > .jstree-ocl {
+ background-position: -96px -32px;
+}
+.jstree-default-large.jstree-rtl .jstree-leaf > .jstree-ocl {
+ background-position: -64px -32px;
+}
+.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-node,
+.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-leaf > .jstree-ocl {
+ background: transparent;
+}
+.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-open > .jstree-ocl {
+ background-position: -32px -32px;
+}
+.jstree-default-large.jstree-rtl > .jstree-no-dots .jstree-closed > .jstree-ocl {
+ background-position: 0px -32px;
+}
+.jstree-default-large .jstree-themeicon-custom {
+ background-color: transparent;
+ background-image: none;
+ background-position: 0 0;
+}
+.jstree-default-large > .jstree-container-ul .jstree-loading > .jstree-ocl {
+ background: url("throbber.gif") center center no-repeat;
+}
+.jstree-default-large .jstree-file {
+ background: url("32px.png") -96px -64px no-repeat;
+}
+.jstree-default-large .jstree-folder {
+ background: url("32px.png") -256px 0px no-repeat;
+}
+.jstree-default-large > .jstree-container-ul > .jstree-node {
+ margin-left: 0;
+ margin-right: 0;
+}
+#jstree-dnd.jstree-default-large {
+ line-height: 32px;
+ padding: 0 4px;
+}
+#jstree-dnd.jstree-default-large .jstree-ok,
+#jstree-dnd.jstree-default-large .jstree-er {
+ background-image: url("32px.png");
+ background-repeat: no-repeat;
+ background-color: transparent;
+}
+#jstree-dnd.jstree-default-large i {
+ background: transparent;
+ width: 32px;
+ height: 32px;
+ line-height: 32px;
+}
+#jstree-dnd.jstree-default-large .jstree-ok {
+ background-position: 0px -64px;
+}
+#jstree-dnd.jstree-default-large .jstree-er {
+ background-position: -32px -64px;
+}
+.jstree-default-large .jstree-ellipsis {
+ overflow: hidden;
+}
+.jstree-default-large .jstree-ellipsis .jstree-anchor {
+ width: calc(100% - 37px);
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.jstree-default-large.jstree-rtl .jstree-node {
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAACAQMAAAAD0EyKAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjgIIGBgABCgCBvVLXcAAAAABJRU5ErkJggg==");
+}
+.jstree-default-large.jstree-rtl .jstree-last {
+ background: transparent;
+}
+@media (max-width: 768px) {
+ #jstree-dnd.jstree-dnd-responsive {
+ line-height: 40px;
+ font-weight: bold;
+ font-size: 1.1em;
+ text-shadow: 1px 1px white;
+ }
+ #jstree-dnd.jstree-dnd-responsive > i {
+ background: transparent;
+ width: 40px;
+ height: 40px;
+ }
+ #jstree-dnd.jstree-dnd-responsive > .jstree-ok {
+ background-image: url("40px.png");
+ background-position: 0 -200px;
+ background-size: 120px 240px;
+ }
+ #jstree-dnd.jstree-dnd-responsive > .jstree-er {
+ background-image: url("40px.png");
+ background-position: -40px -200px;
+ background-size: 120px 240px;
+ }
+ #jstree-marker.jstree-dnd-responsive {
+ border-left-width: 10px;
+ border-top-width: 10px;
+ border-bottom-width: 10px;
+ margin-top: -10px;
+ }
+}
+@media (max-width: 768px) {
+ .jstree-default-responsive {
+ /*
+ .jstree-open > .jstree-ocl,
+ .jstree-closed > .jstree-ocl { border-radius:20px; background-color:white; }
+ */
+ }
+ .jstree-default-responsive .jstree-icon {
+ background-image: url("40px.png");
+ }
+ .jstree-default-responsive .jstree-node,
+ .jstree-default-responsive .jstree-leaf > .jstree-ocl {
+ background: transparent;
+ }
+ .jstree-default-responsive .jstree-node {
+ min-height: 40px;
+ line-height: 40px;
+ margin-left: 40px;
+ min-width: 40px;
+ white-space: nowrap;
+ }
+ .jstree-default-responsive .jstree-anchor {
+ line-height: 40px;
+ height: 40px;
+ }
+ .jstree-default-responsive .jstree-icon,
+ .jstree-default-responsive .jstree-icon:empty {
+ width: 40px;
+ height: 40px;
+ line-height: 40px;
+ }
+ .jstree-default-responsive > .jstree-container-ul > .jstree-node {
+ margin-left: 0;
+ }
+ .jstree-default-responsive.jstree-rtl .jstree-node {
+ margin-left: 0;
+ margin-right: 40px;
+ background: transparent;
+ }
+ .jstree-default-responsive.jstree-rtl .jstree-container-ul > .jstree-node {
+ margin-right: 0;
+ }
+ .jstree-default-responsive .jstree-ocl,
+ .jstree-default-responsive .jstree-themeicon,
+ .jstree-default-responsive .jstree-checkbox {
+ background-size: 120px 240px;
+ }
+ .jstree-default-responsive .jstree-leaf > .jstree-ocl,
+ .jstree-default-responsive.jstree-rtl .jstree-leaf > .jstree-ocl {
+ background: transparent;
+ }
+ .jstree-default-responsive .jstree-open > .jstree-ocl {
+ background-position: 0 0 !important;
+ }
+ .jstree-default-responsive .jstree-closed > .jstree-ocl {
+ background-position: 0 -40px !important;
+ }
+ .jstree-default-responsive.jstree-rtl .jstree-closed > .jstree-ocl {
+ background-position: -40px 0 !important;
+ }
+ .jstree-default-responsive .jstree-themeicon {
+ background-position: -40px -40px;
+ }
+ .jstree-default-responsive .jstree-checkbox,
+ .jstree-default-responsive .jstree-checkbox:hover {
+ background-position: -40px -80px;
+ }
+ .jstree-default-responsive.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox,
+ .jstree-default-responsive.jstree-checkbox-selection .jstree-clicked > .jstree-checkbox:hover,
+ .jstree-default-responsive .jstree-checked > .jstree-checkbox,
+ .jstree-default-responsive .jstree-checked > .jstree-checkbox:hover {
+ background-position: 0 -80px;
+ }
+ .jstree-default-responsive .jstree-anchor > .jstree-undetermined,
+ .jstree-default-responsive .jstree-anchor > .jstree-undetermined:hover {
+ background-position: 0 -120px;
+ }
+ .jstree-default-responsive .jstree-anchor {
+ font-weight: bold;
+ font-size: 1.1em;
+ text-shadow: 1px 1px white;
+ }
+ .jstree-default-responsive > .jstree-striped {
+ background: transparent;
+ }
+ .jstree-default-responsive .jstree-wholerow {
+ border-top: 1px solid rgba(255, 255, 255, 0.7);
+ border-bottom: 1px solid rgba(64, 64, 64, 0.2);
+ background: #ebebeb;
+ height: 40px;
+ }
+ .jstree-default-responsive .jstree-wholerow-hovered {
+ background: #e7f4f9;
+ }
+ .jstree-default-responsive .jstree-wholerow-clicked {
+ background: #beebff;
+ }
+ .jstree-default-responsive .jstree-children .jstree-last > .jstree-wholerow {
+ box-shadow: inset 0 -6px 3px -5px #666666;
+ }
+ .jstree-default-responsive .jstree-children .jstree-open > .jstree-wholerow {
+ box-shadow: inset 0 6px 3px -5px #666666;
+ border-top: 0;
+ }
+ .jstree-default-responsive .jstree-children .jstree-open + .jstree-open {
+ box-shadow: none;
+ }
+ .jstree-default-responsive .jstree-node,
+ .jstree-default-responsive .jstree-icon,
+ .jstree-default-responsive .jstree-node > .jstree-ocl,
+ .jstree-default-responsive .jstree-themeicon,
+ .jstree-default-responsive .jstree-checkbox {
+ background-image: url("40px.png");
+ background-size: 120px 240px;
+ }
+ .jstree-default-responsive .jstree-node {
+ background-position: -80px 0;
+ background-repeat: repeat-y;
+ }
+ .jstree-default-responsive .jstree-last {
+ background: transparent;
+ }
+ .jstree-default-responsive .jstree-leaf > .jstree-ocl {
+ background-position: -40px -120px;
+ }
+ .jstree-default-responsive .jstree-last > .jstree-ocl {
+ background-position: -40px -160px;
+ }
+ .jstree-default-responsive .jstree-themeicon-custom {
+ background-color: transparent;
+ background-image: none;
+ background-position: 0 0;
+ }
+ .jstree-default-responsive .jstree-file {
+ background: url("40px.png") 0 -160px no-repeat;
+ background-size: 120px 240px;
+ }
+ .jstree-default-responsive .jstree-folder {
+ background: url("40px.png") -40px -40px no-repeat;
+ background-size: 120px 240px;
+ }
+ .jstree-default-responsive > .jstree-container-ul > .jstree-node {
+ margin-left: 0;
+ margin-right: 0;
+ }
+}
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/jstree-theme/default/style.min.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/jstree-theme/default/style.min.css
new file mode 100644
index 0000000000..93f80e9156
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/jstree-theme/default/style.min.css
@@ -0,0 +1 @@
+.jstree-node,.jstree-children,.jstree-container-ul{display:block;margin:0;padding:0;list-style-type:none;list-style-image:none}.jstree-node{white-space:nowrap}.jstree-anchor{display:inline-block;color:black;white-space:nowrap;padding:0 4px 0 1px;margin:0;vertical-align:top}.jstree-anchor:focus{outline:0}.jstree-anchor,.jstree-anchor:link,.jstree-anchor:visited,.jstree-anchor:hover,.jstree-anchor:active{text-decoration:none;color:inherit}.jstree-icon{display:inline-block;text-decoration:none;margin:0;padding:0;vertical-align:top;text-align:center}.jstree-icon:empty{display:inline-block;text-decoration:none;margin:0;padding:0;vertical-align:top;text-align:center}.jstree-ocl{cursor:pointer}.jstree-leaf>.jstree-ocl{cursor:default}.jstree .jstree-open>.jstree-children{display:block}.jstree .jstree-closed>.jstree-children,.jstree .jstree-leaf>.jstree-children{display:none}.jstree-anchor>.jstree-themeicon{margin-right:2px}.jstree-no-icons .jstree-themeicon,.jstree-anchor>.jstree-themeicon-hidden{display:none}.jstree-hidden,.jstree-node.jstree-hidden{display:none}.jstree-rtl .jstree-anchor{padding:0 1px 0 4px}.jstree-rtl .jstree-anchor>.jstree-themeicon{margin-left:2px;margin-right:0}.jstree-rtl .jstree-node{margin-left:0}.jstree-rtl .jstree-container-ul>.jstree-node{margin-right:0}.jstree-wholerow-ul{position:relative;display:inline-block;min-width:100%}.jstree-wholerow-ul .jstree-leaf>.jstree-ocl{cursor:pointer}.jstree-wholerow-ul .jstree-anchor,.jstree-wholerow-ul .jstree-icon{position:relative}.jstree-wholerow-ul .jstree-wholerow{width:100%;cursor:pointer;position:absolute;left:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.jstree-contextmenu .jstree-anchor{-webkit-user-select:none;-webkit-touch-callout:none}.vakata-context{display:none}.vakata-context,.vakata-context ul{margin:0;padding:2px;position:absolute;background:#f5f5f5;border:1px solid #979797;box-shadow:2px 2px 2px #999999}.vakata-context ul{list-style:none;left:100%;margin-top:-2.7em;margin-left:-4px}.vakata-context .vakata-context-right ul{left:auto;right:100%;margin-left:auto;margin-right:-4px}.vakata-context li{list-style:none}.vakata-context li>a{display:block;padding:0 2em 0 2em;text-decoration:none;width:auto;color:black;white-space:nowrap;line-height:2.4em;text-shadow:1px 1px 0 white;border-radius:1px}.vakata-context li>a:hover{position:relative;background-color:#e8eff7;box-shadow:0 0 2px #0a6aa1}.vakata-context li>a.vakata-context-parent{background-image:url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAIORI4JlrqN1oMSnmmZDQUAOw==");background-position:right center;background-repeat:no-repeat}.vakata-context li>a:focus{outline:0}.vakata-context .vakata-context-hover>a{position:relative;background-color:#e8eff7;box-shadow:0 0 2px #0a6aa1}.vakata-context .vakata-context-separator>a,.vakata-context .vakata-context-separator>a:hover{background:white;border:0;border-top:1px solid #e2e3e3;height:1px;min-height:1px;max-height:1px;padding:0;margin:0 0 0 2.4em;border-left:1px solid #e0e0e0;text-shadow:0 0 0 transparent;box-shadow:0 0 0 transparent;border-radius:0}.vakata-context .vakata-contextmenu-disabled a,.vakata-context .vakata-contextmenu-disabled a:hover{color:silver;background-color:transparent;border:0;box-shadow:0 0 0}.vakata-context .vakata-contextmenu-disabled>a>i{filter:grayscale(100%)}.vakata-context li>a>i{text-decoration:none;display:inline-block;width:2.4em;height:2.4em;background:transparent;margin:0 0 0 -2em;vertical-align:top;text-align:center;line-height:2.4em}.vakata-context li>a>i:empty{width:2.4em;line-height:2.4em}.vakata-context li>a .vakata-contextmenu-sep{display:inline-block;width:1px;height:2.4em;background:white;margin:0 .5em 0 0;border-left:1px solid #e2e3e3}.vakata-context .vakata-contextmenu-shortcut{font-size:.8em;color:silver;opacity:.5;display:none}.vakata-context-rtl ul{left:auto;right:100%;margin-left:auto;margin-right:-4px}.vakata-context-rtl li>a.vakata-context-parent{background-image:url("data:image/gif;base64,R0lGODlhCwAHAIAAACgoKP///yH5BAEAAAEALAAAAAALAAcAAAINjI+AC7rWHIsPtmoxLAA7");background-position:left center;background-repeat:no-repeat}.vakata-context-rtl .vakata-context-separator>a{margin:0 2.4em 0 0;border-left:0;border-right:1px solid #e2e3e3}.vakata-context-rtl .vakata-context-left ul{right:auto;left:100%;margin-left:-4px;margin-right:auto}.vakata-context-rtl li>a>i{margin:0 -2em 0 0}.vakata-context-rtl li>a .vakata-contextmenu-sep{margin:0 0 0 .5em;border-left-color:white;background:#e2e3e3}#jstree-marker{position:absolute;top:0;left:0;margin:-5px 0 0 0;padding:0;border-right:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:5px solid;width:0;height:0;font-size:0;line-height:0}#jstree-dnd{line-height:16px;margin:0;padding:4px}#jstree-dnd .jstree-icon,#jstree-dnd .jstree-copy{display:inline-block;text-decoration:none;margin:0 2px 0 0;padding:0;width:16px;height:16px}#jstree-dnd .jstree-ok{background:green}#jstree-dnd .jstree-er{background:red}#jstree-dnd .jstree-copy{margin:0 2px 0 2px}.jstree-default .jstree-node,.jstree-default .jstree-icon{background-repeat:no-repeat;background-color:transparent}.jstree-default .jstree-anchor,.jstree-default .jstree-animated,.jstree-default .jstree-wholerow{transition:background-color .15s,box-shadow .15s}.jstree-default .jstree-hovered{background:#e7f4f9;border-radius:2px;box-shadow:inset 0 0 1px #cccccc}.jstree-default .jstree-context{background:#e7f4f9;border-radius:2px;box-shadow:inset 0 0 1px #cccccc}.jstree-default .jstree-clicked{background:#beebff;border-radius:2px;box-shadow:inset 0 0 1px #999999}.jstree-default .jstree-no-icons .jstree-anchor>.jstree-themeicon{display:none}.jstree-default .jstree-disabled{background:transparent;color:#666666}.jstree-default .jstree-disabled.jstree-hovered{background:transparent;box-shadow:none}.jstree-default .jstree-disabled.jstree-clicked{background:#efefef}.jstree-default .jstree-disabled>.jstree-icon{opacity:.8;filter:url("data:image/svg+xml;utf8,
#jstree-grayscale");filter:gray;-webkit-filter:grayscale(100%)}.jstree-default .jstree-search{font-style:italic;color:#8b0000;font-weight:bold}.jstree-default .jstree-no-checkboxes .jstree-checkbox{display:none !important}.jstree-default.jstree-checkbox-no-clicked .jstree-clicked{background:transparent;box-shadow:none}.jstree-default.jstree-checkbox-no-clicked .jstree-clicked.jstree-hovered{background:#e7f4f9}.jstree-default.jstree-checkbox-no-clicked>.jstree-wholerow-ul .jstree-wholerow-clicked{background:transparent}.jstree-default.jstree-checkbox-no-clicked>.jstree-wholerow-ul .jstree-wholerow-clicked.jstree-wholerow-hovered{background:#e7f4f9}.jstree-default>.jstree-striped{min-width:100%;display:inline-block;background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAMAAAB/qqA+AAAABlBMVEUAAAAAAAClZ7nPAAAAAnRSTlMNAMM9s3UAAAAXSURBVHjajcEBAQAAAIKg/H/aCQZ70AUBjAATb6YPDgAAAABJRU5ErkJggg==") left top repeat}.jstree-default>.jstree-wholerow-ul .jstree-hovered,.jstree-default>.jstree-wholerow-ul .jstree-clicked{background:transparent;box-shadow:none;border-radius:0}.jstree-default .jstree-wholerow{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.jstree-default .jstree-wholerow-hovered{background:#e7f4f9}.jstree-default .jstree-wholerow-clicked{background:#beebff;background:-webkit-linear-gradient(top, #beebff 0, #a8e4ff 100%);background:linear-gradient(to bottom, #beebff 0, #a8e4ff 100%)}.jstree-default .jstree-node{min-height:24px;line-height:24px;margin-left:24px;min-width:24px}.jstree-default .jstree-anchor{line-height:24px;height:24px}.jstree-default .jstree-icon{width:24px;height:24px;line-height:24px}.jstree-default .jstree-icon:empty{width:24px;height:24px;line-height:24px}.jstree-default.jstree-rtl .jstree-node{margin-right:24px}.jstree-default .jstree-wholerow{height:24px}.jstree-default .jstree-node,.jstree-default .jstree-icon{background-image:url("32px.png")}.jstree-default .jstree-node{background-position:-292px -4px;background-repeat:repeat-y}.jstree-default .jstree-last{background:transparent}.jstree-default .jstree-open>.jstree-ocl{background-position:-132px -4px}.jstree-default .jstree-closed>.jstree-ocl{background-position:-100px -4px}.jstree-default .jstree-leaf>.jstree-ocl{background-position:-68px -4px}.jstree-default .jstree-themeicon{background-position:-260px -4px}.jstree-default>.jstree-no-dots .jstree-node,.jstree-default>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:transparent}.jstree-default>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-36px -4px}.jstree-default>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:-4px -4px}.jstree-default .jstree-disabled{background:transparent}.jstree-default .jstree-disabled.jstree-hovered{background:transparent}.jstree-default .jstree-disabled.jstree-clicked{background:#efefef}.jstree-default .jstree-checkbox{background-position:-164px -4px}.jstree-default .jstree-checkbox:hover{background-position:-164px -36px}.jstree-default.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox,.jstree-default .jstree-checked>.jstree-checkbox{background-position:-228px -4px}.jstree-default.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox:hover,.jstree-default .jstree-checked>.jstree-checkbox:hover{background-position:-228px -36px}.jstree-default .jstree-anchor>.jstree-undetermined{background-position:-196px -4px}.jstree-default .jstree-anchor>.jstree-undetermined:hover{background-position:-196px -36px}.jstree-default .jstree-checkbox-disabled{opacity:.8;filter:url("data:image/svg+xml;utf8,
#jstree-grayscale");filter:gray;-webkit-filter:grayscale(100%)}.jstree-default>.jstree-striped{background-size:auto 48px}.jstree-default.jstree-rtl .jstree-node{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");background-position:100% 1px;background-repeat:repeat-y}.jstree-default.jstree-rtl .jstree-last{background:transparent}.jstree-default.jstree-rtl .jstree-open>.jstree-ocl{background-position:-132px -36px}.jstree-default.jstree-rtl .jstree-closed>.jstree-ocl{background-position:-100px -36px}.jstree-default.jstree-rtl .jstree-leaf>.jstree-ocl{background-position:-68px -36px}.jstree-default.jstree-rtl>.jstree-no-dots .jstree-node,.jstree-default.jstree-rtl>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:transparent}.jstree-default.jstree-rtl>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-36px -36px}.jstree-default.jstree-rtl>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:-4px -36px}.jstree-default .jstree-themeicon-custom{background-color:transparent;background-image:none;background-position:0 0}.jstree-default>.jstree-container-ul .jstree-loading>.jstree-ocl{background:url("throbber.gif") center center no-repeat}.jstree-default .jstree-file{background:url("32px.png") -100px -68px no-repeat}.jstree-default .jstree-folder{background:url("32px.png") -260px -4px no-repeat}.jstree-default>.jstree-container-ul>.jstree-node{margin-left:0;margin-right:0}#jstree-dnd.jstree-default{line-height:24px;padding:0 4px}#jstree-dnd.jstree-default .jstree-ok,#jstree-dnd.jstree-default .jstree-er{background-image:url("32px.png");background-repeat:no-repeat;background-color:transparent}#jstree-dnd.jstree-default i{background:transparent;width:24px;height:24px;line-height:24px}#jstree-dnd.jstree-default .jstree-ok{background-position:-4px -68px}#jstree-dnd.jstree-default .jstree-er{background-position:-36px -68px}.jstree-default .jstree-ellipsis{overflow:hidden}.jstree-default .jstree-ellipsis .jstree-anchor{width:calc(100% - 29px);text-overflow:ellipsis;overflow:hidden}.jstree-default.jstree-rtl .jstree-node{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==")}.jstree-default.jstree-rtl .jstree-last{background:transparent}.jstree-default-small .jstree-node{min-height:18px;line-height:18px;margin-left:18px;min-width:18px}.jstree-default-small .jstree-anchor{line-height:18px;height:18px}.jstree-default-small .jstree-icon{width:18px;height:18px;line-height:18px}.jstree-default-small .jstree-icon:empty{width:18px;height:18px;line-height:18px}.jstree-default-small.jstree-rtl .jstree-node{margin-right:18px}.jstree-default-small .jstree-wholerow{height:18px}.jstree-default-small .jstree-node,.jstree-default-small .jstree-icon{background-image:url("32px.png")}.jstree-default-small .jstree-node{background-position:-295px -7px;background-repeat:repeat-y}.jstree-default-small .jstree-last{background:transparent}.jstree-default-small .jstree-open>.jstree-ocl{background-position:-135px -7px}.jstree-default-small .jstree-closed>.jstree-ocl{background-position:-103px -7px}.jstree-default-small .jstree-leaf>.jstree-ocl{background-position:-71px -7px}.jstree-default-small .jstree-themeicon{background-position:-263px -7px}.jstree-default-small>.jstree-no-dots .jstree-node,.jstree-default-small>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:transparent}.jstree-default-small>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-39px -7px}.jstree-default-small>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:-7px -7px}.jstree-default-small .jstree-disabled{background:transparent}.jstree-default-small .jstree-disabled.jstree-hovered{background:transparent}.jstree-default-small .jstree-disabled.jstree-clicked{background:#efefef}.jstree-default-small .jstree-checkbox{background-position:-167px -7px}.jstree-default-small .jstree-checkbox:hover{background-position:-167px -39px}.jstree-default-small.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox,.jstree-default-small .jstree-checked>.jstree-checkbox{background-position:-231px -7px}.jstree-default-small.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox:hover,.jstree-default-small .jstree-checked>.jstree-checkbox:hover{background-position:-231px -39px}.jstree-default-small .jstree-anchor>.jstree-undetermined{background-position:-199px -7px}.jstree-default-small .jstree-anchor>.jstree-undetermined:hover{background-position:-199px -39px}.jstree-default-small .jstree-checkbox-disabled{opacity:.8;filter:url("data:image/svg+xml;utf8,
#jstree-grayscale");filter:gray;-webkit-filter:grayscale(100%)}.jstree-default-small>.jstree-striped{background-size:auto 36px}.jstree-default-small.jstree-rtl .jstree-node{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");background-position:100% 1px;background-repeat:repeat-y}.jstree-default-small.jstree-rtl .jstree-last{background:transparent}.jstree-default-small.jstree-rtl .jstree-open>.jstree-ocl{background-position:-135px -39px}.jstree-default-small.jstree-rtl .jstree-closed>.jstree-ocl{background-position:-103px -39px}.jstree-default-small.jstree-rtl .jstree-leaf>.jstree-ocl{background-position:-71px -39px}.jstree-default-small.jstree-rtl>.jstree-no-dots .jstree-node,.jstree-default-small.jstree-rtl>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:transparent}.jstree-default-small.jstree-rtl>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-39px -39px}.jstree-default-small.jstree-rtl>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:-7px -39px}.jstree-default-small .jstree-themeicon-custom{background-color:transparent;background-image:none;background-position:0 0}.jstree-default-small>.jstree-container-ul .jstree-loading>.jstree-ocl{background:url("throbber.gif") center center no-repeat}.jstree-default-small .jstree-file{background:url("32px.png") -103px -71px no-repeat}.jstree-default-small .jstree-folder{background:url("32px.png") -263px -7px no-repeat}.jstree-default-small>.jstree-container-ul>.jstree-node{margin-left:0;margin-right:0}#jstree-dnd.jstree-default-small{line-height:18px;padding:0 4px}#jstree-dnd.jstree-default-small .jstree-ok,#jstree-dnd.jstree-default-small .jstree-er{background-image:url("32px.png");background-repeat:no-repeat;background-color:transparent}#jstree-dnd.jstree-default-small i{background:transparent;width:18px;height:18px;line-height:18px}#jstree-dnd.jstree-default-small .jstree-ok{background-position:-7px -71px}#jstree-dnd.jstree-default-small .jstree-er{background-position:-39px -71px}.jstree-default-small .jstree-ellipsis{overflow:hidden}.jstree-default-small .jstree-ellipsis .jstree-anchor{width:calc(100% - 23px);text-overflow:ellipsis;overflow:hidden}.jstree-default-small.jstree-rtl .jstree-node{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAACAQMAAABv1h6PAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMHBgAAiABBI4gz9AAAAABJRU5ErkJggg==")}.jstree-default-small.jstree-rtl .jstree-last{background:transparent}.jstree-default-large .jstree-node{min-height:32px;line-height:32px;margin-left:32px;min-width:32px}.jstree-default-large .jstree-anchor{line-height:32px;height:32px}.jstree-default-large .jstree-icon{width:32px;height:32px;line-height:32px}.jstree-default-large .jstree-icon:empty{width:32px;height:32px;line-height:32px}.jstree-default-large.jstree-rtl .jstree-node{margin-right:32px}.jstree-default-large .jstree-wholerow{height:32px}.jstree-default-large .jstree-node,.jstree-default-large .jstree-icon{background-image:url("32px.png")}.jstree-default-large .jstree-node{background-position:-288px 0;background-repeat:repeat-y}.jstree-default-large .jstree-last{background:transparent}.jstree-default-large .jstree-open>.jstree-ocl{background-position:-128px 0}.jstree-default-large .jstree-closed>.jstree-ocl{background-position:-96px 0}.jstree-default-large .jstree-leaf>.jstree-ocl{background-position:-64px 0}.jstree-default-large .jstree-themeicon{background-position:-256px 0}.jstree-default-large>.jstree-no-dots .jstree-node,.jstree-default-large>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:transparent}.jstree-default-large>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-32px 0}.jstree-default-large>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:0 0}.jstree-default-large .jstree-disabled{background:transparent}.jstree-default-large .jstree-disabled.jstree-hovered{background:transparent}.jstree-default-large .jstree-disabled.jstree-clicked{background:#efefef}.jstree-default-large .jstree-checkbox{background-position:-160px 0}.jstree-default-large .jstree-checkbox:hover{background-position:-160px -32px}.jstree-default-large.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox,.jstree-default-large .jstree-checked>.jstree-checkbox{background-position:-224px 0}.jstree-default-large.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox:hover,.jstree-default-large .jstree-checked>.jstree-checkbox:hover{background-position:-224px -32px}.jstree-default-large .jstree-anchor>.jstree-undetermined{background-position:-192px 0}.jstree-default-large .jstree-anchor>.jstree-undetermined:hover{background-position:-192px -32px}.jstree-default-large .jstree-checkbox-disabled{opacity:.8;filter:url("data:image/svg+xml;utf8,
#jstree-grayscale");filter:gray;-webkit-filter:grayscale(100%)}.jstree-default-large>.jstree-striped{background-size:auto 64px}.jstree-default-large.jstree-rtl .jstree-node{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAACAQMAAAB49I5GAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjAAMOBgAAGAAJMwQHdQAAAABJRU5ErkJggg==");background-position:100% 1px;background-repeat:repeat-y}.jstree-default-large.jstree-rtl .jstree-last{background:transparent}.jstree-default-large.jstree-rtl .jstree-open>.jstree-ocl{background-position:-128px -32px}.jstree-default-large.jstree-rtl .jstree-closed>.jstree-ocl{background-position:-96px -32px}.jstree-default-large.jstree-rtl .jstree-leaf>.jstree-ocl{background-position:-64px -32px}.jstree-default-large.jstree-rtl>.jstree-no-dots .jstree-node,.jstree-default-large.jstree-rtl>.jstree-no-dots .jstree-leaf>.jstree-ocl{background:transparent}.jstree-default-large.jstree-rtl>.jstree-no-dots .jstree-open>.jstree-ocl{background-position:-32px -32px}.jstree-default-large.jstree-rtl>.jstree-no-dots .jstree-closed>.jstree-ocl{background-position:0 -32px}.jstree-default-large .jstree-themeicon-custom{background-color:transparent;background-image:none;background-position:0 0}.jstree-default-large>.jstree-container-ul .jstree-loading>.jstree-ocl{background:url("throbber.gif") center center no-repeat}.jstree-default-large .jstree-file{background:url("32px.png") -96px -64px no-repeat}.jstree-default-large .jstree-folder{background:url("32px.png") -256px 0 no-repeat}.jstree-default-large>.jstree-container-ul>.jstree-node{margin-left:0;margin-right:0}#jstree-dnd.jstree-default-large{line-height:32px;padding:0 4px}#jstree-dnd.jstree-default-large .jstree-ok,#jstree-dnd.jstree-default-large .jstree-er{background-image:url("32px.png");background-repeat:no-repeat;background-color:transparent}#jstree-dnd.jstree-default-large i{background:transparent;width:32px;height:32px;line-height:32px}#jstree-dnd.jstree-default-large .jstree-ok{background-position:0 -64px}#jstree-dnd.jstree-default-large .jstree-er{background-position:-32px -64px}.jstree-default-large .jstree-ellipsis{overflow:hidden}.jstree-default-large .jstree-ellipsis .jstree-anchor{width:calc(100% - 37px);text-overflow:ellipsis;overflow:hidden}.jstree-default-large.jstree-rtl .jstree-node{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAACAQMAAAAD0EyKAAAABlBMVEUAAAAdHRvEkCwcAAAAAXRSTlMAQObYZgAAAAxJREFUCNdjgIIGBgABCgCBvVLXcAAAAABJRU5ErkJggg==")}.jstree-default-large.jstree-rtl .jstree-last{background:transparent}@media (max-width:768px){#jstree-dnd.jstree-dnd-responsive{line-height:40px;font-weight:bold;font-size:1.1em;text-shadow:1px 1px white}#jstree-dnd.jstree-dnd-responsive>i{background:transparent;width:40px;height:40px}#jstree-dnd.jstree-dnd-responsive>.jstree-ok{background-image:url("40px.png");background-position:0 -200px;background-size:120px 240px}#jstree-dnd.jstree-dnd-responsive>.jstree-er{background-image:url("40px.png");background-position:-40px -200px;background-size:120px 240px}#jstree-marker.jstree-dnd-responsive{border-left-width:10px;border-top-width:10px;border-bottom-width:10px;margin-top:-10px}}@media (max-width:768px){.jstree-default-responsive .jstree-icon{background-image:url("40px.png")}.jstree-default-responsive .jstree-node,.jstree-default-responsive .jstree-leaf>.jstree-ocl{background:transparent}.jstree-default-responsive .jstree-node{min-height:40px;line-height:40px;margin-left:40px;min-width:40px;white-space:nowrap}.jstree-default-responsive .jstree-anchor{line-height:40px;height:40px}.jstree-default-responsive .jstree-icon,.jstree-default-responsive .jstree-icon:empty{width:40px;height:40px;line-height:40px}.jstree-default-responsive>.jstree-container-ul>.jstree-node{margin-left:0}.jstree-default-responsive.jstree-rtl .jstree-node{margin-left:0;margin-right:40px;background:transparent}.jstree-default-responsive.jstree-rtl .jstree-container-ul>.jstree-node{margin-right:0}.jstree-default-responsive .jstree-ocl,.jstree-default-responsive .jstree-themeicon,.jstree-default-responsive .jstree-checkbox{background-size:120px 240px}.jstree-default-responsive .jstree-leaf>.jstree-ocl,.jstree-default-responsive.jstree-rtl .jstree-leaf>.jstree-ocl{background:transparent}.jstree-default-responsive .jstree-open>.jstree-ocl{background-position:0 0 !important}.jstree-default-responsive .jstree-closed>.jstree-ocl{background-position:0 -40px !important}.jstree-default-responsive.jstree-rtl .jstree-closed>.jstree-ocl{background-position:-40px 0 !important}.jstree-default-responsive .jstree-themeicon{background-position:-40px -40px}.jstree-default-responsive .jstree-checkbox,.jstree-default-responsive .jstree-checkbox:hover{background-position:-40px -80px}.jstree-default-responsive.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox,.jstree-default-responsive.jstree-checkbox-selection .jstree-clicked>.jstree-checkbox:hover,.jstree-default-responsive .jstree-checked>.jstree-checkbox,.jstree-default-responsive .jstree-checked>.jstree-checkbox:hover{background-position:0 -80px}.jstree-default-responsive .jstree-anchor>.jstree-undetermined,.jstree-default-responsive .jstree-anchor>.jstree-undetermined:hover{background-position:0 -120px}.jstree-default-responsive .jstree-anchor{font-weight:bold;font-size:1.1em;text-shadow:1px 1px white}.jstree-default-responsive>.jstree-striped{background:transparent}.jstree-default-responsive .jstree-wholerow{border-top:1px solid rgba(255,255,255,0.7);border-bottom:1px solid rgba(64,64,64,0.2);background:#ebebeb;height:40px}.jstree-default-responsive .jstree-wholerow-hovered{background:#e7f4f9}.jstree-default-responsive .jstree-wholerow-clicked{background:#beebff}.jstree-default-responsive .jstree-children .jstree-last>.jstree-wholerow{box-shadow:inset 0 -6px 3px -5px #666666}.jstree-default-responsive .jstree-children .jstree-open>.jstree-wholerow{box-shadow:inset 0 6px 3px -5px #666666;border-top:0}.jstree-default-responsive .jstree-children .jstree-open+.jstree-open{box-shadow:none}.jstree-default-responsive .jstree-node,.jstree-default-responsive .jstree-icon,.jstree-default-responsive .jstree-node>.jstree-ocl,.jstree-default-responsive .jstree-themeicon,.jstree-default-responsive .jstree-checkbox{background-image:url("40px.png");background-size:120px 240px}.jstree-default-responsive .jstree-node{background-position:-80px 0;background-repeat:repeat-y}.jstree-default-responsive .jstree-last{background:transparent}.jstree-default-responsive .jstree-leaf>.jstree-ocl{background-position:-40px -120px}.jstree-default-responsive .jstree-last>.jstree-ocl{background-position:-40px -160px}.jstree-default-responsive .jstree-themeicon-custom{background-color:transparent;background-image:none;background-position:0 0}.jstree-default-responsive .jstree-file{background:url("40px.png") 0 -160px no-repeat;background-size:120px 240px}.jstree-default-responsive .jstree-folder{background:url("40px.png") -40px -40px no-repeat;background-size:120px 240px}.jstree-default-responsive>.jstree-container-ul>.jstree-node{margin-left:0;margin-right:0}}
\ No newline at end of file
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/jstree-theme/default/throbber.gif b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/jstree-theme/default/throbber.gif
new file mode 100644
index 0000000000..64c8eebb87
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/jstree-theme/default/throbber.gif differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/nvd3-1.7.1/nv.d3.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/nvd3-1.7.1/nv.d3.css
new file mode 100644
index 0000000000..16c81e3a50
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/nvd3-1.7.1/nv.d3.css
@@ -0,0 +1,645 @@
+/********************
+ * SVG CSS
+ */
+
+
+svg {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+ /* Trying to get SVG to act like a greedy block in all browsers */
+ display: block;
+ width:100%;
+ height:100%;
+}
+
+/********************
+ Default CSS for an svg element nvd3 used
+*/
+svg.nvd3-svg {
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -ms-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ display: block;
+}
+
+/********************
+ Box shadow and border radius styling
+*/
+.nvtooltip.with-3d-shadow, .with-3d-shadow .nvtooltip {
+ -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+ -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
+ box-shadow: 0 5px 10px rgba(0,0,0,.2);
+
+ -webkit-border-radius: 5px;
+ -moz-border-radius: 5px;
+ border-radius: 5px;
+}
+
+/********************
+ * TOOLTIP CSS
+ */
+
+.nvtooltip {
+ position: absolute;
+ background-color: rgba(20,20,20,1.0);
+ padding: 1px;
+ border: 1px solid rgba(0,0,0,.2);
+ z-index: 10000;
+
+ font-family: Arial;
+ font-size: 13px;
+ text-align: left;
+ pointer-events: none;
+
+ white-space: nowrap;
+
+ -webkit-touch-callout: none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
+}
+
+/*Give tooltips that old fade in transition by
+ putting a "with-transitions" class on the container div.
+*/
+.nvtooltip.with-transitions, .with-transitions .nvtooltip {
+ transition: opacity 50ms linear;
+ -moz-transition: opacity 50ms linear;
+ -webkit-transition: opacity 50ms linear;
+
+ transition-delay: 200ms;
+ -moz-transition-delay: 200ms;
+ -webkit-transition-delay: 200ms;
+}
+
+.nvtooltip.x-nvtooltip,
+.nvtooltip.y-nvtooltip {
+ padding: 8px;
+}
+
+.nvtooltip h3 {
+ margin: 0;
+ padding: 4px 14px;
+ line-height: 18px;
+ font-weight: normal;
+ background-color: rgba(31,31,31,0.75);
+ text-align: center;
+
+ border-bottom: 1px solid #ebebeb;
+
+ -webkit-border-radius: 5px 5px 0 0;
+ -moz-border-radius: 5px 5px 0 0;
+ border-radius: 1px 5px 0 0;
+}
+
+.nvtooltip p {
+ margin: 0;
+ padding: 5px 14px;
+ text-align: center;
+}
+
+.nvtooltip span {
+ display: inline-block;
+ margin: 2px 0;
+}
+
+.nvtooltip table {
+ margin: 6px;
+ border-spacing:0;
+}
+
+
+.nvtooltip table td {
+ padding: 2px 9px 2px 0;
+ vertical-align: middle;
+}
+
+.nvtooltip table td.key {
+ font-weight:normal;
+}
+.nvtooltip table td.value {
+ text-align: right;
+ font-weight: bold;
+}
+
+.nvtooltip table tr.highlight td {
+ padding: 1px 9px 1px 0;
+ border-bottom-style: solid;
+ border-bottom-width: 1px;
+ border-top-style: solid;
+ border-top-width: 1px;
+}
+
+.nvtooltip table td.legend-color-guide div {
+ width: 8px;
+ height: 8px;
+ vertical-align: middle;
+}
+
+.nvtooltip .footer {
+ padding: 3px;
+ text-align: center;
+}
+
+.nvtooltip-pending-removal {
+ position: absolute;
+ pointer-events: none;
+}
+
+.nvd3 text {
+ fill: #c8c6c4;
+ font: normal 12px Arial;
+}
+
+.nvd3 .title {
+ font: bold 14px Arial;
+}
+
+.nvd3 .nv-background {
+ fill: #1f1f1f;
+ fill-opacity: 0;
+}
+
+.nvd3.nv-noData {
+ font-size: 18px;
+ font-weight: bold;
+}
+
+
+/**********
+* Brush
+*/
+
+.nv-brush .extent {
+ fill-opacity: .125;
+ shape-rendering: crispEdges;
+}
+
+
+/**********
+* Legend
+*/
+
+.nvd3 .nv-legend .nv-series {
+ cursor: pointer;
+}
+
+.nvd3 .nv-legend .nv-disabled circle {
+ fill-opacity: 0;
+}
+
+/**********
+* Axes
+*/
+
+.axis {
+ opacity: 1;
+}
+
+.axis.nv-disabled {
+ opacity: 0;
+}
+
+.nvd3 .nv-axis {
+ pointer-events:none;
+}
+
+.nvd3 .nv-axis path {
+ fill: none;
+ stroke: #c8c6c4;
+ stroke-opacity: .75;
+ shape-rendering: crispEdges;
+}
+
+.nvd3 .nv-axis path.domain {
+ stroke-opacity: .75;
+}
+
+.nvd3 .nv-axis.nv-x path.domain {
+ stroke-opacity: 0;
+}
+
+.nvd3 .nv-axis line {
+ fill: none;
+ stroke: #444;
+ shape-rendering: crispEdges;
+}
+
+.nvd3 .nv-axis .zero line,
+/*this selector may not be necessary*/ .nvd3 .nv-axis line.zero {
+ stroke-opacity: .75;
+}
+
+.nvd3 .nv-axis .nv-axisMaxMin text {
+ font-weight: bold;
+}
+
+.nvd3 .x .nv-axis .nv-axisMaxMin text,
+.nvd3 .x2 .nv-axis .nv-axisMaxMin text,
+.nvd3 .x3 .nv-axis .nv-axisMaxMin text {
+ text-anchor: middle
+}
+
+
+/**********
+* Brush
+*/
+
+.nv-brush .resize path {
+ fill: #eee;
+ stroke: #666;
+}
+
+
+/**********
+* Bars
+*/
+
+.nvd3 .nv-bars .negative rect {
+ zfill: brown;
+}
+
+.nvd3 .nv-bars rect {
+ zfill: steelblue;
+ fill-opacity: .75;
+
+ transition: fill-opacity 250ms linear;
+ -moz-transition: fill-opacity 250ms linear;
+ -webkit-transition: fill-opacity 250ms linear;
+}
+
+.nvd3 .nv-bars rect.hover {
+ fill-opacity: 1;
+}
+
+.nvd3 .nv-bars .hover rect {
+ fill: lightblue;
+}
+
+.nvd3 .nv-bars text {
+ fill: rgba(200, 198, 196, 0);
+}
+
+.nvd3 .nv-bars .hover text {
+ fill: rgba(200, 198, 196, 1);
+}
+
+
+/**********
+* Bars
+*/
+
+.nvd3 .nv-multibar .nv-groups rect,
+.nvd3 .nv-multibarHorizontal .nv-groups rect,
+.nvd3 .nv-discretebar .nv-groups rect {
+ stroke-opacity: 0;
+
+ transition: fill-opacity 250ms linear;
+ -moz-transition: fill-opacity 250ms linear;
+ -webkit-transition: fill-opacity 250ms linear;
+}
+
+.nvd3 .nv-multibar .nv-groups rect:hover,
+.nvd3 .nv-multibarHorizontal .nv-groups rect:hover,
+.nvd3 .nv-discretebar .nv-groups rect:hover {
+ fill-opacity: 1;
+}
+
+.nvd3 .nv-discretebar .nv-groups text,
+.nvd3 .nv-multibarHorizontal .nv-groups text {
+ font-weight: bold;
+ fill: rgba(200, 198, 196, 1);
+ stroke: rgba(200, 198, 196, 0);
+}
+
+/***********
+* Pie Chart
+*/
+
+.nvd3.nv-pie path {
+ stroke-opacity: 0;
+ transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
+ -moz-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
+ -webkit-transition: fill-opacity 250ms linear, stroke-width 250ms linear, stroke-opacity 250ms linear;
+
+}
+
+.nvd3.nv-pie .nv-pie-title {
+ font-size: 24px;
+ fill: rgba(19, 196, 249, 0.59);
+}
+
+.nvd3.nv-pie .nv-slice text {
+ stroke: #c8c6c4;
+ stroke-width: 0;
+}
+
+.nvd3.nv-pie path {
+ stroke: #1f1f1f;
+ stroke-width: 1px;
+ stroke-opacity: 1;
+}
+
+.nvd3.nv-pie .hover path {
+ fill-opacity: .7;
+}
+.nvd3.nv-pie .nv-label {
+ pointer-events: none;
+}
+.nvd3.nv-pie .nv-label rect {
+ fill-opacity: 0;
+ stroke-opacity: 0;
+}
+
+/**********
+* Lines
+*/
+
+.nvd3 .nv-groups path.nv-line {
+ fill: none;
+ stroke-width: 1.5px;
+}
+
+.nvd3 .nv-groups path.nv-line.nv-thin-line {
+ stroke-width: 1px;
+}
+
+
+.nvd3 .nv-groups path.nv-area {
+ stroke: none;
+}
+
+.nvd3 .nv-line.hover path {
+ stroke-width: 6px;
+}
+
+.nvd3.nv-line .nvd3.nv-scatter .nv-groups .nv-point {
+ fill-opacity: 0;
+ stroke-opacity: 0;
+}
+
+.nvd3.nv-scatter.nv-single-point .nv-groups .nv-point {
+ fill-opacity: .5 !important;
+ stroke-opacity: .5 !important;
+}
+
+
+.with-transitions .nvd3 .nv-groups .nv-point {
+ transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+ -moz-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+ -webkit-transition: stroke-width 250ms linear, stroke-opacity 250ms linear;
+
+}
+
+.nvd3.nv-scatter .nv-groups .nv-point.hover,
+.nvd3 .nv-groups .nv-point.hover {
+ stroke-width: 7px;
+ fill-opacity: .95 !important;
+ stroke-opacity: .95 !important;
+}
+
+
+.nvd3 .nv-point-paths path {
+ stroke: #aaa;
+ stroke-opacity: 0;
+ fill: #c8c6c4;
+ fill-opacity: 0;
+}
+
+
+
+.nvd3 .nv-indexLine {
+ cursor: ew-resize;
+}
+
+
+/**********
+* Distribution
+*/
+
+.nvd3 .nv-distribution {
+ pointer-events: none;
+}
+
+
+/**********
+* Scatter
+*/
+
+.nvd3 .nv-groups .nv-point.hover {
+ stroke-width: 20px;
+ stroke-opacity: .5;
+}
+
+.nvd3 .nv-scatter .nv-point.hover {
+ fill-opacity: 1;
+}
+
+
+/**********
+* Stacked Area
+*/
+
+.nvd3.nv-stackedarea path.nv-area {
+ fill-opacity: .7;
+ stroke-opacity: 0;
+ transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
+ -moz-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
+ -webkit-transition: fill-opacity 250ms linear, stroke-opacity 250ms linear;
+}
+
+.nvd3.nv-stackedarea path.nv-area.hover {
+ fill-opacity: .9;
+}
+
+
+.nvd3.nv-stackedarea .nv-groups .nv-point {
+ stroke-opacity: 0;
+ fill-opacity: 0;
+}
+
+
+/**********
+* Line Plus Bar
+*/
+
+.nvd3.nv-linePlusBar .nv-bar rect {
+ fill-opacity: .75;
+}
+
+.nvd3.nv-linePlusBar .nv-bar rect:hover {
+ fill-opacity: 1;
+}
+
+
+/**********
+* Bullet
+*/
+
+.nvd3.nv-bullet { font: 10px sans-serif; }
+.nvd3.nv-bullet .nv-measure { fill-opacity: .8; }
+.nvd3.nv-bullet .nv-measure:hover { fill-opacity: 1; }
+.nvd3.nv-bullet .nv-marker { stroke: #000; stroke-width: 2px; }
+.nvd3.nv-bullet .nv-markerTriangle { stroke: #000; fill: #fff; stroke-width: 1.5px; }
+.nvd3.nv-bullet .nv-tick line { stroke: #666; stroke-width: .5px; }
+.nvd3.nv-bullet .nv-range.nv-s0 { fill: #eee; }
+.nvd3.nv-bullet .nv-range.nv-s1 { fill: #ddd; }
+.nvd3.nv-bullet .nv-range.nv-s2 { fill: #ccc; }
+.nvd3.nv-bullet .nv-title { font-size: 14px; font-weight: bold; }
+.nvd3.nv-bullet .nv-subtitle { fill: #999; }
+
+
+.nvd3.nv-bullet .nv-range {
+ fill: #bababa;
+ fill-opacity: .4;
+}
+.nvd3.nv-bullet .nv-range:hover {
+ fill-opacity: .7;
+}
+
+
+/**********
+* Sparkline
+*/
+
+.nvd3.nv-sparkline path {
+ fill: none;
+}
+
+.nvd3.nv-sparklineplus g.nv-hoverValue {
+ pointer-events: none;
+}
+
+.nvd3.nv-sparklineplus .nv-hoverValue line {
+ stroke: #333;
+ stroke-width: 1.5px;
+ }
+
+.nvd3.nv-sparklineplus,
+.nvd3.nv-sparklineplus g {
+ pointer-events: all;
+}
+
+.nvd3 .nv-hoverArea {
+ fill-opacity: 0;
+ stroke-opacity: 0;
+}
+
+.nvd3.nv-sparklineplus .nv-xValue,
+.nvd3.nv-sparklineplus .nv-yValue {
+ stroke-width: 0;
+ font-size: .9em;
+ font-weight: normal;
+}
+
+.nvd3.nv-sparklineplus .nv-yValue {
+ stroke: #f66;
+}
+
+.nvd3.nv-sparklineplus .nv-maxValue {
+ stroke: #2ca02c;
+ fill: #2ca02c;
+}
+
+.nvd3.nv-sparklineplus .nv-minValue {
+ stroke: #d62728;
+ fill: #d62728;
+}
+
+.nvd3.nv-sparklineplus .nv-currentValue {
+ font-weight: bold;
+ font-size: 1.1em;
+}
+
+/**********
+* historical stock
+*/
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick {
+ stroke-width: 1px;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.hover {
+ stroke-width: 2px;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.positive {
+ stroke: #2ca02c;
+}
+
+.nvd3.nv-ohlcBar .nv-ticks .nv-tick.negative {
+ stroke: #d62728;
+}
+
+.nvd3.nv-historicalStockChart .nv-axis .nv-axislabel {
+ font-weight: bold;
+}
+
+.nvd3.nv-historicalStockChart .nv-dragTarget {
+ fill-opacity: 0;
+ stroke: none;
+ cursor: move;
+}
+
+.nvd3 .nv-brush .extent {
+ fill-opacity: 0 !important;
+}
+
+.nvd3 .nv-brushBackground rect {
+ stroke: #000;
+ stroke-width: .4;
+ fill: #1f1f1f;
+ fill-opacity: .7;
+}
+
+
+/**********
+* Parallel Coordinates
+*/
+
+.nvd3 .background path {
+ fill: none;
+ stroke: #1f1f1f;
+ stroke-opacity: .4;
+ shape-rendering: crispEdges;
+}
+
+.nvd3 .foreground path {
+ fill: none;
+ stroke-opacity: .7;
+}
+
+.nvd3 .brush .extent {
+ fill-opacity: .3;
+ stroke: #1f1f1f;
+ shape-rendering: crispEdges;
+}
+
+.nvd3 .axis line, .axis path {
+ fill: none;
+ stroke: #c8c6c4;
+ shape-rendering: crispEdges;
+}
+
+.nvd3 .axis text {
+ text-shadow: 0 1px 0 #c8c6c4;
+}
+
+/****
+Interactive Layer
+*/
+.nvd3 .nv-interactiveGuideLine {
+ pointer-events:none;
+}
+.nvd3 line.nv-guideline {
+ stroke: #ccc;
+}
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/spectrum-1.8.1/spectrum.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/spectrum-1.8.1/spectrum.css
new file mode 100644
index 0000000000..e68f4924e2
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/spectrum-1.8.1/spectrum.css
@@ -0,0 +1,507 @@
+/***
+Spectrum Colorpicker v1.8.1
+https://github.com/bgrins/spectrum
+Author: Brian Grinstead
+License: MIT
+***/
+
+.sp-container {
+ position:absolute;
+ top:0;
+ left:0;
+ display:inline-block;
+ *display: inline;
+ *zoom: 1;
+ /* https://github.com/bgrins/spectrum/issues/40 */
+ z-index: 9999994;
+ overflow: hidden;
+}
+.sp-container.sp-flat {
+ position: relative;
+}
+
+/* Fix for * { box-sizing: border-box; } */
+.sp-container,
+.sp-container * {
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+}
+
+/* http://ansciath.tumblr.com/post/7347495869/css-aspect-ratio */
+.sp-top {
+ position:relative;
+ width: 100%;
+ display:inline-block;
+}
+.sp-top-inner {
+ position:absolute;
+ top:0;
+ left:0;
+ bottom:0;
+ right:0;
+}
+.sp-color {
+ position: absolute;
+ top:0;
+ left:0;
+ bottom:0;
+ right:20%;
+}
+.sp-hue {
+ position: absolute;
+ top:0;
+ right:0;
+ bottom:0;
+ left:84%;
+ height: 100%;
+}
+
+.sp-clear-enabled .sp-hue {
+ top:33px;
+ height: 77.5%;
+}
+
+.sp-fill {
+ padding-top: 80%;
+}
+.sp-sat, .sp-val {
+ position: absolute;
+ top:0;
+ left:0;
+ right:0;
+ bottom:0;
+}
+
+.sp-alpha-enabled .sp-top {
+ margin-bottom: 18px;
+}
+.sp-alpha-enabled .sp-alpha {
+ display: block;
+}
+.sp-alpha-handle {
+ position:absolute;
+ top:-4px;
+ bottom: -4px;
+ width: 6px;
+ left: 50%;
+ cursor: pointer;
+ border: 1px solid black;
+ background: white;
+ opacity: .8;
+}
+.sp-alpha {
+ display: none;
+ position: absolute;
+ bottom: -14px;
+ right: 0;
+ left: 0;
+ height: 8px;
+}
+.sp-alpha-inner {
+ border: solid 1px #333;
+}
+
+.sp-clear {
+ display: none;
+}
+
+.sp-clear.sp-clear-display {
+ background-position: center;
+}
+
+.sp-clear-enabled .sp-clear {
+ display: block;
+ position:absolute;
+ top:0px;
+ right:0;
+ bottom:0;
+ left:84%;
+ height: 28px;
+}
+
+/* Don't allow text selection */
+.sp-container, .sp-replacer, .sp-preview, .sp-dragger, .sp-slider, .sp-alpha, .sp-clear, .sp-alpha-handle, .sp-container.sp-dragging .sp-input, .sp-container button {
+ -webkit-user-select:none;
+ -moz-user-select: -moz-none;
+ -o-user-select:none;
+ user-select: none;
+}
+
+.sp-container.sp-input-disabled .sp-input-container {
+ display: none;
+}
+.sp-container.sp-buttons-disabled .sp-button-container {
+ display: none;
+}
+.sp-container.sp-palette-buttons-disabled .sp-palette-button-container {
+ display: none;
+}
+.sp-palette-only .sp-picker-container {
+ display: none;
+}
+.sp-palette-disabled .sp-palette-container {
+ display: none;
+}
+
+.sp-initial-disabled .sp-initial {
+ display: none;
+}
+
+
+/* Gradients for hue, saturation and value instead of images. Not pretty... but it works */
+.sp-sat {
+ background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#FFF), to(rgba(204, 154, 129, 0)));
+ background-image: -webkit-linear-gradient(left, #FFF, rgba(204, 154, 129, 0));
+ background-image: -moz-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+ background-image: -o-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+ background-image: -ms-linear-gradient(left, #fff, rgba(204, 154, 129, 0));
+ background-image: linear-gradient(to right, #fff, rgba(204, 154, 129, 0));
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr=#FFFFFFFF, endColorstr=#00CC9A81)";
+ filter : progid:DXImageTransform.Microsoft.gradient(GradientType = 1, startColorstr='#FFFFFFFF', endColorstr='#00CC9A81');
+}
+.sp-val {
+ background-image: -webkit-gradient(linear, 0 100%, 0 0, from(#000000), to(rgba(204, 154, 129, 0)));
+ background-image: -webkit-linear-gradient(bottom, #000000, rgba(204, 154, 129, 0));
+ background-image: -moz-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+ background-image: -o-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+ background-image: -ms-linear-gradient(bottom, #000, rgba(204, 154, 129, 0));
+ background-image: linear-gradient(to top, #000, rgba(204, 154, 129, 0));
+ -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00CC9A81, endColorstr=#FF000000)";
+ filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#00CC9A81', endColorstr='#FF000000');
+}
+
+.sp-hue {
+ background: -moz-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+ background: -ms-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+ background: -o-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+ background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), color-stop(0.17, #ffff00), color-stop(0.33, #00ff00), color-stop(0.5, #00ffff), color-stop(0.67, #0000ff), color-stop(0.83, #ff00ff), to(#ff0000));
+ background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+ background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
+}
+
+/* IE filters do not support multiple color stops.
+ Generate 6 divs, line them up, and do two color gradients for each.
+ Yes, really.
+ */
+.sp-1 {
+ height:17%;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0000', endColorstr='#ffff00');
+}
+.sp-2 {
+ height:16%;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffff00', endColorstr='#00ff00');
+}
+.sp-3 {
+ height:17%;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ff00', endColorstr='#00ffff');
+}
+.sp-4 {
+ height:17%;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffff', endColorstr='#0000ff');
+}
+.sp-5 {
+ height:16%;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#ff00ff');
+}
+.sp-6 {
+ height:17%;
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff00ff', endColorstr='#ff0000');
+}
+
+.sp-hidden {
+ display: none !important;
+}
+
+/* Clearfix hack */
+.sp-cf:before, .sp-cf:after { content: ""; display: table; }
+.sp-cf:after { clear: both; }
+.sp-cf { *zoom: 1; }
+
+/* Mobile devices, make hue slider bigger so it is easier to slide */
+@media (max-device-width: 480px) {
+ .sp-color { right: 40%; }
+ .sp-hue { left: 63%; }
+ .sp-fill { padding-top: 60%; }
+}
+.sp-dragger {
+ border-radius: 5px;
+ height: 5px;
+ width: 5px;
+ border: 1px solid #fff;
+ background: #000;
+ cursor: pointer;
+ position:absolute;
+ top:0;
+ left: 0;
+}
+.sp-slider {
+ position: absolute;
+ top:0;
+ cursor:pointer;
+ height: 3px;
+ left: -1px;
+ right: -1px;
+ border: 1px solid #000;
+ background: white;
+ opacity: .8;
+}
+
+/*
+Theme authors:
+Here are the basic themeable display options (colors, fonts, global widths).
+See http://bgrins.github.io/spectrum/themes/ for instructions.
+*/
+
+.sp-container {
+ border-radius: 0;
+ background-color: #ECECEC;
+ border: solid 1px #f0c49B;
+ padding: 0;
+}
+.sp-container, .sp-container button, .sp-container input, .sp-color, .sp-hue, .sp-clear {
+ font: normal 12px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.sp-top {
+ margin-bottom: 3px;
+}
+.sp-color, .sp-hue, .sp-clear {
+ border: solid 1px #666;
+}
+
+/* Input */
+.sp-input-container {
+ float:right;
+ width: 100px;
+ margin-bottom: 4px;
+}
+.sp-initial-disabled .sp-input-container {
+ width: 100%;
+}
+.sp-input {
+ font-size: 12px !important;
+ border: 1px inset;
+ padding: 4px 5px;
+ margin: 0;
+ width: 100%;
+ background:transparent;
+ border-radius: 3px;
+ color: #222;
+}
+.sp-input:focus {
+ border: 1px solid orange;
+}
+.sp-input.sp-validation-error {
+ border: 1px solid red;
+ background: #fdd;
+}
+.sp-picker-container , .sp-palette-container {
+ float:left;
+ position: relative;
+ padding: 10px;
+ padding-bottom: 300px;
+ margin-bottom: -290px;
+}
+.sp-picker-container {
+ width: 172px;
+ border-left: solid 1px #fff;
+}
+
+/* Palettes */
+.sp-palette-container {
+ border-right: solid 1px #ccc;
+}
+
+.sp-palette-only .sp-palette-container {
+ border: 0;
+}
+
+.sp-palette .sp-thumb-el {
+ display: block;
+ position:relative;
+ float:left;
+ width: 24px;
+ height: 15px;
+ margin: 3px;
+ cursor: pointer;
+ border:solid 2px transparent;
+}
+.sp-palette .sp-thumb-el:hover, .sp-palette .sp-thumb-el.sp-thumb-active {
+ border-color: orange;
+}
+.sp-thumb-el {
+ position:relative;
+}
+
+/* Initial */
+.sp-initial {
+ float: left;
+ border: solid 1px #333;
+}
+.sp-initial span {
+ width: 30px;
+ height: 25px;
+ border:none;
+ display:block;
+ float:left;
+ margin:0;
+}
+
+.sp-initial .sp-clear-display {
+ background-position: center;
+}
+
+/* Buttons */
+.sp-palette-button-container,
+.sp-button-container {
+ float: right;
+}
+
+/* Replacer (the little preview div that shows up instead of the
) */
+.sp-replacer {
+ margin:0;
+ overflow:hidden;
+ cursor:pointer;
+ padding: 4px;
+ display:inline-block;
+ *zoom: 1;
+ *display: inline;
+ border: solid 1px #91765d;
+ background: #eee;
+ color: #333;
+ vertical-align: middle;
+}
+.sp-replacer:hover, .sp-replacer.sp-active {
+ border-color: #F0C49B;
+ color: #111;
+}
+.sp-replacer.sp-disabled {
+ cursor:default;
+ border-color: silver;
+ color: silver;
+}
+.sp-dd {
+ padding: 2px 0;
+ height: 16px;
+ line-height: 16px;
+ float:left;
+ font-size:10px;
+}
+.sp-preview {
+ position:relative;
+ width:25px;
+ height: 20px;
+ border: solid 1px #222;
+ margin-right: 5px;
+ float:left;
+ z-index: 0;
+}
+
+.sp-palette {
+ *width: 220px;
+ max-width: 220px;
+}
+.sp-palette .sp-thumb-el {
+ width:16px;
+ height: 16px;
+ margin:2px 1px;
+ border: solid 1px #d0d0d0;
+}
+
+.sp-container {
+ padding-bottom:0;
+}
+
+
+/* Buttons: http://hellohappy.org/css3-buttons/ */
+.sp-container button {
+ background-color: #eeeeee;
+ background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
+ background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
+ background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
+ background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
+ background-image: linear-gradient(to bottom, #eeeeee, #cccccc);
+ border: 1px solid #ccc;
+ border-bottom: 1px solid #bbb;
+ border-radius: 3px;
+ color: #333;
+ font-size: 14px;
+ line-height: 1;
+ padding: 5px 4px;
+ text-align: center;
+ text-shadow: 0 1px 0 #eee;
+ vertical-align: middle;
+}
+.sp-container button:hover {
+ background-color: #dddddd;
+ background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
+ background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
+ background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
+ background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
+ background-image: linear-gradient(to bottom, #dddddd, #bbbbbb);
+ border: 1px solid #bbb;
+ border-bottom: 1px solid #999;
+ cursor: pointer;
+ text-shadow: 0 1px 0 #ddd;
+}
+.sp-container button:active {
+ border: 1px solid #aaa;
+ border-bottom: 1px solid #888;
+ -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+ -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+ -ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+ -o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+ box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
+}
+.sp-cancel {
+ font-size: 11px;
+ color: #d93f3f !important;
+ margin:0;
+ padding:2px;
+ margin-right: 5px;
+ vertical-align: middle;
+ text-decoration:none;
+
+}
+.sp-cancel:hover {
+ color: #d93f3f !important;
+ text-decoration: underline;
+}
+
+
+.sp-palette span:hover, .sp-palette span.sp-thumb-active {
+ border-color: #000;
+}
+
+.sp-preview, .sp-alpha, .sp-thumb-el {
+ position:relative;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+}
+.sp-preview-inner, .sp-alpha-inner, .sp-thumb-inner {
+ display:block;
+ position:absolute;
+ top:0;left:0;bottom:0;right:0;
+}
+
+.sp-palette .sp-thumb-inner {
+ background-position: 50% 50%;
+ background-repeat: no-repeat;
+}
+
+.sp-palette .sp-thumb-light.sp-thumb-active .sp-thumb-inner {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAIVJREFUeNpiYBhsgJFMffxAXABlN5JruT4Q3wfi/0DsT64h8UD8HmpIPCWG/KemIfOJCUB+Aoacx6EGBZyHBqI+WsDCwuQ9mhxeg2A210Ntfo8klk9sOMijaURm7yc1UP2RNCMbKE9ODK1HM6iegYLkfx8pligC9lCD7KmRof0ZhjQACDAAceovrtpVBRkAAAAASUVORK5CYII=);
+}
+
+.sp-palette .sp-thumb-dark.sp-thumb-active .sp-thumb-inner {
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAMdJREFUOE+tkgsNwzAMRMugEAahEAahEAZhEAqlEAZhEAohEAYh81X2dIm8fKpEspLGvudPOsUYpxE2BIJCroJmEW9qJ+MKaBFhEMNabSy9oIcIPwrB+afvAUFoK4H0tMaQ3XtlrggDhOVVMuT4E5MMG0FBbCEYzjYT7OxLEvIHQLY2zWwQ3D+9luyOQTfKDiFD3iUIfPk8VqrKjgAiSfGFPecrg6HN6m/iBcwiDAo7WiBeawa+Kwh7tZoSCGLMqwlSAzVDhoK+6vH4G0P5wdkAAAAASUVORK5CYII=);
+}
+
+.sp-clear-display {
+ background-repeat:no-repeat;
+ background-position: center;
+ background-image: url(data:image/gif;base64,R0lGODlhFAAUAPcAAAAAAJmZmZ2dnZ6enqKioqOjo6SkpKWlpaampqenp6ioqKmpqaqqqqurq/Hx8fLy8vT09PX19ff39/j4+Pn5+fr6+vv7+wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAAUABQAAAihAP9FoPCvoMGDBy08+EdhQAIJCCMybCDAAYUEARBAlFiQQoMABQhKUJBxY0SPICEYHBnggEmDKAuoPMjS5cGYMxHW3IiT478JJA8M/CjTZ0GgLRekNGpwAsYABHIypcAgQMsITDtWJYBR6NSqMico9cqR6tKfY7GeBCuVwlipDNmefAtTrkSzB1RaIAoXodsABiZAEFB06gIBWC1mLVgBa0AAOw==);
+}
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_flat_0_aaaaaa_40x100.png b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_flat_0_aaaaaa_40x100.png
new file mode 100644
index 0000000000..b85d889da2
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_flat_0_aaaaaa_40x100.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_flat_75_ffffff_40x100.png b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_flat_75_ffffff_40x100.png
new file mode 100644
index 0000000000..2940a86649
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_flat_75_ffffff_40x100.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_glass_55_fbf9ee_1x400.png b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_glass_55_fbf9ee_1x400.png
new file mode 100644
index 0000000000..b835337749
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_glass_55_fbf9ee_1x400.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_glass_65_ffffff_1x400.png b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_glass_65_ffffff_1x400.png
new file mode 100644
index 0000000000..3a34b9a809
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_glass_65_ffffff_1x400.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_glass_75_dadada_1x400.png b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_glass_75_dadada_1x400.png
new file mode 100644
index 0000000000..c533dd6f6f
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_glass_75_dadada_1x400.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_glass_75_e6e6e6_1x400.png b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_glass_75_e6e6e6_1x400.png
new file mode 100644
index 0000000000..c475d61288
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_glass_75_e6e6e6_1x400.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_glass_95_fef1ec_1x400.png b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_glass_95_fef1ec_1x400.png
new file mode 100644
index 0000000000..bf439c54a0
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_glass_95_fef1ec_1x400.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_highlight-soft_75_cccccc_1x100.png b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_highlight-soft_75_cccccc_1x100.png
new file mode 100644
index 0000000000..52dd455a37
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-bg_highlight-soft_75_cccccc_1x100.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-icons_222222_256x240.png b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-icons_222222_256x240.png
new file mode 100644
index 0000000000..c1cb1170c8
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-icons_222222_256x240.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-icons_2e83ff_256x240.png b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-icons_2e83ff_256x240.png
new file mode 100644
index 0000000000..84b601bf0f
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-icons_2e83ff_256x240.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-icons_454545_256x240.png b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-icons_454545_256x240.png
new file mode 100644
index 0000000000..b6db1acdd4
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-icons_454545_256x240.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-icons_888888_256x240.png b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-icons_888888_256x240.png
new file mode 100644
index 0000000000..feea0e2026
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-icons_888888_256x240.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-icons_cd0a0a_256x240.png b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-icons_cd0a0a_256x240.png
new file mode 100644
index 0000000000..ed5b6b0930
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/images/ui-icons_cd0a0a_256x240.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/jquery-ui.css b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/jquery-ui.css
new file mode 100644
index 0000000000..fed0360ec8
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/css/thirdparty/ui-theme/jquery-ui.css
@@ -0,0 +1,7 @@
+/*! jQuery UI - v1.11.1 - 2014-10-06
+* http://jqueryui.com
+* Includes: core.css, draggable.css, resizable.css, sortable.css, autocomplete.css, datepicker.css, menu.css, theme.css
+* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Verdana%2CArial%2Csans-serif&fwDefault=normal&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=aaaaaa&fcHeader=222222&iconColorHeader=222222&bgColorContent=ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=aaaaaa&fcContent=222222&iconColorContent=222222&bgColorDefault=e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=d3d3d3&fcDefault=555555&iconColorDefault=888888&bgColorHover=dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=999999&fcHover=212121&iconColorHover=454545&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=aaaaaa&fcActive=212121&iconColorActive=454545&bgColorHighlight=fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=fcefa1&fcHighlight=363636&iconColorHighlight=2e83ff&bgColorError=fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=cd0a0a&fcError=cd0a0a&iconColorError=cd0a0a&bgColorOverlay=aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
+* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */
+
+.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-state-disabled{cursor:default!important}.ui-icon{display:block;text-indent:-99999px;overflow:hidden;background-repeat:no-repeat}.ui-widget-overlay{position:fixed;top:0;left:0;width:100%;height:100%}.ui-draggable-handle{-ms-touch-action:none;touch-action:none}.ui-resizable{position:relative}.ui-resizable-handle{position:absolute;font-size:0.1px;display:block;-ms-touch-action:none;touch-action:none}.ui-resizable-disabled .ui-resizable-handle,.ui-resizable-autohide .ui-resizable-handle{display:none}.ui-resizable-n{cursor:n-resize;height:7px;width:100%;top:-5px;left:0}.ui-resizable-s{cursor:s-resize;height:7px;width:100%;bottom:-5px;left:0}.ui-resizable-e{cursor:e-resize;width:7px;right:-5px;top:0;height:100%}.ui-resizable-w{cursor:w-resize;width:7px;left:-5px;top:0;height:100%}.ui-resizable-se{cursor:se-resize;width:12px;height:12px;right:1px;bottom:1px}.ui-resizable-sw{cursor:sw-resize;width:9px;height:9px;left:-5px;bottom:-5px}.ui-resizable-nw{cursor:nw-resize;width:9px;height:9px;left:-5px;top:-5px}.ui-resizable-ne{cursor:ne-resize;width:9px;height:9px;right:-5px;top:-5px}.ui-sortable-handle{-ms-touch-action:none;touch-action:none}.ui-autocomplete{position:absolute;top:0;left:0;cursor:default}.ui-datepicker{width:17em;padding:.2em .2em 0;display:none}.ui-datepicker .ui-datepicker-header{position:relative;padding:.2em 0}.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{position:absolute;top:2px;width:1.8em;height:1.8em}.ui-datepicker .ui-datepicker-prev-hover,.ui-datepicker .ui-datepicker-next-hover{top:1px}.ui-datepicker .ui-datepicker-prev{left:2px}.ui-datepicker .ui-datepicker-next{right:2px}.ui-datepicker .ui-datepicker-prev-hover{left:1px}.ui-datepicker .ui-datepicker-next-hover{right:1px}.ui-datepicker .ui-datepicker-prev span,.ui-datepicker .ui-datepicker-next span{display:block;position:absolute;left:50%;margin-left:-8px;top:50%;margin-top:-8px}.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center}.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0}.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:45%}.ui-datepicker table{width:100%;font-size:.9em;border-collapse:collapse;margin:0 0 .4em}.ui-datepicker th{padding:.7em .3em;text-align:center;font-weight:bold;border:0}.ui-datepicker td{border:0;padding:1px}.ui-datepicker td span,.ui-datepicker td a{display:block;padding:.2em;text-align:right;text-decoration:none}.ui-datepicker .ui-datepicker-buttonpane{background-image:none;margin:.7em 0 0 0;padding:0 .2em;border-left:0;border-right:0;border-bottom:0}.ui-datepicker .ui-datepicker-buttonpane button{float:right;margin:.5em .2em .4em;cursor:pointer;padding:.2em .6em .3em .6em;width:auto;overflow:visible}.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current{float:left}.ui-datepicker.ui-datepicker-multi{width:auto}.ui-datepicker-multi .ui-datepicker-group{float:left}.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}.ui-datepicker-multi-3 .ui-datepicker-group{width:33.3%}.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}.ui-datepicker-row-break{clear:both;width:100%;font-size:0}.ui-datepicker-rtl{direction:rtl}.ui-datepicker-rtl .ui-datepicker-prev{right:2px;left:auto}.ui-datepicker-rtl .ui-datepicker-next{left:2px;right:auto}.ui-datepicker-rtl .ui-datepicker-prev:hover{right:1px;left:auto}.ui-datepicker-rtl .ui-datepicker-next:hover{left:1px;right:auto}.ui-datepicker-rtl .ui-datepicker-buttonpane{clear:right}.ui-datepicker-rtl .ui-datepicker-buttonpane button{float:left}.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,.ui-datepicker-rtl .ui-datepicker-group{float:right}.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header{border-right-width:0;border-left-width:1px}.ui-menu{list-style:none;padding:0;margin:0;display:block;outline:none}.ui-menu .ui-menu{position:absolute}.ui-menu .ui-menu-item{position:relative;margin:0;padding:3px 1em 3px .4em;cursor:pointer;min-height:0;list-style-image:url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")}.ui-menu .ui-menu-divider{margin:5px 0;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}.ui-menu .ui-state-focus,.ui-menu .ui-state-active{margin:-1px}.ui-menu-icons{position:relative}.ui-menu-icons .ui-menu-item{padding-left:2em}.ui-menu .ui-icon{position:absolute;top:0;bottom:0;left:.2em;margin:auto 0}.ui-menu .ui-menu-icon{left:auto;right:0}.ui-widget{font-family:Verdana,Arial,sans-serif;font-size:1.1em}.ui-widget .ui-widget{font-size:1em}.ui-widget input,.ui-widget select,.ui-widget textarea,.ui-widget button{font-family:Verdana,Arial,sans-serif;font-size:1em}.ui-widget-content{border:1px solid #aaa;background:#fff url("images/ui-bg_flat_75_ffffff_40x100.png") 50% 50% repeat-x;color:#222}.ui-widget-content a{color:#222}.ui-widget-header{border:1px solid #aaa;background:#ccc url("images/ui-bg_highlight-soft_75_cccccc_1x100.png") 50% 50% repeat-x;color:#222;font-weight:bold}.ui-widget-header a{color:#222}.ui-state-default,.ui-widget-content .ui-state-default,.ui-widget-header .ui-state-default{border:1px solid #d3d3d3;background:#e6e6e6 url("images/ui-bg_glass_75_e6e6e6_1x400.png") 50% 50% repeat-x;font-weight:normal;color:#555}.ui-state-default a,.ui-state-default a:link,.ui-state-default a:visited{color:#555;text-decoration:none}.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{border:1px solid #999;background:#dadada url("images/ui-bg_glass_75_dadada_1x400.png") 50% 50% repeat-x;font-weight:normal;color:#212121}.ui-state-hover a,.ui-state-hover a:hover,.ui-state-hover a:link,.ui-state-hover a:visited,.ui-state-focus a,.ui-state-focus a:hover,.ui-state-focus a:link,.ui-state-focus a:visited{color:#212121;text-decoration:none}.ui-state-active,.ui-widget-content .ui-state-active,.ui-widget-header .ui-state-active{border:1px solid #aaa;background:#fff url("images/ui-bg_glass_65_ffffff_1x400.png") 50% 50% repeat-x;font-weight:normal;color:#212121}.ui-state-active a,.ui-state-active a:link,.ui-state-active a:visited{color:#212121;text-decoration:none}.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight{border:1px solid #fcefa1;background:#fbf9ee url("images/ui-bg_glass_55_fbf9ee_1x400.png") 50% 50% repeat-x;color:#363636}.ui-state-highlight a,.ui-widget-content .ui-state-highlight a,.ui-widget-header .ui-state-highlight a{color:#363636}.ui-state-error,.ui-widget-content .ui-state-error,.ui-widget-header .ui-state-error{border:1px solid #cd0a0a;background:#fef1ec url("images/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;color:#cd0a0a}.ui-state-error a,.ui-widget-content .ui-state-error a,.ui-widget-header .ui-state-error a{color:#cd0a0a}.ui-state-error-text,.ui-widget-content .ui-state-error-text,.ui-widget-header .ui-state-error-text{color:#cd0a0a}.ui-priority-primary,.ui-widget-content .ui-priority-primary,.ui-widget-header .ui-priority-primary{font-weight:bold}.ui-priority-secondary,.ui-widget-content .ui-priority-secondary,.ui-widget-header .ui-priority-secondary{opacity:.7;filter:Alpha(Opacity=70);font-weight:normal}.ui-state-disabled,.ui-widget-content .ui-state-disabled,.ui-widget-header .ui-state-disabled{opacity:.35;filter:Alpha(Opacity=35);background-image:none}.ui-state-disabled .ui-icon{filter:Alpha(Opacity=35)}.ui-icon{width:16px;height:16px}.ui-icon,.ui-widget-content .ui-icon{background-image:url("images/ui-icons_222222_256x240.png")}.ui-widget-header .ui-icon{background-image:url("images/ui-icons_222222_256x240.png")}.ui-state-default .ui-icon{background-image:url("images/ui-icons_888888_256x240.png")}.ui-state-hover .ui-icon,.ui-state-focus .ui-icon{background-image:url("images/ui-icons_454545_256x240.png")}.ui-state-active .ui-icon{background-image:url("images/ui-icons_454545_256x240.png")}.ui-state-highlight .ui-icon{background-image:url("images/ui-icons_2e83ff_256x240.png")}.ui-state-error .ui-icon,.ui-state-error-text .ui-icon{background-image:url("images/ui-icons_cd0a0a_256x240.png")}.ui-icon-blank{background-position:16px 16px}.ui-icon-carat-1-n{background-position:0 0}.ui-icon-carat-1-ne{background-position:-16px 0}.ui-icon-carat-1-e{background-position:-32px 0}.ui-icon-carat-1-se{background-position:-48px 0}.ui-icon-carat-1-s{background-position:-64px 0}.ui-icon-carat-1-sw{background-position:-80px 0}.ui-icon-carat-1-w{background-position:-96px 0}.ui-icon-carat-1-nw{background-position:-112px 0}.ui-icon-carat-2-n-s{background-position:-128px 0}.ui-icon-carat-2-e-w{background-position:-144px 0}.ui-icon-triangle-1-n{background-position:0 -16px}.ui-icon-triangle-1-ne{background-position:-16px -16px}.ui-icon-triangle-1-e{background-position:-32px -16px}.ui-icon-triangle-1-se{background-position:-48px -16px}.ui-icon-triangle-1-s{background-position:-64px -16px}.ui-icon-triangle-1-sw{background-position:-80px -16px}.ui-icon-triangle-1-w{background-position:-96px -16px}.ui-icon-triangle-1-nw{background-position:-112px -16px}.ui-icon-triangle-2-n-s{background-position:-128px -16px}.ui-icon-triangle-2-e-w{background-position:-144px -16px}.ui-icon-arrow-1-n{background-position:0 -32px}.ui-icon-arrow-1-ne{background-position:-16px -32px}.ui-icon-arrow-1-e{background-position:-32px -32px}.ui-icon-arrow-1-se{background-position:-48px -32px}.ui-icon-arrow-1-s{background-position:-64px -32px}.ui-icon-arrow-1-sw{background-position:-80px -32px}.ui-icon-arrow-1-w{background-position:-96px -32px}.ui-icon-arrow-1-nw{background-position:-112px -32px}.ui-icon-arrow-2-n-s{background-position:-128px -32px}.ui-icon-arrow-2-ne-sw{background-position:-144px -32px}.ui-icon-arrow-2-e-w{background-position:-160px -32px}.ui-icon-arrow-2-se-nw{background-position:-176px -32px}.ui-icon-arrowstop-1-n{background-position:-192px -32px}.ui-icon-arrowstop-1-e{background-position:-208px -32px}.ui-icon-arrowstop-1-s{background-position:-224px -32px}.ui-icon-arrowstop-1-w{background-position:-240px -32px}.ui-icon-arrowthick-1-n{background-position:0 -48px}.ui-icon-arrowthick-1-ne{background-position:-16px -48px}.ui-icon-arrowthick-1-e{background-position:-32px -48px}.ui-icon-arrowthick-1-se{background-position:-48px -48px}.ui-icon-arrowthick-1-s{background-position:-64px -48px}.ui-icon-arrowthick-1-sw{background-position:-80px -48px}.ui-icon-arrowthick-1-w{background-position:-96px -48px}.ui-icon-arrowthick-1-nw{background-position:-112px -48px}.ui-icon-arrowthick-2-n-s{background-position:-128px -48px}.ui-icon-arrowthick-2-ne-sw{background-position:-144px -48px}.ui-icon-arrowthick-2-e-w{background-position:-160px -48px}.ui-icon-arrowthick-2-se-nw{background-position:-176px -48px}.ui-icon-arrowthickstop-1-n{background-position:-192px -48px}.ui-icon-arrowthickstop-1-e{background-position:-208px -48px}.ui-icon-arrowthickstop-1-s{background-position:-224px -48px}.ui-icon-arrowthickstop-1-w{background-position:-240px -48px}.ui-icon-arrowreturnthick-1-w{background-position:0 -64px}.ui-icon-arrowreturnthick-1-n{background-position:-16px -64px}.ui-icon-arrowreturnthick-1-e{background-position:-32px -64px}.ui-icon-arrowreturnthick-1-s{background-position:-48px -64px}.ui-icon-arrowreturn-1-w{background-position:-64px -64px}.ui-icon-arrowreturn-1-n{background-position:-80px -64px}.ui-icon-arrowreturn-1-e{background-position:-96px -64px}.ui-icon-arrowreturn-1-s{background-position:-112px -64px}.ui-icon-arrowrefresh-1-w{background-position:-128px -64px}.ui-icon-arrowrefresh-1-n{background-position:-144px -64px}.ui-icon-arrowrefresh-1-e{background-position:-160px -64px}.ui-icon-arrowrefresh-1-s{background-position:-176px -64px}.ui-icon-arrow-4{background-position:0 -80px}.ui-icon-arrow-4-diag{background-position:-16px -80px}.ui-icon-extlink{background-position:-32px -80px}.ui-icon-newwin{background-position:-48px -80px}.ui-icon-refresh{background-position:-64px -80px}.ui-icon-shuffle{background-position:-80px -80px}.ui-icon-transfer-e-w{background-position:-96px -80px}.ui-icon-transferthick-e-w{background-position:-112px -80px}.ui-icon-folder-collapsed{background-position:0 -96px}.ui-icon-folder-open{background-position:-16px -96px}.ui-icon-document{background-position:-32px -96px}.ui-icon-document-b{background-position:-48px -96px}.ui-icon-note{background-position:-64px -96px}.ui-icon-mail-closed{background-position:-80px -96px}.ui-icon-mail-open{background-position:-96px -96px}.ui-icon-suitcase{background-position:-112px -96px}.ui-icon-comment{background-position:-128px -96px}.ui-icon-person{background-position:-144px -96px}.ui-icon-print{background-position:-160px -96px}.ui-icon-trash{background-position:-176px -96px}.ui-icon-locked{background-position:-192px -96px}.ui-icon-unlocked{background-position:-208px -96px}.ui-icon-bookmark{background-position:-224px -96px}.ui-icon-tag{background-position:-240px -96px}.ui-icon-home{background-position:0 -112px}.ui-icon-flag{background-position:-16px -112px}.ui-icon-calendar{background-position:-32px -112px}.ui-icon-cart{background-position:-48px -112px}.ui-icon-pencil{background-position:-64px -112px}.ui-icon-clock{background-position:-80px -112px}.ui-icon-disk{background-position:-96px -112px}.ui-icon-calculator{background-position:-112px -112px}.ui-icon-zoomin{background-position:-128px -112px}.ui-icon-zoomout{background-position:-144px -112px}.ui-icon-search{background-position:-160px -112px}.ui-icon-wrench{background-position:-176px -112px}.ui-icon-gear{background-position:-192px -112px}.ui-icon-heart{background-position:-208px -112px}.ui-icon-star{background-position:-224px -112px}.ui-icon-link{background-position:-240px -112px}.ui-icon-cancel{background-position:0 -128px}.ui-icon-plus{background-position:-16px -128px}.ui-icon-plusthick{background-position:-32px -128px}.ui-icon-minus{background-position:-48px -128px}.ui-icon-minusthick{background-position:-64px -128px}.ui-icon-close{background-position:-80px -128px}.ui-icon-closethick{background-position:-96px -128px}.ui-icon-key{background-position:-112px -128px}.ui-icon-lightbulb{background-position:-128px -128px}.ui-icon-scissors{background-position:-144px -128px}.ui-icon-clipboard{background-position:-160px -128px}.ui-icon-copy{background-position:-176px -128px}.ui-icon-contact{background-position:-192px -128px}.ui-icon-image{background-position:-208px -128px}.ui-icon-video{background-position:-224px -128px}.ui-icon-script{background-position:-240px -128px}.ui-icon-alert{background-position:0 -144px}.ui-icon-info{background-position:-16px -144px}.ui-icon-notice{background-position:-32px -144px}.ui-icon-help{background-position:-48px -144px}.ui-icon-check{background-position:-64px -144px}.ui-icon-bullet{background-position:-80px -144px}.ui-icon-radio-on{background-position:-96px -144px}.ui-icon-radio-off{background-position:-112px -144px}.ui-icon-pin-w{background-position:-128px -144px}.ui-icon-pin-s{background-position:-144px -144px}.ui-icon-play{background-position:0 -160px}.ui-icon-pause{background-position:-16px -160px}.ui-icon-seek-next{background-position:-32px -160px}.ui-icon-seek-prev{background-position:-48px -160px}.ui-icon-seek-end{background-position:-64px -160px}.ui-icon-seek-start{background-position:-80px -160px}.ui-icon-seek-first{background-position:-80px -160px}.ui-icon-stop{background-position:-96px -160px}.ui-icon-eject{background-position:-112px -160px}.ui-icon-volume-off{background-position:-128px -160px}.ui-icon-volume-on{background-position:-144px -160px}.ui-icon-power{background-position:0 -176px}.ui-icon-signal-diag{background-position:-16px -176px}.ui-icon-signal{background-position:-32px -176px}.ui-icon-battery-0{background-position:-48px -176px}.ui-icon-battery-1{background-position:-64px -176px}.ui-icon-battery-2{background-position:-80px -176px}.ui-icon-battery-3{background-position:-96px -176px}.ui-icon-circle-plus{background-position:0 -192px}.ui-icon-circle-minus{background-position:-16px -192px}.ui-icon-circle-close{background-position:-32px -192px}.ui-icon-circle-triangle-e{background-position:-48px -192px}.ui-icon-circle-triangle-s{background-position:-64px -192px}.ui-icon-circle-triangle-w{background-position:-80px -192px}.ui-icon-circle-triangle-n{background-position:-96px -192px}.ui-icon-circle-arrow-e{background-position:-112px -192px}.ui-icon-circle-arrow-s{background-position:-128px -192px}.ui-icon-circle-arrow-w{background-position:-144px -192px}.ui-icon-circle-arrow-n{background-position:-160px -192px}.ui-icon-circle-zoomin{background-position:-176px -192px}.ui-icon-circle-zoomout{background-position:-192px -192px}.ui-icon-circle-check{background-position:-208px -192px}.ui-icon-circlesmall-plus{background-position:0 -208px}.ui-icon-circlesmall-minus{background-position:-16px -208px}.ui-icon-circlesmall-close{background-position:-32px -208px}.ui-icon-squaresmall-plus{background-position:-48px -208px}.ui-icon-squaresmall-minus{background-position:-64px -208px}.ui-icon-squaresmall-close{background-position:-80px -208px}.ui-icon-grip-dotted-vertical{background-position:0 -224px}.ui-icon-grip-dotted-horizontal{background-position:-16px -224px}.ui-icon-grip-solid-vertical{background-position:-32px -224px}.ui-icon-grip-solid-horizontal{background-position:-48px -224px}.ui-icon-gripsmall-diagonal-se{background-position:-64px -224px}.ui-icon-grip-diagonal-se{background-position:-80px -224px}.ui-corner-all,.ui-corner-top,.ui-corner-left,.ui-corner-tl{border-top-left-radius:4px}.ui-corner-all,.ui-corner-top,.ui-corner-right,.ui-corner-tr{border-top-right-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-left,.ui-corner-bl{border-bottom-left-radius:4px}.ui-corner-all,.ui-corner-bottom,.ui-corner-right,.ui-corner-br{border-bottom-right-radius:4px}.ui-widget-overlay{background:#aaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;opacity:.3;filter:Alpha(Opacity=30)}.ui-widget-shadow{margin:-8px 0 0 -8px;padding:8px;background:#aaa url("images/ui-bg_flat_0_aaaaaa_40x100.png") 50% 50% repeat-x;opacity:.3;filter:Alpha(Opacity=30);border-radius:8px}
\ No newline at end of file
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/Otobo_Wortmarke_Digital_Blau_RGB.svg b/var/httpd/htdocs/skins/Agent/otobo-dark/img/Otobo_Wortmarke_Digital_Blau_RGB.svg
new file mode 100644
index 0000000000..741e3acc8b
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/img/Otobo_Wortmarke_Digital_Blau_RGB.svg
@@ -0,0 +1,40 @@
+
+
+
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/Otobo_Wortmarke_Sub_Digital_Farbe_RGB.svg b/var/httpd/htdocs/skins/Agent/otobo-dark/img/Otobo_Wortmarke_Sub_Digital_Farbe_RGB.svg
new file mode 100644
index 0000000000..b365d9e24d
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/img/Otobo_Wortmarke_Sub_Digital_Farbe_RGB.svg
@@ -0,0 +1,145 @@
+
+
+
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/ProgressBarArrow.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/ProgressBarArrow.png
new file mode 100644
index 0000000000..310119a44a
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/ProgressBarArrow.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/ProgressBarArrowActive.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/ProgressBarArrowActive.png
new file mode 100644
index 0000000000..6726c930b4
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/ProgressBarArrowActive.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/ProgressBarIsolator.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/ProgressBarIsolator.png
new file mode 100644
index 0000000000..41bf51567d
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/ProgressBarIsolator.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/dnd_placeholder_bg.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/dnd_placeholder_bg.png
new file mode 100644
index 0000000000..b6264e4dea
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/dnd_placeholder_bg.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/empty.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/empty.png
new file mode 100644
index 0000000000..1b1e662cd2
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/empty.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/filter_add.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/filter_add.png
new file mode 100644
index 0000000000..3cdad2c9a2
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/filter_add.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/filter_add_hover.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/filter_add_hover.png
new file mode 100644
index 0000000000..e799fce354
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/filter_add_hover.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/filter_remove.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/filter_remove.png
new file mode 100644
index 0000000000..7cd1de7c6f
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/filter_remove.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/filter_remove_hover.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/filter_remove_hover.png
new file mode 100644
index 0000000000..ef59086de3
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/filter_remove_hover.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/handle.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/handle.png
new file mode 100644
index 0000000000..56b59a1c44
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/handle.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/help-small.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/help-small.png
new file mode 100644
index 0000000000..f5dab3ea69
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/help-small.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/icon_resize_horizontal.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icon_resize_horizontal.png
new file mode 100644
index 0000000000..02a9dcebe9
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icon_resize_horizontal.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/icon_resize_vertical.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icon_resize_vertical.png
new file mode 100644
index 0000000000..ccef3a3df0
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icon_resize_vertical.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/apple-touch-icon.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/apple-touch-icon.png
new file mode 100644
index 0000000000..857f81e82b
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/apple-touch-icon.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/certificate-plus.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/certificate-plus.png
new file mode 100644
index 0000000000..63bea55a80
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/certificate-plus.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/certificate.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/certificate.png
new file mode 100644
index 0000000000..76f1d27902
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/certificate.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/cross.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/cross.png
new file mode 100644
index 0000000000..3a1a72b350
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/cross.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/cross_sw.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/cross_sw.png
new file mode 100644
index 0000000000..28c0abb540
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/cross_sw.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/folder-small.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/folder-small.png
new file mode 100644
index 0000000000..b3a3c01eae
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/folder-small.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/monitor.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/monitor.png
new file mode 100644
index 0000000000..704f4d56e5
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/monitor.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/plus-button.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/plus-button.png
new file mode 100644
index 0000000000..c665d70681
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/plus-button.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/printer.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/printer.png
new file mode 100644
index 0000000000..866bbe0d4f
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/printer.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/product.ico b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/product.ico
new file mode 100644
index 0000000000..c7840e4059
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/product.ico differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/reports.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/reports.png
new file mode 100644
index 0000000000..128b262461
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/reports.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/tick.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/tick.png
new file mode 100644
index 0000000000..c9d4927fed
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/icons/tick.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/inputfield_tree.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/inputfield_tree.png
new file mode 100644
index 0000000000..5040923626
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/inputfield_tree.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/loader.gif b/var/httpd/htdocs/skins/Agent/otobo-dark/img/loader.gif
new file mode 100644
index 0000000000..aa044fa0f6
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/loader.gif differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/loginlogo_default.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/loginlogo_default.png
new file mode 100644
index 0000000000..98b89e6f47
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/loginlogo_default.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/logo-business.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/logo-business.png
new file mode 100644
index 0000000000..b75da0f06d
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/logo-business.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/logo_bg.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/logo_bg.png
new file mode 100644
index 0000000000..e70a55ea09
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/logo_bg.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/otobo-signet.svg b/var/httpd/htdocs/skins/Agent/otobo-dark/img/otobo-signet.svg
new file mode 100644
index 0000000000..01e4163268
--- /dev/null
+++ b/var/httpd/htdocs/skins/Agent/otobo-dark/img/otobo-signet.svg
@@ -0,0 +1,16 @@
+
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/otobo-verify-small.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/otobo-verify-small.png
new file mode 100644
index 0000000000..6bbc06b45e
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/otobo-verify-small.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/otobo-verify.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/otobo-verify.png
new file mode 100644
index 0000000000..aaab404d91
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/otobo-verify.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/overviewcontrol_checkbox.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/overviewcontrol_checkbox.png
new file mode 100644
index 0000000000..ae9472bd29
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/overviewcontrol_checkbox.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/overviewcontrol_line.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/overviewcontrol_line.png
new file mode 100644
index 0000000000..c169aab162
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/overviewcontrol_line.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/signet_small_bw.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/signet_small_bw.png
new file mode 100644
index 0000000000..20e263f592
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/signet_small_bw.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/action_hover.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/action_hover.psd
new file mode 100644
index 0000000000..2215568407
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/action_hover.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/actionrow_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/actionrow_bg.psd
new file mode 100644
index 0000000000..d3b2a9fe59
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/actionrow_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/actionrow_wrapper.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/actionrow_wrapper.psd
new file mode 100644
index 0000000000..3f62ad5cc4
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/actionrow_wrapper.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/agent_tabs_isolator.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/agent_tabs_isolator.psd
new file mode 100644
index 0000000000..8f063ea6d7
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/agent_tabs_isolator.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/arrow_top.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/arrow_top.psd
new file mode 100644
index 0000000000..41de49b0a0
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/arrow_top.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/arrows.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/arrows.psd
new file mode 100644
index 0000000000..3c4103d165
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/arrows.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/articlefilter.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/articlefilter.psd
new file mode 100644
index 0000000000..a7e196520a
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/articlefilter.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/articleview.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/articleview.psd
new file mode 100644
index 0000000000..231e76c119
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/articleview.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/breadcrumb_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/breadcrumb_bg.psd
new file mode 100644
index 0000000000..e4fd4f701b
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/breadcrumb_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/bubbles.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/bubbles.psd
new file mode 100644
index 0000000000..17a0ef35a9
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/bubbles.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/button_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/button_bg.psd
new file mode 100644
index 0000000000..10357f213b
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/button_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/controlrow.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/controlrow.psd
new file mode 100644
index 0000000000..a146d210ae
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/controlrow.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/controlrow_isolator.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/controlrow_isolator.psd
new file mode 100644
index 0000000000..400060ef97
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/controlrow_isolator.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/controlrow_sprite.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/controlrow_sprite.psd
new file mode 100644
index 0000000000..514000735b
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/controlrow_sprite.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/gradient_dark_small.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/gradient_dark_small.psd
new file mode 100644
index 0000000000..5b19555a06
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/gradient_dark_small.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/gradient_light.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/gradient_light.psd
new file mode 100644
index 0000000000..8cbcc85e56
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/gradient_light.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/gradient_lightdark.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/gradient_lightdark.psd
new file mode 100644
index 0000000000..dbbf3cdb03
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/gradient_lightdark.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/header_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/header_bg.psd
new file mode 100644
index 0000000000..d31775b34b
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/header_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/logo.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/logo.psd
new file mode 100644
index 0000000000..db5a8cfbba
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/logo.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/logo_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/logo_bg.psd
new file mode 100644
index 0000000000..ac82d8a28d
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/logo_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_shadow_bottom.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_shadow_bottom.psd
new file mode 100644
index 0000000000..828d66a4ed
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_shadow_bottom.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_shadow_top.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_shadow_top.psd
new file mode 100644
index 0000000000..33fe791deb
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_shadow_top.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_shadow_wrapper.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_shadow_wrapper.psd
new file mode 100644
index 0000000000..b8d5bd683d
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_shadow_wrapper.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_sprite.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_sprite.psd
new file mode 100644
index 0000000000..18ae55e6a1
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_sprite.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_ul_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_ul_bg.psd
new file mode 100644
index 0000000000..88ade2a061
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_ul_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_ul_shaddow.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_ul_shaddow.psd
new file mode 100644
index 0000000000..04a4534efd
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_ul_shaddow.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_underline_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_underline_bg.psd
new file mode 100644
index 0000000000..0a3cef14b8
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/navigation_underline_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/popup_head_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/popup_head_bg.psd
new file mode 100644
index 0000000000..cda9ebb9e5
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/popup_head_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/reload.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/reload.psd
new file mode 100644
index 0000000000..6a1bb6fdde
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/reload.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/search_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/search_bg.psd
new file mode 100644
index 0000000000..8616b49717
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/search_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tab_isolator_light.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tab_isolator_light.psd
new file mode 100644
index 0000000000..3b4b91ab68
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tab_isolator_light.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/table_large_hover.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/table_large_hover.psd
new file mode 100644
index 0000000000..4982ac12ca
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/table_large_hover.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/table_medium_hover.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/table_medium_hover.psd
new file mode 100644
index 0000000000..d95732371e
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/table_medium_hover.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/table_medium_hover_bottom.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/table_medium_hover_bottom.psd
new file mode 100644
index 0000000000..76fe2057b2
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/table_medium_hover_bottom.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/table_small_hover_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/table_small_hover_bg.psd
new file mode 100644
index 0000000000..b1d383015f
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/table_small_hover_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/table_small_hover_door.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/table_small_hover_door.psd
new file mode 100644
index 0000000000..2c30f4b5d4
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/table_small_hover_door.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tablelarge_accordion.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tablelarge_accordion.psd
new file mode 100644
index 0000000000..d19cf68d31
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tablelarge_accordion.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tablelarge_accordion_activeline.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tablelarge_accordion_activeline.psd
new file mode 100644
index 0000000000..9634a96a13
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tablelarge_accordion_activeline.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tablelarge_accordion_activeline_corners.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tablelarge_accordion_activeline_corners.psd
new file mode 100644
index 0000000000..1144b67e0c
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tablelarge_accordion_activeline_corners.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tablelarge_accordion_closedline.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tablelarge_accordion_closedline.psd
new file mode 100644
index 0000000000..9273ac8a75
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tablelarge_accordion_closedline.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tablelarge_accordion_closedline_corners.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tablelarge_accordion_closedline_corners.psd
new file mode 100644
index 0000000000..7f4f7a815e
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tablelarge_accordion_closedline_corners.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_active_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_active_bg.psd
new file mode 100644
index 0000000000..aba2655c86
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_active_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_door_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_door_bg.psd
new file mode 100644
index 0000000000..fb7ead27f2
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_door_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_hover_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_hover_bg.psd
new file mode 100644
index 0000000000..d85677af43
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_hover_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_isolator.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_isolator.psd
new file mode 100644
index 0000000000..3ec2f4c21c
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_isolator.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_splitter_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_splitter_bg.psd
new file mode 100644
index 0000000000..dc7f33b41a
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_splitter_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_wrapper.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_wrapper.psd
new file mode 100644
index 0000000000..16a885e4e5
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tabs_wrapper.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/thead_isolator.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/thead_isolator.psd
new file mode 100644
index 0000000000..cf843ea35d
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/thead_isolator.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/thead_sort_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/thead_sort_bg.psd
new file mode 100644
index 0000000000..cc3759779f
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/thead_sort_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/thead_splitter_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/thead_splitter_bg.psd
new file mode 100644
index 0000000000..ac65c052bf
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/thead_splitter_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/toggle_arrow.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/toggle_arrow.psd
new file mode 100644
index 0000000000..3f1fac1f84
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/toggle_arrow.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tr_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tr_bg.psd
new file mode 100644
index 0000000000..4ba034a695
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tr_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tr_hover.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tr_hover.psd
new file mode 100644
index 0000000000..79706565be
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/tr_hover.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/triangle_bg.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/triangle_bg.psd
new file mode 100644
index 0000000000..00262589ec
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/triangle_bg.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/widget.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/widget.psd
new file mode 100644
index 0000000000..d350ba8b47
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/widget.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/widget_gradient.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/widget_gradient.psd
new file mode 100644
index 0000000000..cfa373f38e
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/widget_gradient.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/zoom_sprite.psd b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/zoom_sprite.psd
new file mode 100644
index 0000000000..6ad1cda7bf
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/source/zoom_sprite.psd differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/tab_isolator.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/tab_isolator.png
new file mode 100644
index 0000000000..30c2f6594b
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/tab_isolator.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/tab_isolator_light.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/tab_isolator_light.png
new file mode 100644
index 0000000000..fe397239ae
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/tab_isolator_light.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/thead_isolator.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/thead_isolator.png
new file mode 100644
index 0000000000..36ae518a17
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/thead_isolator.png differ
diff --git a/var/httpd/htdocs/skins/Agent/otobo-dark/img/toggle_arrow.png b/var/httpd/htdocs/skins/Agent/otobo-dark/img/toggle_arrow.png
new file mode 100644
index 0000000000..e98e680b1a
Binary files /dev/null and b/var/httpd/htdocs/skins/Agent/otobo-dark/img/toggle_arrow.png differ