/* Copyright (C) 2001-2021 OTRS AG, https://otrs.com/ Copyright (C) 2021 Znuny GmbH, https://znuny.org/ This software comes with ABSOLUTELY NO WARRANTY. For details, see the enclosed file COPYING for license information (GPL). If you did not receive this file, see https://www.gnu.org/licenses/gpl-3.0.txt. */ /** * @package Skin "Default" * @section Widgets */ @media screen,projection,tv,handheld { /** * @subsection Widget Tablelike list */ ul.Tablelike { border: var(--border-width) var(--border-solid) var(--border-color); } .SidebarColumn ul.Tablelike { border: 0; } .tablelike-wrapper { display: flex; flex-flow: column; gap: var(--gap-sm); } .tablelike-wrapper ul.Tablelike { border-radius: var(--border-radius-sm); overflow: hidden; } ul.Tablelike:first-child { /*disturbing column width in modal window /*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: var(--padding-md) var(--padding-lg); min-height: 38px; font-weight: var(--semi-bold); background-color: var(--white); color: var(--modal-col-text-color); word-break: break-word; } 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: var(--main-bg-color); } ul.Tablelike li:hover { background: #ffe8d3; } ul.Tablelike li:hover a { color: #000; } ul.Tablelike li.Header { color: var(--black); font-size: var(--font-size-md); font-weight: var(--medium); line-height: 20px; padding: var(--padding-md) var(--padding-lg); background: var(--modal-header-bg); border: var(--border-width) var(--border-solid) transparent; border-top-left-radius: var(--border-radius-sm); border-top-right-radius: var(--border-radius-sm); border-bottom: 0; justify-content: flex-start; } ul.Tablelike + ul.Tablelike.AllocationList { border-top: 0px; } ul.Tablelike li.Header + li { border-top: 1px solid #EEE; } ul.cursor-grab > li:hover { cursor: grab; } /** * @subsection WidgetSimple */ .LayoutPopup .Content > .WidgetSimple:last-child { margin-bottom: 0px; } /* .WidgetSimple { position: relative; margin-bottom: var(--widget-margin); background: var(--widget-simple-bg); box-shadow: none; margin-right: 0; border: var(--border-width) var(--border-solid) var(--border-color); border-radius: var(--border-radius-sm); overflow: hidden; }*/ .manageLinks .WidgetSimple{ border: none; /*border-radius: 0px;*/ } .WidgetSimple.WidgetLoading i { display: block; text-align: center; margin: 10px 0px; } .WidgetSimple.MobileNotAvailableWidget { display: none; } /*## Unknown ## .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: var(--padding-xl) var(--padding-xl); position: relative; border: none; } /*## Unknown ## .WidgetSimple.Collapsed > .Header { border-bottom: none; }*/ /*.WidgetSimple > .Header h2, .WidgetSimple > .Header h3 { display: flex; align-items: center; padding: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--widget-simple-title-size); font-weight: var(--semi-bold); text-shadow: none; color: var(--black); line-height: 120%; }*/ .MainBox .SidebarColumn .WidgetSimple .Header, .MainBox .SidebarColumn .WidgetSimple.not-collapse .Header, .MainBox .InnerSidebarColumn .WidgetSimple .Header { padding: var(--padding-md); background-color: var(--sidebarcolumn-header-bg); border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; } .MainBox.mainStructure .SidebarColumn .WidgetSimple .Header { /*background: transparent;*/ } .MainBox .SidebarColumn .WidgetSimple .Content, .MainBox .InnerSidebarColumn .WidgetSimple .Content { padding: var(--padding-md); } .MainBox .SidebarColumn .WidgetSimple .Content fieldset.TableLike > label{ text-align: left; /*width: 40%;*/ float: left; display: block; box-sizing: border-box; padding: 0 0 var(--padding-md); color: var(--gray-dark-semi); } .MainBox .SidebarColumn .WidgetSimple .Content fieldset.TableLike > .Value{ margin: 0; width: 60%; float: left; display: block; box-sizing: border-box; padding: 0 0 var(--padding-md) var(--padding-xs); color: var(--black); } /* This is a duplicate -> .WidgetSimple > .Content {*/ /*padding: 0; overflow: auto;*/ /*border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);*/ /** * 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 OTRSDashboardOverviewFilters and many dynamic fields are * shown in the dashboard.) */ /*min-height: 0%;*/ /* END IE9 Hover Bug Workaround */ /*}*/ .ContentColumn .WidgetSimple.CanDrag > .Content { box-shadow: inset 0 40px 0 var(--table-th-bg); } .WidgetSimple > .Content.OverflowVisible { overflow: visible; } .WidgetSimple > .Content > .WidgetMessage.CalendarEvents span.ShowCalendarEventsInfoOverlay { cursor: pointer; } .WidgetSimple > .Content > .WidgetMessage.CalendarEvents span.ShowCalendarEventsInfoOverlay:hover { filter: brightness(70%); } .WidgetSimple.QueueOverview > .Content { padding-bottom: 2px; } .WidgetSimple.Collapsed > .Content { display: none !important; } .WidgetSimple .WidgetSettingsForm fieldset { gap: var(--gap-sm); margin-bottom: 0px; border-bottom-right-radius: var(--border-radius-sm); border-bottom-left-radius: var(--border-radius-sm); } .WidgetSimple .Field.LayoutGrid { padding-top: 7px; } /*.WidgetSimple .Field.LayoutGrid .Tablelike { width: 98%; }*/ .WidgetSimple .Buttons { border-top: none; 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; } /** * @subsection inner-content styles */ .WidgetSimple legend.sub-title { border-top: var(--border-width) var(--border-solid) var(--border-color); } .WidgetSimple legend.sub-title span { font-weight: var(--semi-bold); padding-bottom: var(--padding-sm); } .WidgetSimple fieldset.TableLike .Value, .WidgetSimple fieldset.TableLike .Value span { line-height: 140%; gap: 0; } /* Legend & Shortcuts */ .WidgetSimple .Legend, .WidgetSimple .ShortCuts { } .WidgetSimple .Legend { display: flex; flex-flow: column; gap: var(--gap-sm); } .WidgetSimple .Legend li, .WidgetSimple .ShortCuts li { font-size: 11px; font-weight: var(--medium); display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-xs); } .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 { height: 12px; width: 5px; } .RTL .WidgetSimple .Legend li span { left: auto; right: 0px; } .WidgetSimple .ShortCuts { display: flex; flex-flow: column; gap: var(--gap-xs); } .WidgetSimple .ShortCuts li em { display: flex; align-items: center; justify-content: flex-end; min-width: 46px; font-style: unset; } .WidgetSimple .ShortCuts li span, .SettingsList.Compare .WidgetSimple h2 .Label { border: var(--border-width) var(--border-solid) var(--border-color); text-transform: uppercase; /*font-family: 'Poppins'*/ font-size: 9px; font-weight: var(--semi-bold); color: var(--gray-dark); padding: 3px; border-radius: 3px; letter-spacing: .1px; } .RTL .WidgetSimple .ShortCuts li span { margin-right: 0px; margin-left: 5px; } div.WidgetSimpleSecondary{ border: 0; margin: 0; padding: 0; overflow: visible; z-index: 100; } div.WidgetSimpleSecondary div.ActionRow { border: 0; } /*div.WidgetSimpleSecondary div.ActionRow li { color: var(--table-text-color); font-size: 11px; font-weight: var(--semi-bold); letter-spacing: .8px; }*/ /*div.WidgetSimpleSecondary div.ActionRow li a, div.WidgetSimpleSecondary div.ActionRow li span.ClusterLink { padding: var(--padding-xs) var(--padding-sm); border-radius: var(--border-radius-xxs); } div.WidgetSimpleSecondary div.ActionRow li:hover > a, div.WidgetSimpleSecondary div.ActionRow li span.ClusterLink:hover { background: var(--gray-light); }*/ div.WidgetSimpleSecondary span.ClusterLink i { margin: -1px 0 0 var(--margin-sm); } div.ContentColumn div.WidgetSimple.WidgetSimpleSecondary > div.Content { padding: 0; } .WidgetSimpleSecondary li a, .WidgetSimpleSecondary li span{ text-transform: uppercase; /*padding: 0 6px;*/ color: var(--black); } /** * @subsection Widget Expanded/Collapsed */ .WidgetSimple.Expanded .Header { background: var(--main-bg-color); border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; } .WidgetSimple.Collapsed:not(.GridGroups) .Header { background: var(--white); border: 0; border-radius: var(--border-radius-sm); } .WidgetSimple .Content fieldset:not(.Hidden) { display: flex; flex-direction: column; gap: var(--padding-lg); padding: var(--padding-lg); } .WidgetSimple .Content fieldset > fieldset { padding: 0; } .WidgetSimple .Content > form > fieldset { /*padding: 0; - edit by beatriz on 22/12/23 */ width: 100%; margin: auto; /* content needs to be centered when width has a limit */ } .WidgetSimple .Content fieldset legend span { font-size: var(--main-font-size); display: flex; align-items: center; margin: 0; margin-top: var(--margin-lg); } /** * @subsection WidgetTicketAppointments */ .WidgetTicketAppointments .TableLike { padding: 0; } .WidgetTicketAppointments .Content div fieldset legend { border-top: var(--border-width) var(--border-solid) var(--border-color); padding-top: var(--padding-md); } .WidgetTicketAppointments .Content div:first-child fieldset legend { border-top: 0; padding-top: 0; } .WidgetTicketAppointments .Content fieldset legend div { display: flex; font-weight: var(--semi-bold); font-size: var(--main-font-size); align-items: center; padding-bottom: var(--padding-sm); } .WidgetTicketAppointments .Content fieldset legend div .RuleNumber { margin: 0; margin-right: var(--margin-xs); } .WidgetTicketAppointments .SearchParamsContainer { display: flex; flex-direction: column; gap: var(--gap-sm); } .WidgetTicketAppointments .top-container-wrapper, .Content fieldset.top-container-wrapper { display: flex; align-items: center; gap: var(--gap-sm); padding: 0; } .WidgetTicketAppointments .top-container-wrapper a { display: flex; } .WidgetTicketAppointments .new-field-wrapper .Field { display: flex; gap: var(--gap-sm); flex-direction: column; width: 100%; } .WidgetTicketAppointments .new-field-wrapper, .Content fieldset.new-field-wrapper { display: flex; padding: 0; padding-left: var(--padding-xxl); gap: var(--padding-sm); } .WidgetTicketAppointments .new-field-wrapper .Field .inner-field-wrapper { display: flex; gap: var(--gap-sm); align-items: center; } .WidgetTicketAppointments .new-field-wrapper .Field .inner-field-wrapper input[type="text"] { min-width: auto; } /** * @subsection WidgetSubmit / WidgetSave .WidgetSubmit .Header, .WidgetSave .Header { background: var(--main-bg-color); border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; } .WidgetSubmit .Content fieldset, .WidgetSave .Content fieldset { display: flex; } .WidgetSubmit .Content fieldset .Field, .AdminManagement .WidgetSubmit > .Content fieldset.TableLike > .Field, .WidgetSave .Content fieldset .Field, .AdminManagement .WidgetSave > .Content fieldset.TableLike > .Field { display: flex; flex-direction: row; justify-content: space-between; } .WidgetSubmit .Content fieldset .Field div, .WidgetSave .Content fieldset .Field div { display: flex; gap: var(--padding-sm); } */ /** * @subsection Widget Calendar Import */ .WidgetCalendarImport > .Content .ActionList li form > fieldset { display: flex; flex-direction: row; padding: 0; justify-content: start; gap: var(--padding-sm); align-items: center; } /** * @subsection Widgets as notices */ .WidgetNotice.WidgetSimple { border: 0; overflow: hidden; } .WidgetNotice .Content { display: flex; align-items: center; gap: var(--gap-md); background: var(--primary-color-rgb); color: var(--black); border: 0; border-radius: var(--border-radius-xs); /*font-family: 'Inter';*/ font-size: var(--font-size-sm); font-weight: var(--normal); letter-spacing: .1px; } .WidgetNotice .Content i { color: var(--primary-color); } /** * @subsection AJAX Loader */ .Loading > .Header { position: relative; } .Loading > .Header:after { left: auto; top: auto; right: 3px; width: 14px; height: 14px; line-height: 14px; } .RTL .Loading > .Header: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; }*/ /************************/ /* Widget - ActionMenu */ /************************/ .ActionMenu { display: flex; top: initial; right: initial; padding-left: initial; position: relative; z-index: 10; } .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: flex; } .WidgetSimple.Expanded:not(.Setting) .ActionMenu, .WidgetSimple.Collapsed:not(.Setting) .ActionMenu { right: 30px; } .ActionMenu .Btn-Menu-Vertical { width: 30px; height: 30px; margin-left: var(--margin-sm); } .ActionMenu .Btn-Menu-Vertical span { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; border-radius: 5px; background: transparent; transition: var(--main-transition); cursor: pointer; } .ActionMenu .Btn-Menu-Vertical:hover span { background: var(--gray-light); } .ActionMenu .Btn-Menu-Vertical span i { font-size: var(--icon-main-size); color: var(--gray-dark);; } .ActionMenu:hover .ActionMenuList { display: flex; } /* ActionMenu > ActionMenuList */ .ActionMenu .ActionMenuList{ display: none; flex-direction: column; z-index: 999; position: absolute; top: 30px; right: 0; min-width: 160px; background: var(--menu-bg); margin-top: 0; box-shadow: var(--menu-box-shadow); padding: var(--padding-sm); border-radius: var(--border-radius-xs); } .ActionMenu .ActionMenuList li, ul.WidgetTooltip li { height: auto; width: auto; text-indent: 0px; line-height: 18px; white-space: nowrap; color: unset; padding: unset; border: unset; font-size: unset; transition: unset; border-radius: unset; cursor: pointer; border-radius: var(--border-radius-xs); } .ActionMenu .ActionMenuList li:hover, ul.WidgetTooltip li:hover { color: var(--menu-font); background: var(--gray-light); border-radius: var(--border-radius-xs); } /* ActionMenu > ActionMenuList > WidgetAction */ .ActionMenu .ActionMenuList li .WidgetAction, ul.WidgetTooltip li { height: auto; width: 100%; padding-right: 0; float: initial; text-align: left; border-radius: var(--border-radius-xs); color: var(--menu-font); padding: var(--padding-sm) var(--padding-sm); border-bottom: none; font-size: var(--main-font-size); transition: var(--main-transition); } .ActionMenu .ActionMenuList li .WidgetAction a, ul.WidgetTooltip li a { display: flex; height: auto; justify-content: space-between; } .ActionMenu .ActionMenuList li .WidgetAction a .iconWrapper, ul.WidgetTooltip li a i { display: flex; height: auto !important; width: 20px; position: relative; background: transparent; padding: 0; box-sizing: border-box; justify-content: center; align-items: center; } .ActionMenu .ActionMenuList li .WidgetAction a .iconWrapper i, .ActionMenu .ActionMenuList li .WidgetAction:hover a .iconWrapper i, ul.WidgetTooltip li a i { color: var(--gray-dark); font-size: var(--main-font-size); } .ActionMenu .ActionMenuList li .WidgetAction a .textWrapper, ul.WidgetTooltip li a { display: flex; padding-left: var(--padding-xs); color: var(--menu-font); text-indent: 0; font-size: var(--main-font-size); width: calc(100% - 20px); line-height: 110%; align-items: center; } /** * @subsection WidgetActions */ .WidgetAction { /*height: 19px; width: 16px; padding-right: 1px; float: left;*/ position: relative; width: auto; text-align: center; } .RTL .WidgetAction { padding: 0 0 0 1px; float: right; } .WidgetAction a { font-size: var(--font-size-md); /*height: 20px;*/ display: flex; align-items: center; align-self: center; } .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: auto; width: auto; margin: 0; float: initial; position: absolute; top: 0; min-width: 100%; height: 100%; left: 0; } .WidgetAction.Toggle { z-index: 1; transition: var(--main-transition); } .WidgetAction.Toggle i { display: flex !important; position: relative; font-size: var(--font-size-lg); left: initial; right: initial; top: initial; color: var(--gray-dark) !important; transition: var(--main-transition); } .RTL .WidgetAction.Toggle i { left: auto; right: 7px; } .Expanded > .Header > .WidgetAction.Toggle i.fa-caret-down { transform: rotate(180deg); } .RTL .WidgetSimple .Header > .WidgetAction.Toggle i.fa-caret-right { transform: rotateY(180deg); } .Collapsed > .Header > .WidgetAction.Toggle i.fa-caret-down { display: initial !important; transform: rotate(0deg); } .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 { position: absolute; display: flex; align-items: center; justify-content: right; height: 100%; width: 100%; top: 0; left: 0; padding-right: var(--padding-xl); box-sizing: border-box; } .WidgetSimple.GridGroups .WidgetAction.Toggle a { padding: 0; } .WidgetAction i { color: var(--gray-darker); /*display: block !important;*/ margin: 0; } /*.WidgetAction:hover i, .WidgetAction a:focus i { color: #000; }*/ /** * @subsection WidgetTooltip */ /*.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);*/ display: none; flex-direction: column; z-index: 999; position: absolute; top: 30px; right: 0; min-width: 160px; width: auto; background: var(--menu-bg); margin-top: 0; box-shadow: var(--menu-box-shadow); padding: var(--padding-sm); border-radius: var(--border-radius-xs); } ul.WidgetTooltip:not(.Hidden) { display: flex; z-index: 1000; } /*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 { display: flex; flex-flow: row; align-items: baseline; gap: var(--gap-xs); } /*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 { gap: var(--gap-sm); display: flex; flex-flow: column; } .ActionList li { /*margin-bottom: 12px;*/ display: flex; flex-flow: column; gap: var(--gap-md); } .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 { /*width: 100%; background: var(--primary-color); color: var(--white); border: none;*/ border-radius: var(--border-radius-sm); min-height: var(--btn-min-height); font-weight: var(--semi-bold); } .ActionsSideBar .ActionsSideBarComp .CallForAction { max-width: 100%; } .ActionsSideBar .ActionsSideBarComp .CallForAction i{ display: none; } /*.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%; max-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 span, .cke_dialog_footer_buttons td a.cke_dialog_ui_button span { min-height: 12px; /*padding: var(--padding-sm); parent element (btn) already has side paddings */ line-height: 14px; /*color: var(--white); -- currently overrides text color in Dashboard Toolbar buttons*/ font-size: var(--font-size-sm); border: none; border-bottom: none; display: block; text-shadow: none; cursor: pointer; position: relative; border-radius: var(--border-radius-sm); align-items: center; } .CallForAction.Inline span { padding: 0; } .CallForAction.Small span { padding: 0; font-size: 10px; } .CallForAction.Fullsize span { padding: 0; } .CallForAction:disabled { opacity: .5; } .cke_dialog_footer_buttons td a.cke_dialog_ui_button span { font-size: 11px; line-height: auto; color: #000; font-weight: bold; } #SelectionCustomerID { background: 0; border: 0; } .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: 0; top: 4px; */ } .CallForAction:active, .CallForAction:hover, .CallForAction:focus { /*background: var(--primary-color-darker);*/ } input.FilterBox { padding: 4px 5px; width: 100%; box-sizing: border-box; } .SearchBox { position: relative; } .SearchBox > i { position: absolute; font-size: var(--font-size-md); color: var(--gray-dark-semi); top: 9px; left: 10px; } .SearchBox input[type='text'] { padding-left: var(--padding-xxl); } /*.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 Btns Section */ .WidgetSimple.WidgetBtns { background: transparent; border: 0; } .WidgetSimple.WidgetBtns .TableLike .SaveButtons { width: 100%; display: flex; justify-content: center; } /** * @subsection Drag and Drop */ .CanDrag .Header { cursor: move; } .DropPlaceholder { border: 1px dashed #DDD; background: #EEE url(../img/dnd_placeholder_bg.png); margin-top: 5px; margin-bottom: 5px; } /** * @subsection ProgressBar */ #ProgressBar { display: flex; flex-flow: row; gap: var(--gap-md); align-items: center; justify-content: center; margin: auto; max-width: 1440px; height: 55px; border-radius: var(--border-radius-sm); background: var(--white); border: var(--border-width) var(--border-solid) var(--border-color); } /*.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 { display: flex; flex-flow: row; gap: var(--gap-md); align-items: inherit; } #ProgressBar li.Highlighted:not(.Active) { opacity: .5; } #ProgressBar li.Highlighted:not(.Active) strong .step-clear { display: flex; } #ProgressBar li.Highlighted:not(.Active) strong .step-number { display: none; } #ProgressBar li span + i { color: var(--gray-medium); font-size: var(--font-size-md); padding-right: 2px; } #ProgressBar li a { display: flex; flex-flow: row; align-items: center; gap: var(--gap-sm); color: var(--main-font-color); font-size: var(--font-size-lg); line-height: normal; font-weight: var(--normal); /*font-family: 'Inter';*/ } @media only screen and (max-width: 768px) { #ProgressBar li a { font-size: 12px; } } #ProgressBar li a strong { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; min-width: 24px; min-height: 24px; border-radius: 100%; color: var(--primary-color); font-size: 16px; font-weight: var(--normal); border: var(--border-width) var(--border-solid) var(--primary-color); } #ProgressBar li a strong .step-clear { display: none; font-size: 12px; } #ProgressBar li.Active a strong, #ProgressBar li.Highlighted:not(.Active) strong { color: var(--white); background: var(--primary-color); } #ACLForm .ScreenXL{ background-color: transparent; border: none; } /*#ACLForm .WidgetSimple{ border-radius: var(--border-radius-lg); }*/ .WidgetDescription{ border-radius: 20px; } .WidgetDescription .Content{ padding: var(--padding-lg) var(--padding-sm); } .WidgetDescription .Header{ background-color: #E8E8E8; border-radius: 20px 20px 0 0; padding: 12px 18px; } /*#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 { width: 100%; display: flex; justify-content: center; padding: var(--padding-sm); border-radius: var(--border-radius-xxs); margin: 0; flex-direction: column; gap: var(--gap-xs); } .WidgetSimple .WidgetMessage.Top { margin-bottom: var(--margin-sm); } .WidgetSimple .WidgetMessage.Bottom { margin-top: var(--margin-sm); } .SidebarColumn .WidgetSimple .WidgetMessage strong { display: flex; width: 100%; } .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; } .UserStatusIcon { cursor: default; margin-right: 3px; } .UserStatusIcon.Inline { margin-right: 0; } .UserStatusIcon.Active i { color: var(--success-color); } .UserStatusIcon.Offline i { color: #000; } .UserStatusIcon.Unavailable i { color: var(--warning-color); /*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; } /** * @widgetPermissions */ .WidgetSimple.WidgetPermissions div.scroll-bar-styled { overflow: auto; border-radius: var(--border-radius-sm); border: var(--border-width) var(--border-solid) var(--border-color); } .WidgetSimple.WidgetPermissions div.scroll-bar-styled::-webkit-scrollbar { border: 0; } .WidgetSimple.WidgetPermissions table.DataTable { border-collapse: separate; max-height: unset; display: inline-table; border-radius: 0; border: 0; padding: 0; } .WidgetPermissions .DataTable thead { border-collapse: collapse; border-radius: 1em; overflow: clip; } /* .WidgetPermissions .DataTable thead tr { border-radius: 20px; overflow: hidden; } */ .WidgetPermissions .DataTable i.fa-check { color: var(--success-color); } /** * @subsection Tabs */ .WidgetSimple.Tabs > .Header { display: flex; flex-flow: row; overflow: hidden; position: relative; border-bottom: 0 solid var(--border-color); padding: var(--padding-xs); justify-content: flex-start; } .WidgetSimple.Tabs > .Header a { min-width: 150px; display: flex; justify-content: center; color: var(--main-font-color); /*font-family: Inter;*/ font-size: 14px; letter-spacing: .1px; font-weight: var(--normal); } .SidebarColumn .WidgetSimple.Tabs > .Header a { min-width: 120px; font-size: 11px; } .WidgetSimple.Tabs > .Header a.Disabled { color: var(--disabled); cursor: not-allowed; text-shadow: none; } .WidgetSimple.Tabs > .Header a:not(.Disabled).Active, .WidgetSimple.Tabs > .Header a:not(.Disabled):active { background-color: white; color: var(--black); position: relative; font-weight: var(--semi-bold); } .WidgetSimple.Tabs > .Header a:not(.Disabled).Active::after{ content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; background-color: var(--black); height: 2px; } .WidgetSimple.Tabs > .Header a:not(.Disabled):hover{ color: var(--black); } .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; } } /** * @subsection Admin Menu Nav */ .ActionsSideBar.LayoutFixedSidebar .ActionsSideBarComp .WidgetSimple, .ActionsSideBar.LayoutFixedSidebar .ContentGrid .WidgetSimple { /*padding: 0; border-radius: 0;*/ border: 0; background: transparent; } /* Sidebar */ .ActionsSideBar.LayoutFixedSidebar .ActionsSideBarComp .WidgetSimple .Header { padding: 0 0 var(--padding-sm); margin: 0 0 var(--margin-md); border-bottom: var(--border-width) var(--border-solid) var(--border-color); background-color: transparent; border-radius: 0; } /* Sidenar Content */ .ActionsSideBar.LayoutFixedSidebar .ActionsSideBarComp .WidgetSimple .Content { border-radius: 0; padding: 0 0 var(--padding-md); overflow: unset; /* border: var(--border-width) var(--border-solid) var(--border-color); */ display: flex; flex-flow: column; gap: 15px; } .ActionsSideBar.LayoutFixedSidebar .ActionsSideBarComp .WidgetSimple .Content .ActionsSideBar.LayoutFixedSidebar .ActionsSideBarComp .WidgetSimple .Content .FieldExplanation, .ActionsSideBar.LayoutFixedSidebar .ActionsSideBarComp .WidgetSimple .Content div:not(.FieldExplanation) p { margin: 0; font-size: var(--font-size-sm); padding-top: 12px; padding-bottom: var(--padding-md); } .ActionsSideBar.LayoutFixedSidebar .ActionsSideBarComp .WidgetSimple .Content .FieldExplanation:first-child, .ActionsSideBar.LayoutFixedSidebar .ActionsSideBarComp .WidgetSimple .Content p:first-child { padding-top: 0; } /* Content Grid Content */ .ActionsSideBar.LayoutFixedSidebar .ContentGrid .WidgetSimple .Header { padding: 0; } .ActionsSideBar.LayoutFixedSidebar .ContentGrid .WidgetSimple.FilterInput .Content { padding-top: var(--padding-md); border-radius: 0; } .ActionsSideBar.LayoutFixedSidebar .ContentGrid .WidgetSimple.FilterInput .Content input[type='text'] { border-radius: var(--border-radius-sm); /*line-height: 36px; - This was adding height to the search bar in Admin */ background-color: var(--white); } .ActionsSideBar.LayoutFixedSidebar .ContentGrid .WidgetSimple.GridGroups .Header { position: relative; display: flex; justify-content: space-between; border: 0; } .ActionsSideBar.LayoutFixedSidebar .ContentGrid .WidgetSimple.GridGroups .Header::after { content: ''; position: absolute; top: 10px; left: 0; height: 1px; width: calc(100% - 23px); background: var(--border-color); } .ActionsSideBar.LayoutFixedSidebar .ContentGrid .WidgetSimple.GridGroups .Header h2 { background: var(--main-bg-color); z-index: 1; } .ActionsSideBar.LayoutFixedSidebar .ContentGrid .WidgetSimple.GridGroups .Header h2 span { padding: 0 var(--padding-sm); color: var(--gray-dark-semi); font-size: var(--main-font-size); font-weight: var(--normal); } /** * @subsection Dashboard Widgets */ .mainStructure .ContentColumn .WidgetSimple .Header { display: flex; align-items: center; justify-content: space-between; } .mainStructure .ContentColumn .WidgetSimple .Header .ActionMenu { display: flex; top: initial; right: initial; padding-left: initial; position: relative; } .mainStructure .ContentColumn .WidgetSimple .Header .ActionMenu .Btn-Menu-Vertical { width: 30px; height: 30px; margin-left: 0; } .mainStructure .ContentColumn .WidgetSimple .Header .ActionMenu .Btn-Menu-Vertical span { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; border-radius: 5px; background: transparent; transition: var(--main-transition); cursor: pointer; } .mainStructure .ContentColumn .WidgetSimple .Header .ActionMenu .Btn-Menu-Vertical:hover span { background: var(--gray-light); } .mainStructure .ContentColumn .WidgetSimple .Header .ActionMenu .Btn-Menu-Vertical span i { font-size: var(--icon-main-size); color: var(--gray-dark);; } .mainStructure .ContentColumn .WidgetSimple .Header .ActionMenu:hover .ActionMenuList { display: flex; } .WidgetSimple .Header .WidgetAction:hover + a + .ActionMenuList { display: none !important; } .WidgetSimple .Header .ActionMenu:hover .Btn-Menu-Vertical span { background-color: var(--gray-light) !important; } .WidgetSimple .Header .ActionMenu:hover > .WidgetAction:hover + .Btn-Menu-Vertical > span { background: transparent !important; } .mainStructure .ContentColumn .WidgetSimple .Header .ActionMenu .ActionMenuList { display: none; flex-direction: column; z-index: 999; position: absolute; top: 30px; right: 0; min-width: 160px; background: var(--menu-bg); margin-top: 0; box-shadow: var(--menu-box-shadow); padding: var(--padding-sm); border-radius: var(--border-radius-xs); } .mainStructure .ContentColumn .WidgetSimple .Header .ActionMenu .ActionMenuList li { height: auto; width: auto; text-indent: 0px; line-height: 18px; white-space: nowrap; /*color: var(--menu-font); padding: var(--padding-xs) var(--padding-sm); border-bottom: none; font-size: var(--main-font-size); transition: var(--main-transition); border-radius: var(--border-radius-xs); cursor: pointer;*/ } .mainStructure .ContentColumn .WidgetSimple .Header .ActionMenu .ActionMenuList li:hover { color: var(--menu-font); background: var(--gray-light); } .mainStructure .ContentColumn .WidgetSimple .Header .ActionMenu .ActionMenuList li .WidgetAction { height: auto; width: 100%; padding-right: 0; float: initial; text-align: left; } .mainStructure .ContentColumn .WidgetSimple .Header .ActionMenu .ActionMenuList li .WidgetAction a { display: flex; height: auto; font-size: unset; justify-content: space-between; } .mainStructure .ContentColumn .WidgetSimple .Header .ActionMenu .ActionMenuList li .WidgetAction a .iconWrapper { display: flex; height: 30px; width: 20px; position: relative; background: transparent; padding: 0; box-sizing: border-box; justify-content: center; align-items: center; } .mainStructure .ContentColumn .WidgetSimple .Header .ActionMenu .ActionMenuList li .WidgetAction a .iconWrapper i, .mainStructure .ContentColumn .WidgetSimple .Header .ActionMenu .ActionMenuList li .WidgetAction:hover a .iconWrapper i { color: var(--gray-dark); } .mainStructure .ContentColumn .WidgetSimple .Header .ActionMenu .ActionMenuList li .WidgetAction a .textWrapper { display: flex; padding-left: var(--padding-xs); color: var(--menu-font); text-indent: 0; width: calc(100% - 20px); line-height: 110%; align-items: center; } .mainStructure .ContentColumn .WidgetSimple .Header .ActionMenu .ActionMenuList li .WidgetAction.ShowPagination a .iconWrapper i { font-size: 16px; } /* ################################################################################################## */ /* Forwward Styles */ /* ################################################################################################## */ .WidgetSimple { position: relative; /* margin-bottom: var(--widget-margin); ed removed on 22/12/14 */ background: var(--widget-simple-bg); box-shadow: none; margin-right: 0; /*transition: var(--main-transition);*/ border: var(--border-width) var(--border-solid) var(--border-color); border-radius: var(--border-radius-sm); /*overflow: hidden;*/ } .RealPopup #AppWrapper > .WidgetSimple { border-radius: 0; } .SidebarFirst .SidebarColumn .WidgetSimple { border-radius: 0; } .MainBox > .WidgetSimple, .ContentColumn > .WidgetSimple:only-child { margin: 0; } .WidgetSimple.card .TableLike { flex-flow: row; flex-wrap: wrap; padding: 0; gap: var(--padding-lg); } .WidgetSimple.card .TableLike > div { display: flex; flex-flow: column; gap: var(--padding-sm); width: 100%; } .WidgetSimple.card .TableLike > div.Size1of2 { width: calc(50% - var(--padding-sm)); } .WidgetSimple.Collapsed, .WidgetSimple.Expanded { border-color: var(--border-color); } .SidebarColumn .WidgetSimple.Collapsed .Header { border-radius: var(--border-radius-sm); border: 0; } .WidgetSimple > .Content { transition: var(--main-transition); padding: 0; min-height: 0; border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm); overflow: auto; position: relative; z-index: 5; /*overflow: hidden;*/ /* overflow hidden will break the horizontal scroll */ } .WidgetSimple > .Content > h2, .WidgetSimple > .Content > h1 { padding: var(--padding-md); padding-bottom: var(--padding-sm); } .WidgetSimple > .Content.padding { padding: var(--padding-lg); display: flex; flex-flow: column; gap: var(--gap-md); } .WidgetSimple.Collapsed .ArticleMailHeader { display: none; } .WidgetSimple .Header { border-bottom: var(--border-width) var(--border-solid) var(--border-color); padding: var(--padding-md); display: flex; align-items: center; justify-content: space-between; position: relative; /*z-index: 10; - edited by beatriz on 23/02/16 - was breaking filter dropdown menu */ } .WidgetSimple.Expanded .Header { border-bottom: var(--border-width) var(--border-solid) var(--border-color); } .WidgetSimple.Collapsed > .Header .StateName, .WidgetSimple.Expanded > .Header .StateName { position: absolute; right: 55px; top: 50%; transform: translateY(-50%); color: var(--gray-dark); font-size: var(--main-font-size); font-style: italic; font-weight: var(--normal); } .ErrorScreen .WidgetSimple .Content { padding: var(--padding-lg); } .WidgetSimple > .Header h2, .WidgetSimple > .Header h3 { display: inline; /* - edited by beatriz on 27/1/2023 - so the ellipsis overflow can take place */ /*align-items: center; - as the elements become inline */ padding: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--widget-simple-title-size); font-weight: var(--semi-bold); text-shadow: none; color: var(--black); line-height: 120%; z-index: 1; } .WidgetSimple.MenuExpanded > .Header h2, .WidgetSimple.MenuExpanded > .Header h3 { text-overflow: unset; white-space: unset; max-width: unset; } .WidgetSimple > .Header .FieldExplanation { display: inline; } .TicketZoom .WidgetSimple > .Header h2 { width: calc(100% - 65px); } /*********************************/ /* Admin & Customer Management */ /*********************************/ .AdminManagement .WidgetSimple > .Header { padding: var(--padding-md) var(--padding-lg); } /* TO DO - remove this line */ .AdminManagement .ContentColumn .WidgetSimple > .Content > :not(table):not(.Size1of2):not(.Size1of3):not(.SettingWrapper):not(.LayoutGrid):not(form>table):not(form.PreventMultipleSubmits):not(.ACLNote):not(.SearchBox):not(i):not(span):not(#TransitionForm .WidgetSimple .WidgetSimple):not(#TransitionForm .WidgetSimple .TableLike):not(.ControlRow):not(.CommunicationPagination):not(.InnerSidebarColumn p), .ImportExport { padding: var(--padding-lg); } .AdminManagement .WidgetSimple > .Content > .TableLike { gap: var(--gap-md); /*padding: 0; - see code above*/ margin: auto; } .AdminManagement .Content fieldset.TableLike, .AdminManagement .Content .TableLike > div { display: flex; flex-flow: column; /*gap: var(--gap-xs); - edited by beatriz on 30/1/2023 */ width: 100%; /*max-width: 800px; - edited by beatriz on 15/2/2023 - overriding width in save field */ align-self: start; z-index: 1; } .AdminManagement .WidgetSimple > .Content .TableLike > div.Field { display: flex; /*flex-flow: row; .Field should be flex-column by default - needs a special class for row exception*/ } .AdminManagement .WidgetSimple > .Content .TableLike > div.Field > div:not(.TooltipErrorMessage) { display: flex; flex-flow: row; gap: var(--gap-sm); align-items: center; } .AdminManagement .WidgetSimple > .Content .TableLike > div.Field > div > span { flex: 1; } .AdminManagement .WidgetSimple > .Content .TableLike > div.Field > div > span:nth-child(1) { max-width: 33%; } .AdminManagement .WidgetSimple.card, .AdminManagement .WidgetSimple.card > .Content { padding: 0; } .AdminManagement .WidgetSimple.card > .Header { border: 0; } .AdminManagement .WidgetSimple.card form { padding: var(--padding-lg); } .ProcessManagementEditScreen .Header { background: var(--main-bg-color); border-top-left-radius: var(--border-radius-sm); border-top-right-radius: var(--border-radius-sm); border-bottom: var(--border-width) var(--border-solid) var(--border-color); } .ProcessManagementEditScreen .Content > fieldset.TableLike { gap: var(--gap-md); } .ProcessManagementEditScreen .Content > fieldset.TableLike > div { gap: var(--padding-sm); display: flex; flex-flow: column; } .ProcessManagementEditScreen .WidgetSimple fieldset.TableLike > .SaveButtons { padding: 0; } .WidgetSimple.Reference > .Header { border-bottom: 0; padding-bottom: 0; } /*******************************************************/ /* Widget - Dashboard */ /*******************************************************/ /**************************/ /* Widget - RemoveFilters */ /**************************/ .WidgetSimple .Header .RemoveFilters, .RemoveFilters { display: flex; align-items: center; } .WidgetSimple .Header .RemoveFilters > a, .RemoveFilters > a, .ContextFunctions .ContextSettings a { color: var(--primary-color); font-size: var(--font-size-sm); font-weight: var(--medium); /*font-family: Inter;*/ transition: var(--main-transition); } .WidgetSimple .Header .RemoveFilters > a:hover, .RemoveFilters > a:hover, .ContextFunctions .ContextSettings a:not(.icon-hover):hover { color: var(--primary-color-darker); background: unset; background-color: unset; } .WidgetSimple .Header .RemoveFilters > a:hover, .RemoveFilters > a:hover { text-decoration: underline; } .RemoveFilters > a { min-width: 78px; /*to make sure there are no line breaks*/ } /*.ControlRow .RemoveFilters { padding-right: var(--padding-sm); }*/ .WidgetSimple .Header .ContextFunctions { display: flex; gap: var(--gap-xs); align-items: center; } /**********************************/ /* SidebarColumn */ /**********************************/ .SidebarColumn .WidgetSimple { /*border: 1px solid red;*/ } .SidebarColumn .DataTable td { padding: var(--padding-sm); font-size: var(--main-font-size); } /* Header */ .mainStructure .SidebarColumn .WidgetSimple .Header { display: flex; justify-content: space-between; border-bottom: var(--border-width) var(--border-solid) var(--border-color); } /******************************/ /* 'Settings' Widget Dropdown */ .SettingsWidget .Header { justify-content: flex-start; border-bottom: none; padding: var(--padding-lg) var(--padding-md) !important; } .SettingsWidget .Content { padding: 0 !important; } .MainBox .SidebarColumn .Collapsed .Header { border-bottom: 0; } .SettingsWidget form { display: flex; flex-flow: column; gap: 0; } .SettingsWidget form > div { padding: var(--padding-md); display: flex; flex-flow: column; } .SettingsWidget input[type=checkbox].active-widget-checkbox { display: none; } .SettingsWidget .search-wrapper { position: relative; } .SettingsWidget .search-wrapper input { padding-right: var(--padding-xl); } .SettingsWidget .search-wrapper i.fa { position: absolute; font-size: var(--font-size-lg); right: 25px; top: 23px; color: var(--gray-dark); transition: var(--main-transition); } .SettingsWidget .animate { transform: rotate(180deg); } /* widget name container */ /*.SidebarColumn .WidgetSimple:first-child form */ .active-widgets-list li { display: flex; flex-flow: row; align-items: center; gap: var(--gap-sm); padding: var(--padding-xs) var(--padding-md); transition: var(--main-transition); padding-left: var(--padding-sm); } /*.SidebarColumn .WidgetSimple:first-child form */ .active-widgets-list li:hover { background: var(--table-td-even-bg); } /* widget name */ /*.SidebarColumn .WidgetSimple:first-child form */ .active-widgets-list li span { font-size: var(--main-font-size); color: var(--main-font-color); } /* 'Settings' General Window */ .SidebarColumn .WidgetSimple .Content fieldset { display: flex; flex-direction: column; padding: 0; justify-content: space-between; gap: 0; } .SidebarColumn .WidgetSimple .Content fieldset .row-wrapper { display: flex; justify-content: space-between; align-items: center; padding-bottom: var(--padding-sm); } .SidebarColumn .WidgetSimple .Content fieldset .row-wrapper .Field { position: relative; } .SidebarColumn .WidgetSimple .Content fieldset .row-wrapper .Field i { right: 15px; position: absolute; /*top: 50%; transform: translateY(-50%); - edited by beatriz on 27/1/2023*/ } .SidebarColumn .WidgetSimple .Content fieldset .btn-container { display: flex; flex-flow: column; width: 100%; } /* widget search menu */ ul.dropdown-search-menu { transition: var(--main-transition); position: relative; padding: var(--padding-sm); display: none; flex-direction: column; height: 0; max-height: 0; overflow-y: scroll; top: 5px; font-size: var(--main-font-size); } ul.dropdown-search-menu li { position: relative; } ul.dropdown-search-menu li::after { font: normal normal normal 14px/1 FontAwesome; content: "\f0fe"; position: absolute; right: 10px; color: var(--gray-dark-semi); } .SidebarColumn .WidgetSimple:first-child form input:focus + ul.dropdown-search-menu, ul.dropdown-search-menu:hover { display: flex; height: auto; max-height: 225px; } ul.dropdown-search-menu:empty { padding: 0; } ul.dropdown-search-menu .dropdown-item { padding: 0; border-radius: var(--border-radius-sm); } ul.dropdown-search-menu .dropdown-item a { padding: var(--padding-md) var(--padding-sm); } .SidebarColumn .WidgetSimple .Content fieldset .btn-container button { /* font-weight: var(--semi-bold); width: 100%; border-radius: var(--border-radius-sm); min-height: var(--btn-min-height); */ transition: var(--main-transition); margin-top: var(--margin-sm); } /* !!!! To resolve: replace "CallForAction" with "btn-main" !!!! */ /************************/ /* DataTable */ /************************/ /* General - Table */ .Datatable {} /* Dashboard Table Form */ .Dashboard .ContentColumn form { overflow: auto; } /*************************/ /* SidebarColumn - Table */ .SidebarColumn .DataTable { } /*************************/ /* ContentColumn - Table */ .ContentColumn .DataTable { overflow: hidden; } .ContentColumn .Field > .DataTable { border-radius: var(--border-radius-sm); border: var(--border-width) var(--border-solid) var(--border-color); } .ContentColumn .Field > .DataTable tbody tr > th { border-bottom: var(--border-width) var(--border-solid) var(--border-color); } .ContentColumn .Field > .DataTable tbody tr:hover td { background: initial; } .ContentColumn .DataTable tbody tr > td > a { color: var(--primary-color); } .ContentColumn .DataTable tbody tr:hover > td > a { color: var(--primary-color-darker); } .ContentColumn form div.DataTable { overflow: auto; border: var(--border-width) var(--border-solid) var(--border-color); border-radius: var(--border-radius-sm); overflow: hidden; } .ContentColumn .DataTable.scroll-bar-styled { overflow: auto; } .ContentColumn form .DataTable .DataTable { border: 0; } .ContentColumn div.DataTable.scroll-bar-styled > table { overflow: auto; width: 100%; } dd > table.DataTable { padding: 0; } /************************/ /* ContentColumn */ /************************/ .Dashboard .ContentColumn .WidgetSimple .Header { } .Dashboard .ContentColumn .WidgetSimple .Content { } /* Widget Settings Form */ .WidgetSettingsForm fieldset { background: var(--white); } .WidgetSimple .Content .WidgetSettingsForm > fieldset.TableLike { max-width: 100%; } .WidgetSettingsForm fieldset .row-wrapper { display: flex; justify-content: space-between; padding-bottom: var(--padding-sm); } .WidgetSettingsForm fieldset .row-wrapper label { display: flex; width: 130px; color: var(--gray-medium); padding-top: var(--padding-sm); } .WidgetSettingsForm fieldset .row-wrapper .Field, .WidgetSettingsForm fieldset .Field{ display: flex; flex-flow: row; width: calc(100% - 130px); justify-content: space-between; min-width: unset; } .WidgetSettingsForm fieldset .row-wrapper .Field .InputField_InputContainer i, .WidgetSettingsForm fieldset .Field .InputField_InputContainer i{ right: 15px; position: absolute; /*top: 50%; transform: translateY(-50%); - edited by beatriz on 27/1/2023 */ } .WidgetSettingsForm fieldset .row-wrapper .Field .InputField_Container, .WidgetSettingsForm fieldset .Field .InputField_Container { width: auto; } .WidgetSettingsForm fieldset .row-wrapper .Field .inner-field, .WidgetSettingsForm fieldset .Field .inner-field { position: relative; } /*.WidgetSettingsForm fieldset .row-wrapper .Field .inner-field i, .WidgetSettingsForm fieldset .Field .inner-field i*/ /* .InputField_Container i { right: 15px; position: absolute; top: 50%; transform: translateY(-50%); } */ /* Following code replaced by Modal classes in Core.Dialog.css .WidgetSettingsForm fieldset .row-wrapper .Field .Size1of2 { display: flex; flex-direction: column; width: calc(50% - 10px); } .WidgetSettingsForm fieldset .row-wrapper .Field .Size1of2 .Tablelike { border: var(--border-width) var(--border-solid) var(--border-color); border-bottom: 0; border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0; margin: 0; width: 100%; overflow: hidden; box-sizing: border-box; } Merged with "ul.Tablelike li.Header" in same file .WidgetSettingsForm fieldset .row-wrapper .Field .Size1of2 .Tablelike .Header { color: var(--black); font-size: var(--font-size-md); line-height: 1; background: var(--gray-light); } Merged with ".FilterInputContainer" in Core.Dialog.css .WidgetSettingsForm fieldset .row-wrapper .Field .Size1of2 .FilterInputContainer { width: 100%; border-left: var(--border-width) var(--border-solid) var(--border-color); border-right: var(--border-width) var(--border-solid) var(--border-color); background-color: var(--gray-light); box-sizing: border-box; }*/ .WidgetSettingsForm fieldset .row-wrapper .Field .Size1of2 .FilterInputContainer .TableFilterContainer { display: flex; padding: 0 var(--padding-md) var(--padding-md); } .WidgetSettingsForm fieldset .row-wrapper .Field .Size1of2 .FilterInputContainer .TableFilterContainer .FilterAvailableFields { margin: 0; background: var(--white); } /* Merged with ".modal-col1 ul:last-child, .modal-col2 ul:last-child" in Core.Dialog .WidgetSettingsForm fieldset .row-wrapper .Field .Size1of2 .AllocationList { width: 100%; border: var(--border-width) var(--border-solid) var(--border-color); border-top: 0; border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm); overflow-y: scroll; }*/ .WidgetSettingsForm fieldset .row-wrapper .Field .Size1of2 .AllocationList li { font-size: var(--main-font-size); line-height: var(--table-tr-line-hight); padding: 0 var(--padding-md); cursor: move; cursor: -webkit-grab; cursor: -moz-grab; cursor: grab; } .WidgetSettingsForm fieldset .row-wrapper .Field .Size1of2 .AllocationList li:nth-child(even) { background: var(--gray-light-ultra); } /* Widget - Ticket Settings */ .ContentColumn .WidgetSimple .Content { } /************************/ /* Widget - Ticket Zoom */ /************************/ /* Header */ .TicketZoom .ContentColumn .Header { background: var(--main-bg-color); border-top-left-radius: var(--border-radius-sm); border-top-right-radius: var(--border-radius-sm); padding: var(--padding-md) var(--padding-lg); } /* Article Overview Content */ .TicketZoom .WidgetSimple div.Content.article-overview-content { padding: 0; } .TicketZoom .WidgetSimple div.Content.article-overview-content .ActionRow, .TicketZoom .WidgetSimple div.Content.article-overview-content .DataTable { border: 0; border-top-left-radius: 0; border-top-right-radius: 0; } /* Widget Customer */ .TicketZoom .WidgetSimple.customer { } /* Widget Agent */ .TicketZoom .WidgetSimple.agent { } /* Widget Agent */ .TicketZoom .WidgetSimple.agent { } /*******************************/ /* Widget - Ticket Information */ /*******************************/ /*.information-widget {}*/ /*.information-widget */ .Content fieldset > span { display: flex; width: 100%; flex-flow: column; align-items: baseline; justify-content: flex-start; line-height: 24px; letter-spacing: .1px; padding-bottom: var(--padding-sm); font-size: var(--font-size-sm); font-weight: var(--medium); /*font-family: Inter;*/ } /*.information-widget */ .Content fieldset:last-of-type > span:last-of-type { padding-bottom: 0; } /*.information-widget */ .Content fieldset > span label { color: var(--gray-dark-semi); flex: 0 0 auto; } /*.information-widget */ .Content fieldset > span p { color: var(--table-text-color); } /*.information-widget */ .Content fieldset > span label, .Content fieldset > span p { padding: 0; } .MessageBrowser { display: block; top: 0; position: relative; width: 100%; height: 100%; } .align-right { display: flex; justify-content: flex-end; align-items: center; } /** * @subsection Filter Ticket */ .Dashboard.mainStructure.LayoutFixedSidebar .DashboardWidgetExpand { display: flex; } .DashboardWidgetExpand { display: flex; /*flex: 1 1 100%; - edited by beatriz on 16/1/2023 - element would get full height when children elements were not visible (pushing 'Settings widget' down) */ z-index: 1; } .DashboardWidgetExpand ul { display: flex; overflow-x: auto; } .DashboardWidgetExpand ul li { display: flex; list-style: none; padding: none; height: auto; white-space: nowrap; margin-left: 20px; } .DashboardWidgetExpand ul li:first-child { margin-left: 0; } .DashboardWidgetExpand ul li a { border-radius: var(--border-radius-sm); border: 1px solid var(--border-color); padding: var(--size-8) var(--size-20); color: var(--main-font-color); background: transparent; transition: var(--main-transition); font-size: var(--font-size-sm); font-weight: var(--semi-bold); cursor: pointer; } .DashboardWidgetExpand ul li a:hover { border: 1px solid var(--primary-color-darker); color: var(--white); background: var(--primary-color-darker); } .DashboardWidgetExpand ul li a.active, .DashboardWidgetExpand ul li a.active:hover { border: 1px solid var(--primary-color); background: var(--primary-color-rgb); pointer-events: none; } /*************************************/ /* Calendars - side widget */ /*************************************/ .Calendars .SpacingTopSmall { display: block; padding: 0; border-radius: var(--border-radius-sm); overflow: hidden; max-height: 100%; border: var(--border-width) var(--border-solid) var(--border-color); } .Calendars .SpacingTopSmall td:first-child input { display: inline-block; } .Calendars table#Calendars { width: 100%; /* 140px * 5 column + 16px scrollbar width */ border-spacing: 0; } .Calendars table#Calendars tbody, .Calendars table#Calendars thead tr { width: 100%; display: inline-block; } .Calendars table#Calendars tbody { height: 100%; max-height: 290px; overflow-y: auto; overflow-x: hidden; } .Calendars table#Calendars tbody td, .Calendars table#Calendars thead th { width: 140px; } .Calendars table#Calendars thead th:last-child { width: 100%; /* 140px + 16px scrollbar width */ } .Calendars table#Calendars thead tr th { height: 30px; line-height: 30px; /*text-align: left;*/ } .Calendars table#Calendars tbody td:last-child, thead th:last-child { border-right: none !important; } .Calendars table#Calendars .W10pc { width: 100px !important; } /**************************************/ /* Information - side widget */ /**************************************/ .MainBox .SidebarColumn .WidgetInformation .Content fieldset.TableLike .field-wrapper { gap: var(--padding-xs); } .MainBox .SidebarColumn .WidgetInformation .Content fieldset.TableLike .field-wrapper > label { display: flex; padding: 0; color: var(--gray-dark-semi); } .MainBox .SidebarColumn .WidgetInformation .Content fieldset.TableLike .field-wrapper > .Value { display: flex; width: 100%; margin: 0; padding: 0; color: var(--table-text-color); } /***********************************************************************/ /* Moved from Core.Reset.Forwwward.css */ /***********************************************************************/ form.WidgetSettingsForm fieldset.TableLike.FixedLabelSmall > .Field { gap: var(--padding-xl); width: 100%; padding-top: 0; } form.WidgetSettingsForm fieldset.TableLike.FixedLabelSmall label { text-align: left; font-size: 14px; /*font-family: Inter;*/ font-weight: var(--medium); letter-spacing: 0.2px; color: var(--gray-dark-semi); min-width: 120px; } form.WidgetSettingsForm ul.Tablelike .Header { border-bottom: 0; background: var(--modal-header-bg); } form.WidgetSettingsForm ul.Tablelike:first-child { border-top-left-radius: var(--border-radius-sm); border-top-right-radius: var(--border-radius-sm); background: var(--modal-header-bg); border-bottom: 0; } form.WidgetSettingsForm ul.Tablelike:last-child, form.WidgetSettingsForm ul.Tablelike:last-child li:last-child { border-bottom-left-radius: var(--border-radius-sm); border-bottom-right-radius: var(--border-radius-sm); } form.WidgetSettingsForm ul.Tablelike:last-child { max-height: calc(40 * 6px); overflow: auto; } form.WidgetSettingsForm .Size1of2 ul.Tablelike:last-child { max-height: 285px; } /******************************* Message Container *******************************/ div.message-container, span.message-container { width: 100%; display: flex; justify-content: center; background: var(--gray-light-semi); padding: var(--padding-sm); border-radius: var(--border-radius-xxs); margin: var(--margin-lg) 0; } div.message-container:empty, span.message-container:empty { display: none; } div.message-container p, span.message-container p { color: var(--black); letter-spacing: 0.1px; font-size: var(--font-size-xs); font-weight: var(--normal); /*font-family: Inter;*/ } .message-primary { color: var(--primary-color); /*font-family: 'Inter';*/ font-size: var(--font-size-md); font-weight: var(--semi-bold); letter-spacing: .2px; } /******************************* Search Profile Widget *******************************/ .search-profile-widget .Content .Field { padding-bottom: var(--padding-md); border-bottom: var(--border-width) var(--border-solid) var(--border-color); } .search-profile-widget .Content .buttons-wrapper { display: flex; gap: var(--gap-sm); padding-top: var(--padding-md); } } /* end @media */