API tools faq
paste
Stambro

staff-desktop.css (Restores accessibility outline)

Stambro
Oct 19th, 2023
179
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 276.78 KB | None | 0 0
raw download clone embed print report
  1. @charset "utf-8";
  2. /* CSS Document */
  3. /*
  4. /*      STAFF - desktop
  5. */
  6. table.list tbody td a {
  7.     font-weight: 500;
  8. }
  9. table.list tbody tr:nth-child(2n+1) td {
  10.     background-color: #ffffff;
  11. }
  12. table.list tbody tr:nth-child(2n+1) td {
  13.     background-color: #f0faff;
  14. }
  15. table.list tbody tr.highlight:nth-child(2n+1) td {
  16.     background-color: #dddddd;
  17. }
  18. form table.list + div b {
  19.     margin-right: 5px;
  20. }
  21.  
  22. /* ==========================================================================
  23.  GLOBAL STYLES
  24. ========================================================================== */
  25. html {
  26.     background: var(--nav-bar-bg);
  27. }
  28. body {
  29.     background: #f3f3f5;
  30. }
  31. body,
  32. .thread-body {
  33.     font-family: 'Open Sans', sans-serif;
  34.     font-size: 14px!important;
  35.     color: #4c5156;
  36. }
  37. a {
  38.     color: #128dbe;
  39. }
  40. a:hover, .link:hover {
  41.     text-decoration: none !important;
  42. }
  43. b {
  44.     font-weight: 600;
  45. }
  46. .input.attached.focus {
  47.     outline-offset: initial;
  48.     outline-style: initial;
  49.     outline-width: initial;
  50.     outline-color: initial;
  51. }
  52. button {
  53.     border-width: 1px;
  54. }
  55.  
  56. select:focus,
  57. input:focus {
  58.     outline: .5px solid #606d7f;
  59. }
  60. input[type='radio']:checked,
  61. input[type='checkbox']:checked {
  62.     filter: hue-rotate(335deg) opacity(.9);
  63.     -webkit-filter: hue-rotate(335deg) opacity(.9);
  64. }
  65. code {
  66.     color: #029200;
  67. }
  68.  
  69. /* ==========================================================================
  70.  PAGE LAYOUT
  71. ========================================================================== */
  72. #container {
  73.     width: 100%;
  74.     margin: 0;
  75.     /*height: 60px;*/
  76. }
  77. #content {
  78.     max-width: 1200px;
  79.     margin: 0 auto;
  80.     background: initial;
  81.     border: none;
  82.     min-height: 670px;
  83. }
  84. th {
  85.     font-family: 'Open Sans', sans-serif;
  86. }
  87.  
  88. /* ==========================================================================
  89.  HEADER
  90. ========================================================================== */
  91. #header {
  92.     background-color: var(--header-bg);
  93.     background-image: url(../../osta/img/backdrops/02.png);
  94.     background-size: cover;
  95.     border: initial;
  96.     box-shadow: initial;
  97.     width: 100%;
  98.     height: 60px;
  99.     top: 0;
  100.     z-index: 4;
  101.     position: absolute;
  102. }
  103. #header a {
  104.     color: var(--header-title);
  105.     font-weight: 200;
  106.     font-size: 14px;
  107. }
  108. #header p {
  109.     border: none;
  110.     color: var(--header-title);
  111.     /*background: var(--header-bg);*/  /*messes up Client header*/
  112.     max-width: initial;
  113.     margin: 0;
  114.     padding: 18px;
  115. }
  116. p#info {
  117.     font-weight: 100;
  118. }
  119. p#info strong {
  120.     font-weight: 400;
  121. }
  122. div[style="margin-bottom:20px; padding-top:5px;"] {
  123.     margin: 0 !important;
  124.     padding: 0 !important;
  125. }
  126.  
  127. /* ==========================================================================
  128.  FALLBACK COLORS
  129. ========================================================================== */
  130. .pull-right#nav a:hover, .pull-right#nav a svg:hover {
  131.     color: var(--header-title-hover);
  132.     fill:  var(--header-title-hover);
  133.     font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif;   
  134. }
  135. #header #nav a {
  136.     color: var(--header-title);
  137.     font-family: "segoe ui", "helvetica neue", arial, helvetica, sans-serif;
  138. }
  139. #header #nav a:hover {
  140.     color: var(--header-title-hover) !important;
  141. }
  142. .rtl #header li:nth-child(5) {
  143.     margin-left: -2px !important;
  144. }
  145. #header a[href*="login.php"]:hover {
  146.     background: rgba(255, 255, 255, 0.10980392156862745);
  147. }
  148. .sidr {
  149.     background: #f3f3f5;
  150. }
  151. .c-hamburger span,
  152. .c-hamburger span::before,
  153. .c-hamburger span::after {
  154.     background: #555;
  155. }
  156. :root {
  157.     --header-bg: #e4e4e4;  
  158.     --header-title: #444444;
  159.  
  160.     --nav-bar-bg: #cecece;
  161.     --nav-bar-link: #000000;
  162.    
  163.     --stickybar: #444444;  
  164.  
  165.     --mobile-menu-bg: #cecece; 
  166.     --mobile-link-color: #000000;
  167. }
  168.  
  169. /* ==========================================================================
  170.  NAVIGATION
  171. ========================================================================== */
  172. #nav {
  173.     background:  var(--header-title);
  174.     border: none;
  175.     padding-top: 0;
  176.     z-index: initial;  
  177. }
  178. #sub_nav {
  179.     background: var(--nav-bar-bg) !important;
  180.     height: 12px;
  181.     padding: 0;
  182.     max-width: 1240px;
  183.     margin: 57px auto;
  184.     border: 0;
  185.     line-height: 22px;
  186. }
  187. #sub_nav .small.icon-sort-down.pull-right {
  188.     display: none;
  189. }
  190. nav#customQ_nav #sub_nav {
  191.     line-height: 28px;
  192. }
  193. @media screen and (max-width: 1270px) {
  194.     ul#sub_nav {
  195.         margin-left: 12px !important;
  196.     }
  197. }
  198. #sub_nav a {
  199.     padding: initial;
  200. }
  201. ul#sub_nav a.active {
  202.     font-weight: 600;
  203. }
  204. #sub_nav li.top-queue + li > a {
  205.     margin-left: 14px;
  206. }
  207. a#new-ticket {
  208.     margin-left: 14px !important;
  209. }
  210. .sidr-inner a#new-ticket {
  211.     margin-left: 0 !important;
  212. }
  213. #nav a {
  214.     margin-left: 8px;
  215. }
  216. a#dark-mode-link {
  217.     margin-left: 6px;
  218. }
  219. a#logout {
  220.     margin-left: 5px;
  221. }
  222. #nav > li:first-of-type {
  223.     margin-left: 8px;
  224. }
  225. #nav li a {
  226.     margin-left: 0;
  227. }
  228. #nav li:hover a,
  229. a#agent-panel:hover,
  230. a#admin-panel:hover {
  231.     color: var(--header-title) !important;
  232.     fill: var(--header-title) !important;
  233. }
  234.  
  235. #nav li.active, #nav li.inactive:hover {
  236.     background-color: var(--header-title); 
  237.     box-shadow: none;
  238.     border: none;
  239.     padding-left: initial;
  240.     padding-right: initial;
  241. }
  242. #nav .active {
  243.     color: var(--nav-bar-link) !important;
  244.     font-weight: 400;
  245. }
  246. #nav .active, #nav .inactive {
  247.     border-radius: initial;
  248.     border-style: initial; 
  249. }
  250. #sub_nav a,
  251. #nav .active a,
  252. #nav .inactive a {
  253.     color: var(--header-title);
  254. }
  255. #sub_nav a {
  256.     color: var(--nav-bar-link);
  257. }
  258. #sub_nav a:hover {
  259.     color: #000000;
  260. }
  261. #nav li.inactive > ul {
  262.     width: initial;
  263.     background: var(--header-title);
  264.     border-bottom: none;
  265.     border-left: none;
  266.     border-right: none;
  267.     border-radius: none;
  268.     -moz-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
  269.     -webkit-box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
  270.     box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
  271. }
  272. #nav .inactive li a {
  273.     background-position: 10px 50%;
  274.     background-repeat: no-repeat;
  275.     padding: 4px 34px 4px 34px;
  276. }
  277. .rtl #nav .inactive li a {
  278.     padding-left: 34px;
  279.     padding-right: 34px;
  280. }
  281. #nav .inactive li a:hover {
  282.     color: var(--mobile-menu-bg);
  283.     background-color: rgba(0,0,0,0.1);
  284. }
  285. #customQ_nav .jb-overflowmenu-menu-primary li.item > a {
  286.     padding: 0;
  287. }
  288. #sub_nav > li > a {
  289.     margin-left: 17px !important;
  290.     padding: 0;
  291. }
  292. .rtl #sub_nav > li > a {
  293.     margin-right: 17px !important;
  294.     padding-right: 0 !important;
  295. }
  296. .rtl ul#sub_nav li:first-child a {
  297.     margin-right: 0 !important;
  298.     padding-right: 0 !important;
  299. }
  300.  
  301. /* ==========================================================================
  302.  LOGO
  303. ========================================================================== */
  304. #left-logo {
  305.     width: 300px;
  306.     height: 28px;
  307.     margin: 15px 14px;
  308.     float: left;
  309.     -webkit-transition: left 2s;
  310.     transition: left 2s;
  311.     /*position: absolute;*/
  312.     /*top: 0;*/
  313.     /*left: 0;*/
  314.     z-index: 0;
  315. }
  316. .rtl #left-logo {
  317.     float: right;
  318.     right: 0;
  319. }
  320. /* TEXT LOGO */
  321. #header-text {
  322.     padding: 2px;
  323. }
  324. #header-title {
  325.     color: var(--header-title);
  326.     line-height: 21px;
  327.     padding: 0;
  328.     font-style: normal;
  329.     font-weight: 400;
  330.     font-size: 21px;
  331.     font-family: "Montserrat",sans-serif;
  332.     max-width: 300px;
  333.     white-space: nowrap;
  334.     overflow: hidden;
  335.     text-overflow: clip;   
  336. }
  337. #header-subtitle {
  338.     color: var(--header-title);
  339.     margin: 0;
  340.     position: relative;
  341.     font-size: 10px;
  342.     font-family: verdana;
  343.     font-style: initial;
  344.     letter-spacing: 2.4px!important;
  345.     display: block;
  346.     font-weight: 100;
  347. }
  348. /* IMAGE LOGO */
  349. #left-logo {
  350.     max-width: 300px;
  351.     height: 34px;
  352.     margin: 12px 11px;
  353. }
  354. #header-default svg {
  355.     height: 34px;
  356.     fill: var(--header-title);
  357. }
  358. #header-default:hover svg {
  359.     fill: var(--header-title-hover);
  360. }
  361. #header-text {
  362.     display: none;
  363. }
  364. #header-image img {
  365.     display: none;
  366. }
  367.  
  368. a#header-logo:hover  > #left-logo #header-title,
  369. a#header-logo:focus  > #left-logo #header-title,
  370. a#header-logo:active > #left-logo #header-title,
  371. a#header-logo:hover  > #left-logo #header-image img,
  372. a#header-logo:focus  > #left-logo #header-image img,
  373. a#header-logo:active > #left-logo #header-image img,
  374. a#header-logo:hover  > #left-logo #header-default svg,
  375. a#header-logo:focus  > #left-logo #header-default svg,
  376. a#header-logo:active > #left-logo #header-default svg {
  377.     -webkit-animation-name: hvr-pop;
  378.     animation-name: hvr-pop;
  379.     -webkit-animation-duration: 0.3s;
  380.     animation-duration: 0.3s;
  381.     -webkit-animation-timing-function: linear;
  382.     animation-timing-function: linear;
  383.     -webkit-animation-iteration-count: 1;
  384.     animation-iteration-count: 1;
  385. }
  386.  
  387. /* ==========================================================================
  388.  HEADER NAV
  389. ========================================================================== */
  390. #nav.pull-right {
  391.     background: initial;
  392.     position: relative;
  393.     top: 16px;
  394.     color: #f3f3f5; /* fallback */
  395.     color: var(--header-bg);
  396.     padding: 0 calc(1% + 5px) 0 0 !important;
  397. }
  398. .rtl #nav.pull-right {
  399.     padding: 0 0 0 calc(1% + 5px) !important;
  400. }
  401. a.no-pjax[href*="/scp/logout.php"] svg {
  402.     fill: var(--header-title);
  403.     display: inline-block;
  404.     width: 18px;
  405.     height: 18px;
  406.     content: "";
  407.     position: relative;
  408.     top: 4px;
  409. }
  410. .rtl a.no-pjax[href*="/scp/logout.php"] svg {
  411.     transform: rotate(180deg);
  412. }
  413. #nav.pull-right .active,
  414. #nav.pull-right .inactive {
  415.     min-width: initial;
  416. }
  417. #nav.pull-right li.active,
  418. #nav.pull-right li.inactive:hover {
  419.     background-color: initial;
  420. }
  421. #nav.pull-right li.inactive > ul {
  422.     width: initial;
  423.     background: var(--header-bg);
  424.     left: -33px;
  425. }
  426. .rtl #nav.pull-right li.inactive > ul {
  427.     left: -33px;
  428.     right: initial;
  429. }
  430. #nav.pull-right .active,
  431. #nav.pull-right .inactive,
  432. #nav.pull-right li.active,
  433. #nav.pull-right  li.inactive:hover {
  434.     padding-left: initial;
  435.     padding-right: initial;
  436. }
  437. .rtl #nav li:first-child {
  438.     margin-left: 8px !important;
  439. }
  440. .rtl #nav.pull-right li > ul li:first-child {
  441.     margin-left: 0 !important;
  442. }
  443. #nav > li + li:nth-child(5) {
  444.     /*margin-left: 0;*/  /*what was this for?!*/
  445. }
  446. #nav.pull-right .active a {
  447.     font-weight: 400;
  448. }
  449.  
  450. /* ==========================================================================
  451.  TOP MARGIN
  452. ========================================================================== */
  453. .pull-left {
  454.     float: left;
  455.     margin: 0;
  456. }
  457. .rtl .pull-left {
  458.     float: right !important;
  459. }
  460. p.full-width .pull-right {
  461.     margin: 9px 0 0 0; /*target*/
  462.     margin: 0 0 0 0;   
  463. }
  464. .pull-right.flush-right.page-top {
  465.     float: left;
  466. }
  467.  
  468. /* ==========================================================================
  469.  TYPOGRAPHY
  470. ========================================================================== */
  471. h1, h2, h3, h4, h5, h6 {
  472.     font-family: 'Product Sans', 'Open Sans', sans-serif;;
  473. }
  474. h2 {
  475.     color: #777777;
  476.     font-weight: 400;
  477.     font-size: 25px;
  478.     margin: 0;     
  479. }
  480. h2 a {
  481.     line-height: 33px; 
  482. }
  483. h3 {
  484.     padding: 5px 0;
  485.     color: #777777;
  486.     font-weight: 400;
  487.     font-size: 19px;
  488.     margin: 0;
  489. }
  490. .pull-left.flush-left h2 a {
  491.     display: inline-block;
  492.     vertical-align: middle;
  493.     -webkit-transform: perspective(1px) translateZ(0);
  494.     transform: perspective(1px) translateZ(0);
  495.     box-shadow: 0 0 1px transparent;
  496.     position: relative;
  497.     /* padding-right: 2.2em; */
  498.     padding-right: 4px;
  499. }
  500. .flush-left h2 svg {
  501.     display: inline-block;
  502.     position: relative;
  503.     top: 4px;
  504.     left: 0;
  505.     -webkit-transition-duration: 1s;
  506.     transition-duration: 1s;
  507.     -webkit-transition-property: transform;
  508.     transition-property: transform;
  509.     -webkit-transition-timing-function: ease-in-out;
  510.     transition-timing-function: ease-in-out;
  511.     fill: #8BCB0D; 
  512. }
  513. .flush-left h2 a:hover > svg,
  514. .flush-left h2 a:focus > svg,
  515. .flush-left h2 a:active > svg {
  516.     -webkit-transform: rotate(360deg);
  517.     transform: rotate(360deg);
  518. }
  519. .sticky.bar.fixed .flush-left h2 a svg {
  520.     fill: var(--header-title);
  521. }
  522. label {
  523.     color: #4c5156 !important;
  524. }
  525. .error {
  526.     color: #d62705;
  527.     font-size: 13px;
  528.     font-weight: 500;
  529. }
  530. li.error a:before {
  531.     display: none;
  532. }
  533. .faded strong {
  534.     font-weight: 500;
  535. }
  536.  
  537. /* ==========================================================================
  538.  ICONS
  539. ========================================================================== */
  540. a [class^="icon-"], a [class*=" icon-"] {
  541.     color: #128dbe;
  542. }
  543. .pull-right i[class^="icon-"], .pull-right i[class*=" icon-"] {
  544.     display: inline-block;
  545.     float: left;
  546. }
  547. .rtl .pull-right i[class^="icon-"],
  548. .rtl .pull-right i[class*=" icon-"] {
  549.     float: right;
  550. }
  551. i.icon-refresh {
  552.     display: none;
  553. }
  554. .configureQ {
  555.     margin: 16px 0 0 4px;
  556. }
  557. [class^="icon-"].icon-fixed-width, [class*=" icon-"].icon-fixed-width {
  558.     padding: 0; /* Completed Tasks */
  559.     margin: 0 6px 0 3px;
  560.     width: 20px;
  561. }
  562. #sort-dropdown [class^="icon-"].icon-fixed-width, #sort-dropdown [class*=" icon-"].icon-fixed-width {
  563.     margin: 0 4px 0 3px;
  564. }
  565. .configureQ > .noclick-dropdown {
  566.     padding: 25px 0 0 0;
  567.     margin-top: -3px;
  568.     margin-left: -7px;
  569. }
  570. .configureQ i.icon-fixed-width.icon-pencil {
  571.     background-position: 1px -2px;
  572. }
  573. .floating-options i.icon-edit, .floating-options i.icon-share {
  574.     padding: 15px !important;
  575.     background-position: center center;
  576.     float: right;
  577.     top: 0;
  578. }
  579. .floating-options i.icon-share {
  580.     background-size: 24px !important;
  581.     top: 1px;
  582. }
  583. .floating-options i.icon-share:after {
  584.     clear: both;
  585. }
  586. .quicknote .body a {
  587.     margin: 0 0 15px 0;
  588. }
  589. .quicknote {
  590.     margin: 10px 0;
  591.     border: .5px solid rgba(0,0,0,0.2);
  592.     border-radius: 4px;
  593. }
  594. .quicknote .body {
  595.     padding: 0 10px;
  596. }
  597. #new-note {
  598.     margin-top: 10px;
  599.     background: rgba(219, 243, 255, 0.6509803921568628);
  600. }
  601. #quick-notes i.note-type.icon-user {
  602.     margin-left: 0;
  603. }
  604. .re-icon i:before { /*Redactor Toolbar trash icon*/
  605.     top: -4px;
  606. }
  607. .delete-draft:hover {
  608.     background-color: rgba(212, 8, 8, 0.9294117647058824) !important;
  609. }
  610. .faded {
  611.     margin: 3px 0 0 0 !important;
  612.     /* font-size: 18px; */ /*target*/
  613.     color: #888;
  614. }
  615. .thread-event .faded {
  616.     margin: 3px 0 0 0 !important;
  617.     font-size: 18px;
  618. }
  619. .thread-event .type-icon i {
  620.     top: 0 !important;
  621. }
  622. .thread-entry .muted-button {
  623.     border-radius: 5px;
  624.     padding: 3px 5px;
  625.     margin: -4px 0 -1px 5px;
  626.     border: .5px solid rgba(0, 0, 0, 0.21);
  627.     color: #666;
  628.     color: rgba(0,0,0,0.5);
  629.     background: rgba(255, 255, 255, 0.21);
  630. }
  631. .label.label-bare:hover,
  632. .thread-entry .muted-button:hover {
  633.     background: rgba(255, 255, 255, 0.48);
  634. }
  635. a[href="#moreoptions"] i.icon-reorder {
  636.     padding-right: 2px;
  637. }
  638.  
  639. /* ==========================================================================
  640.  TICKET PAGES
  641. ========================================================================== */
  642. form[action="tickets.php"] {
  643.     display: inline;
  644. }
  645. form#reply {
  646.     width: 98% !important;
  647. }
  648. #resp_sec tr:first-of-type td[colspan="2"]:first-of-type {
  649.     display: none;
  650. }
  651. #resp_sec .redactor-box {
  652.     margin-top: 10px !important;
  653. }
  654. .redactor-styles,
  655. .redactor-styles p,
  656. .-redactor-container .redactor-styles {
  657.     font-size: 14px;
  658.     font-family: 'Open Sans', sans-serif;
  659.     color: #000;
  660.     max-width: initial !important;
  661. }
  662. .redactor-styles {
  663.     padding: 5px 12px 0px 12px;
  664. }
  665. .redactor-styles h1,
  666. .redactor-styles h2,
  667. .redactor-styles h3,
  668. .redactor-styles h4,
  669. .redactor-styles h5,
  670. .redactor-styles h6  {
  671.     font-family: 'Open Sans', sans-serif;
  672.     line-height: initial;
  673. }
  674. .redactor-box.redactor-styles-on {
  675.     border: 1px solid #aaaaaa;
  676. }
  677. .inner br:nth-child(2) {
  678.     /* display: none; */ /*breaks signature line breaks*/
  679. }
  680. #tasks.tab_content {
  681.     min-height: 80px;
  682. }
  683. .redactor-box.redactor-styles-on .redactor-toolbar.redactor-toolbar {
  684.     padding: 0 0 0 0;
  685.     border-radius: 6px 6px 0 0;
  686.     box-shadow: 0 4px 6px -3px rgba(0, 0, 0, 0.22);
  687. }
  688. .redactor-box.redactor-styles-on {
  689.     border: 1px solid #aaaaaa !important;
  690. }
  691. .tixTitle h3 {
  692.     font-weight: 400;
  693.     color: #777777;
  694.     font-size: 22px;   
  695. }
  696. .avatar.pull-left {
  697.     margin-left: -60px;
  698.     display: inline-block;
  699.     width: 100px; /*target*/
  700.     height: auto;
  701. }
  702. .thread-entry .avatar.pull-left.avatar {
  703.     width: 50px;
  704. }
  705.  
  706. /* ==========================================================================
  707.  UNIVERSAL TABLE STYLES
  708. ========================================================================== */
  709. /* HEAD */
  710. table[width="940"] {
  711.     width: 100%;
  712. }
  713. table.list,
  714. #ticketTable {
  715.     width: 100%;
  716.     border: 1px solid #cfd4d6;
  717.     border-radius: 6px;
  718.     margin: 5px 0 0 0;
  719.     background: initial;
  720.     background-color: #fff;
  721.     border-spacing: 0;
  722.     border-collapse: separate;
  723. }
  724. .logs-page table.list {
  725.     table-layout: fixed;   
  726. }
  727. table.list thead th {
  728.     background-color: #fff;
  729.     color: #686868;
  730. }
  731. table.list th:not(:first-child) a:hover {
  732.     background: #cfe6ff url(../../osta/icons/asc-desc.svg) 100% 50% no-repeat;
  733.     background-size: 20px;
  734. }
  735. table.list thead th.osta_priority a:hover {
  736.     background-position: 3px 14px !important;
  737. }
  738. .rtl table.list th:nth-child(3) a:hover,
  739. .rtl table.list th:nth-child(4) a:hover,
  740. .rtl table.list th:nth-child(5) a:hover,
  741. .rtl table.list th:nth-child(6) a:hover,
  742. .rtl table.list th:nth-child(7) a:hover {
  743.     background: #cfe6ff url(../../osta/icons/asc-desc.svg) 8px 50% no-repeat;
  744.     background-size: 20px; 
  745. }
  746. table.list th:first-child {
  747.     border-radius: 6px 0 0 0;
  748.     background-image: url(../icons/checkmark.svg);
  749.     background-repeat: no-repeat;
  750.     background-position: 20px center;
  751.     background-size: 16px;
  752.     height: 40px;
  753.     content: "";
  754.     width: 30px !important;
  755. }
  756. table.list.queue.tickets th:first-child { /*target*/
  757.     background-position: center left 12px;
  758. }
  759. .rtl table.list th:first-child {
  760.     border-radius: 0 6px 0 0;
  761. }
  762. table.list th:last-child {
  763.     border-radius: 0 6px 0 0;
  764. }
  765. table.ticket_info table {
  766.     background: #fff;
  767.     padding: 4px;
  768.     border-radius: 6px;
  769. }
  770. table.list th {
  771.     border: 0 !important;
  772.     margin: 0 !important;
  773.     padding: 0 !important;
  774.     vertical-align: middle !important;
  775.     height: 30px;
  776. }
  777. table.list thead th a {
  778.     display: block; /* helps with asc-desc bg images */
  779.     color: #128dbe;
  780.     font-weight: normal;
  781.     font-size: 16px;
  782.     background: url(../../osta/icons/asc-desc.svg) 100% 50% no-repeat;
  783.     background-size: 20px;
  784.     will-change: background;
  785.     transition: all 0.3s ease-in-out;  
  786.     margin: 0;
  787.     height: 30px;
  788.     padding: 8px 0 2px 10px; /* this positions the text */
  789.     text-shadow: -1px -1px 0 #FFF, 0 -1px 0 #FFF, 1px -1px 0 #FFF, 1px 0 0 #FFF, 1px 1px 0 #FFF, 0 1px 0 #FFF, -1px 1px 0 #FFF, -1px 0 0 #FFF;
  790. }
  791. .rtl table.list thead th a {
  792.     background-position: 8px 50%;
  793.     padding-right: 15px;
  794.     padding-left: 0;
  795. }
  796. table.list thead th a.asc {
  797.     background: #cfe6ff url(../../osta/icons/asc.svg) 100% 50% no-repeat;
  798.     background-size: 20px;
  799. }
  800. .rtl table.list thead th a.asc {
  801.     background: #cfe6ff url(../../osta/icons/asc.svg) 8px 50% no-repeat;
  802.     background-size: 20px;
  803. }
  804. table.list thead th a.desc {
  805.     background: #cfe6ff url(../../osta/icons/desc.svg) 100% 50% no-repeat;
  806.     background-size: 20px;
  807. }
  808. .rtl table.list thead th a.desc {
  809.     background: #cfe6ff url(../../osta/icons/desc.svg) 8px 50% no-repeat;
  810.     background-size: 20px;
  811. }
  812. th.osta_ticket a {
  813.     margin-left: 5px !important;
  814.     padding-left: 22px !important;
  815.     line-height: 24px;
  816.     font-style: initial;
  817.     font-family: Montserrat;
  818.     font-size: 14px !important;
  819.     font-weight: 600 !important;
  820. }
  821. @media screen and (max-width: 1000px) {
  822.     table.list thead th a,
  823.     table.list thead th a.asc, 
  824.     table.list thead th a.desc {
  825.         background-image: initial;
  826.     }
  827. }
  828. /* BODY */
  829. table.list tbody td {
  830.     margin: 0;
  831.     padding: 0 10px 0 10px;
  832.     vertical-align: middle;
  833.     border: initial;
  834.     font-size: 11px;
  835.     color: #686868;
  836. }
  837. table.list td.checkbox-cell {
  838.     padding: 18px 0px;
  839. }
  840. table.list tbody td.osta_ticket {
  841.     padding: 0 10px 0 4px;
  842. }
  843. a[style="display:inline"] {
  844.     font-size: 14px;
  845.     font-weight: 500;
  846. }
  847. table.list td div.wrap {
  848.     text-overflow: ellipsis;
  849.     overflow: hidden;
  850.     white-space: nowrap;
  851. }
  852. /* FOOT */
  853. table.list tfoot td {
  854.     font-size: 14px;
  855.     background: #fff;
  856.     border-radius: 0 0 6px 6px;
  857.     padding: 12px;
  858.     border-top: .5px solid #e0e0e0;
  859. }
  860. td.empty:before {
  861.     display: none;
  862. }
  863. .truncate {
  864.     display: initial;
  865.     width: auto;
  866.     white-space: pre-wrap;
  867.     overflow: hidden;
  868.     text-overflow: ellipsis;
  869.     vertical-align: middle;
  870. }
  871. .osta_ticket .truncate {
  872.     white-space: initial !important;
  873. }
  874.  
  875. /* ==========================================================================
  876.  TICKET LIST COLUMN WIDTHS
  877. ========================================================================== */
  878. form[action="tickets.php"] table.list thead th {
  879.     width: initial !important;
  880. }
  881. form[action="tickets.php"] table.list thead th:first-child,
  882. form[action="tickets.php"] table.list thead th:nth-child(2) {
  883.     text-align: center;
  884. }
  885. form[action="tickets.php"] table.list th:first-child,
  886. form[action="tickets.php"] table.list td:first-child {
  887.     max-width: 1vw;
  888. }
  889. form[action="tickets.php"] table.list th:nth-child(2),
  890. form[action="tickets.php"] table.list td:nth-child(2) {
  891.     max-width: 2vw;
  892. }
  893. form[action="tickets.php"] table.list th:nth-child(3),
  894. form[action="tickets.php"] table.list td:nth-child(4) { /* <-acount for hidden mobile td */
  895.     max-width: 9vw;
  896. }
  897. form[action="tickets.php"] table.list th:nth-child(4),
  898. form[action="tickets.php"] table.list td:nth-child(5) {
  899.     max-width: 10vw;
  900. }
  901. form[action="tickets.php"] table.list th:nth-child(5),
  902. form[action="tickets.php"] table.list td:nth-child(6) {
  903.     max-width: 20vw;
  904. }
  905. form[action="tickets.php"] table.list th:nth-child(6),
  906. form[action="tickets.php"] table.list td:nth-child(7) {
  907.     max-width: 10vw;
  908. }
  909. form[action="tickets.php"] table.list th:nth-child(7),
  910. form[action="tickets.php"] table.list td:nth-child(8) {
  911.     max-width: 4vw;
  912. }
  913. form[action="tickets.php"] table.list th > .wrap,
  914. form[action="tickets.php"] table.list th > .wrap a {
  915.     text-overflow: ellipsis;
  916.     overflow: hidden;
  917.     white-space: nowrap;
  918. }
  919. form[action="tickets.php"] table.list td:nth-child(6) div.wrap {
  920.     max-width: 75%;
  921. }
  922. .rtl form[action="tickets.php"] table.list td:nth-child(6) div.wrap {
  923.     float: right;
  924. }
  925. form[action="tickets.php"] table.list td:nth-child(6) div.overdueTicket.wrap {
  926.     max-width: calc(75% - 20px);
  927. }
  928. @media screen and (max-width: 1080px) {
  929.     .tickets-page table.list thead th a {
  930.         padding: 8px 0 2px 0 !important;
  931.     }
  932.     .tickets-page table.list tbody td {
  933.         /*padding-left: 0 !important;*/
  934.     }  
  935. }
  936. @media screen and (max-width: 860px) {
  937.     .tickets-page table.list thead th a {
  938.     /* background-image: initial !important;     */
  939.     }
  940. }
  941.  
  942. /* ==========================================================================
  943.  TICKET LIST HEAD
  944. ========================================================================== */
  945. table.list thead th.osta_priority a {
  946.     color: #fff;
  947.     font-size: 1px;
  948.     background-image: url(../icons/exclaimation.svg);
  949.     background-repeat: no-repeat;
  950.     background-position: 50% 50%;
  951.     background-size: 6px;
  952.     content: "";
  953. }
  954. table.list thead th:first-child a.desc {
  955.     height: 39px !important;
  956. }
  957. form[action="tickets.php"] table.list thead th:first-child:hover {
  958.     background-color: #cfe6ff;
  959.     box-shadow: inset 0 -1px 0 0 #fff;
  960. }
  961. form[action="tickets.php"] table.list thead th:first-child a {
  962.     background-image: initial;
  963. }
  964. form[action="tickets.php"] table.list thead th:first-child a {
  965.     background-image: none;
  966. }
  967. .tickets-page table.list thead th:first-child a.asc,
  968. table.list thead th:first-child a.desc {
  969.     background: initial;
  970. }
  971. /*priority*/
  972. .tickets-page table.list th:first-child a {
  973.     border-radius: 6px 0 0 0 !important;
  974. }
  975. table.list thead th a#selectToggle {
  976.     background: initial;
  977. }
  978. /*checkbox*/
  979.  
  980. /*description*/
  981.  
  982. /*number*/
  983. table.list thead th:last-child,
  984. table.list thead th:last-child a {
  985.     border-radius: 0 6px 0 0;
  986. }
  987. .rtl table.list thead th:last-child,
  988. .rtl table.list thead th:last-child a {
  989.     border-radius: 6px 0 0 0;
  990. }
  991. table.list tbody tr:hover td.osta_priority {
  992.     opacity: .8;
  993. }
  994. table.list tbody tr:hover td.osta_priority_emergency {
  995.     filter: brightness(160%);
  996. }
  997. table.list tbody tr:hover td.osta_priority_high {
  998.     filter: brightness(118%);
  999. }
  1000. table.list tbody tr:hover td.osta_priority_normal {
  1001.     filter: brightness(118%);
  1002. }
  1003. table.list tbody tr:hover td.osta_priority_low {
  1004.     filter: brightness(120%);
  1005. }
  1006.  
  1007.  
  1008.  
  1009. /*row color and hover hightlights*/
  1010. table.list tbody tr.highlight td {
  1011.     background: #ddd;
  1012.     border-top: .1px solid #aaa !important;
  1013.     border-bottom: .1px solid #aaa !important;
  1014. }
  1015. table.list tbody tr:hover td {
  1016.     background: #ffe9d2;
  1017. }
  1018.  
  1019. /* ==========================================================================
  1020.  TICKET LIST BODY
  1021. ========================================================================== */
  1022. /*priority*/
  1023. /*checkbox*/
  1024.  
  1025. .new-reply {
  1026.     background-size: 8px !important;
  1027.     background-repeat: no-repeat !important;
  1028.     content: '1' !important;
  1029.     display: inline-block;
  1030.     margin: 0;
  1031.     background: #fff;
  1032.     color: #000000;
  1033.     font-weight: 400;
  1034.     padding: 2px;
  1035.     border-radius: 10px;
  1036.     width: 10px;
  1037.     height: 10px;
  1038.     line-height: 10px;
  1039.     text-align: center;
  1040.     position: relative;
  1041.     left: -5px;
  1042.     border: 1px solid #8a8a8a;
  1043.     animation: new-reply-pulse 1.5s ease-in-out infinite;  
  1044. }
  1045. @-webkit-keyframes new-reply-pulse {
  1046.     0% {
  1047.         -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3);
  1048.         box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3)
  1049.     }
  1050.     50% {
  1051.         -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(117, 178, 226, .3);
  1052.         box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(117, 178, 226, .3)
  1053.     }
  1054.     to {
  1055.         -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3);
  1056.         box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3)
  1057.     }
  1058. }
  1059. @keyframes new-reply-pulse {
  1060.     0% {
  1061.         -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3);
  1062.         box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3)
  1063.     }
  1064.     50% {
  1065.         -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(117, 178, 226, .3);
  1066.         box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(117, 178, 226, .3)
  1067.     }
  1068.     to {
  1069.         -webkit-box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3);
  1070.         box-shadow: 0 0 0 2px #fff, 0 0 0 2px rgba(117, 178, 226, .3)
  1071.     }
  1072. }
  1073. .nowrap {
  1074.     white-space: nowrap;
  1075. }
  1076. td.osta_ticket div {
  1077.     white-space: nowrap;
  1078.     vertical-align: middle;
  1079. }
  1080. td.osta_lastupdated {
  1081.     line-height: 22px;
  1082. }
  1083. .date-text {
  1084.     position: relative;
  1085.     top: 1px;
  1086. }
  1087. /*from*/
  1088. form[action="tickets.php"] table.list tbody td:nth-child(5) {
  1089.     padding-left: 10px;
  1090.     font-size: 14px !important;
  1091. }
  1092. /*description*/
  1093. form[action="tickets.php"] table.list tbody td:nth-child(6) {
  1094.     padding-left: 10px;
  1095. }
  1096. .Icon.overdueTicket.link.truncate {
  1097.     padding: 0 0 0 20px;
  1098. }
  1099. td.table-description div {
  1100.     font-size: 14px !important;
  1101. }
  1102. i.icon-comments-alt {
  1103.     top: 5px;
  1104.     right: 4px;
  1105. }
  1106. #thread-count {
  1107.     float: right;
  1108.     position: relative;
  1109.     right: 4px;
  1110. }
  1111. .rtl #thread-count {
  1112.     float: left;
  1113.     left: 0;
  1114. }
  1115. #thread-icon {
  1116.     float: right;
  1117.     padding: 0 4% 0 4px;
  1118. }
  1119. .rtl #thread-icon {
  1120.     float: left;
  1121.     padding: 0 4px 0 4%;
  1122. }
  1123. i.icon-comments-alt {
  1124.     top: 2px;
  1125. }
  1126. /*name*/
  1127. form[action="tickets.php"] table.list tbody td:nth-child(7) {
  1128.     padding-left: 10px;
  1129.     font-size: 12px;
  1130. }
  1131. /*number*/
  1132. a.Icon.Ticket.preview,
  1133. a.Icon.apiTicket.preview,
  1134. a.Icon.emailTicket.preview,
  1135. a.Icon.phoneTicket.preview,
  1136. a.Icon.webTicket.preview,
  1137. a.Icon.otherTicket.preview {
  1138.     margin: 0 0 0 12px;
  1139.     margin: 0;
  1140. }
  1141. a.Icon.Ticket.preview b,
  1142. a.Icon.apiTicket.preview b,
  1143. a.Icon.emailTicket.preview b,
  1144. a.Icon.phoneTicket.preview b,
  1145. a.Icon.webTicket.preview b,
  1146. a.Icon.otherTicket.preview b {
  1147.     font-weight: normal;
  1148.     font-size: 10px;
  1149.     font-family: 'Open Sans', sans-serif;
  1150. }
  1151. a[data-preview^="#tasks"],
  1152. .orgs #tickets .list a.preview,
  1153. .users #tickets .list a.preview,
  1154. table.list.queue.tickets a.preview,
  1155. #relations a.Ticket.preview,
  1156. .tasks .list td:not(.task-number) a[href^="tickets.php"] {
  1157.     font-weight: 400;
  1158.     border: .5px solid #128dbe;
  1159.     border-radius: 2px;
  1160.     padding: 2px 3px 2px 3px;
  1161.     background: #ffffff7a;
  1162.     margin: 0;
  1163.     font-size: 10px;
  1164. }
  1165. a.preview:empty {
  1166.     display: none !important;
  1167. }
  1168. .orgs #tickets .list a.preview,
  1169. .users #tickets .list a.preview {
  1170.     padding: 2px 3px 0 3px;
  1171. }
  1172. .orgs #users .list tbody td {
  1173.     padding: 14px 0;
  1174.     font-size: 14px;
  1175. }
  1176. .orgs #users .list tbody td:nth-child(3) {
  1177.     font-size: 13px;
  1178. }
  1179. .orgs #users i.icon-fixed-width.icon-file-text-alt {
  1180.     top: 4px;
  1181. }
  1182. .users #tickets .list thead th a {
  1183.     padding: 8px 0 2px 0;
  1184. }
  1185. .users #tickets .list th:first-child {
  1186.     background-image: none;
  1187.     width: 6% !important;
  1188. }
  1189. .users #tickets .list th:nth-child(2) {
  1190.     width: 13% !important;
  1191. }
  1192. .users #tickets .list th:nth-child(3) {
  1193.     width: 11% !important;
  1194. }
  1195. .users #tickets .list th:nth-child(4) {
  1196.     width: 42% !important;
  1197. }
  1198. .users #tickets .list th:nth-child(5),
  1199. .users #tickets .list th:nth-child(6) {
  1200.     width: 14% !important;
  1201. }
  1202. .users #tickets .list td{
  1203.     padding: 14px 0;
  1204.     /* font-size: 14px !important; */ /* messing up User view Tickets tab */
  1205. }
  1206. .users #tickets .pull-right.faded-more {
  1207.     padding-right: 20px;
  1208. }
  1209. .preview {
  1210.     float: left;
  1211. }
  1212. .rtl .preview {
  1213.     float: right;
  1214. }
  1215. _::-webkit-full-page-media, _:future, :root a.preview {
  1216.     border: 1px solid #128dbe;
  1217. }
  1218.  
  1219. /* ==========================================================================
  1220.  TICKET LIST - FOOT
  1221. ========================================================================== */
  1222. form[action="tickets.php"] table.list tfoot td {
  1223.     padding: 10px 8px 6px 0 !important;
  1224.     border-top: .5px solid rgba(0, 0, 0, 0.09) !important;
  1225.     border-radius: 0 0 6px 6px;
  1226.     font-size: 14px !important;
  1227. }
  1228. table.list + div,
  1229. table.list ~ div {
  1230.     font-size: 14px;
  1231.     padding: 12px 12px 0 12px;
  1232. }
  1233. table.list ~ div b {
  1234.     margin-right: 10px;
  1235. }
  1236. table.list + div a#queue-export,
  1237. #table-foot-options a#queue-export,
  1238. table.list.queue.tickets ~ div a#queue-export {
  1239.     margin-left: 10px !important;
  1240. }
  1241.  
  1242. /* ==========================================================================
  1243.  TICKET VIEW
  1244. ========================================================================== */
  1245. .ticket_info {
  1246.     background: #fff;
  1247.     border: 1px solid #cfd4d6;
  1248.     border-radius: 6px;
  1249.     margin: 0;
  1250.     padding: 0;
  1251. }
  1252. .ticket_info th {
  1253.     color: #4c5156 !important;
  1254.     font-weight: 600;
  1255. }
  1256. .ticket_info td {
  1257.     border-radius: 6px;
  1258.     background: #fff;
  1259. }
  1260. .ticket_info {
  1261.     margin: 0 0 10px 0;
  1262. }  
  1263. .ticket_info td {
  1264.     padding: 3px 8px;
  1265. }
  1266. .ticket_infotr:first-child td {
  1267.     padding-top: 7px;
  1268. }
  1269. .ticket_info tr:last-child td {
  1270.     padding-bottom: 9px !important;
  1271. }
  1272. .has_bottom_border {
  1273.     padding-bottom: 5px;
  1274.     border-bottom: none;
  1275. }
  1276. .flush-left h2 {
  1277.     margin: 0;
  1278. }
  1279. .clear.tixTitle.has_bottom_border h3 {
  1280.     margin: -8px 0 3px -4px;
  1281. }
  1282. .templates .pull-left.flush-left,
  1283. .emails .pull-left.flush-left,
  1284. .staff .pull-left.flush-left,
  1285. .teams .pull-left,
  1286. .roles .pull-left,
  1287. .departments .pull-left,
  1288. .directory .pull-left,
  1289. .dashboard .pull-left,
  1290. .users .pull-left,
  1291. .orgs .pull-left,
  1292. .tasks .pull-left.flush-left,
  1293. .kb .pull-left,
  1294. .categories .pull-left,
  1295. .canned .pull-left {
  1296.     margin-top: 0;
  1297. }
  1298. #ticketThread::before {
  1299.     margin-left: 83px;
  1300. }
  1301. .thread-entry .thread-body {
  1302.     width: calc(100% - 27px);
  1303. }
  1304. .thread-entry::before {
  1305.     border-top: 2px solid #f3f3f5;
  1306. }
  1307. .thread-entry::after {
  1308.     /*border-bottom: 2px solid #f3f3f5;*/
  1309. }
  1310. .thread-entry.message .header,
  1311. .thread-preview-entry.message .header {
  1312.     background: #ffddba;   
  1313. }
  1314. .thread-entry.avatar.message .header:after {
  1315.     border-left: 7px solid #ffddba;
  1316. }
  1317. .thread-entry .header,
  1318. .thread-preview-entry .header {
  1319.     border: 1px solid rgba(0, 0, 0, 0.06);
  1320.     border-radius: 5px 5px 0 0;
  1321. }
  1322. .thread-entry .header .title {
  1323.     margin-left: 0;
  1324. }
  1325. .thread-entry.note .header,
  1326. .thread-preview-entry.note .header,
  1327. .thread-preview-entry.collapsed .header {
  1328.     background: #dae9eb;
  1329. }
  1330. .thread-entry.response .header,
  1331. .thread-preview.entry.response .header {
  1332.     background: #b2e9f1;
  1333. }
  1334. .thread-entry.avatar .header:before {
  1335.     border-left: 8px solid #dddddd;
  1336. }
  1337. .textra.light {
  1338.     float: right;
  1339.     padding-left: 5px;
  1340. }
  1341. .thread-entry .label-bare {
  1342.     display: inline-block;
  1343.     padding: 5px 9px 3px 9px;
  1344.     border: 0.5px solid #99bbc0;
  1345.     background: rgba(255, 255, 255, 0.21);
  1346.     margin: -3px 0 0 0;
  1347.     color: #3b8ebd;
  1348. }
  1349. .thread-entry .label-bare i.icon-user,
  1350. .thread-entry .label-bare i.icon-code-fork {
  1351.     width: 13px;
  1352.     height: 13px;
  1353.     background-size: 13px !important;
  1354.     margin: -2px 0 6px 0;
  1355. }
  1356. .thread-entry .label-bare .icon-code-fork:before {
  1357.     content: "\f126";
  1358.     top: 0px !important;
  1359.     left: 3px;
  1360.     font-size: 14px;
  1361. }
  1362. .thread-entry.message .header a.white.button.action-button.show-images {
  1363.     padding: 1px 4px 4px 4px;
  1364.     border: .5px solid #c9b49e;
  1365.     background: initial;
  1366.     float: right;
  1367.     background: rgba(255, 255, 255, 0.21);
  1368. }
  1369. .thread-preview-entry.collapsed.response .header .thread-name span:first-child {
  1370.     color: #4c5156;
  1371. }
  1372. .thread-entry.message .header a.white.button.action-button.show-images:hover {
  1373.     border: .5px solid #c9b49e !important;
  1374.     background: rgba(255, 255, 255, 0.37);
  1375. }
  1376. .thread-event .description {
  1377.     margin: 11px 0 0 5px !important;
  1378.     padding-top: 0;
  1379.     padding-left: 0;
  1380.     display: block;
  1381.     width: calc(100% - 114px);
  1382.     line-height: initial !important;
  1383.     color: #3b4450;
  1384.     font-family: 'Open Sans', sans-serif;
  1385.     font-size: 16px;
  1386.     float: left;
  1387. }
  1388. .thread-entry.avatar.response .header:before {
  1389.     border-right-color: #afebf3;
  1390.     z-index: 9
  1391. }
  1392. .thread-entry.avatar.response .header:after, .thread-entry.avatar.note .header:after {
  1393.     /* border-right: 7px solid #dae9eb !important; */ /*target*/
  1394. }
  1395. .thread-event {
  1396.     background-color: #fff0 !important;
  1397.     padding: 0 2px 9px;
  1398.     margin: 0 0 16px 60px;
  1399.     overflow: hidden;
  1400. }
  1401. .thread-event i {
  1402.     color: #6a798c !important;
  1403. }
  1404. .thread-event .type-icon {
  1405.     border: .5px solid #d8d8d8;
  1406.     padding: 9px 12px;
  1407.     background-color: #fff;
  1408.     position: relative;
  1409.     left: -2px;
  1410.     top: 0;
  1411.     float: left;
  1412. }
  1413. #thread-items::before {
  1414.     margin-left: 79px;
  1415. }
  1416. #response_options > form { /* Ticket View */
  1417.     border: .5px solid #cfd4d6;
  1418.     /* border-top: none; */
  1419.     border-radius: 6px;
  1420. }
  1421. #response_options > form > table {
  1422.     table-layout: fixed;
  1423.     padding: 12px;
  1424. }
  1425. #response_options > form > table td {
  1426.     padding: 0 0 10px 0;
  1427. }
  1428. tbody#to_sec select,
  1429. tbody#resp_sec select {
  1430.     width: 400px;
  1431. }
  1432. #ticket_thread.tab_content {
  1433.     position: initial;
  1434. }
  1435. .dropzone {
  1436.     z-index: 1;
  1437.     position: relative;
  1438.     top: -2px;
  1439. }
  1440. .dropzone .redactor-box {
  1441.     margin-top: 14px;
  1442.     border-bottom: 0;
  1443.     border-radius: 6px 6px 0 0;
  1444. }
  1445. .redactor-box {
  1446.     margin: 0 0 0 0 !important;
  1447.     border-radius: 6px 6px 0 0 !important;
  1448. }
  1449. .redactor-toolbar {
  1450.     background: #f7f7f7;
  1451. }
  1452. .redactor-toolbar li a {
  1453.     color: #128dbe;
  1454. }
  1455. .redactor-toolbar li a:hover {
  1456.     background-color: #128dbe;
  1457. }
  1458. .redactor-editor {
  1459.     font-family: 'Open Sans', sans-serif !important;   
  1460. }
  1461. .filedrop .dropzone {
  1462.     border: 1.5px dashed #75a4b1!important;
  1463.     padding: 4px 10px 10px 10px !important;
  1464.     border-radius: 0 0 5px 5px !important;
  1465.     background-color: #e8f6fa!important;
  1466.     color: #7f7f7f !important;
  1467. }
  1468. .filedrop .dropzone a {
  1469.     color: rgb(18, 141, 190);
  1470.     text-decoration: underline !important;
  1471. }
  1472. #response_options > form {
  1473.     background: #ffffff;
  1474. }
  1475. table.ticket_info.custom-data th {
  1476.     padding: 13px 17px;
  1477.     border-radius: 5px 5px 0 0;
  1478.     border-bottom: 1px solid #ccc;
  1479.     background-color: initial;
  1480. }
  1481.  
  1482. table.ticket_info.custom-data tr td {
  1483.     padding: 0 0 17px 17px;
  1484. }
  1485. table.ticket_info.custom-data tr:first-child td {
  1486.     padding: 17px 0 17px 17px;
  1487. }
  1488. table.ticket_info.custom-data tr:only-child td {
  1489.     padding: 17px 0 17px 17px;
  1490. }
  1491. #tasks_content .list td a,
  1492. #tasks_content .list td:nth-child(5) {
  1493.     font-size: 14px;
  1494. }
  1495. .tasks .list .task-number a,
  1496. #tasks_content .list td a[title="Preview Task"] {
  1497.     font-size: 10px;
  1498.     padding: 1px 3px 0 13px;
  1499.     min-height: 16px;
  1500.     background-repeat: no-repeat;
  1501.     background-size: 12px;
  1502.     background-position: top 2px left 2px;
  1503. background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23128dbe' d='M21%2C7L9%2C19L3.5%2C13.5L4.91%2C12.09L9%2C16.17L19.59%2C5.59L21%2C7Z' /%3E %3C/svg%3E");
  1504. }
  1505. a#reload-task {
  1506.     float: none;
  1507.     border: initial;
  1508.     font-size: inherit;
  1509. }
  1510. .merged-parent,
  1511. .merged-child {
  1512.     font-size: 15px;
  1513.     border: 1px solid #777777;
  1514.     padding: 2px 6px;
  1515.     position: relative;
  1516.     top: -3px;
  1517.     background: #00000003;
  1518.     border-radius: 2px;
  1519. }
  1520. #relations a.Ticket.preview {
  1521.     position: relative;
  1522.     top: 2px;  
  1523. }
  1524. #ticket_tabs_container #relations td {
  1525.     padding-left: 0;
  1526. }
  1527. #ticket_tabs_container #relations table.list th:first-child {
  1528.     background-image: initial;
  1529.     width: 2% !important;
  1530. }
  1531. #ticket_tabs_container #relations table.list th:nth-child(2) {
  1532.     width: 8% !important;
  1533. }
  1534. #ticket_tabs_container #relations table.list th:nth-child(3) {
  1535.     width: 50%;
  1536.     font-size: 14px;
  1537. }
  1538. #ticket_tabs_container #relations table.list th:nth-child(4),
  1539. #ticket_tabs_container #relations table.list th:nth-child(5),
  1540. #ticket_tabs_container #relations table.list th:nth-child(6) {
  1541.     width: 12% !important;
  1542. }  
  1543.    
  1544. /* ==========================================================================
  1545.  PRIORITY POPUP (osTicket Awesome mod)
  1546. ========================================================================== */
  1547. table.list th.head-priority a {
  1548.     width: 3px !important;
  1549.     padding: 0 !important;
  1550.     margin: 0 !important;
  1551.     border-radius: 6px !important;
  1552. }
  1553. td.cursor.priority {
  1554.     padding: 0;
  1555. }
  1556. table.list tbody tr:nth-child(2n+1):hover td {
  1557.     background: #ffe9d2;
  1558. }
  1559. td.Emergency,
  1560. table.list tbody tr:hover td.Emergency,
  1561. table.list tbody tr:nth-child(2n+1):hover td.Emergency {
  1562.     background: url(../../osta/img/priority-pattern-overlay.png) #fc6872!important;
  1563. }
  1564. td.High,
  1565. table.list tbody tr:hover td.High,
  1566. table.list tbody tr:nth-child(2n+1):hover td.High {
  1567.     background: url(../../osta/img/priority-pattern-overlay.png) #e5bc61!important
  1568. }
  1569. td.Normal,
  1570. table.list tbody tr:hover td.Normal,
  1571. table.list tbody tr:nth-child(2n+1):hover td.Normal {
  1572.     background: url(../../osta/img/priority-pattern-overlay.png) #a5cb59!important;
  1573. }
  1574. td.Low,
  1575. table.list tbody tr:hover td.Low,
  1576. table.list tbody tr:nth-child(2n+1):hover td.Low {
  1577.     background: url(../../osta/img/priority-pattern-overlay.png) #5bb3f5!important;
  1578. }
  1579. table.list tbody tr.highlight td {
  1580.     /* background: #ddd !important; */
  1581. }
  1582. table.list tbody tr.highlight td {
  1583.     border-top: .1px solid #aaa !important;
  1584.     border-bottom: .1px solid #aaa !important;
  1585.     background-color: #ddd;
  1586. }
  1587. td.priority {
  1588.     margin: 0!important;
  1589.     padding: 0!important;
  1590.     width: 14px;
  1591.     overflow: hidden;
  1592.     border-left: 1px solid #DCDCDC!important;
  1593. }
  1594. td.priority a {
  1595.     border-collapse: collapse;
  1596.     display: block;
  1597.     text-decoration: none;
  1598.     font-size: 1px;
  1599.     margin: 0!important;
  1600.     height: 34px;
  1601.     width: 15px;
  1602. }
  1603. .priority-popup {
  1604.     font-size: 17px;
  1605.     line-height: 30px;
  1606. }
  1607. .tip_content h2,
  1608. .priority-popup h3 {
  1609.     margin: 4px 0 9px 0; /*conflicts with Status link on individual Ticket margin: */
  1610.     color: #777777;
  1611.     font-weight: 400;
  1612.     font-size: 20px;
  1613. }
  1614. .tip_content.tickets h2 {
  1615.     margin: 0;
  1616. }
  1617. .priority-popup input[type="radio"] {
  1618.     margin: 0 5px 0 0;
  1619. }
  1620. .color {
  1621.     float: left;
  1622.     margin-right: 5px;
  1623.     padding: 0 0 0 0;
  1624.     border-bottom: 6px solid #fff;
  1625. }
  1626. div#priority-4,
  1627. div#priority-3,
  1628. div#priority-2,
  1629. div#priority-1 {
  1630.     clear: both;
  1631. }  
  1632. div#priority-4 .color,
  1633. div#priority-3 .color,
  1634. div#priority-2 .color,
  1635. div#priority-1 .color {
  1636.     width: 10px;
  1637.     height: 24px;
  1638.     position: relative;
  1639.     top: 4px;
  1640. }
  1641. td.priority.Emergency a {
  1642.     color: #fc6872;
  1643. }
  1644. div#priority-4 .color {
  1645.     background: #fc6872;
  1646. }
  1647. td.priority.High a {
  1648.     color: #e5bc61;
  1649. }
  1650. div#priority-3 .color {
  1651.     background: #e5bc61;
  1652. }
  1653. td.priority.Normal a {
  1654.     color: #a5cb59;
  1655. }
  1656. div#priority-2 .color {
  1657.     background: #a5cb59;
  1658. }
  1659. div#priority-1 .color {
  1660.     background: #5bb3f5;
  1661. }
  1662. .priority-levels {
  1663.     display: flex;
  1664. }
  1665. .priority-levels .group {
  1666.     margin: 0 40px 0 0;
  1667. }
  1668. .priority-levels .group .input-wrap {
  1669.     float: left;
  1670.     margin: 3px 0 0 0;
  1671. }
  1672.  
  1673.  
  1674. td.osta-ticket-action {
  1675.     cursor: url(../../osta/icons/edit.png) 10 15, url(../../osta/icons/edit.svg), pointer!important;
  1676.     padding: 0 !important; 
  1677. }
  1678. div.body #msg_warning,
  1679. div.body #msg_error,
  1680. div.body #msg_notice,
  1681. div.body #msg_alert {
  1682.     margin: 0 0 8px 0;
  1683. }
  1684.  
  1685. /* ==========================================================================
  1686.  TICKET VIEW - 2019
  1687. ========================================================================== */
  1688. input.ckb {
  1689.     margin: 0 auto;
  1690. }
  1691. table.list tbody td.osta_username {
  1692.     font-size: 14px;
  1693. }
  1694. th.osta_priority,
  1695. th.osta_priority a {
  1696.     width: 16px;
  1697. }
  1698. th.osta_priority a {
  1699.     text-shadow: initial !important;
  1700.     font-size: 0 !important;
  1701. }
  1702. table.list thead th.osta_priority a {
  1703.     padding: 0;
  1704.     height: 39px;
  1705. }
  1706. table.list tbody tr.highlight td.osta_priority {
  1707.     filter: grayscale(90%);
  1708. }
  1709. table.list tbody tr.highlight td.osta_priority_emergency {
  1710.     filter: grayscale(100%) brightness(125%);
  1711. }
  1712. table.list tbody td.osta_priority {
  1713.     padding: 0;
  1714.     border: 2px solid #fff !important;
  1715.     border-top: 1px solid #fff !important;
  1716.     border-bottom: 1px solid #fff !important;  
  1717. }
  1718. td.osta_priority.osta_priority_emergency {
  1719.     background: url(../img/priority-pattern-overlay.png) #fc6872!important;
  1720. }
  1721. td.osta_priority_high {
  1722.     background: url(../img/priority-pattern-overlay.png) #e5bc61!important;
  1723. }
  1724. td.osta_priority_normal {
  1725.     background: url(../img/priority-pattern-overlay.png) #a5cb59!important;
  1726. }
  1727. td.osta_priority_low {
  1728.     background: url(../img/priority-pattern-overlay.png) #5bb3f5!important;
  1729. }
  1730. td.osta_priority div {
  1731.     display: none;
  1732. }
  1733.  
  1734. /* temp mobile solution - delete once Priority colors are back in mobile view */
  1735. td.cursor.priority {
  1736.     background: #bbb !important;
  1737. }
  1738.  
  1739. /* ==========================================================================
  1740.  INPUTS
  1741. ========================================================================== */
  1742. select {
  1743.     -webkit-appearance: none;
  1744.     -moz-appearance: none;
  1745.     appearance: none;
  1746.     -moz-border-radius: 3px;
  1747.     -webkit-border-radius: 3px;
  1748.     border-radius: 3px;
  1749.     background: url(../../osta/svg/chevron-down-thin.svg) no-repeat;
  1750.     background-position: right 4px center!important;
  1751.     background-size: 20px 20px;
  1752.     background-color: #fff;
  1753.     color: #424242;
  1754.     border: .5px solid #bfbfbf !important;
  1755.     height: 32px;
  1756.     min-width: 305px;
  1757.     position: relative;
  1758.     top: -1px;
  1759.     padding: 0 17px 0 8px !important;
  1760.     font-family: 'Open Sans', sans-serif;
  1761. }
  1762. .rtl select {
  1763.     background-position: left 5px center!important;
  1764.     padding: 0 8px 0 0 !important;
  1765. }
  1766. input[type=text], input[type=password], textarea, input {
  1767.     min-width: 100px;
  1768.     margin: 3px 0 3px 0; /*target (Staff login page)*/
  1769.     height: 32px;
  1770.     font-size: 14px;
  1771.     font-family: 'Open Sans', sans-serif;
  1772.     padding: 0 0 0 8px;
  1773.     border: .5px solid #bfbfbf;
  1774. }
  1775. textarea {
  1776.     padding: 7px 0 0 8px;
  1777.     height: initial;   
  1778. }
  1779. .rtl input[type=text], .rtl input[type=password], .rtl textarea, .rtl input {
  1780.     padding: 0 8px 0 0;
  1781. }
  1782. input[type="button"], input[type="reset"], input[type="submit"] {
  1783.     color: #898989;
  1784.     border: .5px solid #898989;
  1785.     padding: 8px 26px !important;
  1786.     height: unset;
  1787. }
  1788. input[type="submit"], input[type="reset"], input[type="button"], .action-button, .button, button, button.link.button, input[type="button"] {
  1789.     border-radius: 3px;
  1790.     -moz-box-shadow: none;
  1791.     -webkit-box-shadow: none;
  1792.     box-shadow: none;
  1793.     text-shadow: none;
  1794.     /*margin: 0;*/
  1795.     padding: 6px 16px;
  1796.     color: #898989;
  1797.     cursor: pointer;
  1798. }
  1799. input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .action-button:hover, .button:hover, button:hover, button.link.button:hover, input[type="button"]:hover {
  1800.     /*padding: 6px 16px;*/ /*target*/
  1801.     background: #ccd1d6;
  1802.     color: #3b4450;
  1803.     border: .5px solid #8c9aac;
  1804. }
  1805. a.green.button {
  1806.     background: #fff;
  1807.     border: .5px solid #b9b9b9;
  1808. }
  1809. .green.button:hover {
  1810.     background: #ffffff !important;
  1811.     border: .5px solid #8c9aac !important;
  1812.     color: #3b4450 !important;
  1813.     box-shadow: unset;
  1814. }
  1815. form[action="profile.php"] .action-button,
  1816. form[action="profile.php"] .action-button:hover {
  1817.     /*height: 40px;*/ /*target*/
  1818. }
  1819. input[type="submit"], input[type="reset"], input[type="button"], button, button.link.button, input[type="button"] {
  1820.     will-change: background;
  1821.     transition: all 0.3s ease-in-out;
  1822.     font-family: 'Open Sans', sans-serif !important;   
  1823. }
  1824. form#login input[type="text"],
  1825. form#login input[type="password"] {
  1826.     margin: unset;
  1827. }
  1828. .action-button {
  1829.     margin: 0;
  1830. }
  1831. input.translatable {
  1832.     height: 32px;
  1833.     width: 405px;
  1834.     border: .5px solid #bfbfbf;
  1835.     position: relative;
  1836.     top: -1px;
  1837.     color: #424242;
  1838. }
  1839. input[type="text"].translatable {
  1840.     border-right: initial !important;
  1841. }
  1842. div.translatable {
  1843.     border: .5px solid #bbb;
  1844.     border-right: .5px solid #bbb;
  1845.     border-radius: 3px;
  1846. }
  1847. .input.attached {
  1848.     height: 32px;
  1849. }
  1850. .input.attached input {
  1851.     min-width: 169px;
  1852.     height: 32px;
  1853.     font-size: 14px;
  1854.     font-family: 'Open Sans', sans-serif;
  1855.     padding: 0 0 0 8px;
  1856.     border: .5px solid #bfbfbf;
  1857.     border-right: 0;
  1858.     float: left;   
  1859. }
  1860. .rtl .input.attached input {
  1861.     padding: 0 8px 0 0;
  1862. }
  1863. input#user-email {
  1864.     margin: 0 0 4px 0!important;
  1865. }
  1866. .button.attached {
  1867.     margin-left: -4px;
  1868.     margin-right: -4px;
  1869.     margin: 0 -4px 5px -4px;
  1870.     box-shadow: none !important;
  1871.     border: .5px solid #bfbfbf !important;
  1872.     border-left: 0 !important;
  1873.     border-radius: 0 3px 3px 0;
  1874.     float: left;
  1875. }
  1876. .banlist .button.attached {
  1877.     margin: 3px -4px 5px -4px;
  1878. }
  1879. .input.attached .button.attached {
  1880.     height: 100%;
  1881.     box-sizing: border-box;
  1882.     border: unset !important;
  1883. }
  1884. .button.attached:after {
  1885.     clear:both;
  1886. }
  1887. a.attached.button:hover {
  1888.     border-left: 0;
  1889. }
  1890. a.attached.button i.icon-search {
  1891.     top: 5px;
  1892. }
  1893. input[type="radio"] {
  1894.     min-width: initial;
  1895.     margin: 0 3px 0 0;
  1896.     width: 16px;
  1897.     height: 15px;
  1898.     position: relative;
  1899.     top: 3px;
  1900.     -webkit-appearance: radio !important;
  1901. }
  1902. .rtl input[type="radio"] {
  1903.     margin: 0 0 0 3px;
  1904. }
  1905. input[name="title"] {
  1906.     margin: 0 !important;
  1907. }
  1908. td.required + td input,
  1909. td.required + td select,
  1910. td.required + td .select2-selection,
  1911. div#definition td.required + td div.translatable,
  1912. form[action*="change-password"] input[type="text"],
  1913. form[action*="change-password"] input[type="password"] {
  1914.     border-right: 2px solid red !important;
  1915. }
  1916. #definition td.required + td input {
  1917.     border-right: 0 !important;
  1918. }
  1919. select[name="source"] {
  1920.     padding-left: 5px;
  1921. }
  1922. .rtl select[name="source"] {
  1923.     padding-right: 5px;
  1924. }
  1925. .settings .error {
  1926.     /*display: none;*/ /*why?!*/
  1927. }
  1928. input[name$="-ext"] {
  1929.     min-width: 30px;
  1930.     width: 60px;
  1931. }
  1932. input[placeholder="Keywords � Optional"] {
  1933.     padding: 0 0 0 6px !important;
  1934. }
  1935. .rtl input[placeholder="Keywords � Optional"] {
  1936.     padding: 0 6px 0 0 !important;
  1937. }
  1938. #new-user-form input[type="text"],
  1939. #new-user-form input[type="email"] {
  1940.     width: 320px;
  1941. }
  1942. #new-user-form input[size="5"] {
  1943.     width: 56px !important;
  1944. }
  1945. #new-user-form select {
  1946.     min-width: 91px;
  1947. }
  1948. #sequences .manage-buttons {
  1949.     margin-right: 80px;
  1950. }
  1951. .rtl #sequences .manage-buttons {
  1952.     margin-left: 80px;
  1953. }
  1954. .settings input[type="file"] {
  1955.     height: 22px;
  1956.     margin: 0;
  1957.     padding: 5px;
  1958. }
  1959. #sequences div[style="display:inline-block"] {
  1960.     font-size: 16px !important;
  1961.     line-height: 16px;
  1962. }
  1963. input[type="file"] {
  1964.     padding: 6px 0 29px 6px;
  1965.     background: #d7f4ff;
  1966.     height: 0; 
  1967. }
  1968. .buttons input {
  1969.     min-width: 100px;
  1970. }
  1971. #theme-save-button:hover {
  1972.     background: #fff;
  1973. }
  1974. button#do_search,
  1975. input[type="submit"],
  1976. input[type="reset"],
  1977. input[type="button"],
  1978. form.-redactor-container button[type=submit] {
  1979.     margin: 0 4px;
  1980.     box-shadow: none;
  1981.     padding: 9px 30px !important;
  1982.     color: #515d6d;
  1983.     border: initial !important;
  1984.     background: #dcdfe2;
  1985.     letter-spacing: 1.6px;
  1986.     font-weight: 700;
  1987. }
  1988. button#do_search {
  1989.     padding: 9px 43px !important;
  1990. }
  1991. .dialog input[value="Reset"] {
  1992.     display: none;
  1993. }
  1994. #user-form form.user input[type="tel"],
  1995. #user-form form.user input[type="text"] {
  1996.     min-width: 222px;
  1997. }
  1998. td input[type="tel"] + input {
  1999.     width: 50px !important;
  2000.     min-width: 50px !important;
  2001. }
  2002. #basic_search input[type="submit"] {
  2003.     border: .5px solid rgba(166, 182, 166, 0.7294117647058823) !important;
  2004. }
  2005. .save.pending,
  2006. input[type="submit"],
  2007. input[value="Create"],
  2008. input[style="color: rgb(255, 0, 0);"],
  2009. form.-redactor-container button[type=submit] {
  2010.     color: #3c763d !important;
  2011.     background-color: #d0e9c6;
  2012.     box-shadow: unset;
  2013.     border: initial !important;
  2014. }
  2015. input[style="color: rgb(255, 0, 0);"] {
  2016.     box-shadow: unset;
  2017.     -webkit-animation: async-save-warning-pulse 1.5s ease-in-out infinite;
  2018.     animation: async-save-warning-pulse 1.5s ease-in-out infinite;
  2019. }
  2020. @-webkit-keyframes async-save-warning-pulse {
  2021.     0%{box-shadow: 0 0 0 0 #75a4b1, 0 0 0 0 rgba(77, 130, 85, 0.44)}
  2022.     50%{box-shadow: 0 0 0 0 #75a4b1, 0 0 0 4px rgba(77, 130, 85, 0.44)}
  2023.     100%{box-shadow: 0 0 0 0 #75a4b1, 0 0 0 0 rgba(77, 130, 85, 0.44)}
  2024. }
  2025. @keyframes async-save-warning-pulse {
  2026.     0%{box-shadow: 0 0 0 0 #75a4b1, 0 0 0 0 rgba(77, 130, 85, 0.44)}
  2027.     50%{box-shadow: 0 0 0 0 #75a4b1, 0 0 0 4px rgba(77, 130, 85, 0.44)}
  2028.     100%{box-shadow: 0 0 0 0 #75a4b1, 0 0 0 0 rgba(77, 130, 85, 0.44)}
  2029. }
  2030. input[type="submit"]:hover,
  2031. input[value="Create"]:hover,
  2032. .save.pending:hover {
  2033.     color: #2a3e2a !important;
  2034.     box-shadow: unset;
  2035. }
  2036. .button:hover,
  2037. .button:active,
  2038. .save.pending:hover,
  2039. button#do_search:hover,
  2040. input[type="reset"]:hover,
  2041. input[type="button"]:hover,
  2042. input[type="button"]:active,
  2043. input[type="reset"]:hover,
  2044. input[type="reset"]:active,
  2045. button.link.button:active,
  2046. form.-redactor-container button[type=submit]:hover,
  2047. form.-redactor-container button[type=submit]:active {
  2048.     box-shadow: unset;
  2049.     border: initial !important;
  2050.     background: #c9cdd0;
  2051.     color: #343a42;
  2052.     /* height: unset; */ /*target*/
  2053. }
  2054. .action-button:hover,
  2055. .action-button:active {
  2056.     box-shadow: unset;
  2057.     background: #fff;
  2058. }
  2059. input.button[name="delete"]:hover {
  2060.     border: .5px solid #c61818 !important;
  2061.     color: #c61818 !important;
  2062.     background: #edd5d6 !important;
  2063. }
  2064. a.green.button.action-button.ticket-task-action {
  2065.     /* padding: 9px 30px !important; */ /* target */
  2066. }
  2067. .action-button.muted {
  2068.     box-shadow: none;
  2069. }
  2070. .action-button i {
  2071.     /*position: initial !important;*/
  2072.     /*background-position: 1px 1px;*/  /*whatever reason this is here, it needs to be targeted specifically*/ /*STILL NEEDED?!*/
  2073.     /*background-repeat: no-repeat;*/
  2074. }
  2075. .action-button i:hover {
  2076.     /*background-position: 1px 1px;*/  /*whatever reason this is here, it needs to be targeted specifically*/
  2077. }
  2078. .action-dropdown,
  2079. .noclick-dropdown {
  2080.     width: fit-content;
  2081. }
  2082. .action-dropdown ul li a > i {
  2083.     background-position: 0 0 !important;
  2084.     width: 20px !important;
  2085.     height: 20px !important;
  2086.     top: 6px;
  2087.     font-size: 21px;
  2088.     background-repeat: no-repeat !important;
  2089.     margin: 0 6px 0 0;
  2090. }
  2091. .rtl .action-dropdown ul li a > i {
  2092.     margin: 0 0 0 6px;
  2093. }
  2094. .action-dropdown ul li > a {
  2095.     line-height: 30px;
  2096. }
  2097. .rtl .action-dropdown ul.bleed-left li > a {
  2098.     padding-right: 8px;
  2099. }
  2100. #msg_info i.icon-info-sign {
  2101.     display: none;
  2102. }
  2103. .action-button i.icon-caret-down,
  2104. .action-button.muted i.icon-caret-down {
  2105.     border-left: .5px solid #ccc;
  2106.     float: right !important;
  2107.     padding: 0 0 0 4px;
  2108.     height: 21px;
  2109. }
  2110. .rtl .action-button i.icon-caret-down {
  2111.     border-right: initial;
  2112.     margin-left: 6px;
  2113.     margin-right: 0;
  2114. }
  2115. span.action-button {
  2116.     margin: 0 2px;
  2117. }
  2118.  
  2119. /*span.action-button[data-original-title="Change Status"] {
  2120.     margin-left: 0;
  2121. }*/
  2122. a#post-note,
  2123. .icon-mail-reply:before, .icon-reply:before {
  2124.     color: #128dbe;
  2125. }
  2126. a#post-note:hover {
  2127.     background-color: #fff;
  2128. }
  2129. a.attached.button:hover {
  2130.     background: #fff;
  2131.     background: -moz-linear-gradient(top, #fafafa 0%, #e7ebf0) #ffffff;
  2132.     background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e7e7e7)) #ffffff;
  2133. }
  2134. .link.button {
  2135.     background: #fff;
  2136.     border: .5px solid #b1b1b1;
  2137.     padding: 6px 16px;
  2138.     color: #b1b1b1;
  2139. }
  2140. .link.button:hover, .link.button:active  {
  2141.     background: #ccd1d6;
  2142.     color: #fff;   
  2143. }
  2144. .red.button.action-button {
  2145.     /*margin-right: 0;*/ /*whatever reason this is here, it needs to be targeted specifically*/
  2146. }
  2147. .red.button.action-button:hover > a [class^="icon-"] {
  2148.     color: #d01919;
  2149. }
  2150. .red.button:hover {
  2151.     box-shadow: none;
  2152.     color: #d01919;
  2153.     border: .5px solid #d01919 !important;
  2154.     background-color: #fff;
  2155.     height: 22px;  
  2156. }
  2157. button.red.button[name="delete"] {
  2158.     background: #fff;
  2159.     border-width: .5px !important;
  2160.     border: .5px solid #aa9e9e;
  2161.     box-shadow: unset;
  2162. }
  2163. button.red.button[name="delete"]:hover {
  2164.     background: #ffd9d9 !important;
  2165.     border: .5px solid #cd8f8f !important;
  2166. }
  2167. .button-text.advanced-search svg {
  2168.     width: 16px !important;
  2169.     height: 16px !important;
  2170.     position: relative;
  2171.     fill: #128dbe;
  2172.     top: 0 !important;
  2173.     left: 4px;
  2174.     margin: 2px 4px 0 0;
  2175.     float: right;
  2176. }  
  2177. .action-button.advanced-search.gray-light2 {
  2178.     margin-right: 0;
  2179.     margin-left: 8px;
  2180.     position: relative;
  2181.     /* right: -3px; */
  2182. }
  2183. .rtl .action-button.advanced-search.gray-light2 {
  2184.     right: 1px;
  2185. }
  2186. .button-text.advanced-search:hover > svg {
  2187.     fill: #0c5c7b;
  2188. }
  2189. .action-button:hover > i {
  2190.     /*color: #0c5c7b;*/ /*target*/
  2191. }
  2192. .action-button:hover > a [class^="icon-"] {
  2193.     color: #0c5c7b;
  2194. }
  2195. .action-button.danger {
  2196.     background: -moz-linear-gradient(top, #fafafa 0%, #e7ebf0) #ffffff;
  2197.     background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f3f3f3)) #ffffff;
  2198.     border: .5px solid #aaa;
  2199.     opacity: 1;
  2200. }
  2201. .action-button.danger:hover {
  2202.     background: #ef0d0d !important;
  2203. }
  2204. #content .pull-right .action-button.muted,
  2205. .action-button.muted[data-dropdown="#sort-dropdown"] {
  2206.     float: right;
  2207.     margin: 0 0 0 6px; /* sort button on ticket pages */
  2208. }
  2209. .rtl .action-button.muted[data-dropdown="#sort-dropdown"] {
  2210.     float: left;
  2211.     margin: 6.5px 6px 0 0; 
  2212. }
  2213. .tasks .action-button.muted[data-dropdown="#sort-dropdown"] {
  2214.     margin: 0 0 0 6px;
  2215. }
  2216. .valign-helper {
  2217.     margin-top: 48px !important;
  2218. }
  2219. button.translatable {
  2220.     margin: 1px 1px 0 0;
  2221.     background: unset;
  2222. }
  2223. input ~ button.translatable {
  2224.     width: 28px;
  2225.     height: 28px;
  2226.     padding: 0;
  2227. }
  2228. input ~ button.translatable:hover {
  2229.     background: #f7db94bd !important;
  2230.     border: initial;
  2231. }
  2232. input.translatable[value="Support"] {
  2233.     width: 247px !important;
  2234.     height: 30px !important;
  2235.     padding: 0 0 0 8px !important;
  2236. }
  2237. .button-text.advanced-search,
  2238. span.sort-button-text,
  2239. .pull-right.flush-right.page-top .action-button.muted {
  2240.     letter-spacing: initial;
  2241.     color: #585858;
  2242. }
  2243. button[type=submit],
  2244. input[type="submit"],
  2245. .primary.button {
  2246.     box-shadow: unset;
  2247. }
  2248. button[name="remove-users"] {
  2249.     background: #fff;
  2250. }
  2251. #user-info a.inline.button {
  2252.     padding: 6px 16px;
  2253.     margin: 0 0 0 10px;
  2254.     border: .5px solid #797777;
  2255. }
  2256. #user-info a.inline.button:hover {
  2257.     height: 22px;
  2258.     line-height: 22px;
  2259. }
  2260. .action-dropdown ul li > a > i[class^="icon-"]:before {
  2261.     top: 1px !important;
  2262.     margin: 0 10px 0 0 !important; 
  2263. }
  2264. .action-dropdown ul li > a:hover > i[class^="icon-"]:before {
  2265.     color: #fff !important;
  2266. }
  2267. #advanced-search i.icon-save {
  2268.     position: relative;
  2269.     top: 1px;
  2270.     margin-right: 6px !important;
  2271. }
  2272. button.save.button {
  2273.     background: #dcdfe2;
  2274. }
  2275. button.save.button:hover {
  2276.     background: #c9cdd0;
  2277. }
  2278. form#advsearch button#do_save { /*advanced ticket search*/
  2279.     color: #3c763d !important;
  2280.     background-color: #d0e9c6;
  2281.     padding: 9px 40px;
  2282.     font-family: 'Open Sans', sans-serif;
  2283.     font-size: 14px;
  2284.     font-weight: 700;
  2285. }
  2286. form#advsearch button#do_save:hover { /*advanced ticket search*/
  2287.     color: #2a3e2a !important;
  2288.     background: #ccd1d6;
  2289.     box-shadow: initial;   
  2290. }
  2291.  
  2292. /* ==========================================================================
  2293.  SVG ICONS - TWEAKS
  2294. ========================================================================== */
  2295. .action-button i {
  2296.     position: relative !important;
  2297.     top: 2px !important;
  2298.     left: 1px; 
  2299.     margin: 0 4px 0 0; 
  2300. }
  2301. i.icon-upload:before {
  2302.     top: 0;
  2303.     width: 32px;
  2304. }
  2305. i.icon-mail-reply {
  2306.     top: 1px !important;
  2307. }
  2308. .tip_content .links {
  2309.     border-top: .5px solid #ddd;
  2310. }
  2311. .tip_content i.icon-info-sign.faded {
  2312.     top: 0; /*target*/
  2313.     margin-right: 4px !important;
  2314. }
  2315. button.action-button.pull-right .icon-gear:before {
  2316.     top: -2px;
  2317. }
  2318. form[action="#sequence/manage"] i.icon-plus {
  2319.     float: initial;
  2320. }
  2321. input[type="submit"] i, input[type="reset"] i, input[type="button"] i, .action-button i, .button i {
  2322.     margin-right: 4px;
  2323. }
  2324.  
  2325. /* ==========================================================================
  2326.  TOOLTIPS
  2327. ========================================================================== */
  2328. .tooltip {
  2329.   position: absolute;
  2330.   z-index: 9999999;
  2331.   display: block;
  2332.   font-style: normal;
  2333.   font-weight: normal;
  2334.   letter-spacing: normal;
  2335.   line-break: auto;
  2336.   line-height: 1.428571429;
  2337.   text-align: left;
  2338.   text-align: start;
  2339.   text-decoration: none;
  2340.   text-shadow: none;
  2341.   text-transform: none;
  2342.   white-space: normal;
  2343.   word-break: normal;
  2344.   word-spacing: normal;
  2345.   word-wrap: normal;
  2346.   font-size: 12px;
  2347.   opacity: 0;
  2348.   filter: alpha(opacity=0);
  2349. }
  2350. .tooltip.in {
  2351.   opacity: 0.9;
  2352.   filter: alpha(opacity=90);
  2353. }
  2354. .tooltip.top {
  2355.   margin-top: -3px;
  2356.   padding: 5px 0;
  2357. }
  2358. .tooltip.right {
  2359.   margin-left: 3px;
  2360.   padding: 0 5px;
  2361. }
  2362. .tooltip.bottom {
  2363.   margin-top: 3px;
  2364.   padding: 5px 0;
  2365. }
  2366. .tooltip.left {
  2367.   margin-left: -3px;
  2368.   padding: 0 5px;
  2369. }
  2370. .tooltip-inner {
  2371.   max-width: 200px;
  2372.   padding: 3px 8px;
  2373.   color: #ffffff;
  2374.   text-align: center;
  2375.   background-color: #000000;
  2376.   border-radius: 4px;
  2377. }
  2378. .tooltip-arrow {
  2379.   position: absolute;
  2380.   width: 0;
  2381.   height: 0;
  2382.   border-color: transparent;
  2383.   border-style: solid;
  2384. }
  2385. .tooltip.top .tooltip-arrow {
  2386.   bottom: 0;
  2387.   left: 50%;
  2388.   margin-left: -5px;
  2389.   border-width: 5px 5px 0;
  2390.   border-top-color: #000000;
  2391. }
  2392. .tooltip.top-left .tooltip-arrow {
  2393.   bottom: 0;
  2394.   right: 5px;
  2395.   margin-bottom: -5px;
  2396.   border-width: 5px 5px 0;
  2397.   border-top-color: #000000;
  2398. }
  2399. .tooltip.top-right .tooltip-arrow {
  2400.   bottom: 0;
  2401.   left: 5px;
  2402.   margin-bottom: -5px;
  2403.   border-width: 5px 5px 0;
  2404.   border-top-color: #000000;
  2405. }
  2406. .tooltip.right .tooltip-arrow {
  2407.   top: 50%;
  2408.   left: 0;
  2409.   margin-top: -5px;
  2410.   border-width: 5px 5px 5px 0;
  2411.   border-right-color: #000000;
  2412. }
  2413. .tooltip.left .tooltip-arrow {
  2414.   top: 50%;
  2415.   right: 0;
  2416.   margin-top: -5px;
  2417.   border-width: 5px 0 5px 5px;
  2418.   border-left-color: #000000;
  2419. }
  2420. .tooltip.bottom .tooltip-arrow {
  2421.   top: 0;
  2422.   left: 50%;
  2423.   margin-left: -5px;
  2424.   border-width: 0 5px 5px;
  2425.   border-bottom-color: #000000;
  2426. }
  2427. .tooltip.bottom-left .tooltip-arrow {
  2428.   top: 0;
  2429.   right: 5px;
  2430.   margin-top: -5px;
  2431.   border-width: 0 5px 5px;
  2432.   border-bottom-color: #000000;
  2433. }
  2434. .tooltip.bottom-right .tooltip-arrow {
  2435.   top: 0;
  2436.   left: 5px;
  2437.   margin-top: -5px;
  2438.   border-width: 0 5px 5px;
  2439.   border-bottom-color: #000000;
  2440. }
  2441. .tooltip {
  2442.     font-family: "Open Sans", Helvetica, Arial, sans-serif !important;
  2443. }
  2444. .tooltip-inner {
  2445.     padding: 6px 10px !important;
  2446.     background-color: var(--header-bg) !important;
  2447.     color: var(--header-title) !important;
  2448. }
  2449. .tooltip.bottom {
  2450.     margin-top: 1px !important;
  2451. }
  2452. .tooltip.top {
  2453.     margin-top: 0 !important;
  2454. }
  2455. .tooltip.top .tooltip-arrow {
  2456.     border-top-color: var(--header-bg) !important; 
  2457. }
  2458. .tooltip.bottom .tooltip-arrow {
  2459.     border-bottom-color: var(--header-bg) !important;
  2460. }
  2461. #ticket-preview_container .ticket_info {
  2462.     border: initial;
  2463. }
  2464. #ticket-preview_container .ticket_info th {
  2465.     color: #4c5156 !important;
  2466.     font-weight: 500;
  2467. }
  2468. .ticket_info .preview {
  2469.     float: none;
  2470.     padding: 0;
  2471. }
  2472. a.manage-collaborators.preview {
  2473.     border: initial !important;
  2474. }
  2475. #ticket-preview_container .tab_content {
  2476.     background: #fff;
  2477.     border: .5px solid #aaa;
  2478.     border-radius: 6px;
  2479. }
  2480. .tip_menu {
  2481.     margin: 20px 0 0 0;
  2482.     border-top: .5px solid #aaa;
  2483. }
  2484. .tip_menu li a:hover {
  2485.     color: #128dbe;
  2486. }
  2487. .tip_menu li a {
  2488.     color: #128dbe;
  2489.     display: block;
  2490.     width: auto;
  2491.     float: left;
  2492.     padding: 0 16px;
  2493.     border-right: .5px solid #ffffff;  
  2494. }
  2495.  
  2496. /* ==========================================================================
  2497.  ALERTS: ERRORS, NOTICES AND WARNINGS
  2498. ========================================================================== */
  2499. body.tickets-page div#popup .error {
  2500.     display: none;
  2501. }
  2502.  
  2503. /* ==========================================================================
  2504.  TICKET OPEN ticket-open.inc.php
  2505. ========================================================================== */
  2506. .dialog h3 {
  2507.     color: #777777;
  2508.     font-family: 'Product Sans', 'Open Sans', sans-serif;
  2509.     font-weight: 400;
  2510.     font-size: 25px;
  2511. }
  2512. .dialog hr {
  2513.     visibility: hidden;
  2514. }
  2515. input#user-search {
  2516.     font-size: 14px;
  2517. }
  2518. #the-lookup-form #msg_info {
  2519.     margin: 0 0 20px 0;
  2520.     /*padding: 14px 10px 14px 16px;*/ /*Conflicts with Tickets > Open New > Lookup*/
  2521. }
  2522. .form_table th,
  2523. div.section-break {
  2524.     text-align: left;
  2525.     background: #eee;
  2526.     background-color: initial;
  2527.     border: initial;
  2528.     padding: 4px 10px 10px 0;
  2529.     font-size: 126%;
  2530.     color: #777777;
  2531.     /*font-family: 'Lato';*/
  2532.     font-weight: 400;
  2533. }
  2534.  
  2535.  
  2536. div.section-break {
  2537.     padding-top: 0 !important;
  2538. }
  2539.  
  2540. .form-header.section-break {
  2541.     margin: 20px 0 15px 0;
  2542. }
  2543. .form-header.section-break h3 {
  2544.     margin: 0;
  2545.     font-family: 'Open Sans', sans-serif;  
  2546. }
  2547. .form-header.section-break em p {
  2548.     font-size: 14px;
  2549.     margin: 0;
  2550. }
  2551.  
  2552.  
  2553.  
  2554.  
  2555. .form_table .form-instructions {
  2556.     font-size: 14px;
  2557. }
  2558. .form_table .form-instructions p {
  2559.     margin: 0;
  2560. }
  2561. .form_table {
  2562.     border: initial;
  2563.     padding-top: 10px !important;  
  2564. }
  2565. .form_table.fixed .form_table {
  2566.     padding-top: 0 !important; 
  2567. }
  2568. .form_table.fixed .form_table i.icon-retweet,
  2569. .form_table.fixed .form_table i.icon-plus {
  2570.     width: 19px;
  2571.     top: 1px;
  2572.     right: 0;
  2573.     padding: 0;
  2574.     margin: 0;
  2575.     padding: 0 6px 0 0;
  2576.     float: left;
  2577. }
  2578. .form_table.settings_table td textarea {
  2579.     padding: 8px 0 0 8px;
  2580. }
  2581. .form_table.settings_table .indented {
  2582.     padding-left: 0;
  2583. }
  2584. .form_table td {
  2585.     border-bottom: initial;
  2586. }
  2587. h3.title,
  2588. .form_table th em,
  2589. .thread-body.bleed h3 {
  2590.     display: block;
  2591.     color: #777;
  2592.     font-style: initial;
  2593.     font-size: 18px;
  2594.     margin-top: 10px;
  2595.     font-weight: 500;
  2596.     font-family: 'Open Sans', sans-serif;
  2597. }
  2598. .form_table th em strong,
  2599. .thread-body.bleed h3 {
  2600.     font-weight: 500;
  2601. }
  2602. .form_table tbody tr:first-child th em {
  2603.     margin: 0;
  2604. }
  2605. .form_table th em b {
  2606.     font-weight: normal;
  2607. }
  2608. .form_table .required {
  2609.     font-weight: 500;
  2610. }
  2611. .thread-body h1,  /*Open Ticket page */
  2612. .thread-body h2,
  2613. .thread-body h3 {
  2614.     margin-top: 20px;
  2615.     margin-bottom: 0;
  2616. }
  2617. .thread-body.bleed {
  2618.     background: initial;
  2619. }
  2620. .time-zone-msg {
  2621.     color: #777;
  2622.     font-style: italic;
  2623.     font-size: 11px;
  2624. }
  2625. input#user-email {
  2626.     width: 336px;
  2627. }
  2628. input#user-name {
  2629.     width: 360px;
  2630. }
  2631. input[type="checkbox"] {
  2632.     min-width: initial;
  2633. }
  2634. #dynamic-form select {
  2635.     width: 330px;
  2636.     border: .5px solid #bfbfbf;
  2637. }
  2638. select#time {
  2639.     padding-right: 29px !important;
  2640. }
  2641. table.grid.form select[name*="time"] {
  2642.     width: 173px !important;
  2643. }
  2644. .rtl select#time {
  2645.     padding-left: 29px !important;
  2646. }
  2647. #response_options input[type=text],
  2648. #response_options textarea:not(.richtext) {
  2649.     border: .5px solid #bfbfbf;
  2650. }
  2651. form[action="tickets.php?a=open"] table.form_table.fixed tbody th[colspan="2"]:nth-child(1) {
  2652.     padding-top: 25px !important;
  2653. }
  2654. form[action="tickets.php?a=open"] table.form_table.fixed tbody:nth-child(2) th[colspan="2"]:nth-child(1) {
  2655.     padding-top: 0 !important;
  2656. }
  2657. .tickets .form_table.fixed,
  2658. .tickets-page .tickets .form_table {
  2659.     width: 100% !important;
  2660. }
  2661. .tickets .form_table {
  2662.     width: 660px;
  2663. }
  2664. .form_table.fixed select,
  2665. .form_table.fixed .select {
  2666.     width: 320px;
  2667. }
  2668. .form_table.fixed label {
  2669.     margin-right: 20px;
  2670. }
  2671. tr#ccRow td.userRow-button a.inline.button,
  2672. tr#userRow td.userRow-button a.inline.button,
  2673. .form_table.fixed .form_table .button {
  2674.     padding: 4px 0 4px 10px !important; /* Staff Open a New Ticket buttons */
  2675. }
  2676. .form_table.fixed .button,
  2677. .form_table.fixed .button:hover,
  2678. .form_table.fixed .button:active {
  2679.     border: .5px solid #bfbfbf !important;
  2680.     /* background-color: #e4e4e4 !important; */
  2681.     background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f3f3f3)) #ffffff;   
  2682. }
  2683.  
  2684. #time-zone td {
  2685.     padding-top: 0;
  2686.     padding-bottom: 0;
  2687.     position: relative;
  2688.     top: -5px;
  2689. }
  2690. input.hasDatepicker ~ select {
  2691.     width: 103px !important;
  2692. }
  2693. .tickets a.inline.button {
  2694.     min-width: 95px;
  2695. }
  2696.  
  2697. /* ==========================================================================
  2698.  TABLES - MISC
  2699. ========================================================================== */
  2700. table.custom-info th,
  2701. td[style="border-bottom: 1px dotted black"] {
  2702.     border: none !important;
  2703. }
  2704. table.custom-info td,
  2705. td[style="width:30%;border-bottom: 1px dotted #ccc"] {
  2706.     border-bottom: .5px solid rgba(0,0,0,0.1);
  2707. }
  2708.  
  2709. /* ==========================================================================
  2710.  LOADING ANIMATION
  2711. ========================================================================== */
  2712. #loading {
  2713.     display: none; 
  2714.     vertical-align: middle;
  2715.     border: initial;
  2716.     padding: 0;
  2717.     width: 100px;
  2718.     height: 100px;
  2719.     background: initial;
  2720.     position: fixed;
  2721.     z-index: 3000;
  2722.     box-shadow: initial;
  2723.     left: calc(50% - 50px) !important;
  2724.     top: 50% !important;
  2725. }
  2726. #loading h1, #upgrading h1 {
  2727.     display: none;
  2728. }
  2729. .loading-icon {
  2730.     padding: 0;
  2731.     margin-left: -8px;
  2732.     margin-top: 8px;
  2733.     background-color: #fff;
  2734.     height: 18px;
  2735.     width: 18px;
  2736.     display: block;
  2737.     background-size: contain;
  2738.     border: 4px solid #fff;
  2739.     border-radius: 50%;
  2740.     position: fixed;
  2741.     z-index: 3000;
  2742. }
  2743. i.icon-spinner {
  2744.     margin: 0 auto !important;
  2745.     padding: 0 !important;
  2746.     width: 100px;
  2747.     height: 100px;
  2748. }
  2749. i.icon-spinner:before {
  2750.     display: block !important;
  2751. }
  2752. #loading i.icon-spinner:before,
  2753. #upgrading i.icon-spinner:before {
  2754.     background-image: url(../../osta/img/loading.svg);
  2755.     content: ' ';
  2756.     background-position: center !important;
  2757.     border-radius: 50%;
  2758.     vertical-align: middle;
  2759.     width: 100px !important;
  2760.     height: 100px !important;
  2761.     background-size: 100px 100px !important;
  2762.     top: 0 !important;
  2763. }
  2764. .icon-3x {
  2765.     font-size: initial;
  2766. }
  2767. .spin {
  2768.     -webkit-animation: gi-spin 1.5s infinite linear;
  2769.     animation: gi-spin 1.5s infinite linear;
  2770. }
  2771. @-webkit-keyframes gi-spin {
  2772.   0% {
  2773.     -webkit-transform: rotate(0deg);
  2774.             transform: rotate(0deg); }
  2775.   100% {
  2776.     -webkit-transform: rotate(359deg);
  2777.             transform: rotate(359deg); }
  2778. }
  2779. @keyframes gi-spin {
  2780.   0% {
  2781.     -webkit-transform: rotate(0deg);
  2782.             transform: rotate(0deg); }
  2783.   100% {
  2784.     -webkit-transform: rotate(359deg);
  2785.             transform: rotate(359deg); }
  2786. }
  2787. #popup,
  2788. .modal.fade .modal-dialog {
  2789.     opacity: 0;
  2790.     animation-name: lightSpeedIn;
  2791.     animation-duration: 450ms;
  2792.     animation-timing-function: linear;
  2793.     animation-fill-mode: forwards;
  2794. }
  2795. @-webkit-keyframes lightSpeedIn {
  2796.   0% {
  2797.     -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
  2798.             transform: translate3d(100%, 0, 0) skewX(-30deg);
  2799.     opacity: 0;
  2800.   }
  2801.  
  2802.   60% {
  2803.     -webkit-transform: skewX(20deg);
  2804.             transform: skewX(20deg);
  2805.     opacity: 1;
  2806.   }
  2807.  
  2808.   80% {
  2809.     -webkit-transform: skewX(-5deg);
  2810.             transform: skewX(-5deg);
  2811.     opacity: 1;
  2812.   }
  2813.  
  2814.   100% {
  2815.     -webkit-transform: none;
  2816.             transform: none;
  2817.     opacity: 1;
  2818.   }
  2819. }
  2820.  
  2821. @keyframes lightSpeedIn {
  2822.   0% {
  2823.     -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
  2824.             transform: translate3d(100%, 0, 0) skewX(-30deg);
  2825.     opacity: 0;
  2826.   }
  2827.  
  2828.   60% {
  2829.     -webkit-transform: skewX(20deg);
  2830.             transform: skewX(20deg);
  2831.     opacity: 1;
  2832.   }
  2833.  
  2834.   80% {
  2835.     -webkit-transform: skewX(-5deg);
  2836.             transform: skewX(-5deg);
  2837.     opacity: 1;
  2838.   }
  2839.  
  2840.   100% {
  2841.     -webkit-transform: none;
  2842.             transform: none;
  2843.     opacity: 1;
  2844.   }
  2845. }
  2846.  
  2847. #popup,
  2848. .modal.fade .modal-dialog {
  2849.   -webkit-animation-name: lightSpeedIn;
  2850.           animation-name: lightSpeedIn;
  2851.   -webkit-animation-timing-function: ease-out;
  2852.           animation-timing-function: ease-out;
  2853. }
  2854.  
  2855. /* ==========================================================================
  2856.  DASHBOARD
  2857. ========================================================================== */
  2858. .dashboard div[style="min-height:25px;"],
  2859. .directory div[style="min-height:25px;"] {
  2860.     float: right;
  2861.     position: relative;
  2862.     top: 1px;
  2863.     right: -13px;
  2864. }
  2865. .dashboard div[style="min-height:25px;"] {
  2866.     top: -6px;
  2867. }
  2868. .directory div[style="min-height:25px;"] input[type="text"] {
  2869.     margin: 0 6px 0 0;
  2870.     height: 30px;
  2871. }
  2872. .directory div[style="min-height:25px;"] .select2.select2-container {
  2873.     margin: 0;
  2874.     height: 35px;
  2875. }
  2876. .directory div[style="min-height:25px;"] input[type="submit"] {
  2877.     position: relative;
  2878.     top: -3px;
  2879.     height: 20px;
  2880.     padding: 4px 0 6px 0 !important;
  2881.     margin: 0 -11px 0 -6px;
  2882. }
  2883. .directory div[style="min-height:25px;"] input[type="text"] {
  2884.     margin: 0 4px 0 0;
  2885. }
  2886. form[action="directory.php"] input[type="submit"] {
  2887.     padding: 5px 16px !important;
  2888. }
  2889. #ticket-count {
  2890.     float: right;
  2891.     position: relative;
  2892.     top: 10px;
  2893. }
  2894. #user-profile .floating-options i.icon-edit, #user-profile .floating-options i.icon-share {
  2895.     /*padding: 3px !important;*/
  2896. }
  2897. table.list thead th:first-child a.desc {
  2898.     border-radius: 6px 0 0 0;
  2899. }
  2900. .directory table.list td {
  2901.     font-size: 13px !important;
  2902. }
  2903. .table tr.header {
  2904.     border-bottom: 0;
  2905. }
  2906. .thread-body i {
  2907.     width: 100%;
  2908. }
  2909. input.staff-username.typeahead {
  2910.     margin: 0;
  2911. }
  2912. .table tr:not(:last-child):not(.header) {
  2913.     border-bottom: 0;
  2914. }
  2915. .tab_content:not(.left) {
  2916.     padding: 10px;
  2917. }
  2918. .ui-datepicker-trigger:after {
  2919.     content: ' ';
  2920.     background-image: url(../icons/calendar-clock.svg);
  2921.     background-repeat: no-repeat;
  2922.     width: 22px;
  2923.     height: 22px;
  2924.     position: relative;
  2925.     opacity: 1;
  2926.     visibility: visible;
  2927.     display: inline-block;
  2928.     top: 3px;
  2929.     left: 2px;
  2930.     background-size: 20px;
  2931. }
  2932. .ui-datepicker-trigger:hover:after {
  2933.     opacity: 1;
  2934. }
  2935. .ui-datepicker-trigger {
  2936.     width: 30px;
  2937. }
  2938. img[src="./images/cal.png"] {
  2939.     display: none;
  2940. }
  2941. button.ui-datepicker-trigger {
  2942.     border: .5px solid #aaa;
  2943.     display: inline;
  2944.     height: 32px;
  2945.     width: 40px;
  2946.     top: 3px;
  2947.     margin-left: 8px;
  2948.     background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f3f3f3)) #ffffff;   
  2949. }
  2950. button.ui-datepicker-trigger:hover {
  2951.     padding: 0;
  2952. }
  2953. .rtl button.ui-datepicker-trigger {
  2954.     margin-right: 8px;
  2955.     margin-left: 0;
  2956. }
  2957. div[style="min-height:25px;"] {
  2958.     float: right;
  2959. }
  2960. .directory h2 {
  2961.     margin-bottom: 26px;
  2962. }
  2963. .directory select#did {
  2964.     min-width: 184px;
  2965. }
  2966. .dashboard button.link.button {
  2967.     padding: 8px 12px;
  2968.     border-color: #d3d3d3;
  2969. }
  2970. .dashboard button.link.button:hover {
  2971.     padding: 8px 12px;
  2972.     border: .5px solid #d3d3d3;
  2973. }
  2974. .dashboard input.hasDatepicker {
  2975.     min-width: 100px !important;
  2976.     margin: 0;
  2977.     height: 30px;
  2978. }
  2979. .dashboard button.ui-datepicker-trigger {
  2980.     top: 4px;
  2981. }
  2982. .dashboard .select2-selection.select2-selection--single {
  2983.     margin: 0 0 2px 0;
  2984.     height: 32px;
  2985. }
  2986. .dashboard button.green.button.action-button.muted {
  2987.     background: #fff;
  2988.     padding: 1px 9px 7px 14px;
  2989.     top: -1px;
  2990.     margin: 0 -6px 0 4px !important;
  2991. }
  2992. .dashboard button.green.button.action-button:before {
  2993.     content: "";
  2994.     position: relative;
  2995.     margin: 4px 0 0 0;
  2996.     display: inline-block;
  2997.     top: 3px;
  2998.     height: 16px;
  2999.     width: 16px;
  3000.     background-size: 18px;
  3001.     background-position: center;
  3002.     left: initial;
  3003.     right: initial;
  3004.     background-color: initial;
  3005. background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23128dbe' d='M17.65%2C6.35C16.2%2C4.9 14.21%2C4 12%2C4A8%2C8 0 0%2C0 4%2C12A8%2C8 0 0%2C0 12%2C20C15.73%2C20 18.84%2C17.45 19.73%2C14H17.65C16.83%2C16.33 14.61%2C18 12%2C18A6%2C6 0 0%2C1 6%2C12A6%2C6 0 0%2C1 12%2C6C13.66%2C6 15.14%2C6.69 16.22%2C7.78L13%2C11H20V4L17.65%2C6.35Z' /%3E %3C/svg%3E");
  3006. }
  3007.  
  3008.  
  3009.  
  3010.  
  3011. .dashboard input.hasDatepicker {
  3012.     min-width: 100px !important;
  3013. }
  3014. form[action="dashboard.php"] #basic_search .select {
  3015.     max-width: 200px !important;
  3016. }
  3017. .dashboard .tab_content {
  3018.     min-height: initial;
  3019. }
  3020. .dashboard button.link.button {
  3021.     margin: 6px 0 0 0;
  3022. }
  3023. .dashboard ul.tabs li a {
  3024.     margin-top: 4px;
  3025.     display: inline;
  3026. }
  3027. .dashboard hr {
  3028.     display: none;
  3029. }
  3030. /* My Profile */
  3031. i.icon-map-marker {
  3032.     top: -4px !important;
  3033. }
  3034. #recipients .select2-container .select2-search--inline {
  3035.     float: initial !important;
  3036. }
  3037. table.table.two-column {
  3038.     width: initial !important;
  3039. }
  3040. input[name="phone_ext"] {
  3041.     min-width: 35px !important;
  3042.     width: 35px !important;
  3043. }
  3044. button#change-pw-button {
  3045.     height: 21px;
  3046.     position: relative;
  3047.     top: -3px; /*target?*/
  3048. }
  3049. form[action="profile.php"] a.button.no-pjax {
  3050.     margin-top: 10px;
  3051.     height: 22px;
  3052. }
  3053. .grid.form tr:last-of-type input[type="password"] {
  3054.     margin-top: 9px; /* Profile > Change Password > last field */
  3055. }
  3056.  
  3057.  
  3058. /* ==========================================================================
  3059.  DATEPICKER
  3060. ========================================================================== */
  3061. .ui-datepicker.ui-datepicker-multi {
  3062.     width: auto !important;
  3063. }
  3064. .ui-widget-content {
  3065.     border: .5px solid #c7c7c7;
  3066.     background: #e7e7e9;
  3067.     color: #333;
  3068. }
  3069. .ui-widget-header {
  3070.     border: none!important;
  3071.     background: var(--nav-bar-bg);
  3072.     position: relative!important;
  3073.     z-index: 100!important;
  3074.     color: var(--nav-bar-link);
  3075. }
  3076. .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  3077.     border: .5px solid #ccc;
  3078.     background: #fff;
  3079.     font-weight: 500;
  3080.     color: #128dbe;
  3081.     height: 25px;
  3082.     width: 28px;
  3083. }
  3084. .ui-datepicker-calendar a.ui-state-default.ui-state-hover {
  3085.     color: #128dbe;
  3086.     font-weight: 500;
  3087.     border: .5px solid #97bdcb;
  3088.     background: #bdedff !important;
  3089. }
  3090. .ui-datepicker-close .ui-state-hover {
  3091.     border: .5px solid #ccc;
  3092.     background: #fff;
  3093. }
  3094. .ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  3095.     border: 1px solid var(--nav-bar-bg) !important;
  3096.     background: var(--nav-bar-bg) !important;
  3097.     font-weight: bold;
  3098.     color: var(--nav-bar-link) !important;
  3099. }
  3100. .ui-datepicker th {
  3101.     color: var(--header-bg);
  3102.     font-weight: 300;  
  3103. }
  3104. .ui-datepicker .ui-datepicker-buttonpane button {
  3105.     line-height: 17px;
  3106. }
  3107. .ui-datepicker .ui-datepicker-title {
  3108.     line-height: 2em;
  3109.     font-family: 'Open Sans', sans-serif;
  3110. }
  3111. .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-left span.ui-icon.ui-icon-circle-triangle-w,
  3112. .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-right span.ui-icon.ui-icon-circle-triangle-e {
  3113.     background-image: initial;
  3114.     top: 12px !important;
  3115. }
  3116. span.ui-icon.ui-icon-circle-triangle-w:before,
  3117. span.ui-icon.ui-icon-circle-triangle-e:before {
  3118.     position: absolute;
  3119.     content: '>';
  3120.     display: block;
  3121.     color: var(--nav-bar-link);
  3122.     width: 20px;
  3123.     height: 20px;
  3124.     text-indent: initial;
  3125.     font-family: monospace;
  3126.     font-size: 20px;
  3127.     font-weight: 100;
  3128.     line-height: 20px;
  3129. }
  3130. a.ui-datepicker-prev.ui-corner-all span.ui-icon.ui-icon-circle-triangle-w:before {
  3131.     content: '<';
  3132.     left: 4px;
  3133. }
  3134. a.ui-datepicker-prev.ui-corner-all:hover span.ui-icon.ui-icon-circle-triangle-w:before {
  3135.     left: 2px;
  3136. }
  3137. a.ui-datepicker-next.ui-corner-all:hover span.ui-icon.ui-icon-circle-triangle-e:before {
  3138.     left: 2px;
  3139. }
  3140. a.ui-datepicker-prev.ui-corner-all.ui-state-hover,
  3141. a.ui-datepicker-next.ui-corner-all.ui-state-hover {
  3142.     background: initial !important;
  3143. }
  3144.  
  3145. /* ==========================================================================
  3146.  AGENT PANEL
  3147. ========================================================================== */
  3148. .dashboard h2:first-child,
  3149. .directory h2:first-child,
  3150. .users h2:first-child,
  3151. .orgs h2:first-child,
  3152. .tasks h2:first-child,
  3153. .tickets h2:first-child,
  3154. .kb h2:first-child,
  3155. .categories h2:first-child,
  3156. .canned h2:first-child,
  3157. .profile h2 {
  3158.     margin-bottom: 10px;
  3159. }
  3160. .tickets table.list {
  3161.     margin: 0;
  3162. }
  3163. .message.bar {
  3164.     background-color: #93e0ff;
  3165.     opacity: 1;
  3166.     color: #263f49;
  3167. }
  3168. .message.bar.warning {
  3169.     border-bottom: 0;
  3170.     z-index: 999999;
  3171. }
  3172. .message.bar .body {
  3173.     margin-left: 20px;
  3174.     margin-right: 90px;
  3175. }
  3176. .message.bar.top.warning .button.inline {
  3177.     vertical-align: top;
  3178.     position: relative;
  3179.     top: 50%;
  3180.     transform: perspective(1px) translateY(-50%);
  3181.     background: #b0e8ff;
  3182.     color: #445b65;
  3183.     color: #263f49;
  3184.     letter-spacing: 1.4px;
  3185.     border: .5px solid #263f49 !important;
  3186. }
  3187. .message.bar.warning {
  3188.     -webkit-animation: async-progress-bar-pulse 1.5s ease-in-out infinite;
  3189.     animation: async-progress-bar-pulse 1.5s ease-in-out infinite;
  3190. }
  3191. @-webkit-keyframes async-progress-bar-pulse {
  3192.     0%{
  3193.         box-shadow:0 0 0 2px #75a4b1,0 0 0 2px #128dbe;
  3194.     }
  3195.     50%{
  3196.         box-shadow:0 0 0 2px #75a4b1,0 0 0 10px #128dbe;
  3197.     }
  3198.     100%{
  3199.         box-shadow:0 0 0 2px #75a4b1,0 0 0 2px #128dbe;
  3200.     }
  3201. }
  3202. @keyframes async-progress-bar-pulse {
  3203.     0%{
  3204.         box-shadow:0 0 0 2px #75a4b1,0 0 0 2px #128dbe;
  3205.     }
  3206.     50%{
  3207.         box-shadow:0 0 0 2px #75a4b1,0 0 0 10px #128dbe;
  3208.     }
  3209.     100%{
  3210.         box-shadow:0 0 0 2px #75a4b1,0 0 0 2px #128dbe;
  3211.     }
  3212. }
  3213. table.list td[colspan="6"] i,
  3214. table.list td[colspan="7"] i,
  3215. table.list td[colspan="8"] i {
  3216.     width: 100%;
  3217.     padding: 10px 0;
  3218.     color: #828282 !important;
  3219. }
  3220.  
  3221. /* ==========================================================================
  3222.  STICKYBAR
  3223. ========================================================================== */
  3224. .sticky.bar.opaque,
  3225. .sticky.bar.fixed,
  3226. .sticky.bar.fixed .flush-right {
  3227.     background-color: var(--stickybar);
  3228. }
  3229. .sticky.bar.fixed {
  3230.     box-shadow: 0 1px 1.5px 0 rgba(0,0,0,.1);
  3231. }
  3232. .sticky.bar.fixed {
  3233.     margin-top: 0;
  3234.     padding: 1% !important;
  3235.     z-index: 999999;
  3236. }
  3237. .sticky.bar.fixed .valign-helper{
  3238.     margin: 0 !important;
  3239. }
  3240. .sticky.bar.fixed .action-button.muted[data-dropdown="#sort-dropdown"] {
  3241.     margin: 0 0 0 6px;
  3242. }
  3243. .scroll-up {
  3244.     display: none;
  3245. }
  3246. .sticky.bar.fixed .pull-left h2,
  3247. .sticky.bar.fixed .pull-left h2 a,
  3248. .sticky.bar.opaque.fixed .pull-left h2,
  3249. .sticky.bar.opaque.fixed .pull-left h2 a {
  3250.     color: #fff;
  3251. }
  3252. .sticky.bar.opaque.fixed .pull-left {
  3253.     float: left;
  3254.     margin: 0
  3255. }
  3256. .sticky.bar.fixed .action-button,
  3257. .sticky.bar.fixed .green.button {
  3258.     border: .5px solid #ffffff;
  3259.     color: #ffffff;
  3260.     text-shadow: none; 
  3261.     background-color: var(--stickybar) !important;
  3262. }
  3263. .sticky.bar.opaque.fixed .action-button i.icon-caret-down, .action-button.muted i.icon-caret-down {
  3264.     border-left: 0;
  3265.     margin-left: 0;
  3266. }
  3267. .sticky.bar.fixed .sort-button-text {
  3268.     color: #fff;
  3269.     font-weight: 100;
  3270. }
  3271. .sort-button-text {
  3272.     text-shadow: none;
  3273. }
  3274. .sticky.bar .content {
  3275.     margin: auto;
  3276.     width: 100% !important;
  3277.     max-width: 1200px !important;
  3278. }
  3279. .sticky.bar.fixed .flush-left, .sticky.bar.fixed .pull-left.flush-left {
  3280.     display: inline-block !important;
  3281. }
  3282. .sticky.bar.fixed .merged-parent,
  3283. .sticky.bar.fixed .merged-child,
  3284. .sticky.bar.fixed .flush-left h2 a {
  3285.     color: var(--header-title);
  3286.     border-color: var(--header-title);
  3287. }
  3288. .sticky.bar.fixed {
  3289.     padding: 0 0;
  3290.     min-height: unset !important;
  3291. }
  3292. .sticky.bar.fixed h2:first-child {
  3293.     margin: 0 0;
  3294.     position: unset !important;
  3295. }
  3296. .sticky.bar.fixed .configureQ i.icon-cog {
  3297.     display: none;
  3298. }  
  3299. .users .sticky.bar.fixed .pull-right {
  3300.     margin-top: 0;
  3301. }
  3302. .pull-right.flush-right.page-top {
  3303.     float: right;
  3304. }
  3305. .rtl .pull-right.flush-right.page-top {
  3306.     float: left;
  3307. }
  3308.  
  3309. /* ==========================================================================
  3310.  KNOWLEDGEBASE
  3311. ========================================================================== */
  3312. .Icon.file {
  3313.     background-image: url(../../osta/icons/paperclip.svg);
  3314.     width: 20px;
  3315. }
  3316. .icon-paperclip:before,
  3317. .icon-paper-clip:before {
  3318.     width: 17px;
  3319.     position: relative;
  3320.     top: 2px;
  3321.     background-image: url(../../osta/icons/paperclip.png);
  3322.     background-repeat: no-repeat;
  3323.     background-position: 0 0;
  3324.     background-size: 8px;
  3325.     content: '';
  3326.     height: 17px;
  3327. }
  3328. .attachments .icon-paperclip:before,
  3329. .attachments .icon-paper-clip:before {
  3330.     background-size: 8px !important;
  3331. }
  3332. .attachments i.icon-paperclip.icon-flip-horizontal {
  3333.     margin: 0 !important;
  3334.     top: 3px !important;   
  3335. }
  3336. .attachments small.filesize.faded {
  3337.     margin-left: 10px !important;
  3338.     display: inline-block;
  3339.     position: relative;
  3340.     top: 1px;
  3341. }
  3342. td.table-description i.small.icon-paperclip.icon-flip-horizontal {
  3343.     margin-left: 0;
  3344.     top: 3px;
  3345.     padding-left: 0;
  3346. }
  3347. #kb {
  3348.     padding: 5px 0;
  3349. }
  3350. #kb li {
  3351.     padding: 14px 10px 4px 56px;   
  3352.     background-image: url(../../osta/icons/faq.svg);
  3353.     background-size: 40px;
  3354.     background-position: 0 50%, bottom left;
  3355.     border-bottom: .5px solid #ddd;
  3356.     background-repeat: no-repeat;
  3357. }
  3358. .kb h4,
  3359. #kb li h4 a {
  3360.     font-size: 15px;
  3361.     vertical-align: initial;
  3362.     font-family: 'Open Sans', sans-serif;  
  3363. }
  3364. .canned table.form_table.fixed tr:first-child {
  3365.     display: none;
  3366. }
  3367. .canned .form_table tr:nth-child(2) th em {
  3368.     margin-top: -21px;
  3369. }
  3370. .faq-content {
  3371. /*  width: initial;
  3372.     max-width: calc(100% - 300px) !important;
  3373.     margin: 0 15px; */
  3374. }
  3375. .faq-title.pull-left {
  3376.     color: #777777;
  3377.     font-weight: 400;
  3378.     font-size: 22px;
  3379. }
  3380. .faq #trans_container .tab_content {
  3381.     border: none !important;
  3382. }
  3383. .faq hr {
  3384.     border: 0;
  3385. }
  3386. #breadcrumbs {
  3387.     background-color: unset;
  3388. }
  3389. .sidebar {
  3390. /*     width: 220px;
  3391.     float: right;
  3392.     padding: 10px; */
  3393.     border: .5px solid #a8a6a6;
  3394.     background-color: #ebebeb !important;
  3395.     border-radius: 3px;
  3396.     margin: 0 14px 20px 0;
  3397. }
  3398. .rtl .sidebar {
  3399. /*     float: left; */
  3400. }
  3401. .searchbar .search {
  3402.     width: 98%;
  3403. }
  3404. .pull-right.sidebar.faq-meta div:first-child {
  3405. /*     margin: 0 0 5px 0; */
  3406. }
  3407. .faq-content {
  3408.     width: initial;
  3409. }
  3410. .faq-content .thread-body.bleed {
  3411.     background: unset;
  3412.     /*width: calc(100% - 270px);*/
  3413. }
  3414. .faq button.red.button {
  3415.     margin: 0 0 2em 1em;
  3416.     border: 1px solid #b9b9b9 !important;
  3417.     background: #fff !important;   
  3418. }
  3419. #faq ol li:hover {
  3420.     background-color: unset;
  3421. }
  3422. #faq ol li {
  3423.     padding: 10px 0 4px;
  3424.     border-bottom: unset;
  3425. }
  3426. #notes.tab_content .faded:before {
  3427.     content: ' (';
  3428. }
  3429. #notes.tab_content .faded:after {
  3430.     content: ')';
  3431. }
  3432. a.previewfaq {
  3433.     font-size: 15px !important;
  3434. }
  3435. .faq-page .span8 {
  3436. /*     width: 100%; */
  3437. }
  3438. .faq-page .thread-body {
  3439. /*     width: 100%; */
  3440.     border: 0;
  3441. }
  3442. .kb strong {
  3443.     color: #777779;
  3444.     font-weight: 400;
  3445.     font-family: 'Open Sans', sans-serif;
  3446.     font-size: 18px;
  3447. }
  3448. .categories .pull-right.flush-right .pull-right.flush-right {
  3449.     margin-top: 0;
  3450. }  
  3451. ul#trans li.empty,
  3452. ul#content-trans li.empty {
  3453.     top: -8px;
  3454. }
  3455. ul#trans,
  3456. ul#content-trans {
  3457.     display: inline-block;
  3458. }
  3459. span.count {
  3460.     font-size: 150%;
  3461.     font-weight: 200;
  3462.     position: relative;
  3463.     top: 2px;
  3464.     color: #128dbe !important;
  3465. }
  3466. .rtl span.count {
  3467.     font-size: 100%;
  3468.     top: 0;
  3469.     margin-right: 4px;
  3470.     display: inline-block;
  3471. }
  3472.  
  3473. /* ==========================================================================
  3474.  ADMIN PANEL
  3475. ========================================================================== */
  3476. /*system.php*/
  3477. .system table.list thead:first-child th:first-child {
  3478.     border-radius: 6px 6px 0 0;
  3479. }
  3480. .system table.list th:first-child {
  3481.     padding: 0 10px !important;
  3482.     background-image: none;
  3483.     border-radius: 0;
  3484. }
  3485. .system table.list tbody tr:nth-child(2n+1) td {
  3486.     background-color: #ffffff;
  3487. }
  3488. .system table.list th {
  3489.     font-size: 16px !important;
  3490. }
  3491. .system table.list td {
  3492.     font-size: 13px !important;
  3493.     border-bottom: .5px solid #e4e4e4 !important;
  3494.     padding-left: 20px !important;
  3495. }
  3496. .system table.list tr:first-child td {
  3497.     border-top: .5px solid #e4e4e4 !important;
  3498. }
  3499. .system table.list tbody tr:hover td {
  3500.     background: #fff;
  3501. }
  3502. span[style="color:green"] i {
  3503.     margin: 0 1px 0 1px !important;
  3504. }
  3505. .system table.list i {
  3506.     top: 0;
  3507.     right: -2px;
  3508.     margin: 0 4px 0 -2px;
  3509. }
  3510. .system table.list .icon-warning-sign {
  3511.     color: #d51818 !important;
  3512. }
  3513. .system table.list .label-danger i.icon.icon-warning-sign {
  3514.     font-size: 14px;
  3515.     color: #d51818 !important; 
  3516. }
  3517. .system tbody:last-child tr:last-child td:first-child {
  3518.     border-radius: 0 0 0 6px;
  3519. }
  3520. .system tbody:last-child tr:last-child td:last-child {
  3521.     border-radius: 0 0 6px 0;
  3522. }
  3523. /*Language Packs*/
  3524. .system-page div[style="margin: 0 20px"] {
  3525.     border: .5px solid #aaa;
  3526.     border-radius: 6px;
  3527.     background: #fff;
  3528.     margin: 20px 0 0 0 !important;
  3529.     padding: 4px 12px 12px 12px;
  3530. }
  3531. .system-page .label-danger {
  3532.     padding: 0 0 6px 0;
  3533.     border: .5px solid #949495;
  3534.     opacity: .7;
  3535.     position: relative;
  3536.     top: -5px;
  3537. }
  3538. .system-page div[style="margin: 0 20px"] > div {
  3539.     padding: 10px 0 10px 10px;
  3540.     border-bottom: .5px solid #e4e4e4 !important;
  3541.     margin: 0;
  3542.     min-height: 86px;
  3543.     font-size: 13px;
  3544. }
  3545. .system .ar_EG,
  3546. .system .ar,
  3547. .system .ar_SA,
  3548. .system .az,
  3549. .system .bg,
  3550. .system .bn,
  3551. .system .bs,
  3552. .system .ca,
  3553. .system .cs,
  3554. .system .da,
  3555. .system .de,
  3556. .system .el,
  3557. .system .en_CAD,
  3558. .system .en_GB,
  3559. .system .en_US,
  3560. .system .es_AR,
  3561. .system .es_ES,
  3562. .system .es_MX,
  3563. .system .et,
  3564. .system .eu,
  3565. .system .fa,
  3566. .system .fi,
  3567. .system .fr,
  3568. .system .gl,
  3569. .system .he,
  3570. .system .hi,
  3571. .system .hr,
  3572. .system .hu,
  3573. .system .id,
  3574. .system .is,
  3575. .system .it,
  3576. .system .ja,
  3577. .system .ka,
  3578. .system .km,
  3579. .system .ko,
  3580. .system .lt,
  3581. .system .lv,
  3582. .system .mk,
  3583. .system .mn,
  3584. .system .ms,
  3585. .system .nl,
  3586. .system .no,
  3587. .system .pl,
  3588. .system .pt_BR,
  3589. .system .pt_PT,
  3590. .system .ro,
  3591. .system .ru,
  3592. .system .sk,
  3593. .system .sl,
  3594. .system .sq,
  3595. .system .sr,
  3596. .system .sr_CS,
  3597. .system .sv_SE,
  3598. .system .sw,
  3599. .system .th,
  3600. .system .tr,
  3601. .system .uk,
  3602. .system .ur_IN,
  3603. .system .ur_PK,
  3604. .system .in,
  3605. .system .pk,
  3606. .system .vi,
  3607. .system .zh_CN,
  3608. .system .zh_TW {
  3609.     background-position: top 0px right 11px !important;
  3610. }
  3611. .system-page i.icon.icon-warning-sign {
  3612.     margin: 0 8px;
  3613. }
  3614. .system-page .icon-warning-sign:before {
  3615.     content: "\f071";
  3616.     color: #5f5f5f;
  3617. }
  3618. .system-page div[style="margin: 0 20px"] h3 {
  3619.     margin-bottom: 0 !important;
  3620.     padding-bottom: 0;
  3621.     color: #7e7e7e;
  3622. }
  3623. .system table.list ~ div h3,
  3624. .system table.list ~ div h3 strong {
  3625.     color: #707070;
  3626.     font-weight: 400;
  3627.     font-family: 'Open Sans', sans-serif;  
  3628.     font-size: 16px;
  3629. }
  3630. .advanced-search .adv-search-val .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  3631.     height: initial !important;
  3632. }
  3633. .select2-container--default .select2-selection--multiple:not(.faq-page .select2-selection--multiple) {
  3634.     background-color: white;
  3635.     border: .5px solid #cacaca;
  3636.     border-radius: 4px;
  3637.     cursor: text;
  3638.     width: 300px;
  3639. }
  3640. textarea#_3cd1c655ae15857b {
  3641.     height: 41px;
  3642. }
  3643. .select2-container .select2-search--inline .select2-search__field {
  3644.     margin-top: 0;
  3645. }
  3646. /* tr#userRow span.select2.select2-container.select2-container--default,
  3647. tr#ccRow .select2-container--default .select2-selection--multiple,
  3648. .tickets-page span.select2-dropdown.select2-dropdown--below {
  3649.     width: 505px !important;
  3650. } */
  3651.  
  3652.  
  3653. .row-item {
  3654.     border: .5px solid rgba(132, 132, 132, 0.7);
  3655.     padding: 12px;
  3656. }
  3657. .row-item .management {
  3658.     margin-top: 10px;
  3659.     padding-top: 10px;
  3660.     border-top: 1px dashed #777777;
  3661. }
  3662. .icon-gear:before, .icon-cog:before {
  3663.     color: #128dbe;
  3664. }
  3665. input.-current {
  3666.     min-width: 134px !important;
  3667. }
  3668. table.form_table.settings_table td em b {
  3669.     font-weight: 500 !important;
  3670. }
  3671. table.form_table.settings_table textarea {
  3672.     height: 86px !important;
  3673. }
  3674. .settings_table select {
  3675.     margin-bottom: 10px;
  3676. }
  3677. #secondary_langs {
  3678.     margin-bottom: 10px;
  3679. }
  3680. /*AGENTS*/
  3681. select#tid,
  3682. select#did {
  3683.     width: 180px;
  3684. }
  3685. form[action="staff.php"] input.button.muted {
  3686.     /* height: 18px; */
  3687.     min-width: 50px;
  3688.     position: relative;
  3689.     top: 0;
  3690.     padding: 4px !important;
  3691.     margin: 0;
  3692. }
  3693. #agents---nav-bar-bg_container div[style="padding:2px 5px"],
  3694. #users---nav-bar-bg_container div[style="padding:2px 5px"] {
  3695.     padding: 10px !important;
  3696. }
  3697. #agents-tabs_container .pull-left,
  3698. #users-tabs_container .pull-left {
  3699.     float: left;
  3700.     width: 50px;
  3701.     height: 50px;
  3702. }
  3703. span[style^="display:inline-block;width:90%;width:calc(100% - 32px);"] {
  3704.     width: initial !important;
  3705.     padding-left: initial !important;
  3706.     display: initial !important;   
  3707. }
  3708. span[style^="display:inline-block;width:90%;width:calc(100% - 32px);"] a {
  3709.     font-size: 17px;
  3710.     display: initial;  
  3711. }
  3712. .settings_table .faded:before {
  3713.     content: '\a' attr(title);
  3714.     white-space: pre;
  3715. }
  3716. #users-tabs_container .settings_table .faded em:before {
  3717.     content: '\A';
  3718.     white-space: pre;
  3719. }
  3720. .settings_table .faded em {
  3721.     font-size: 12px;
  3722.     color: #999;
  3723.     font-style: normal;
  3724. }
  3725. .form_table.settings_table .icon-file-text:after { /*keep*/
  3726.     content: url(../../osta/icons/paper.svg);
  3727.     display: inherit;
  3728.     width: 36px !important;
  3729.     height: 36px !important;
  3730.     position: relative;
  3731.     top: 8px;
  3732. }
  3733. .form_table.settings_table i.icon-file-text {
  3734.     top: -4px;
  3735.     background: none;
  3736. }
  3737. .icon-bell-alt:before {
  3738.     content: url(../icons/alerts.svg);
  3739.     width: 16px;
  3740.     position: relative;
  3741.     top: 4px;
  3742. }
  3743. .icon-question-sign:before {
  3744.     content: url(../icons/question.svg);
  3745.     width: 16px;
  3746.     position: relative;
  3747.     top: 4px;
  3748.     opacity: .8;
  3749. }
  3750. .icon-question-sign:hover:before {
  3751.     opacity: 1;
  3752. }
  3753. ul.tabs li {
  3754.     padding: 0 6px !important;
  3755. }
  3756. ul.tabs li:not(.active) a {
  3757.     color: #128dbe;
  3758. }
  3759. #agents-tabs_container [class*=" icon-"],
  3760. #users-tabs_container [class*=" icon-"] {
  3761.     margin: 0 10px 0 0;
  3762. }
  3763.  
  3764. #users-tabs_container div[style="padding:2px 5px"] br {
  3765.     display: none;
  3766. }
  3767. /*Manage*/
  3768. table.list thead td[colspan="7"]:first-child {
  3769.     background: rgba(255, 255, 255, 0);
  3770. }
  3771. div[style="padding:8px 3px;border-bottom: 2px dotted #ddd;"] {
  3772.     border: 0 !important;
  3773. }
  3774. ul#topic-tabs i.icon-info-sign {
  3775.     top: 1px;
  3776. }
  3777. div[style="padding:8px 3px; margin-top: 1.6em"] {
  3778.     margin-top: .1em !important;
  3779. }
  3780. .account .table.two-column tbody tr td:first-child {
  3781.     width: 30%;
  3782. }
  3783. td[style="padding-top: 50px"] {
  3784.     padding-top: 20px !important;
  3785. }
  3786. .row-item .delete {
  3787.     border-left: 1px solid rgba(165, 165, 166, 0.61);
  3788.     border-bottom: 1px solid rgba(165, 165, 166, 0.61);
  3789.     border-radius: 0 !important;
  3790.     border-top-right-radius: inherit;
  3791.     border-bottom-right-radius: inherit;
  3792.     width: 35px;
  3793. }
  3794. .form_table.settings_table a[href="pages.php"] {
  3795.     margin-bottom: 10px;
  3796. }
  3797. ul#user-import-tabs {
  3798.     margin-bottom: -5px;
  3799. }
  3800. select[name="help_topic_sort_mode"] {
  3801.     width: 118px;
  3802. }
  3803. .helptopics table.list td[colspan="7"] {
  3804.     padding-bottom: 7px !important;
  3805. }
  3806. select[name="add_secondary_language"] {
  3807.     width: 280px;
  3808. }
  3809. /*Secondary Languages */
  3810. div#secondary_langs {
  3811.     width: 100% !important;
  3812. }
  3813. .secondary_lang.ui-sortable-handle {
  3814.     display: list-item;
  3815.     list-style: none;
  3816. }
  3817. .secondary-lang-sort,
  3818. .secondary-lang-flag,
  3819. .secondary-lang-text {
  3820.     float: left;
  3821. }
  3822. .secondary-lang-trash {
  3823.     float: right;
  3824. }
  3825. .secondary_lang.ui-sortable-handle {
  3826.     border: 1px solid #ccc;
  3827.     border-radius: 5px;
  3828.     padding: 12px;
  3829.     margin: 0 0 8px 0;
  3830.     background: #fff;
  3831.     width: 494px !important;
  3832.     display: list-item;
  3833.     list-style: none;
  3834.     height: 25px;
  3835.     -webkit-box-shadow: 4px 4px 5px -4px rgba(0,0,0,0.3);
  3836.     -moz-box-shadow: 4px 4px 5px -4px rgba(0,0,0,0.3);
  3837.     box-shadow: 4px 4px 5px -4px rgba(0,0,0,0.3);  
  3838. }
  3839. .settings table.list .icon-sort,
  3840. .secondary-lang-sort i.icon-sort {
  3841.     display: inline-block;
  3842.     width: 20px;
  3843.     height: 20px !important;
  3844.     margin: -1px 10px 0 0;
  3845. }
  3846. .settings table.list .icon-sort:before,
  3847. .secondary_lang i.icon-sort:before {
  3848.     top: 0;
  3849.     content: '';
  3850.     display: inline-block;
  3851.     width: 20px;
  3852.     height: 20px;
  3853.     background-size: 20px !important;  
  3854. background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23128dbe' d='M12%2C18.17L8.83%2C15L7.42%2C16.41L12%2C21L16.59%2C16.41L15.17%2C15M12%2C5.83L15.17%2C9L16.58%2C7.59L12%2C3L7.41%2C7.59L8.83%2C9L12%2C5.83Z' /%3E %3C/svg%3E");
  3855. }
  3856. .secondary-lang-flag {
  3857.     width: 36px;
  3858.     height: 24px;
  3859.     margin: 0 10px 0 0;
  3860.     display: inline-block;
  3861. }
  3862. .secondary-lang-flag .flag {
  3863.     background-size: 36px !important;
  3864.     background-position: center !important;
  3865.     width: 36px;
  3866.     height: 24px;
  3867. }
  3868. .secondary-lang-text {
  3869.     display: inline-block;
  3870.     margin: 2px 0 0 0;
  3871. }
  3872. .secondary-lang-trash {
  3873.     float: right;
  3874.     display: inline-block;
  3875.     width: 20px;
  3876.     height: 20px;
  3877.     margin: 3px 0 0 0;
  3878. }
  3879. #secondary_langs i.icon-trash {
  3880.     width: 20px;
  3881.     height: 20px;
  3882.     display: inline-block;
  3883.     top: 0;
  3884. }
  3885. #secondary_langs .icon-trash:before {
  3886.     content: "";
  3887.     top: 0;
  3888. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23128DBE' d='M21.03%2C3L18%2C20.31C17.83%2C21.27 17%2C22 16%2C22H8C7%2C22 6.17%2C21.27 6%2C20.31L2.97%2C3H21.03M5.36%2C5L8%2C20H16L18.64%2C5H5.36M9%2C18V14H13V18H9M13%2C13.18L9.82%2C10L13%2C6.82L16.18%2C10L13%2C13.18Z' /%3E%3C/svg%3E");
  3889. }
  3890.  
  3891.  
  3892.  
  3893.  
  3894.  
  3895. .forms table.list th {
  3896.     font-size: 15px !important;
  3897.     padding: 0 !important;
  3898. }
  3899. .forms table.form_table select {
  3900.     width: initial;
  3901.     min-width: 170px !important;
  3902. }
  3903. .forms tbody.sortable-rows.ui-sortable input {
  3904.     width: 134px !important;
  3905. }
  3906. .forms tbody.sortable-rows.ui-sortable input.delete-box {
  3907.     width: 60px !important;
  3908. }
  3909. .forms a.action-button.field-config {
  3910.     max-width: 174px;
  3911.     overflow: hidden !important;
  3912.     text-align: center;
  3913.     position: relative;
  3914.     top: -2px;
  3915. }
  3916. .manage-form a.action-button.field-config {
  3917.     padding: 4px 4px !important;
  3918. }
  3919. table.form_table td[align="center"] {
  3920.     text-align: left;
  3921.     padding: 0;
  3922. }
  3923. .form_table i.icon-edit {
  3924.     margin: 0 5px 0 0;
  3925.     padding: 0;
  3926. }
  3927. #schedule-entries i.icon-edit {
  3928.     margin: -5px 5px 0 22px !important;
  3929. }
  3930. tbody#schedule-entries i.icon-sort {
  3931.     top: -3px;
  3932. }
  3933. .form_table.settings_table table[style="width:100%"] {
  3934.     margin-bottom: 20px;
  3935. }
  3936. form[action="settings.php?t=tickets"] table.list th:first-child {
  3937.     background-position: 9px center;
  3938. }
  3939. .queues-page .queues .tabs li:nth-child(6) {
  3940.     display:  none;
  3941. }
  3942. .queues-page table.table td[style="width:60%; vertical-align:top"] {
  3943.     width: 12% !important;
  3944. }
  3945. .queues-page hr {
  3946.     border: 0;
  3947. }
  3948. .queues-page select#add-field {
  3949.     min-width: 200px !important;
  3950. }
  3951. .queues-page input.full-width,
  3952. .queues-page input[type="text"],
  3953. .queues-page select#parent-id {
  3954.     width: 230px !important;
  3955.     min-width: 230px !important;
  3956.     margin: 0 0 18px 0;
  3957. }
  3958. .queues-page select#search-add-new-field {
  3959.     width: 190px !important;       
  3960.     min-width: 190px !important;
  3961.     margin: 0 0 8px 0; 
  3962. }
  3963. .queues-page .green.button {
  3964.     background: #dcdfe2;
  3965.     position: relative;
  3966.     top: -2px;
  3967.     padding: 5px 14px;
  3968.     color: #515d6d;
  3969. }
  3970. .queues-page .green.button:hover {
  3971.     border: initial !important;
  3972.     background: #d0e9c6 !important;
  3973. }
  3974. .queues-page .grid.form tbody:nth-child(3) tr:first-child select {
  3975.     min-width: 40% !important;
  3976. }
  3977. .queues-page .grid.form tbody:nth-child(3) tr:nth-child(2) input {
  3978.     width: 100% !important;
  3979.     min-width: 100% !important;
  3980.     max-width: 100% !important;
  3981. }
  3982. .queues-page .grid.form tbody:nth-child(3) tr:nth-child(2) input {
  3983.     min-width: 185px !important;
  3984. }
  3985. .queues-page .grid.form tbody:nth-child(3) tr:nth-child(2) select {
  3986.     width: 100% !important;
  3987.     min-width: 100% !important;
  3988.     max-width: 100% !important;
  3989. }
  3990.  
  3991. /* ==========================================================================
  3992.  Users > <user>
  3993. ========================================================================== */
  3994. .users table.ticket_info {
  3995.     border: 1px solid #cfd4d6;
  3996.     width: calc(100% - 106px);
  3997.     float: right;
  3998. }
  3999. .users table.ticket_info:after {
  4000.     clear: both;
  4001. }
  4002. #tickets.tab_content {
  4003.     border: .5px solid #aaa;
  4004. }
  4005. #user-view-tabs_container .pull-left {
  4006.     padding: 12px 0;
  4007. }
  4008. #user-view-tabs_container .pull-left strong {
  4009.     font-weight: 500;
  4010.     color: #777777;
  4011. }
  4012. #user-view-tabs_container form[action="users.php"] table.list th {
  4013.     font-family: 'Open Sans', sans-serif;
  4014.     font-size: 17px !important;
  4015.     font-weight: 400;
  4016.     height: 36px;
  4017.     padding-left: 9px !important;
  4018. }
  4019. #user-view-tabs_container table.list td {
  4020.     font-size: 11px !important;
  4021. }
  4022. #user-view-tabs_container th[width="10%"],
  4023. #user-view-tabs_container th[width="18%"],
  4024. #user-view-tabs_container th[width="8%"],
  4025. #user-view-tabs_container th[width="30%"],
  4026. #user-view-tabs_container th[width="15%"] {
  4027.     width: initial!important;
  4028. }
  4029. #user-view-tabs_container td:nth-child(4) {
  4030.     font-size:12px !important;
  4031.     white-space: nowrap;
  4032.     overflow: hidden;
  4033.     text-overflow: ellipsis;   
  4034. }
  4035. table.list a.truncate {
  4036.     font-size: 14px;
  4037.     font-weight: 500;
  4038. }
  4039. #user-view-tabs_container a.Icon.overdueTicket {
  4040.     font-size: 14px !important;
  4041.     background-position: -1px 1px;
  4042.     margin: 0;
  4043.     padding-left: 21px !important;
  4044. }
  4045. #user-view-tabs_container table.list tr td {
  4046.     padding-left: 11px !important;
  4047. }
  4048. ul#user-view-tabs {
  4049.     margin-top: 10px;
  4050. }
  4051. #content.users td.right_align.has_bottom_border a {
  4052.     margin-right: 4px;
  4053. }
  4054. form[action="users.php"] i.icon-group {
  4055.     /* display: none; */ /*target*/
  4056. }
  4057. #user-account-tabs {
  4058.     width: 94% !important;
  4059.     margin: 0 0 -5px 8px;
  4060.     box-shadow: initial;
  4061. }
  4062. #popup #user-account-tabs {
  4063.     margin: 0 0 -7px 8px;
  4064. }
  4065. button.inline.green.button {
  4066.     border: .5px solid #a9a9a9;
  4067.     height: unset;
  4068.     background: #fff;
  4069. }
  4070. ul#user-account-tabs li.active {
  4071.     top: -5px;
  4072. }
  4073.  
  4074. /* ==========================================================================
  4075.  Manage > Forms
  4076. ========================================================================== */
  4077. .forms [class^="icon-"], [class*=" icon-"] {
  4078.     margin: 0 7px;
  4079. }
  4080. .sortable.row-item i.icon-reorder {
  4081.     top: 0;
  4082. }
  4083. form[action*="/forms/manage"] .delete {
  4084.     height: 48px;
  4085.     width: 48px;
  4086.     border-radius: 40px;
  4087.     text-align: center;
  4088. }
  4089.  
  4090. form[action*="/forms/manage"] .row-item .delete:hover {
  4091.     background: #ff838e;
  4092.     color: rgba(255,255,255,0.8) !important;
  4093.     border-radius: 0 5px 0 0 !important;
  4094. }
  4095. form[action*="/forms/manage"] .row-item .delete:hover > a i.icon-trash:before {
  4096.     color: #fff !important;
  4097.     fill: #fff !important;
  4098. }
  4099. select[name="new-form"] {
  4100.     border: .5px solid #a9a9a9;
  4101.     height: 39px;
  4102.     top: 1px;
  4103. }
  4104.  
  4105. /* ==========================================================================
  4106.  HIDE UGLY ICONS
  4107. ========================================================================== */
  4108. .Icon {
  4109.     width: auto;
  4110.     padding-left: initial;
  4111. }
  4112. .Icon.Ticket,
  4113. .Icon.apiTicket,
  4114. .Icon.emailTicket,
  4115. .Icon.phoneTicket,
  4116. .Icon.webTicket,
  4117. .Icon.otherTicket,
  4118. .Icon.staffAssigned,
  4119. .Icon.assignedTicket,
  4120. a.test,
  4121. a.Ticket,
  4122. a.assignedTickets,
  4123. a.overdueTickets,
  4124. a.answeredTickets,
  4125. a.closedTickets,
  4126. a.newTicket,
  4127. a.premade,
  4128. a.newPremade,
  4129. a.kb,
  4130. a.faq-categories,
  4131. a.canned,
  4132. a.staff,
  4133. a.user,
  4134. a.userPref,
  4135. a.userPasswd,
  4136. a.preferences,
  4137. a.attachment,
  4138. a.api,
  4139. a.newapi,
  4140. a.ticket-settings,
  4141. a.email-settings,
  4142. a.kb-settings,
  4143. a.alert-settings,
  4144. a.email-autoresponders,
  4145. a.sla,
  4146. a.newsla,
  4147. a.logs,
  4148. a.audits,
  4149. a.emails,
  4150. a.newEmail,
  4151. a.emailTemplates,
  4152. a.newEmailTemplate,
  4153. a.emailFilters,
  4154. a.ticketFilters,
  4155. a.newTicketFilter,
  4156. a.emailSettings,
  4157. a.emailDiagnostic,
  4158. a.banList,
  4159. a.users,
  4160. a.newuser,
  4161. a.groups,
  4162. a.teams,
  4163. a.newgroup,
  4164. a.helpTopics,
  4165. a.newHelpTopic,
  4166. a.departments,
  4167. a.newDepartment,
  4168. a.pages,
  4169. a.newPage,
  4170. a.forms,
  4171. a.lists,
  4172. .Icon.teamAssigned {
  4173.     background: none;
  4174.     margin-left: 0;
  4175. }
  4176.  
  4177. /* ==========================================================================
  4178.  CLEAN TABS
  4179. ========================================================================== */
  4180. ul.clean.tabs {
  4181.     z-index: 1;
  4182. }
  4183. ul.tabs,
  4184. ul.tabs.alt {
  4185.     background: initial;
  4186.     border-bottom: 0;
  4187.     bottom: 0;
  4188.     margin: 0 auto;
  4189.     box-shadow: initial;
  4190. }
  4191. ul#referral {
  4192.     bottom: -6px;
  4193. }
  4194. ul.tabs li.active {
  4195.     border: 1px solid #d5d5d5;
  4196.     border-top: 2px solid #ffc386;
  4197.     border-bottom: 1px solid #fff;
  4198.     background: #fff;
  4199.     z-index: 1;
  4200.     top: -1px;
  4201. }
  4202. ul.tabs li.active a {
  4203.     font-family: 'Open Sans', sans-serif !important;
  4204.     font-weight: 500;
  4205.     color: #777777;
  4206. }
  4207. .tab_content {
  4208.     background: #fff;
  4209.     border: 1px solid #ddd;
  4210.     border-radius: 6px;
  4211.     min-height: 122px;
  4212. }
  4213. .tab_content div[style="margin-top: 5px"] {
  4214.     margin: 5px 0 0 0!important;
  4215.     background: #fff;
  4216. }
  4217. .dashboard ul.tabs {
  4218.     border-bottom: 0;
  4219. }
  4220. table.table th {
  4221.     font-family: 'Open Sans', sans-serif !important;
  4222.     font-weight: 500;
  4223.     color: #777777;    
  4224. }
  4225. table.table th[width="30%"] {
  4226.     padding-left: 8px !important;
  4227. }
  4228. table.dashboard-stats {
  4229.     border-bottom: 1px solid #ddd;
  4230. }
  4231.  
  4232. ul.tabs li a {
  4233.     padding: 0;
  4234. }
  4235.  
  4236. /* ==========================================================================
  4237.  POPUPS AND ALERTS
  4238. ========================================================================== */
  4239. .dialog {
  4240.     background: #FFF;
  4241.     border: 1px solid #AAA;
  4242.     border-radius: 2px;
  4243.     box-shadow: rgba(0,0,0,0.4) 0 10px 26px;
  4244. }
  4245. .dialog th {
  4246.     background-color: initial;
  4247.     border: none;
  4248.     padding: 4px 10px 10px 0;
  4249.     padding-left: 0;
  4250.     font-size: 126%;
  4251.     color: #777777;
  4252.     font-family: 'Open Sans', sans-serif;
  4253.     font-weight: 400;
  4254. }
  4255. .dialog th em {
  4256.     font-style: normal;
  4257. }
  4258. .dialog th strong {
  4259.     font-weight: 600;
  4260. }
  4261. .required {
  4262.     font-weight: 600;
  4263. }
  4264. #alert {
  4265.     opacity: 0;
  4266.     animation-name: bounceIn;
  4267.     animation-duration: 450ms;
  4268.     animation-timing-function: linear;
  4269.     animation-fill-mode: forwards;
  4270. }
  4271. @keyframes bounceIn {
  4272.   0%{
  4273.     opacity: 0;
  4274.     transform: scale(0.3) translate3d(0,0,0);
  4275.   }
  4276.   50%{
  4277.     opacity: 0.9;
  4278.     transform: scale(1.1);
  4279.   }
  4280.   80%{
  4281.     opacity: 1;
  4282.     transform: scale(0.89);
  4283.   }
  4284.   100%{
  4285.     opacity: 1;
  4286.     transform: scale(1) translate3d(0,0,0);
  4287.   }
  4288. }
  4289.  
  4290. /* ==========================================================================
  4291.  POPUP DIALOG TOOLBAR RESTORED (missing in osTicket 1.14 and later)
  4292. ========================================================================== */
  4293. .redactor-toolbar-wrapper-air {
  4294.     position: initial;
  4295.     z-index: 100;
  4296.     width: 100% !important;
  4297.     display: inline-block;
  4298.     background: #f7f7f7;
  4299.     border: none;
  4300.     box-shadow: 0 1px 4px -2px rgba(0, 0, 0, 0.4);
  4301.     border-radius: 5px 5px 0 0 !important;
  4302. }
  4303. .redactor-air {
  4304.     display: inline-block !important;
  4305.     width: 100% !important;
  4306.     float: left;
  4307.     padding: 0 !important;
  4308.     margin: 0 !important;
  4309.     background: initial;
  4310. }
  4311. .redactor-air a.re-button-icon.re-button-icon {
  4312.     padding: 8px;
  4313.     margin: 0;
  4314.     background: initial;
  4315. }
  4316. .redactor-air a {
  4317.     border-radius: 0px;
  4318. }
  4319. .redactor-air a:first-child {
  4320.     border-radius: 2px 0 0 0;
  4321. }
  4322. .redactor-air a:last-child {
  4323.     border-radius: 0 2px 0 0;
  4324. }
  4325. .redactor-air a {
  4326.     color: #128dbe;
  4327. }
  4328. .redactor-air a.re-button-icon.re-button-icon:hover {
  4329.     background: #128dbe;
  4330.     color: #fff;
  4331. }
  4332. a.re-button:hover>i {
  4333.     color: #fff !important;
  4334. }
  4335. .redactor-button-active {
  4336.     background-color: #ccc !important;
  4337. }
  4338. .redactor-button-active>i {
  4339.     color: #696969 !important;
  4340. }
  4341. .redactor-air a.re-button.re-image.re-button-icon,
  4342. .redactor-air a.re-button.re-textdirection.re-button-icon {
  4343.     display: none;
  4344. }
  4345.  
  4346. /* ==========================================================================
  4347.  MERGE / LINK TICKETS POPUP
  4348. ========================================================================== */
  4349. .dialog i.icon-code-fork:before {
  4350.     font-size: 27px !important;
  4351.     top: -1px !important;
  4352.     margin: 0 !important;
  4353.     padding: 0 !important;
  4354. }
  4355. .dialog i.icon-link:before {
  4356.     font-size: 21px !important;
  4357.     top: -4px !important;
  4358.     margin: 0 !important;
  4359.     padding: 0 !important;
  4360. }
  4361. .dialog .merge-tickets .row-item {
  4362.     padding: 8px;
  4363. }
  4364.  .dialog .merge-tickets .merge-tickets i.icon-reorder {
  4365.     top: 0 !important;
  4366.     margin: 0 5px 0 6px;
  4367.     padding: 0;
  4368.     width: 12px;
  4369.     right: 0;
  4370. }
  4371. .dialog .merge-tickets a[style="display: inline"] {
  4372.     position: relative;
  4373.     top: 3px;
  4374. }
  4375. .dialog .merge-tickets .row-item .delete {
  4376.     border-bottom: 0 !important;
  4377. }
  4378. .merge-tickets a.preview {
  4379.     float: none !important;
  4380. }
  4381. .merge-tickets i.icon-reorder {
  4382.     background-image: initial !important;
  4383. }
  4384. .merge-tickets i.icon-reorder:before {
  4385.     display: inline-block !important;
  4386. }
  4387. .merge-tickets i.icon-reorder:before {
  4388.     content: "\f0c9" !important;
  4389.     top: 2px;  
  4390. }
  4391. #popup a.icon-comments-alt {
  4392.     float: right;
  4393.     margin: 4px 5px 0 0;
  4394. }
  4395. form[action^="#tickets/"] i.icon-trash:before {
  4396.     top: -1px !important;
  4397. }
  4398. form[action^="#tickets/"] .row-item .delete {
  4399.     will-change: background, color !important;
  4400.     -webkit-transition: all .3s ease-out!important;
  4401.     -moz-transition: all .3s ease-out!important;
  4402.     -o-transition: all .3s ease-out!important;
  4403.     -ms-transition: all .3s ease-out!important;
  4404.     transition: all .3s ease-out!important;
  4405. }
  4406. form[action^="#tickets/"] .row-item .delete:hover {
  4407.     background: #ea0c0c;
  4408.     color: #fff !important;
  4409. }
  4410. form[action^="#tickets/"] .row-item:last-of-type .delete:hover {
  4411.     border-radius: 0 0 6px 0 !important;
  4412. }
  4413. form[action^="#tickets/"] .row-item .delete:hover > a i.icon-trash:before {
  4414.     color: #fff !important;
  4415. }
  4416. .merge-spacer {
  4417.     margin: 0 0 0 0;
  4418. }
  4419. .merge-tickets i.icon-plus {
  4420.     background-image: initial !important;
  4421. }
  4422. form[action^="#tickets/"] button.inline.green.button {
  4423.     margin-top: 16px;
  4424.     padding: 0 4px;
  4425.     position: relative;
  4426.     top: 0;
  4427.     margin: 0;
  4428.     line-height: 28px;
  4429. }
  4430. form[action^="#tickets/"] hr {
  4431.     visibility: visible;
  4432.     opacity: .5;
  4433. }
  4434. li.row-item.ui-state-disabled,
  4435. li.row-item.ui-sortable-handle {
  4436.     width: 576px;
  4437. }
  4438.  
  4439. /* ==========================================================================
  4440.  TIPS
  4441. ========================================================================== */
  4442. i.help-tip {
  4443.     color: #128dbe;
  4444.     position: relative;
  4445.     top: -2px;
  4446. }
  4447. .body .icon-remove-circle:before,
  4448. a.tip_close .icon-remove-circle:before,
  4449. .dialog .icon-remove-circle:before,
  4450. .modal-header .close .icon-remove-circle:before {
  4451.     content: url(../icons/close.svg);
  4452.     height: 30px;
  4453.     width: 30px;
  4454.     top: 0 !important; 
  4455. }
  4456. i.icon-remove-circle {
  4457.     top: 12px;
  4458.     right: 8px;
  4459. }
  4460. a.tip_close i.icon-remove-circle,
  4461. .dialog a.close i.icon-remove-circle,
  4462. .modal-header .close .icon-remove-circle {
  4463.     top: 0;
  4464.     right: 0;
  4465. }
  4466. .icon-remove-circle:before {
  4467.     content: ' ';
  4468. }
  4469. .dialog a {
  4470.     color: #128dbe;
  4471. }
  4472. a.tip_close,
  4473. .dialog a.close,
  4474. .modal-header a.close {
  4475.     position: absolute;
  4476.     display: inline-block;
  4477.     right: 0; /*target?!*/
  4478.     top: 0;   /*target?!*/
  4479.     font-size: 0;
  4480.     color: #ffddb9;
  4481.     background: #ffddb9;
  4482.     width: 30px;
  4483.     height: 30px;
  4484.     line-height: 0;
  4485.     margin: 16px;
  4486.     padding: 0;
  4487.     border-radius: 10%;
  4488.     z-index: 9;
  4489. }
  4490. .tip_content a.tip_close {
  4491.     margin: 8px;
  4492. }
  4493. .tip_content.tickets a.tip_close {
  4494.     margin: 5px;
  4495. }
  4496. .dialog a.close,
  4497. .modal-header a.close {
  4498.     font-size: 20px !important;
  4499.     padding: 0 !important;
  4500. }
  4501. .rtl .dialog a.close {
  4502.     left: 0;
  4503. }
  4504. .modal-header a.close {
  4505.     opacity: 1;
  4506. }
  4507. .tip_content .links a {
  4508.     color: #128dbe;
  4509. }
  4510. .tip_content {
  4511.     height: auto !important;
  4512.     min-height: 20px;
  4513.     /*padding: 15px 25px 10px 10px;*/ /*Specify target*/
  4514.     border: 1px solid #979696 !important;
  4515.     background: #fff;
  4516.     border-radius: 5px;
  4517.     z-index: 3;
  4518.     position: absolute;
  4519.     line-height: 1.45rem;
  4520.     top: -1px;
  4521.     left: -28px;
  4522.     max-width: 400px;
  4523.     -moz-box-shadow: 5px 5px 7px -3px rgba(0,0,0,0.3);
  4524.     -webkit-box-shadow: 5px 5px 7px -3px rgba(0,0,0,0.3);
  4525.     box-shadow: 5px 5px 7px -3px rgba(0,0,0,0.3);
  4526. }
  4527. .tip_content h2 {
  4528.     width: calc(100% - 50px);
  4529. }
  4530. .canned-page .tip_content {
  4531.     max-width: unset;
  4532. }
  4533. .templates-page .tip_content {
  4534.     max-width: initial;
  4535. }
  4536. .logs-page .tip_content {
  4537.     max-width: initial;
  4538. }
  4539. .tip_content.tickets {
  4540.     left: -24px;
  4541. }
  4542. div[style="width:600px; padding: 2px 2px 0 5px;"] {
  4543.     min-width: 264px !important;
  4544.     max-width: 400px !important;
  4545.     padding: 0 !important; 
  4546. }
  4547. .tip_content hr {
  4548.     color: #ddd0;
  4549.     background-color: #ddd0;
  4550.     height: 6px;
  4551. }
  4552. .tip_content h1 {
  4553.     border-bottom: .5px solid #e4dbc2;
  4554.     font-weight: 500;
  4555.     background: #d2f0ff;
  4556.     padding-top: 0px;
  4557.     padding: 2px 0 9px 4px;
  4558.     width: calc(100% - 40px);
  4559. }
  4560. .doc-desc-title {
  4561.     font-weight: 500;
  4562. }
  4563. .tip_arrow {
  4564.     top: 11px; 
  4565.     border: 1px solid #fff;
  4566.     border-top: 0;
  4567.     border-bottom: 0;
  4568.     border-left: 0;
  4569. }
  4570. .tip_content strong {
  4571.     font-weight: 600;
  4572. }
  4573. .form_table tr i.help-tip {
  4574.     margin-left: 5px;
  4575.     opacity: 0.7;
  4576. }
  4577. .tip_content img.avatar {
  4578.     width: 50px;
  4579.     height: 50px !important;
  4580.     max-height: 60px !important;
  4581. }
  4582. #collab.tab_content td em {
  4583.     font-size: 85%;
  4584.     font-style: normal;
  4585. }
  4586. div[style="width:650px; padding: 2px 2px 0 5px;"] {
  4587.     width: 100% !important;
  4588.     padding: 0 !important;
  4589. }
  4590. #collab.tab_content td em:before {
  4591.     content: "\A";
  4592.     white-space: pre;
  4593. }
  4594. .tip_content table,
  4595. .tip_content table th {
  4596.     border: 0
  4597. }
  4598. .tip_content table td {
  4599.     /*border: .5px solid #ddd;*/ /*target*/
  4600. }
  4601. .custom-info {
  4602.     margin: 0 0 5px 10px !important;
  4603. }
  4604. #user_tabs_container table.custom-info {
  4605.     margin-top: 7px;
  4606. }
  4607. .tip_content table,
  4608. .tip_content table th,
  4609. .tip_content table td {
  4610.     border: 0;
  4611. }
  4612. .tip_content.faq {
  4613.     max-width: unset;
  4614. }
  4615. .tip_content.faq .thread-body {
  4616.     padding: 1.8em 0.9em 0 0 !important;
  4617. }
  4618.  
  4619. /* ==========================================================================
  4620.  ALERTS
  4621. ========================================================================== */
  4622. #msg_info, .info-banner,
  4623. #msg_notice, .success-banner, .notice-banner,
  4624. #msg_warning, .warning-banner,
  4625. #msg_error, .error-banner {
  4626.     margin: 0;
  4627.     padding: 14px 10px 14px 46px;
  4628.     margin-bottom: 10px;
  4629.     border-radius: 6px;
  4630.     font-size: 16px;
  4631.     border: .5px solid;
  4632.     font-weight: 500;
  4633.     box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 3px rgba(0,0,0,0.04);   
  4634. }
  4635. #msg_info, .info-banner {
  4636.     color: #31708f;
  4637.     background-color: #d9edf7;
  4638.     background: url(../icons/alert-outline-info.svg) 16px 50% no-repeat #d9edf7 !important;
  4639.     border-color: #bce8f1;
  4640.     background-size: 22px !important;
  4641.     box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 3px rgba(0,0,0,0.04);   
  4642. }
  4643. #msg_notice, .success-banner, .notice-banner {
  4644.     color: #3c763d;
  4645.     background-color: #dff0d8;
  4646.     background: url(../icons/alert-outline-message.svg) 16px 50% no-repeat #dff0d8 !important;
  4647.     border-color: #bdd1ac;
  4648.     background-size: 22px !important;
  4649.     box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 3px rgba(0,0,0,0.04);
  4650. }
  4651. #msg_info, #msg_notice, #msg_warning, #msg_error, .success-banner, .notice-banner {
  4652.     opacity: 1;
  4653.     animation-name: bounceIn;
  4654.     animation-duration: 450ms;
  4655.     animation-timing-function: linear;
  4656.     animation-delay: .4s;  
  4657. }
  4658. @keyframes bounceIn {
  4659.   0%{
  4660.     opacity: 0;
  4661.     transform: scale(0.3) translate3d(0,0,0);
  4662.   }
  4663.   50%{
  4664.     opacity: 0.9;
  4665.     transform: scale(1.1);
  4666.   }
  4667.   80%{
  4668.     opacity: 1.1;
  4669.     transform: scale(0.89);
  4670.   }
  4671.   100%{
  4672.     opacity: 1;
  4673.     transform: scale(1) translate3d(0,0,0);
  4674.   }
  4675. }
  4676. #msg_warning, .warning-banner {
  4677.     color: #8a6d3b;
  4678.     background-color: #fcf8e3;
  4679.     background: url(../icons/alert-outline-warning.svg) 16px 50% no-repeat #fcf8e3 !important; 
  4680.     border-color: #dfd3ba; 
  4681.     background-size: 22px !important;  
  4682.     box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 3px rgba(0,0,0,0.04);   
  4683. }
  4684. #msg_error, .error-banner  {
  4685.     color: #a94442;
  4686.     background-color: #f2dede;
  4687.     background: url(../icons/alert-outline-error.svg) 16px 50% no-repeat #f2dede !important;   
  4688.     border-color: #ebccd1;
  4689.     background-size: 22px !important;  
  4690.     box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 2px 3px rgba(0,0,0,0.04);   
  4691. }
  4692. #msg_warning .Icon.overdueTicket {
  4693.     background-image: none;
  4694. }
  4695. #msg_info .icon-info-sign:before,
  4696. .info-banner .icon-info-sign:before {
  4697.     display: none;
  4698. }
  4699. #ticket_tabs_container #msg_warning,
  4700. #ticket_tabs_container #msg_error,
  4701. #ticket_tabs_container #msg_notice,
  4702. #ticket_tabs_container #msg_alert {
  4703.     margin: 0 0 20px 0;
  4704. }
  4705. .message.bar.danger {
  4706.     border-bottom: 3px solid #ebccd1;
  4707.     color: #a94442;
  4708.     background-color: #f2dede;
  4709.  
  4710.     border-color: #ebccd1;
  4711.     background-size: 22px !important;
  4712.     z-index: 999999;
  4713.     opacity: 1;
  4714. }
  4715. .message.bar .avatar[class*=" oscar-"] {
  4716.     width: 40px;
  4717.     height: 40px;
  4718.     margin-right: 10px;
  4719.     background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%231F5B78' d='M8.5%2C2C6%2C2 4%2C4 4%2C6.5V7C2.89%2C7 2%2C7.89 2%2C9V18C2%2C19.11 2.89%2C20 4%2C20H8.72C10.18%2C21.29 12.06%2C22 14%2C22A8%2C8 0 0%2C0 22%2C14A8%2C8 0 0%2C0 14%2C6C13.66%2C6 13.32%2C6.03 13%2C6.08C12.76%2C3.77 10.82%2C2 8.5%2C2M8.5%2C4A2.5%2C2.5 0 0%2C1 11%2C6.5V7H6V6.5A2.5%2C2.5 0 0%2C1 8.5%2C4M14%2C8A6%2C6 0 0%2C1 20%2C14A6%2C6 0 0%2C1 14%2C20A6%2C6 0 0%2C1 8%2C14A6%2C6 0 0%2C1 14%2C8M13%2C10V15L16.64%2C17.19L17.42%2C15.9L14.5%2C14.15V10H13Z' /%3E %3C/svg%3E") !important;
  4720.     background-repeat: no-repeat;
  4721.     background-size: 50px 36px;
  4722.     position: relative;
  4723.     top: 3px;
  4724. }
  4725. .message.bar.top.danger .avatar[class*=" oscar-"] {
  4726. background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23a94442' d='M8.5%2C2C6%2C2 4%2C4 4%2C6.5V7C2.89%2C7 2%2C7.89 2%2C9V18C2%2C19.11 2.89%2C20 4%2C20H8.72C10.18%2C21.29 12.06%2C22 14%2C22A8%2C8 0 0%2C0 22%2C14A8%2C8 0 0%2C0 14%2C6C13.66%2C6 13.32%2C6.03 13%2C6.08C12.76%2C3.77 10.82%2C2 8.5%2C2M8.5%2C4A2.5%2C2.5 0 0%2C1 11%2C6.5V7H6V6.5A2.5%2C2.5 0 0%2C1 8.5%2C4M14%2C8A6%2C6 0 0%2C1 20%2C14A6%2C6 0 0%2C1 14%2C20A6%2C6 0 0%2C1 8%2C14A6%2C6 0 0%2C1 14%2C8M13%2C10V15L16.64%2C17.19L17.42%2C15.9L14.5%2C14.15V10H13Z' /%3E %3C/svg%3E") !important;
  4727. }
  4728. .message.bar .avatar.pull-left {
  4729.     margin-left: 0;
  4730. }
  4731. .message.bar .avatar.oscar-boy {
  4732.     background-position: initial;
  4733. }
  4734. .avatar.oscar-borg {
  4735.     background-position: unset;
  4736. }
  4737. .message.bar.top.danger {
  4738.     background-color: rgb(255, 201, 201);
  4739. }
  4740. .message.bar.top.danger button.inline.button.red {
  4741.     top: 17px;
  4742.     position: absolute;
  4743.     right: -2px;
  4744.     background: #ffffff45;
  4745.     color: #ac4947;
  4746.     border: .5px solid #ac4947;
  4747. }
  4748. #msg_warning .Icon.lockedTicket {
  4749.     background-image: initial;
  4750. }
  4751. .logs-page #msg_warning,
  4752. .logs-page #msg_error,
  4753. .logs-page #msg_notice,
  4754. .logs-page #msg_alert {
  4755.     display: block;
  4756.     margin: 23px 0 0 0;
  4757. }
  4758.  
  4759. /* ==========================================================================
  4760.  FOOTER
  4761. ========================================================================== */
  4762. #footer {
  4763.     color: var(--header-title);
  4764.     background: var(--nav-bar-bg);
  4765.     position: relative;
  4766.     height: 60px;
  4767. }
  4768. div#footer + div {
  4769.     background: var(--nav-bar-bg) !important;
  4770.     height: 36px;
  4771.     margin: -40px 0;
  4772. }
  4773. #footer {
  4774.     width: 100%;
  4775.     background: var(--nav-bar-bg) !important;
  4776.     background: rgba(0, 0, 0, 0.05);
  4777.     height: 60px;
  4778.     bottom: 0;
  4779.     padding: 0;
  4780.     position: static;
  4781. }
  4782. #footer #poweredBy {
  4783.     background: none;
  4784. }
  4785. #osticket {
  4786.     width: 50% !important;
  4787.     height: 100%;
  4788.     display: inline-block;
  4789.     float: left;
  4790. }
  4791. #ostawesome {
  4792.     width: 50% !important;
  4793.     height: 100%;
  4794.     display: inline-block;
  4795.     float: right;
  4796. }
  4797. a#osticket-link,
  4798. a#ostawesome-link {
  4799.     position: relative;
  4800.     top: 68%;
  4801.     transform: perspective(1px) translateY(-50%);
  4802.     padding: 0 20px;   
  4803. }
  4804. a#osticket-link {
  4805.     float: right;
  4806. }
  4807. a#ostawesome-link {
  4808.     float: left;
  4809. }
  4810. #footer #osticket svg,
  4811. #footer #ostawesome svg {
  4812.     fill: var(--header-title);
  4813.     width: 122px;
  4814. }
  4815. #ostawesome svg {
  4816.     width: 111px;
  4817.     position: relative;
  4818.     top: 2px;
  4819. }
  4820. /* jump */
  4821. @-webkit-keyframes jump {
  4822.   50% {
  4823.     -webkit-transform: scale(1.1);
  4824.     transform: scale(1.1);
  4825.     top: 20px;
  4826.   }
  4827. }
  4828. @keyframes jump {
  4829.   50% {
  4830.     -webkit-transform: scale(1.1);
  4831.     transform: scale(1.1);
  4832.     top: 20px;   
  4833.   }
  4834. }
  4835. .jump {
  4836.   display: inline-block;
  4837.   vertical-align: middle;
  4838.   -webkit-transform: perspective(1px) translateZ(0);
  4839.   transform: perspective(1px) translateZ(0);
  4840.   box-shadow: 0 0 1px transparent;
  4841. }
  4842. .jump:hover, .jump:focus, .jump:active {
  4843.   -webkit-animation-name: jump;
  4844.   animation-name: jump;
  4845.   -webkit-animation-duration: 0.5s;
  4846.   animation-duration: 0.5s;
  4847.   -webkit-animation-timing-function: linear;
  4848.   animation-timing-function: linear;
  4849.   -webkit-animation-iteration-count: 1;
  4850.   animation-iteration-count: 1;
  4851. }
  4852.  
  4853. /* ==========================================================================
  4854.  LOGIN
  4855. ========================================================================== */
  4856. #loginBody {
  4857.     background: var(--header-bg) !important;
  4858. }
  4859. #loginBody #brickwall {
  4860.     background-image: url("../../osta/img/backdrops/01.png");
  4861. }
  4862. #loginBody #loginBox {
  4863.     box-shadow: initial;
  4864.     width: 360px;
  4865.     margin-left: -181px;
  4866. }
  4867. #loginBody #loginBox:after {
  4868.     background-color: initial;
  4869.     border: none;
  4870. }
  4871. #loginBody #blur {
  4872.     -webkit-filter: initial;
  4873.     filter: inital;
  4874.     filter: initial;
  4875.     background: var(--nav-bar-bg);
  4876.     border-radius: 3px;
  4877. }
  4878. #loginBody #background {
  4879.     background-image: initial;
  4880. }
  4881. #loginBody #company .content {
  4882.     display: none;
  4883. }
  4884. #login-title {
  4885.     margin: 22px 0 -12px 0;
  4886. }
  4887. #login-title div#header-text #header-title {
  4888.     margin: 0;
  4889.     padding: 0;
  4890.     color: var(--header-title);
  4891.     text-decoration: none;
  4892.     line-height: 120%;
  4893.     font-style: normal;
  4894.     font-weight: 600;
  4895.     font-size: 30px;
  4896.     display: inline-block;
  4897.     font-family: "Montserrat",sans-serif;
  4898.     white-space: initial;  
  4899. }
  4900. #login-title #header-image img {
  4901.     display: inline-block !important;
  4902.     width: 100%;
  4903. }
  4904. #loginBody #logo .valign-helper {
  4905.     padding: 0;
  4906.     display: inline;
  4907. }
  4908. #login-title #header-default svg {
  4909.     width: 100% !important;
  4910.     height: initial;
  4911. }
  4912. #loginBody fieldset input {
  4913.     background: rgba(255, 255, 255, 0.5);
  4914. }
  4915. #loginBody fieldset input {
  4916.     display: block;
  4917.     margin-bottom: 0 !important;
  4918.     border: 0;
  4919.     /*padding: 18px 14px!important;*/ /*target*/
  4920.     letter-spacing: 1.4px;
  4921.     width: calc(100% - 37px) !important;
  4922.     height: 36px;  
  4923. }
  4924. #loginBody form {
  4925.     width: 270px;
  4926.     margin: 0 auto;
  4927. }
  4928. #loginBody fieldset {
  4929.     border: 0;
  4930.     width: 270px;
  4931.     margin: 0 auto !important
  4932. }
  4933. #loginBody input[type=password] {
  4934.     border-radius: 0 0 3px 0 !important;
  4935. }
  4936. #loginBody fieldset input:first-child  {
  4937.     border: 0;
  4938. }
  4939. #loginBody fieldset input:nth-child(2) {
  4940.     border-radius: 0 3px 0 0 !important;
  4941.     border: 0;
  4942.     width: calc(100% - 37px) !important;
  4943.     height: 37px;
  4944.     margin-bottom: 1px !important; 
  4945. }
  4946. #login-userid {
  4947.     background: rgba(255, 255, 255, 0.3);
  4948.     display: inline-block;
  4949.     width: 36px;
  4950.     height: 37px;
  4951.     float: left;
  4952.     border-radius: 3px 0 0 0;
  4953.     background-size: 22px;
  4954.     background-repeat: no-repeat;
  4955.     background-position: 7px 7px;
  4956. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='rgba(0%2C 0%2C 0%2C 0.1)' d='M12%2C19.2C9.5%2C19.2 7.29%2C17.92 6%2C16C6.03%2C14 10%2C12.9 12%2C12.9C14%2C12.9 17.97%2C14 18%2C16C16.71%2C17.92 14.5%2C19.2 12%2C19.2M12%2C5A3%2C3 0 0%2C1 15%2C8A3%2C3 0 0%2C1 12%2C11A3%2C3 0 0%2C1 9%2C8A3%2C3 0 0%2C1 12%2C5M12%2C2A10%2C10 0 0%2C0 2%2C12A10%2C10 0 0%2C0 12%2C22A10%2C10 0 0%2C0 22%2C12C22%2C6.47 17.5%2C2 12%2C2Z' /%3E%3C/svg%3E");
  4957. }
  4958. #login-password {
  4959.     background: rgba(255, 255, 255, 0.3);
  4960.     display: inline-block;
  4961.     width: 36px;
  4962.     height: 36px;
  4963.     float: left;
  4964.     border-radius: 0 0 0 3px;
  4965. }
  4966. #login-password:after {
  4967.     background-image: url(../svg/key.svg);
  4968.     content: ' ';
  4969.     display: inline-block;
  4970.     width: 36px;
  4971.     height: 36px;
  4972.     background-repeat: no-repeat;
  4973.     background-position: 6px;
  4974.     opacity: .12;
  4975. }
  4976. #loginBody fieldset input::-webkit-input-placeholder,   /* Chrome/Opera/Safari */
  4977. #loginBody fieldset input::-moz-placeholder,            /* Firefox 19+ */
  4978. #loginBody fieldset input:-ms-input-placeholder,        /* IE 10+ */
  4979. #loginBody fieldset input:-moz-placeholder {            /* Firefox 18- */
  4980.   color: #ddd;
  4981. }
  4982. #loginBox h3 {
  4983.     font-size: 21px;
  4984.     text-shadow: none;
  4985.     color: var(--header-title);
  4986.     font-family: monospace, courier;
  4987.     letter-spacing: initial;
  4988.     margin: 28px 0;
  4989.     font-weight: 100;
  4990.     opacity: .7;
  4991. }
  4992. #loginBox button[type=submit],
  4993. #loginBox input[type="submit"],
  4994. #loginBox .primary.button {
  4995.     box-shadow: none;
  4996.     margin: 2px 0 0 0;
  4997.     padding: 6px 20px!important;
  4998.     height: 36px;
  4999.     background: #128dbe;
  5000.     text-shadow: initial;
  5001.     border: none;
  5002.     font-weight: 400;
  5003.     color: rgba(255, 255, 255, 0.4588235294117647) !important;
  5004.     letter-spacing: 1.5px;
  5005.     width: 100%;
  5006.     font-size: 18px;
  5007. }
  5008. form#login i.icon-signin,
  5009. #loginBody i.icon-signin:before {
  5010.     display: none !important;
  5011. }
  5012. #loginBox h3[style="color:black;"] em { /*pw reset confirmation sent page*/
  5013.     font-size: 17px;
  5014.     font-style: initial;
  5015.     font-family: 'Open Sans';
  5016.     font-weight: 500;
  5017.     line-height: initial;
  5018. }
  5019. /* Change Autocomplete styles in Chrome*/
  5020. input:-webkit-autofill,
  5021. input:-webkit-autofill:hover,
  5022. input:-webkit-autofill:focus
  5023. input:-webkit-autofill,
  5024. textarea:-webkit-autofill,
  5025. textarea:-webkit-autofill:hover
  5026. textarea:-webkit-autofill:focus,
  5027. select:-webkit-autofill,
  5028. select:-webkit-autofill:hover,
  5029. select:-webkit-autofill:focus {
  5030.     -webkit-text-fill-color: #000;
  5031.     -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08627450980392157) inset;
  5032.     box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.08627450980392157) inset;
  5033.     border: .5px solid #bfbfbf;
  5034.     transition: background-color 5000s ease-in-out 0s;
  5035. }
  5036. #loginBody form#login button,
  5037. #loginBody input[value="Send Email"] {
  5038.     float: initial;
  5039.     margin: 27px auto 21px auto !important
  5040. }
  5041. h3[style="display:inline"] {
  5042.     margin: 0 0 -12px 0 !important;
  5043.     display: block !important;
  5044. }
  5045. #pw-reset {
  5046.     position: relative;
  5047.     top: -6px;
  5048. }
  5049. #loginBox #pw-reset h3 {
  5050.     margin: 0;
  5051. }
  5052. h3 a[href="pwreset.php"] {
  5053.     margin-top: 0 !important;
  5054.     font-size: 15px;
  5055.     text-shadow: none;
  5056.     color: var(--header-title);
  5057.     letter-spacing: initial;
  5058.     margin: 0 0;
  5059.     font-weight: 100;
  5060.     text-decoration: none;
  5061. }
  5062. #loginBody #poweredBy .osticket-logo {
  5063.     border: none;
  5064.     -webkit-filter: none;
  5065.     filter: none;
  5066.     ms-filter: none;
  5067. }
  5068. #loginBody #poweredBy {
  5069.     display: none;
  5070. }
  5071. /* 2FA Verification */
  5072. #loginBody .form-simple .field-label.required {
  5073.     display: none;
  5074. }
  5075. #loginBody .form-simple em {
  5076.     font-size: 15px;
  5077.     text-shadow: none;
  5078.     color: var(--header-title) !important;
  5079.     font-family: 'Open Sans', monospace, courier;
  5080.     letter-spacing: initial;
  5081.     margin: 0 0 14px;
  5082.     font-weight: 100;
  5083.     opacity: .7;
  5084.     font-style: initial !important;
  5085.     line-height: initial;
  5086. }
  5087. input[autocomplete="one-time-code"] {
  5088.     width: 62px !important;
  5089.     min-width: 20px;
  5090.     text-align: center;
  5091.     padding: 0;
  5092. }
  5093.  
  5094.  
  5095. /* ==========================================================================
  5096.   PASSWORD RESET PAGE pwreset.php
  5097. ========================================================================== */
  5098. form[action="pwreset.php"] input.submit {
  5099.     margin: 20px !important;
  5100. }
  5101. #loginBody form[action="pwreset.php"] fieldset input {
  5102.     width: 100% !important;
  5103. }
  5104. #loginBody form[action="pwreset.php"] fieldset input:first-child {
  5105.     background-image: unset;
  5106.     padding-left: 10px !important; 
  5107. }
  5108.  
  5109. /* ==========================================================================
  5110.  MISC.
  5111. ========================================================================== */
  5112. .quicknote a.action, .floating-options a.action {
  5113.     width: initial;
  5114.     margin: 4px 2px;
  5115.     padding: 3px;
  5116.     color: black !important;
  5117.     background: -webkit-linear-gradient(#fafafa 0%, #e7ebf0) #ffffff;
  5118.     background: -o-linear-gradient(#fafafa 0%, #e7ebf0) #ffffff;
  5119.     background: linear-gradient(#fafafa 0%, #e7ebf0) #ffffff;
  5120.     border: .5px solid #cdd2d4;
  5121.     border-radius: 3px;
  5122. }
  5123. .quicknote a.action:hover, .floating-options a.action:hover {
  5124.     border: .5px solid #aaa;
  5125. }
  5126. .avatar > img.avatar {
  5127.     width: 100%;
  5128.     height: auto;
  5129. }
  5130. div#user-profile .avatar > img.avatar,
  5131. form[action="#users/lookup"] .avatar > img.avatar {
  5132.     width: 100px;
  5133. }
  5134. .users-page .tip_content.users .avatar.pull-left,
  5135. .users-page .tip_content.users #user-profile .avatar > img.avatar {
  5136.     width: 50px;
  5137.     height: 50px;
  5138. }
  5139. .users-page .tip_content.users .floating-options i.icon-edit,
  5140. .users-page .tip_content.users .floating-options i.icon-share {
  5141.     padding: 4px !important;
  5142. }
  5143. .users-page .tip_content.users .quicknote .body {
  5144.     padding: 0;
  5145. }
  5146. div#user-email a {
  5147.     color: #128dbe;
  5148. }
  5149. .code-green {
  5150.     font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
  5151.     font-weight: 400;
  5152.     font-size: 14px;
  5153.     color: #3ead08;
  5154. }
  5155. .forslash {
  5156.     margin: 0 6px;
  5157.     font-weight: bold;
  5158.     color: #bfbfbf;
  5159. }
  5160. .current-version.highlight {
  5161.     font-weight: 700;
  5162.     padding: 1px 6px 3px 6px;
  5163.     color: #816700;
  5164.     background-color: #ffefac;
  5165.     border-radius: 3px;
  5166.     font-family: "SFMono-Regular",Consolas,"Liberation Mono",Menlo,Courier,monospace;
  5167.     font-size: 14px;
  5168. }
  5169. .current-version.checked:after {
  5170.     content: ' ';  
  5171.     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23128DBE' d='M21%2C7L9%2C19L3.5%2C13.5L4.91%2C12.09L9%2C16.17L19.59%2C5.59L21%2C7Z' /%3E %3C/svg%3E");
  5172.     background-position: center center;
  5173.     fill: #128dbe !important;
  5174.     color: #128dbe !important;
  5175.     display: inline-block;
  5176.     width: 20px;
  5177.     height: 20px;
  5178.     background-size: 20px 20px !important;
  5179.     background-repeat: no-repeat !important;
  5180.     position: relative;
  5181.     top: 4px;
  5182.     margin-left: 6px;
  5183. }
  5184. #version-msg {
  5185.     margin: 24px 0 0 0;
  5186. }
  5187. #version-msg a:after {
  5188.     content: ' ';
  5189. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23128dbe' d='M17%2C13L12%2C18L7%2C13H10V9H14V13M19.35%2C10.03C18.67%2C6.59 15.64%2C4 12%2C4C9.11%2C4 6.6%2C5.64 5.35%2C8.03C2.34%2C8.36 0%2C10.9 0%2C14A6%2C6 0 0%2C0 6%2C20H19A5%2C5 0 0%2C0 24%2C15C24%2C12.36 21.95%2C10.22 19.35%2C10.03Z' /%3E%3C/svg%3E");
  5190.     background-size: 23px;
  5191.     background-repeat: no-repeat;
  5192.     width: 25px;
  5193.     height: 25px;
  5194.     display: inline-block;
  5195.     position: relative;
  5196.     top: 6px;
  5197.     margin-right: 0;
  5198.     margin-left: 9px;
  5199. }
  5200. #version-msg a {
  5201.     transition: color .5s ease !important;
  5202. }
  5203. #version-msg a:hover {
  5204.     color: #8ac70f 
  5205. }
  5206. #version-msg a:hover:after {
  5207.     content: ' ';
  5208. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%238ac70f' d='M17%2C13L12%2C18L7%2C13H10V9H14V13M19.35%2C10.03C18.67%2C6.59 15.64%2C4 12%2C4C9.11%2C4 6.6%2C5.64 5.35%2C8.03C2.34%2C8.36 0%2C10.9 0%2C14A6%2C6 0 0%2C0 6%2C20H19A5%2C5 0 0%2C0 24%2C15C24%2C12.36 21.95%2C10.22 19.35%2C10.03Z' /%3E%3C/svg%3E");
  5209. }
  5210. i.icon-sort-by-attributes-alt.icon-flip-vertical {
  5211.     -webkit-transform: rotate(180deg) !important;
  5212.     -moz-transform: rotate(180deg) !important;
  5213.     -ms-transform: rotate(180deg) !important;
  5214.     -o-transform: rotate(180deg) !important;
  5215.      transform: rotate(180deg) !important;
  5216. }
  5217. #client-side-language-bar {
  5218.     font-weight: 500;
  5219.     margin: 0 0 6px 0;
  5220. }
  5221. div#profile tr:first-child {
  5222.     display: none;
  5223. }
  5224. .users .green.button:hover {
  5225.     box-shadow: none;
  5226. }
  5227. #upload table th:first-child {
  5228.     background: none;
  5229. }
  5230. #upload table th {
  5231.     font-size: 13px;
  5232. }
  5233. #upload table td {
  5234.     padding: 10px 0;
  5235.     font-size: 13px;   
  5236. }
  5237. #upload table {
  5238.     border: initial;
  5239. }
  5240.  
  5241. /* ==========================================================================
  5242.  POPUP: LOADING SMALL SPINNER
  5243. ========================================================================== */
  5244. .dialog#popup {
  5245.     width: 650px;
  5246.     min-height: 128px;
  5247. }
  5248. #popup i.icon-spinner {
  5249.     margin: 0 14px !important;
  5250.     padding: 0 !important;
  5251.     width: 50px;
  5252.     height: 50px;
  5253.     top: 15px;
  5254. }
  5255. #popup i.icon-spinner.icon-spin.icon-large:before {
  5256.     background-image: url(../../osta/img/loading.svg);
  5257.     content: ' ';
  5258.     background-position: center !important;
  5259.     border-radius: 50%;
  5260.     vertical-align: middle;
  5261.     width: 50px !important;
  5262.     height: 50px !important;
  5263.     background-size: 50px 50px !important;
  5264.     top: 0 !important;
  5265. }
  5266.  
  5267. /* ==========================================================================
  5268.  OVERLAY
  5269. ========================================================================== */
  5270. #overlay {
  5271.     background: #000 !important;
  5272.     opacity: .1 !important;
  5273. }
  5274. #loadingbar {
  5275.   background: var(--header-title) !important;
  5276. }
  5277.  
  5278. /* ==========================================================================
  5279.  THEME PAGE
  5280. ========================================================================== */
  5281. #color-themes,
  5282. #custom-theme {
  5283.     width: 100%;
  5284. }
  5285. #color-themes tr:first-child td:first-child,
  5286. #custom-theme tr:first-child td:first-child {
  5287.     width: 100%;
  5288.     /* background: #ccc; */
  5289. }
  5290. #choose-theme.show,
  5291. #custom-theme.show {
  5292.     opacity: 1;
  5293.     pointer-events: auto;
  5294. }
  5295. #choose-theme.hide,
  5296. #custom-theme.hide {
  5297.     opacity: .4;
  5298.     pointer-events: none;
  5299. }
  5300. @media (max-width: 1000px) {
  5301.     table#color-themes {
  5302.         width: 100%;
  5303.     }
  5304. }
  5305. .tab_content h2 {
  5306.     line-height: 28px;
  5307. }
  5308. #color-themes h2 {
  5309.     margin: 0 0 -10px 0;
  5310. }
  5311. .theme-card {
  5312.     width: 240px;
  5313.     height: 126px;
  5314.     background: #ddd;
  5315.     border: .5px solid #ddd;
  5316.     z-index: 1;
  5317.     overflow: hidden;
  5318.     border-radius: 2px;
  5319.     box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.12);
  5320.     transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  5321.     float: left;
  5322.     margin: 20px 20px 15px 20px;
  5323. }
  5324. .rtl .theme-card {
  5325.     float: right;
  5326.     margin: 20px 30px 15px 15px;   
  5327. }
  5328. .theme-card-lid {
  5329.     opacity: 1;
  5330.     width: 240px;
  5331.     height: 126px;
  5332.     background: #fff;
  5333.     overflow: hidden;
  5334.     position: relative;
  5335.     top: 0;
  5336.     z-index: 2;
  5337.     border-radius: 2px;  
  5338.     -webkit-transition: all 0.3s ease;
  5339.     -moz-transition: all 0.3s ease;
  5340.     -o-transition: all 0.3s ease;
  5341.     -ms-transition: all 0.3s ease;
  5342.     transition: all 0.3s ease;
  5343.     -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
  5344.     box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);  
  5345.     background-size: 160px;
  5346.     background-repeat: no-repeat;
  5347.     background-position: center;
  5348. }
  5349. .theme-card:hover > .theme-card-lid {
  5350.     top: -53.33px;
  5351.     background-size: 120px;
  5352.     background-position: center 67px;
  5353. }
  5354. .theme-card-bottom {
  5355.     font-family: 'Open Sans', sans-serif;
  5356.     font-size: 13px;
  5357.     position: relative;
  5358.     top: -53px;
  5359.     height: 53px;
  5360.     z-index: 1;
  5361.     color: #999;
  5362.     font-weight: 500;
  5363.     width: 100%;
  5364.     background: #eee;
  5365. }
  5366. .theme-preview {
  5367.     float: left;
  5368.     padding: 20px 0 20px 20px;
  5369. }
  5370. .switch {
  5371.     float: right;
  5372.     padding: 20px 20px 20px 0;
  5373. }
  5374. .switch:after {
  5375.     clear: both;
  5376. }
  5377. html[lang="ru"] a.pink {
  5378.     font-size: 75%;
  5379.     display: table-caption;
  5380. }
  5381. html[lang="ru"] .theme-preview {
  5382.     padding: 20px 0 0 10px;
  5383.     position: relative;
  5384.     bottom: 6px;
  5385. }
  5386. html[lang="ru"] .theme-preview a {
  5387.     font-size: 80%;
  5388.     display: table-caption;
  5389. }
  5390. html[lang="ru"] .switch {
  5391.     padding: 20px 10px 20px 0;
  5392.     font-size: 80%;
  5393. }
  5394. .use-custom-theme {
  5395.     display: inline-block;
  5396.     margin: 20px 15px 15px 20px;
  5397.     padding: 16px;
  5398.     color: #4c5156 !important;
  5399.     text-transform: uppercase;
  5400.     opacity: 1;
  5401.     width: fit-content;
  5402.     background: #fff;
  5403.     overflow: hidden;
  5404.     z-index: 2;
  5405.     font-weight: 400;
  5406.     border-radius: 2px;
  5407.     -webkit-transition: all 0.3s ease;
  5408.     -moz-transition: all 0.3s ease;
  5409.     -o-transition: all 0.3s ease;
  5410.     -ms-transition: all 0.3s ease;
  5411.     transition: all 0.3s ease;
  5412.     box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.12);
  5413. }
  5414. .rtl .use-custom-theme {
  5415.     margin: 20px 30px 15px 15px;
  5416. }
  5417. .use-custom-theme input[type="radio"] {
  5418.     margin: 0 0 0 6px ;
  5419. }
  5420. .rtl .use-custom-theme input[type="radio"] {
  5421.     margin: 0 6px 0 0 ;
  5422. }
  5423. .use-custom-theme:hover {
  5424.     transition: all 0.3s ease;
  5425.     -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
  5426.     box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
  5427. }
  5428. button[value="Save Theme"],
  5429. button#save-custom-colors {
  5430.     margin: 15px 30px 20px 20px;
  5431.     padding: 14px 20px 10px 20px!important;
  5432.     font-size: 16px;
  5433.     color: #3c763d;
  5434.     background-color: #d0e9c6;
  5435.     border: initial;
  5436. }
  5437. button[value="Save Theme"]:hover,
  5438. button#save-custom-colors:hover {
  5439.     background: #b4e6a0 !important;
  5440.     color: #2a3e2a !important;
  5441.     border: initial;
  5442.     box-shadow: unset;
  5443. }
  5444. .rtl button[value="Save Theme"],
  5445. .rtl button#save-custom-colors {
  5446.     margin: 15px 30px 20px 15px;
  5447. }
  5448. #color-theme input.switch:empty ~ label {
  5449.     top: 3px;
  5450. }
  5451. #theme-black {
  5452.     background-image: url("../../osta/css/themes/black/black-theme.svg");
  5453. }
  5454. #theme-mint {
  5455.     background-image: url("../../osta/css/themes/mint/mint-theme.svg");
  5456. }
  5457. #theme-ice {
  5458.     background-image: url("../../osta/css/themes/ice/ice-theme.svg");
  5459. }
  5460. #theme-soft {
  5461.     background-image: url("../../osta/css/themes/soft/soft-theme.svg");
  5462. }
  5463. #theme-pink {
  5464.     background-image: url("../../osta/css/themes/pink/pink-theme.svg");
  5465. }
  5466. #theme-earth {
  5467.     background-image: url("../../osta/css/themes/earth/earth-theme.svg");
  5468. }
  5469. #theme-brown {
  5470.     background-image: url("../../osta/css/themes/brown/brown-theme.svg");
  5471. }
  5472. #theme-blue {
  5473.     background-image: url("../../osta/css/themes/blue/blue-theme.svg");
  5474. }
  5475. #theme-cool {
  5476.     background-image: url("../../osta/css/themes/cool/cool-theme.svg");
  5477. }
  5478. #theme-bright {
  5479.     background-image: url("../../osta/css/themes/bright/bright-theme.svg");
  5480. }
  5481. #logo-options,
  5482. #additional-options,
  5483. #theme3 {
  5484.     margin: 0 0 10px 0;
  5485. }
  5486. #theme4 {
  5487.     margin: 20px 0 0 0;
  5488. }
  5489. #theme5 {
  5490.     margin-top: 44px;
  5491. }
  5492. #theme6 {
  5493.     margin-top: 40px;
  5494. }
  5495. #theme7 {
  5496.     margin-top: 40px;
  5497. }
  5498. table#theme5 a {
  5499.     transition: all 0.3s ease; 
  5500.     font-size: 90%;
  5501.     border: .5px solid;
  5502.     background: #fff;
  5503.     padding: 0 4px 1px 4px;
  5504.     margin-bottom: 10px;       
  5505. }
  5506. table#theme5 a:hover {
  5507.     transition: all 0.3s ease;
  5508.     -webkit-box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.0);
  5509.     box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.0);
  5510.     position: relative;
  5511.     top: -1px;
  5512.     border: .5px solid #659505;
  5513.     color: #659505;
  5514. }
  5515. #additional-options input[type=text] {
  5516.     margin: 0 5px 0 0 !important;
  5517.     height: 33px !important;
  5518.     padding: 0 0 0 8px !important;
  5519. }
  5520. #custom-theme {
  5521.     margin-top: 20px;
  5522. }
  5523. #color-pickers {
  5524.     padding: 0 0 0 20px;
  5525. }
  5526. .rtl #color-pickers {
  5527.     padding: 0 20px 0 0;
  5528. }
  5529. input.form-control.input-lg {
  5530.     padding: 0 0 0 8px !important;
  5531.     margin: 0 0 10px 0;
  5532. }
  5533. .rtl input.form-control.input-lg {
  5534.     padding: 0 8px 0 0 !important;
  5535. }
  5536. #logo-options input[type="radio"] {
  5537.     margin: 0 10px 0 4px;
  5538. }
  5539. .rtl #logo-options input[type="radio"] {
  5540.     margin: 0 4px 0 10px;
  5541. }
  5542. #additional-options input[type="radio"] {
  5543.     margin: 0 10px 0 4px;
  5544. }
  5545. .rtl #additional-options input[type="radio"] {
  5546.     margin: 0 4px 0 10px;
  5547. }
  5548. #logo-options tr:first-child td,
  5549. #additional-options tr:first-child td,
  5550. #theme3 tr:first-child td,
  5551. #theme4 tr:first-child td {
  5552.     padding: 0;
  5553. }
  5554. #logo-options td,
  5555. #additional-options td,
  5556. #theme2a tr:nth-child(2) td,
  5557. #theme3 td,
  5558. #theme4 td,
  5559. #theme5 tr:nth-child(2) td,
  5560. #theme6 tr:nth-child(2) td,
  5561. #theme7 tr:nth-child(2) td {
  5562.     padding: 0 0 20px 20px;
  5563. }
  5564. .rtl #logo-options td,
  5565. .rtl #additional-options td,
  5566. .rtl #theme2a tr:nth-child(2) td,
  5567. .rtl #theme3 td,
  5568. .rtl #theme4 td,
  5569. .rtl #theme5 tr:nth-child(2) td {
  5570.     padding: 0 20px 20px 0;
  5571. }
  5572. #custom-header-bg-button,
  5573. #theme-title-button,
  5574. #theme-subtitle-button,
  5575. #mobile-text-button,
  5576. #mobile-link-button,
  5577. #language-bar-save-button,
  5578. #logo-options-save-button {
  5579.     margin: 0;
  5580.     height: 32px !important;
  5581.     min-width: 204px;
  5582.     font-size: 16px;
  5583.     color: #515d6d;
  5584.     border: initial !important;
  5585.     background: #dcdfe2 !important;
  5586. }
  5587. #custom-header-bg-button:hover,
  5588. #theme-title-button:hover,
  5589. #theme-subtitle-button:hover,
  5590. #mobile-text-button:hover,
  5591. #mobile-link-button:hover,
  5592. #language-bar-save-button:hover,
  5593. #logo-options-save-button:hover {
  5594.     background: #b4e6a0 !important;
  5595.     color: #2a3e2a !important;
  5596.     border: initial;
  5597.     box-shadow: unset;
  5598. }
  5599. #theme-title-button:before,
  5600. #theme-subtitle-button:before,
  5601. #mobile-text-button:before,
  5602. #mobile-link-button:before {
  5603.     width: 20px;
  5604.     height: 20px;
  5605.     background-size: 10px !important;
  5606.     float: left;
  5607.     padding: 0 0 0 2px;
  5608.     position: relative;
  5609.     top: -3px;
  5610. }
  5611. #custom-text-and-links button {
  5612.     margin: 0 0 0 7px;
  5613. }
  5614. #theme6 button,
  5615. #theme7 button {
  5616.     background: #dcdfe2;
  5617.     color: #6d7989;
  5618.     border: medium none;
  5619.     margin: 0px auto;
  5620.     left: 0;
  5621.     right: 0;
  5622.     bottom: 40px;
  5623.     width: fit-content;
  5624.     text-align: center;
  5625.     padding: 14px 30px 14px 30px;
  5626.     display: inline-block;
  5627.     border-radius: 3px;
  5628.     letter-spacing: 2px;
  5629.     font-weight: 700;
  5630.     font-size: 13px;
  5631. }
  5632. #theme6 button:hover,
  5633. #theme7 button:hover {
  5634.     background: #c9cdd0;
  5635.     color: #343a42;
  5636. }  
  5637. button#old-client {
  5638.     margin-right: 16px;
  5639.     margin-bottom: 10px;
  5640.     background: #ff7563;
  5641.     color: #fff;
  5642. }
  5643. button#old-staff {
  5644.     background: #8391A3;
  5645.     color: #fff;   
  5646. }
  5647. form#header-bg {
  5648.     margin: 3px 30px 15px 30px;
  5649. }
  5650. #show-errors {
  5651.     position: absolute;
  5652.     top: 29px;
  5653.     right: 29px;
  5654.     width: 354px;
  5655.     border: 1px solid #cdcdcd;
  5656.     border-radius: 4px;
  5657.     padding: 20px;
  5658. }
  5659. @media screen and (max-width: 1145px) {
  5660. #show-errors {
  5661.         width: 25vw;
  5662.     }
  5663. }
  5664. @media screen and (max-width: 1056px) {
  5665. #show-errors {
  5666.         display: none;
  5667.     }
  5668. }
  5669. .show-php-errors {
  5670.     vertical-align: top;
  5671.     line-height: 32px;
  5672.     font-size: 18px;
  5673.     height: 42px;
  5674. }
  5675. #show-errors-title {
  5676.     position: relative;
  5677.     top: -7px;
  5678. }
  5679. #logo-options .checkcontainer,
  5680. #additional-options .checkcontainer {
  5681.     margin: 0 20px 0 0;
  5682. }
  5683. #custom-text-and-links .responsive-div-theme {
  5684.     margin: 0 0 0 20px;
  5685. }
  5686. .responsive-div-theme {
  5687.      width:100%;
  5688. }
  5689.  .responsive-div-theme div {
  5690.      -moz-box-sizing:border-box;
  5691.      box-sizing:border-box;  
  5692. }
  5693.  #one-theme, #two-theme {
  5694.      width:50%;
  5695.      float:left;
  5696.      height:100%;
  5697. }
  5698.  #two-theme {
  5699. }
  5700. .responsive-div-theme form {
  5701.     margin: 0 0 9px 0;
  5702. }
  5703.  @media screen and (max-width: 850px) {
  5704.      #one-theme, #two-theme {
  5705.          width:auto;
  5706.          float:none;
  5707.     }
  5708. }
  5709. a#subnav7.theme {
  5710.    -webkit-animation-duration: 1.5s;
  5711.   animation-duration: 1.5s;
  5712.   -webkit-animation-fill-mode: both;
  5713.   animation-fill-mode: both;
  5714.   -webkit-animation-name: bounce;
  5715.   animation-name: bounce;
  5716.   -webkit-transform-origin: center bottom;
  5717.   transform-origin: center bottom;
  5718. }
  5719. @-webkit-keyframes bounce {
  5720.   0%, 20%, 53%, 80%, 100% {
  5721.     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  5722.     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  5723.     -webkit-transform: translate3d(0,0,0);
  5724.     transform: translate3d(0,0,0);
  5725.   }
  5726.   40%, 43% {
  5727.     -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  5728.     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  5729.     -webkit-transform: translate3d(0, -8px, 0);
  5730.     transform: translate3d(0, -8px, 0);
  5731.   }
  5732.   70% {
  5733.     -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  5734.     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  5735.     -webkit-transform: translate3d(0, -5px, 0);
  5736.     transform: translate3d(0, -5px, 0);
  5737.   }
  5738.   90% {
  5739.     -webkit-transform: translate3d(0,-2px,0);
  5740.     transform: translate3d(0,-2px,0);
  5741.   }
  5742. }
  5743. @keyframes bounce {
  5744.   0%, 20%, 53%, 80%, 100% {
  5745.     -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  5746.     animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  5747.     -webkit-transform: translate3d(0,0,0);
  5748.     transform: translate3d(0,0,0);
  5749.   }
  5750.   40%, 43% {
  5751.     -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  5752.     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  5753.     -webkit-transform: translate3d(0, -8px, 0);
  5754.     transform: translate3d(0, -8px, 0);
  5755.   }
  5756.   70% {
  5757.     -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  5758.     animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
  5759.     -webkit-transform: translate3d(0, -5px, 0);
  5760.     transform: translate3d(0, -5px, 0);
  5761.   }
  5762.   90% {
  5763.     -webkit-transform: translate3d(0,-2px,0);
  5764.     transform: translate3d(0,-2px,0);
  5765.   }
  5766. }
  5767. #theme-picker li {
  5768.     height: 26px;
  5769.     font-size: 18px;
  5770. }
  5771. #theme-picker input[type="radio"] {
  5772.     margin: 0 3px 0 0;
  5773. }
  5774. /* Custom CSS Code Mirror */
  5775. .cm-s-lucario span.cm-property,
  5776. .cm-s-lucario span.cm-variable-2 {
  5777.     color: #a1bad2 !important;
  5778. }
  5779. .cm-s-lucario span.cm-atom,
  5780. .cm-s-lucario span.cm-number {
  5781.     color: #9a7bc7 !important;
  5782. }
  5783. .cm-s-lucario span.cm-string,
  5784. .cm-s-lucario span.cm-string-2 {
  5785.     color: #c5c5c5 !important;
  5786. }
  5787. /* Custom labels: the container */
  5788. .checkcontainer {
  5789.     position: relative;
  5790.     cursor: pointer;
  5791.     padding-left: 27px;
  5792.     -webkit-user-select: none; /* Chrome, Opera, Safari */
  5793.     -moz-user-select: none; /* Firefox 2+ */
  5794.     -ms-user-select: none; /* IE 10+ */
  5795.     user-select: none; /* Standard syntax */
  5796. }
  5797. /* Hide the browser's default checkbox */
  5798. .checkcontainer input {
  5799.     position: absolute;
  5800.     opacity: 0;
  5801.     cursor: pointer;}
  5802. /* Create a custom checkbox */
  5803. .checkmark {
  5804.     position: absolute;
  5805.     top: 0;
  5806.     left: 0;
  5807.     height: 25px;
  5808.     width: 25px;
  5809.     background-color: #eee;
  5810. }
  5811. /* On mouse-over, add a grey background color */
  5812. .checkcontainer:hover input ~ .checkmark {
  5813.     background-color: #ccc;
  5814. }
  5815. /* When the checkbox is checked, add a blue background */
  5816. .checkcontainer input:checked ~ .checkmark {
  5817.     background-color: #2196F3;
  5818. }
  5819. /* Create the checkmark/indicator (hidden when not checked) */
  5820. .checkmark:after {
  5821.     content: "";
  5822.     position: absolute;
  5823.     display: none;
  5824. }
  5825. /* Show the checkmark when checked */
  5826. .checkcontainer input:checked ~ .checkmark:after {
  5827.     display: block;
  5828. }
  5829. /* Style the checkmark/indicator */
  5830. .checkcontainer .checkmark:after {
  5831.     left: 10px;
  5832.     top: 6px;
  5833.     width: 7px;
  5834.     height: 12px;
  5835.     border: solid white;
  5836.     border-width: 0 3px 3px 0;
  5837.     -webkit-transform: rotate(45deg);
  5838.     -ms-transform: rotate(45deg);
  5839.     transform: rotate(45deg);
  5840. }
  5841. /* Create a custom radio button */
  5842. .radiobtn{
  5843.     position: absolute;
  5844.     top: 0;
  5845.     left: 0;
  5846.     height: 18px;
  5847.     width: 18px;
  5848.     background-color: #eee;
  5849.     border-radius: 50%;
  5850.     border: .5px solid #b8bdbf;
  5851.     will-change: background-color!important;
  5852.     -webkit-transition: all .3s ease-out!important;
  5853.     -moz-transition: all .3s ease-out!important;
  5854.     -o-transition: all .3s ease-out!important;
  5855.     -ms-transition: all .3s ease-out!important;
  5856.     transition: all .3s ease-out!important;
  5857. }
  5858. .rtl .radiobtn {
  5859.     left: initial;
  5860.     right: 0;
  5861. }
  5862. .switch .radiobtn {
  5863.     top: 0;
  5864. }
  5865. /* On mouse-over, add a grey background color */
  5866. .checkcontainer:hover input ~ .radiobtn{
  5867.     background-color: #ccc;
  5868. }
  5869. /* When the radio button is checked, add a blue background */
  5870. .checkcontainer input:checked ~ .radiobtn{
  5871.  
  5872. }
  5873. /* Create the indicator (the dot/circle - hidden when not checked) */
  5874. .radiobtn:after {
  5875.     content: "";
  5876.     position: absolute;
  5877.     display: none;
  5878. }
  5879. /* Show the indicator (dot/circle) when checked */
  5880. .checkcontainer input:checked ~ .radiobtn:after {
  5881.     display: block;
  5882. }
  5883. /* Style the indicator (dot/circle) */
  5884. .checkcontainer .radiobtn:after {
  5885.     top: 6px;
  5886.     left: 6px;
  5887.     width: 6px;
  5888.     height: 6px;
  5889.     border-radius: 50%;
  5890.     background: #128dbe;
  5891. }
  5892. .action-button {
  5893.     position: relative;
  5894.     overflow: hidden;  
  5895. }
  5896. /* Icon Hang */
  5897. @-webkit-keyframes hvr-icon-hang {
  5898.   0% {
  5899.     -webkit-transform: translateY(3px);
  5900.     transform: translateY(3px);
  5901.   }
  5902.   50% {
  5903.     -webkit-transform: translateY(1px);
  5904.     transform: translateY(1px);
  5905.   }
  5906.   100% {
  5907.     -webkit-transform: translateY(3px);
  5908.     transform: translateY(3px);
  5909.   }
  5910. }
  5911. @keyframes hvr-icon-hang {
  5912.   0% {
  5913.     -webkit-transform: translateY(3px);
  5914.     transform: translateY(3px);
  5915.   }
  5916.   50% {
  5917.     -webkit-transform: translateY(1px);
  5918.     transform: translateY(1px);
  5919.   }
  5920.   100% {
  5921.     -webkit-transform: translateY(3px);
  5922.     transform: translateY(3px);
  5923.   }
  5924. }
  5925. @-webkit-keyframes hvr-icon-hang-sink {
  5926.   100% {
  5927.     -webkit-transform: translateY(2px);
  5928.     transform: translateY(2px);
  5929.   }
  5930. }
  5931. @keyframes hvr-icon-hang-sink {
  5932.   100% {
  5933.     -webkit-transform: translateY(2px);
  5934.     transform: translateY(2px);
  5935.   }
  5936. }
  5937. i.icon-caret-down:before {
  5938.   display: inline-block;
  5939.   vertical-align: middle;
  5940.   -webkit-transform: perspective(1px) translateZ(0);
  5941.   transform: perspective(1px) translateZ(0);
  5942.   box-shadow: 0 0 1px transparent;
  5943.   position: relative;
  5944.   padding-right: 2.2em;
  5945.   -webkit-transition-duration: 0.3s;
  5946.   transition-duration: 0.3s;
  5947. }
  5948. i.icon-caret-down:before {
  5949.     content: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 24 24'%3E %3Cpath fill='%23128DBE' d='M7.41%2C8.58L12%2C13.17L16.59%2C8.58L18%2C10L12%2C16L6%2C10L7.41%2C8.58Z' /%3E %3C/svg%3E");
  5950.     position: absolute;
  5951.     right: 1em;
  5952.     padding: 0 1px;
  5953.     font-family: FontAwesome;
  5954.     -webkit-transform: translateZ(0);
  5955.     transform: translateZ(0);
  5956. }
  5957. .action-button:hover > i.icon-caret-down:before,
  5958. .action-button:focus > i.icon-caret-down:before,
  5959. .action-button:active > i.icon-caret-down:before {
  5960.     -webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang;
  5961.     animation-name: hvr-icon-hang-sink, hvr-icon-hang;
  5962.     -webkit-animation-duration: .3s, 1.5s;
  5963.     animation-duration: .3s, 1.5s;
  5964.     -webkit-animation-delay: 0s, .3s;
  5965.     animation-delay: 0s, .3s;
  5966.     -webkit-animation-timing-function: ease-in-out, ease-in-out;
  5967.     animation-timing-function: ease-in-out, ease-in-out;
  5968.     -webkit-animation-iteration-count: 1, infinite;
  5969.     animation-iteration-count: 1, infinite;
  5970.     -webkit-animation-fill-mode: forwards;
  5971.     animation-fill-mode: forwards;
  5972.     -webkit-animation-direction: normal, alternate;
  5973.     animation-direction: normal, alternate;
  5974. }
  5975. /* Underline From Center */
  5976. .action-button {
  5977.     display: inline-block;
  5978.     vertical-align: middle;
  5979.     -webkit-transform: perspective(1px) translateZ(0);
  5980.     transform: perspective(1px) translateZ(0);
  5981.     box-shadow: 0 0 1px transparent;
  5982.     position: relative;
  5983.     overflow: hidden;
  5984.     background: #fff /*!important*/;
  5985.     color: #898989;
  5986.     border: .5px solid #b9b9b9;
  5987.     letter-spacing: 1.6px;
  5988.     -webkit-transition: background-color 0s ease !important;   
  5989.     transition: background-color 0s ease !important;   
  5990. }
  5991. .action-button:before {
  5992.     content: "";
  5993.     position: absolute;
  5994.     z-index: -1;
  5995.     left: 50%;
  5996.     right: 50%;
  5997.      bottom: 0;
  5998.     background: #128DBE;
  5999.     height: 1px;
  6000.     -webkit-transition-property: left, right;
  6001.     transition-property: left, right;
  6002.     -webkit-transition-duration: 0.3s;
  6003.     transition-duration: 0.3s;
  6004.     -webkit-transition-timing-function: ease-out;
  6005.     transition-timing-function: ease-out;
  6006. }
  6007. .red.button.action-button:before {
  6008.     background: #d01919;
  6009. }
  6010. span.red.button.action-button:before,
  6011. button.red.button.action-button:before {
  6012.     background: #d01919;
  6013. }
  6014. .action-button:hover:before, .action-button:focus:before, .action-button:active:before {
  6015.     left: 0;
  6016.     right: 0;
  6017. }
  6018. a.button.action-button.add-user:hover {
  6019.     border: .5px solid #b9b9b9;
  6020. }
  6021. a.green.button.action-button:before {
  6022.     background: #128dbe;
  6023. }
  6024. a.green.button.action-button:hover {
  6025.     color: #128dbe;
  6026. }
  6027. /* Icon Drop */
  6028. @-webkit-keyframes hvr-icon-drop {
  6029.   0% {
  6030.     opacity: 0;
  6031.   }
  6032.   50% {
  6033.     opacity: 0;
  6034.     -webkit-transform: translateY(-100%);
  6035.     transform: translateY(-100%);
  6036.   }
  6037.   100% {
  6038.     opacity: 1;
  6039.   }
  6040. }
  6041. @keyframes hvr-icon-drop {
  6042.   0% {
  6043.     opacity: 0;
  6044.   }
  6045.   50% {
  6046.     opacity: 0;
  6047.     -webkit-transform: translateY(-100%);
  6048.     transform: translateY(-100%);
  6049.   }
  6050.   51%,
  6051.     100% {
  6052.     opacity: 1;
  6053.   }
  6054. }
  6055. /* Icon Drop */
  6056. button.action-button i.icon-map-marker {
  6057.   display: inline-block;
  6058.   vertical-align: middle;
  6059.   -webkit-transform: perspective(1px) translateZ(0);
  6060.   transform: perspective(1px) translateZ(0);
  6061.   box-shadow: 0 0 1px transparent;
  6062.   position: relative;
  6063.   padding-right: 2.2em;
  6064. }
  6065. button.action-button i.icon-map-marker:before {
  6066.     content: '';
  6067.     position: absolute;
  6068.     left: 3px;
  6069.     top: -7px;
  6070.     opacity: 1;
  6071.     padding: 0 1px;
  6072.     -webkit-transform: translateZ(0);
  6073.     transform: translateZ(0);
  6074. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23128DBE' d='M12%2C11.5A2.5%2C2.5 0 0%2C1 9.5%2C9A2.5%2C2.5 0 0%2C1 12%2C6.5A2.5%2C2.5 0 0%2C1 14.5%2C9A2.5%2C2.5 0 0%2C1 12%2C11.5M12%2C2A7%2C7 0 0%2C0 5%2C9C5%2C14.25 12%2C22 12%2C22C12%2C22 19%2C14.25 19%2C9A7%2C7 0 0%2C0 12%2C2Z' /%3E %3C/svg%3E");
  6075. }
  6076. button.action-button:hover > i.icon-map-marker:before, button.action-button:focus > i.icon-map-marker:before, button.action-button:active > i.icon-map-marker:before {
  6077.   opacity: 0;
  6078.   -webkit-transition-duration: 0.3s;
  6079.   transition-duration: 0.3s;
  6080.   -webkit-animation-name: hvr-icon-drop;
  6081.   animation-name: hvr-icon-drop;
  6082.   -webkit-animation-duration: 0.5s;
  6083.   animation-duration: 0.5s;
  6084.   -webkit-animation-delay: 0.1s;
  6085.   animation-delay: 0.1s;
  6086.   -webkit-animation-fill-mode: forwards;
  6087.   animation-fill-mode: forwards;
  6088.   -webkit-animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  6089.   animation-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  6090. }
  6091. a#new-ticket:after {
  6092.     content: "\f0f6";
  6093.     display: inline;
  6094.     font-size: 14px;
  6095.     font-weight: 500;
  6096.     margin-left: 5px;
  6097.     font-family: fontawesome;
  6098. }
  6099. .demo-disabled {
  6100.     display: block;
  6101.     color: #777;
  6102.     font-style: initial;
  6103.     font-size: 18px;
  6104.     margin: 30px 0 20px;
  6105.     text-align: center;
  6106. }
  6107. /* Pop */
  6108. @-webkit-keyframes hvr-pop {
  6109.   50% {
  6110.     -webkit-transform: scale(1.1);
  6111.     transform: scale(1.1);
  6112.   }
  6113. }
  6114. @keyframes hvr-pop {
  6115.   50% {
  6116.     -webkit-transform: scale(1.1);
  6117.     transform: scale(1.1);
  6118.   }
  6119. }
  6120. a#new-ticket {
  6121.   display: inline-block;
  6122.   -webkit-transform: perspective(1px) translateZ(0);
  6123.   transform: perspective(1px) translateZ(0);
  6124.   box-shadow: 0 0 1px transparent;
  6125. }
  6126. a#new-ticket:hover, a#new-ticket:focus, a#new-ticket:active {
  6127.   -webkit-animation-name: hvr-pop;
  6128.   animation-name: hvr-pop;
  6129.   -webkit-animation-duration: 0.3s;
  6130.   animation-duration: 0.3s;
  6131.   -webkit-animation-timing-function: linear;
  6132.   animation-timing-function: linear;
  6133.   -webkit-animation-iteration-count: 1;
  6134.   animation-iteration-count: 1;
  6135. }
  6136. /* SEARCH FORM */
  6137. input::-webkit-search-decoration,
  6138. input::-webkit-search-cancel-button {
  6139.     display: none;
  6140. }
  6141. input[type=search] {
  6142.  
  6143. }
  6144. input[type=search]:focus {
  6145.  
  6146. }
  6147. input:-moz-placeholder {
  6148.     color: #999;
  6149. }
  6150. input::-webkit-input-placeholder {
  6151.     color: #999;
  6152. }
  6153. p[style="text-align:center;"] .button.action-button {
  6154.     margin: 0 4px 4px 4px;
  6155.     box-shadow: none;
  6156.     padding: 9px 30px !important;
  6157.     color: #515d6d;
  6158.     border: initial !important;
  6159.     background: #dcdfe2;
  6160.     letter-spacing: 1.6px;
  6161.     font-weight: 700;
  6162.     -webkit-transform: initial;
  6163.     transform: initial;
  6164. }
  6165. p[style="text-align:center;"] .button.action-button:hover,
  6166. p[style="text-align:center;"] .button.action-button:active {
  6167.     box-shadow: unset;
  6168.     border: initial;
  6169.     background: #c9cdd0;
  6170.     color: #343a42;
  6171.     height: unset;
  6172. }
  6173. p[style="text-align:center;"] button.red.button.action-button:hover,
  6174. p[style="text-align:center;"] button.red.button.action-button:active {
  6175.     color: #b04242;
  6176. }
  6177. p[style="text-align:center;"] .button.action-button[type="submit"] {
  6178.     color: #3c763d;
  6179.     background-color: #d0e9c6;
  6180. }
  6181. p[style="text-align:center;"] .button.action-button[type="submit"]:hover,
  6182. p[style="text-align:center;"] .button.action-button[type="submit"]:active {
  6183.     background: #b4e6a0 !important;
  6184.     color: #2a3e2a !important;
  6185.     box-shadow: unset;
  6186. }
  6187.  
  6188. /* ==========================================================================
  6189.  SEARCH FIELD
  6190. ========================================================================== */
  6191. form[action="kb.php"] .attached.input,
  6192. form[action="orgs.php"] .attached.input,
  6193. form[action="users.php"] .attached.input,
  6194. form[action="tasks.php"] .attached.input,
  6195. form[action="tickets.php"] .attached.input {
  6196.     position: relative;
  6197.     float: right;
  6198.     top: -32px;
  6199.     right: -20px;      
  6200.     border: none !important;
  6201.     height: 24px;
  6202.     margin: 0 0 0 -300px;
  6203.     outline: none;
  6204.     /*-webkit-appearance: textfield;*/ /*messses up seach boxes in mobile*/
  6205.     -webkit-box-sizing: content-box;
  6206.     box-sizing: content-box;
  6207. }
  6208. form[action="tickets.php"] .attached.input {
  6209.     top: -34px;
  6210.     right: calc(1% + -7px);
  6211. }
  6212. @media screen and (min-width: 600px) and (max-width: 1260px) {
  6213.     form[action="tickets.php"] .attached.input {
  6214.         right: -10px;
  6215.     }
  6216. }
  6217. @media screen and (min-width: 600px) and (max-width: 1222px) {
  6218.     form[action="tickets.php"] .attached.input {
  6219.         right: 10px;
  6220.     }
  6221. }
  6222. /* move again when warning, error etc message */
  6223. .attached.input.move-search {
  6224.     top: -95px !important;
  6225. }
  6226. .rtl #kbSearch,
  6227. .rtl #basic_search {
  6228.     float: left;
  6229. }
  6230. form[action="logs.php"] #msg_warning,
  6231. form[action="audits.php"] #msg_error,
  6232. form[action="banlist.php"] #msg_notice,
  6233. form[action="logs.php"] #msg_error,
  6234. form[action="audits.php"] #msg_warning,
  6235. form[action="banlist.php"] #msg_alert,
  6236. form[action="logs.php"] #msg_alert,
  6237. form[action="audits.php"] #msg_notice,
  6238. form[action="banlist.php"] #msg_warning,
  6239. form[action="logs.php"] #msg_notice,
  6240. form[action="audits.php"] #msg_alert,
  6241. form[action="banlist.php"] #msg_error {
  6242.     margin-top: 10px;
  6243. }
  6244. .rtl form[action="kb.php"] .attached.input,
  6245. .rtl form[action="orgs.php"] .attached.input,
  6246. .rtl form[action="users.php"] .attached.input,
  6247. .rtl form[action="tasks.php"] .attached.input,
  6248. .rtl form[action="tickets.php"] .attached.input {
  6249.     float: left;
  6250.     right: initial !important;
  6251.     left: 0 !important;
  6252.     margin: 0 !important;
  6253.     margin-right: -189px !important;
  6254. }
  6255. form[action="kb.php"] #basic_search .input.attached input,
  6256. form[action="orgs.php"] .input.attached input,
  6257. form[action="users.php"] .input.attached input,
  6258. form[action="tasks.php"] .input.attached input,
  6259. form[action="tickets.php"] .input.attached input {
  6260.     margin: 0 !important;
  6261.     border: 0;
  6262.     background-color: rgba(255, 255, 255, 0.3);
  6263.     border-right: 0;
  6264.     height: 24px;
  6265.     padding: 0 0 0 9px;
  6266.     width: 140px !important;
  6267.     -webkit-border-radius: 10em;
  6268.     -moz-border-radius: 10em;
  6269.     border-radius: 3px 0 0 3px;
  6270.     -webkit-transition: all .5s;
  6271.     -moz-transition: all .5s;
  6272.     transition: all .5s;   
  6273. }
  6274. .rtl form[action="kb.php"] #basic_search .input.attached input,
  6275. .rtl form[action="orgs.php"] .input.attached input,
  6276. .rtl form[action="users.php"] .input.attached input,
  6277. .rtl form[action="tasks.php"] .input.attached input,
  6278. .rtl form[action="tickets.php"] .input.attached input {
  6279.     background-position: left 4px center;
  6280.     padding: 0 9px 0 0;
  6281. }
  6282. form[action="kb.php"] #basic_search .input.attached input:focus,
  6283. form[action="orgs.php"] .input.attached input:focus,
  6284. form[action="users.php"] .input.attached input:focus,
  6285. form[action="tasks.php"] .input.attached input:focus,
  6286. form[action="tickets.php"] .input.attached input:focus {
  6287.     min-width: 230px;
  6288.     background-color: #fff;
  6289.     border-color: #66CC75;
  6290.     -webkit-box-shadow: initial;
  6291.     -moz-box-shadow: initial;
  6292.     box-shadow: initial;
  6293. }
  6294. form[action="kb.php"] #basic_search .input.attached input:focus + .button.attached,
  6295. form[action="orgs.php"] .input.attached input:focus + .button.attached,
  6296. form[action="users.php"] .input.attached input:focus + .button.attached,
  6297. form[action="tasks.php"] .input.attached input:focus + .button.attached,
  6298. form[action="tickets.php"] .input.attached input:focus + .button.attached {
  6299.     background-color: #fff;
  6300.     height: 24px;
  6301. }
  6302. form[action="kb.php"] .button.attached i.icon-search,
  6303. form[action="orgs.php"] .button.attached i.icon-search,
  6304. form[action="users.php"] .button.attached i.icon-search,
  6305. form[action="tasks.php"] .button.attached i.icon-search,
  6306. form[action="tickets.php"] .button.attached i.icon-search {
  6307.     background-image: initial;
  6308. }
  6309. form[action="kb.php"] .button.attached,
  6310. form[action="orgs.php"] .button.attached,
  6311. form[action="users.php"] .button.attached,
  6312. form[action="tasks.php"] .button.attached,
  6313. form[action="tickets.php"] .button.attached {
  6314.     opacity: .8 !important;
  6315.     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23128DBE' d='M9.5%2C3A6.5%2C6.5 0 0%2C1 16%2C9.5C16%2C11.11 15.41%2C12.59 14.44%2C13.73L14.71%2C14H15.5L20.5%2C19L19%2C20.5L14%2C15.5V14.71L13.73%2C14.44C12.59%2C15.41 11.11%2C16 9.5%2C16A6.5%2C6.5 0 0%2C1 3%2C9.5A6.5%2C6.5 0 0%2C1 9.5%2C3M9.5%2C5C7%2C5 5%2C7 5%2C9.5C5%2C12 7%2C14 9.5%2C14C12%2C14 14%2C12 14%2C9.5C14%2C7 12%2C5 9.5%2C5Z' /%3E%3C/svg%3E");
  6316.     background-position: right 1px center;
  6317.     background-size: 20px;
  6318.     background-repeat: no-repeat;
  6319.     background-color: rgba(255, 255, 255, 0.3);
  6320.     border: initial !important;
  6321.     margin: 0;
  6322.     width: 24px;
  6323.     -webkit-transition: all .5s;
  6324.     -moz-transition: all .5s;
  6325.     transition: all .5s;   
  6326. }
  6327. form[action="kb.php"] i.icon-search,
  6328. form[action="orgs.php"] i.icon-search,
  6329. form[action="users.php"] i.icon-search,
  6330. form[action="tasks.php"] i.icon-search,
  6331. form[action="tickets.php"] i.icon-search {
  6332.     top: 0;
  6333.     opacity: .7;
  6334. }
  6335. form[action="kb.php"] input#query:placeholder-shown,
  6336. form[action="orgs.php"] input.basic-search:placeholder-shown,
  6337. form[action="users.php"] input.basic-search:placeholder-shown,
  6338. form[action="tasks.php"] input.basic-search:placeholder-shown,
  6339. form[action='tickets.php'] input.basic-search:placeholder-shown {
  6340.     /*color: var(--mobile-link-color) !important;*/ /*hides text cursor*/
  6341.     opacity: .8 !important;
  6342.     font-size: 13px !important;
  6343.     font-style: italic !important;
  6344. }
  6345. form[action="kb.php"] input#query::placeholder,
  6346. form[action="orgs.php"] input.basic-search::placeholder,
  6347. form[action="users.php"] input.basic-search::placeholder,
  6348. form[action="tasks.php"] input.basic-search::placeholder,
  6349. form[action="tickets.php"] input.basic-search::placeholder {
  6350.     color: var(--header-bg) !important;
  6351.     opacity: .8 !important;
  6352.     font-size: 13px !important;
  6353.     font-style: italic !important;
  6354. }
  6355. form[action="kb.php"] input#query::-moz-placeholder,
  6356. form[action="orgs.php"] input.basic-search::-moz-placeholder,
  6357. form[action="users.php"] input.basic-search::-moz-placeholder,
  6358. form[action="tasks.php"] input.basic-search::-moz-placeholder,
  6359. form[action='tickets.php'] input.basic-search::-moz-placeholder {
  6360.     color: var(--nav-bar-link) !important;
  6361.     opacity: .8 !important;
  6362.     font-size: 13px !important;
  6363.     font-style: italic !important;
  6364. }
  6365. form[action="kb.php"] input#query::-ms-input-placeholder,
  6366. form[action="orgs.php"] input.basic-search::-ms-input-placeholder,
  6367. form[action="users.php"] input.basic-search::-ms-input-placeholder,
  6368. form[action="tasks.php"] input.basic-search::-ms-input-placeholder,
  6369. form[action='tickets.php'] input.basic-search::-ms-input-placeholder {
  6370.     color: var(--nav-bar-link) !important;
  6371.     opacity: .8 !important;
  6372.     font-size: 13px !important;
  6373.     font-style: italic !important;
  6374. }
  6375. #basic_search {
  6376.     background-color: #f4f4f4;
  6377.     box-shadow: none;
  6378.     border-bottom: none;
  6379.     border-radius: 0 0 5px 5px;
  6380.     height: 0;
  6381.     margin-bottom: -1%;
  6382. }
  6383. /* #basic_search .attached.button {
  6384.     background-color: var(--header-title);
  6385.     border: none;
  6386. } */
  6387. #basic_search button[type=submit]:hover {
  6388.     color: var(--header-bg);
  6389.     box-shadow: none;
  6390. }
  6391. #basic_search .action-button.muted {
  6392.     box-shadow: 0 0 0 0 #cfd4d6 inset;
  6393.     margin: 0; 
  6394. }
  6395. #basic_search i.icon-search {
  6396.     text-shadow: none;
  6397. }
  6398. .sticky.bar.opaque.fixed form[action="tickets.php"] .attached.input,
  6399. .sticky.bar.opaque.fixed form[action="tickets.php"] .action-button.advanced-search.gray-light2 {
  6400.     display: none;
  6401. }
  6402.  
  6403. /* ==========================================================================
  6404.  TINYMCE
  6405. ========================================================================== */
  6406. .mce-tinymce {
  6407.     margin-top: 10px !important;
  6408.     border: .5px solid #d7d7d7 !important;
  6409. }
  6410. .mce-panel {
  6411.     background-color: #e7e7e9 !important;
  6412.     border-radius: 5px !important;
  6413.     border: unset !important;
  6414. }
  6415. .mce-floatpanel.mce-popover.mce-bottom>.mce-arrow:after {
  6416.     border-bottom-color: #e7e7e9 !important;
  6417. }
  6418. .mce-menubar {
  6419.     border: .5px solid #d7d7d7 !important;
  6420.     border-radius: 5px 5px 0 0 !important;
  6421.     background: #e7e7e9 !important;
  6422. }
  6423. .mce-menubar .mce-menubtn button {
  6424.     background: #e7e7e9 !important;
  6425. }
  6426. .mce-toolbar {
  6427.     border-left: .5px solid #e6e6e6 !important;
  6428.     border-right: .5px solid #e6e6e6 !important;   
  6429. }
  6430. .mce-stack-layout {
  6431.     background: #e7e7e9 !IMPORTANT;
  6432. }
  6433. .mce-menubar .mce-menubtn button span,
  6434. .mce-txt {
  6435.     color: #6e6e6e !important;
  6436. }
  6437. .mce-menu-item:hover .mce-text, .mce-menu-item.mce-selected .mce-text, .mce-menu-item:focus .mce-text {
  6438.     color: white !important;
  6439. }
  6440. .mce-btn .mce-caret,
  6441. .mce-menubar .mce-caret {
  6442.     border-top-color: #6e6e6e !important;
  6443. }
  6444. .mce-btn {
  6445.     border: unset !important;
  6446.     border-color: transparent transparent transparent transparent !important;
  6447.     position: relative !important;
  6448.     text-shadow: unset !important;
  6449.     display: inline-block !important;
  6450.     background-color: unset !important;
  6451. }
  6452. .mce-menubtn button {
  6453.     color: #333 !important;
  6454.     background: #e7e7e9  !important;
  6455. }
  6456. .mce-menu {
  6457.     border-radius: 5px 5px 5px 5px !important;
  6458.     border: .5px solid #c7c6c0 !important;
  6459. }
  6460. div.mce-menu .mce-menu-item-sep, .mce-menu-item-sep:hover {
  6461.     border-bottom: .5px solid #d5cda4 !important;
  6462. }
  6463. .mce-btn button {
  6464.     padding: 3px 5px !important;   
  6465.     background: #e7e7e9 !important;
  6466. }
  6467. .mce-btn-group:not(:first-child) {
  6468.     border-left: unset !important;
  6469.     padding: 0 10px 0 0;
  6470.     margin-left: unset !important;
  6471.     border-radius: 0 !important;
  6472. }
  6473. .mce-toolbar-grp {
  6474.     border-radius: 0 !important;
  6475. }
  6476. .mce-splitbtn:hover .mce-open {
  6477.     border-left-color: #e7e7e9 !important;
  6478. }
  6479. .mce-txt {
  6480.     font-size: 12px !important;
  6481. }
  6482. .mce-colorbutton .mce-preview {
  6483.     display: none !important;
  6484. }
  6485. .mce-widget button {
  6486.     padding: 5px !important;
  6487. }
  6488. button.mce-open {
  6489.     padding: 5px 5px 5px 0 !important;
  6490. }
  6491. .mce-i-backcolor {
  6492.     top: 0 !important;
  6493.     background: #89dce6 !important;
  6494. }
  6495. div[style="border-width: 1px 0 0;"] {
  6496. /*    border: unset !important;
  6497.     border-top: .5px solid #bfbfbf !important;*/
  6498. }
  6499. .mce-toolbar-grp .mce-flow-layout-item:first-child {
  6500.     margin-left: 4px !important;
  6501. }
  6502. .mce-floatpanel.mce-popover {
  6503.     border: .5px solid #bfbfbf !important;
  6504.     border-radius: 5px !important;
  6505. }
  6506. .mce-menu-item .mce-caret {
  6507.     border-left: 4px solid #6e6e6e !important;
  6508. }
  6509. .mce-menu-item .mce-ico, .mce-menu-item .mce-text {
  6510.     color: #6e6e6e !important;
  6511. }
  6512. .mce-menu-item:hover > i.mce-ico {
  6513.     color: white !important;
  6514. }
  6515. .mce-menu-item .mce-text {
  6516.     color: #59574c;
  6517.     font-family: 'Open Sans', sans-serif !important;
  6518. }
  6519. .mce-menu-item-normal.mce-active .mce-text {
  6520.     color: white !important;
  6521. }
  6522. /* Help Menu */
  6523. .mce-window-head {
  6524.     border-bottom: unset !important;
  6525. }
  6526. .mce-tabs {
  6527.     border-bottom: .5px solid #c5c5c5 !important;
  6528. }
  6529. .mce-tab {
  6530.     background: #e7e7e9 !important;
  6531.     border: .5px solid #c8c8c7 !important;
  6532.     border-left: unset !important; 
  6533.     border-bottom: unset !important;
  6534. }
  6535. .mce-container, .mce-container-body {
  6536.     border-radius: 5px 5px 0 0!important
  6537. }
  6538. .mce-tabs, .mce-tabs+.mce-container-body {
  6539.     background: #e7e7e9 !important;
  6540. }
  6541. .mce-container .mce-table-striped tr:nth-child(even) {
  6542.     background-color: #d6d6d6 !important;
  6543. }
  6544. .mce-tab.mce-active {
  6545.     border-top: .5px solid #cac9bf !important;
  6546.     margin-bottom: -2px !important;
  6547.     height: 14px !important;
  6548.     border-bottom: 2px solid #e7e7e9 !important;   
  6549. }
  6550. .mce-container .mce-table-striped thead>tr {
  6551.     background-color: #e7e7e9 !important;
  6552. }
  6553. .mce-container .mce-table-striped tbody>tr:hover {
  6554.     background-color: #dbd7c3 !important;
  6555. }
  6556. .mce-foot {
  6557.     border-radius: 0 0 5px 5px !important;
  6558.     border-top: .5px solid #c5c5c5 !important; 
  6559. }
  6560. div[style="padding: 10px; background: #e3e7f4; height: 100%;"] {
  6561.     background-color: #d6d6d6 !important;
  6562. }
  6563. .mce-edit-area {
  6564.     border: .5px solid #d7d7d7 !important;
  6565.     border-radius: 0 !important;
  6566.     border-right: 1px solid #e6e6e6 !important;
  6567.     border-left: 1px solid #e6e6e6 !important;     
  6568. }
  6569. div[style="left: 427px;top: 10px;width: 47px;height: 30px;"] {
  6570.     left: unset !important;
  6571.     top: 10px;
  6572.     width: 47px;
  6573.     height: 30px;
  6574. }
  6575. .mce-textbox,
  6576. .mce-combobox input {
  6577.     border: .5px solid #c5c5c5 !important;
  6578. }
  6579. .mce-floatpanel.mce-popover.mce-bottom>.mce-arrow {
  6580.     -webkit-box-shadow: 0 2px 0 0 #e7e7e9;
  6581.     -moz-box-shadow: 0 2px 0 0 #e7e7e9;
  6582.     box-shadow: 0 2px 0 0 #e7e7e9;
  6583. }
  6584. #basic_search form[action="banlist.php"] .attached.input button.attached.button {
  6585.     background: #7ab800;
  6586. }
  6587. #basic_search form[action="banlist.php"] .attached.input i.icon-search {
  6588.     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M9.5%2C3A6.5%2C6.5 0 0%2C1 16%2C9.5C16%2C11.11 15.41%2C12.59 14.44%2C13.73L14.71%2C14H15.5L20.5%2C19L19%2C20.5L14%2C15.5V14.71L13.73%2C14.44C12.59%2C15.41 11.11%2C16 9.5%2C16A6.5%2C6.5 0 0%2C1 3%2C9.5A6.5%2C6.5 0 0%2C1 9.5%2C3M9.5%2C5C7%2C5 5%2C7 5%2C9.5C5%2C12 7%2C14 9.5%2C14C12%2C14 14%2C12 14%2C9.5C14%2C7 12%2C5 9.5%2C5Z' /%3E%3C/svg%3E");
  6589. }
  6590.  
  6591. /* ==========================================================================
  6592.  ADVANCED TICKET SEARCH POPUP / EDIT TICKET QUEUE POPUP (uses same css)
  6593. ========================================================================== */
  6594. #advanced-search i.icon-save {
  6595.     position: relative;
  6596.     /*top: 0; */  /*target*/
  6597. }
  6598. button#do_search i.icon-search {
  6599.     top: 3px;
  6600.     margin-right: 3px;
  6601. }
  6602. .dialog fieldset input:not([type=checkbox]) {
  6603.     border: .5px solid #bfbfbf;
  6604.     padding: 3px 3px 3px 8px;
  6605. }
  6606. .adv-search-field {
  6607.     margin-top: 0 !important;
  6608. }
  6609. #advanced-search .accordian dt {
  6610.     border-radius: 4px;
  6611.     border: .5px solid #aad3e3;
  6612.     background: #d1f2ff;
  6613. }
  6614. #advanced-search .accordian dt a {
  6615.     color: #12759c;
  6616.     font-weight: 400;
  6617.     display: block;
  6618. }
  6619. div[style="border-left:1px solid #888;position:relative;padding-bottom:26px;"] {
  6620.     border-left: .5px solid #888 !important;
  6621. }
  6622.  
  6623. #criteria .adv-search-field-container {
  6624.     margin-top: 3px;
  6625. }
  6626. form#advsearch .flex.row .span12 {
  6627.     padding-left: 0;
  6628.     margin-bottom: 10px;
  6629. }
  6630. form#advsearch #criteria .flex.row .span12 {
  6631.     padding: 5px 10px;
  6632. }
  6633. @media (max-width: 660px) {
  6634.     form[action="#tickets/search"] .row {
  6635.         display: unset;
  6636.     }
  6637.     #advanced-search .span6 + .span6 {
  6638.         margin-left: 0;
  6639.     }
  6640.     #advanced-search .row .span6 {
  6641.         display: unset;
  6642.         width: 100%;
  6643.         padding: 5px 10px;
  6644.         vertical-align: top;
  6645.     }
  6646.     #advanced-search div[style="margin-bottom: 0.5em;"] {
  6647.         margin-bottom: 5px !important;
  6648.         margin-top: 20px;
  6649.     }
  6650.     #advanced-search .accordian dt {
  6651.         margin-bottom: 5px;
  6652.         max-width: 300px;
  6653.     }  
  6654.     #advanced-search div[style="border-left:1px solid #888;position:relative;padding-bottom:26px;"] {
  6655.         border-left: unset !important;
  6656.     }
  6657.     #advanced-search div[style="position:absolute;bottom:0"] {
  6658.         position: relative !important;
  6659.         width: 100%;
  6660.         margin-top: 10px;
  6661.     }
  6662.     #advanced-search div#saved-searches {
  6663.         margin-bottom: 0;
  6664.     }
  6665.     div#advanced-search hr {
  6666.         visibility: hidden;
  6667.         margin: 0;
  6668.     }
  6669.     dt.saved-search i.icon-chevron-down.pull-right {
  6670.         top: 1px;
  6671.     }  
  6672. }
  6673. /* Edit Ticket Queue popup (uses same code as Advanced Ticket Search) */
  6674. form#advsearch table td:not(:empty) {
  6675.     padding: 4px;
  6676.     background: #fff !important;
  6677. }
  6678. form#advsearch .dialog .table td:not(:empty) {
  6679.     background-color: #fff!important;
  6680. }
  6681. form#advsearch table td#append-column:not(:empty) {
  6682.     padding-top: 20px !important;
  6683. }
  6684. div.translatable {
  6685.     outline: initial !important;
  6686. }
  6687. div.translatable.focus {
  6688.     outline: .5px solid #606d7f !important;
  6689. }
  6690. form#advsearch #inherited-parent {
  6691.     margin-bottom: 7px !important;
  6692. }
  6693. form#advsearch tbody.sortable-rows input.translatable {
  6694.     width: 170px;
  6695. }
  6696. form#advsearch tbody.sortable-rows input[data-name="width"] {
  6697.     display: none;
  6698. }
  6699. form#advsearch input.translatable {
  6700.     position: relative;
  6701.     top: 1px;
  6702.     left: 2px;
  6703. }
  6704. form#advsearch button.translatable {
  6705.     margin: 0;
  6706.     padding: 0;
  6707.     height: 33px;
  6708. }
  6709. form#advsearch button.translatable i.fa.fa-globe.icon-globe {
  6710.     top: 0;
  6711. }
  6712. form#advsearch button.translatable:hover {
  6713.     border: initial;
  6714.     background-color: #EFEFEF;
  6715. }
  6716. form#advsearch .translatable .flag {
  6717.     margin-right: 0;
  6718.     width: 15px;
  6719.     height: 15px;
  6720.     position: relative;
  6721.     top: 3px;
  6722. }
  6723. form#advsearch .translatable.focus:active {
  6724.     outline: initial;
  6725. }
  6726. form#advsearch #append-column i.icon-plus-sign {
  6727.     margin-left: 5px;
  6728. }
  6729. form#advsearch #append-column select#add-column {
  6730.     min-width: 212px !important;
  6731. }
  6732. form#advsearch #append-column button.green.button {
  6733.     position: relative;
  6734.     top: -3px;
  6735.     background: #DCDFE2;
  6736.     color: #343a42;
  6737.     padding: 4px 14px;
  6738. }
  6739. form#advsearch #append-column button.green.button:hover {
  6740.     border: initial !important;
  6741.     background: #c9cdd0 !important
  6742. }
  6743.  
  6744. /* ==========================================================================
  6745.  SAFARI 7.1+ ONLY
  6746. ========================================================================== */
  6747. _::-webkit-full-page-media, _:future, :root #sub_nav a,
  6748. _::-webkit-full-page-media, _:future, :root #nav .active a,
  6749. _::-webkit-full-page-media, _:future, :root #nav .inactive a,
  6750. _::-webkit-full-page-media, _:future, :root div#header a {
  6751.     color: var(--header-title);
  6752.     font-weight: 400;
  6753. }
  6754. _::-webkit-full-page-media, _:future, :root .action-button {
  6755.     border: 1px solid #d4d4d4;
  6756. }
  6757. _::-webkit-full-page-media, _:future, :root input,
  6758. _::-webkit-full-page-media, _:future, :root textarea,
  6759. _::-webkit-full-page-media, _:future, :root input[type=text],
  6760. _::-webkit-full-page-media, _:future, :root button#do_search,
  6761. _::-webkit-full-page-media, _:future, :root .input.attached input,
  6762. _::-webkit-full-page-media, _:future, :root button.ui-datepicker-trigger,
  6763. _::-webkit-full-page-media, _:future, :root .input.attached .button.attached,
  6764. _::-webkit-full-page-media, _:future, :root .dialog fieldset input:not([type=checkbox]) {
  6765.     border: 1px solid #bfbfbf /*!important*/;
  6766.     -webkit-appearance: none;  
  6767. }
  6768. input[type="checkbox"] {
  6769.     -webkit-appearance: checkbox;  
  6770. }
  6771. _::-webkit-full-page-media, _:future, :root input[type=radio] {
  6772.     top: 0;
  6773. }
  6774. _::-webkit-full-page-media, _:future, :root .input.attached .button.attached {
  6775.     border-left: 0 !important;
  6776. }
  6777. _::-webkit-full-page-media, _:future, :root div[style="border-left:1px solid #888;position:relative;padding-bottom:26px;"] {
  6778.     border-left: 1px solid #888 !important;
  6779. }
  6780.  
  6781. /* ==========================================================================
  6782.  API KEYS
  6783. ========================================================================== */
  6784. form[action="apikeys.php"] table.list th:first-child {
  6785.     width: 5%;
  6786. }
  6787. form[action="apikeys.php"] table.list th:nth-child(2) {
  6788.     width: calc(100% - 60% - 4%);
  6789. }
  6790. form[action="apikeys.php"] table.list th:nth-child(3),
  6791. form[action="apikeys.php"] table.list th:nth-child(4),
  6792. form[action="apikeys.php"] table.list th:nth-child(5),
  6793. form[action="apikeys.php"] table.list th:nth-child(6) {
  6794.     width: 15%;
  6795. }
  6796. form[action="apikeys.php"] table.list td:nth-child(6) {
  6797.     font-size: 12px;
  6798. }
  6799.  
  6800. /* ==========================================================================
  6801.  SCHEDULES
  6802. ========================================================================== */
  6803. form[action="schedules.php"] table.list th:first-child {
  6804.     width: 4% !important;
  6805. }
  6806. form[action="schedules.php"] table.list th:nth-child(2) {
  6807.     width: calc(100% - 4% - 45%);
  6808. }
  6809. form[action="schedules.php"] table.list th:nth-child(3),
  6810. form[action="schedules.php"] table.list th:nth-child(4),
  6811. form[action="schedules.php"] table.list th:nth-child(5) {
  6812.     width: 15%;
  6813. }
  6814. .schedules li a {
  6815.     padding: 4px 0 0 0 !important;
  6816. }
  6817. #schedule-tabs_container .form_table,
  6818. #schedule-tabs_container .tab_content:not(.left) {
  6819.     padding-top: 0;
  6820. }
  6821. .schedules table.list tbody tr td:nth-child(2) {
  6822.     padding-right: 20px !important;
  6823. }
  6824. #schedule-holidays i.icon-calendar:before {
  6825.     top: -5px;
  6826. }
  6827. .schedules-page i.icon-calendar {
  6828.     top: 0;
  6829. }
  6830. .schedules-page table.form_table .select2-container {
  6831.     width: 294px !important;
  6832. }
  6833. .schedules-page table.form_table input[type=text] {
  6834.     width: 283px !important;
  6835. }
  6836. .schedules-page .form-simple .custom-field {
  6837.     margin-bottom: 22px;
  6838. }
  6839.  
  6840. /* ==========================================================================
  6841.  BAN LIST
  6842. ========================================================================== */
  6843. form[action="banlist.php"] table.list, #ticketTable {
  6844.     margin: 3px 0 0 0;
  6845. }
  6846. form[action="banlist.php"] table.list th:first-child {
  6847.     width: 3.5%;
  6848. }
  6849. form[action="banlist.php"] table.list th:nth-child(2) {
  6850.     width: calc(100% - 53%);
  6851. }
  6852. form[action="banlist.php"] table.list th:nth-child(3),
  6853. form[action="banlist.php"] table.list th:nth-child(4),
  6854. form[action="banlist.php"] table.list th:nth-child(5) {
  6855.     width: 16.5%;
  6856. }
  6857. form[action="banlist.php"] table.list td:nth-child(2) a {
  6858.     font-size: 13px;
  6859. }
  6860. .banlist #basic_search {
  6861.     background: rgba(0, 0, 0, 0.10196078431372549);
  6862.     margin: -10px 0;
  6863.     display: block;
  6864.     padding: 4px 4px 2px 8px;
  6865.     height: 42px;
  6866. }
  6867. .banlist i.icon-search {
  6868.     background-position: 1px -3px;
  6869. }
  6870. .banlist .attached.input {
  6871.     float: right;
  6872.     margin-right: 13px;
  6873. }
  6874.  
  6875. /* ==========================================================================
  6876.  CANNED RESPONSES
  6877. ========================================================================== */
  6878. form[action="canned.php"] table.list th:first-child {
  6879.     width: 4%;
  6880. }
  6881. form[action="canned.php"] table.list th:nth-child(2) {
  6882.     width: calc(100% - 4% - 45%);
  6883. }
  6884. form[action="canned.php"] table.list th:nth-child(3),
  6885. form[action="canned.php"] table.list th:nth-child(4),
  6886. form[action="canned.php"] table.list th:nth-child(5) {
  6887.     width: 15%;
  6888. }
  6889. form[action="canned.php"] table.list td:nth-child(2) a {
  6890.     font-size: 14px;
  6891. }
  6892. .canned table.list .Icon.file {
  6893.     margin-left: 5px;
  6894. }
  6895.  
  6896. /* ==========================================================================
  6897.  CATEGORIES
  6898. ========================================================================== */
  6899. form[action="categories.php"] table.list th:first-child {
  6900.     width: 4%;
  6901. }
  6902. form[action="categories.php"] table.list th:nth-child(2) {
  6903.     width: calc(100% - 4% - 45%);
  6904. }
  6905. form[action="categories.php"] table.list th:nth-child(3),
  6906. form[action="categories.php"] table.list th:nth-child(4),
  6907. form[action="categories.php"] table.list th:nth-child(5) {
  6908.     width: 15%;
  6909. }
  6910. form[action="categories.php"] table.list td:nth-child(4) {
  6911.     text-align: left !important;
  6912. }
  6913. form[action="categories.php"] table.list td:nth-child(2) a {
  6914.     font-size: 14px;
  6915. }
  6916.  
  6917. /* ==========================================================================
  6918.  DEPARTMENTS
  6919. ========================================================================== */
  6920. form[action="departments.php"] table.list, #ticketTable {
  6921.     margin: 8px 0 0 0;
  6922. }
  6923. form[action="departments.php"] table.list th:first-child {
  6924.     width: 3.5% !important;
  6925. }
  6926. form[action="departments.php"] table.list th:nth-child(2),
  6927. form[action="departments.php"] table.list th:nth-child(6) {
  6928.     width: 20%;
  6929. }
  6930. form[action="departments.php"] table.list th:nth-child(3),
  6931. form[action="departments.php"] table.list th:nth-child(4),
  6932. form[action="departments.php"] table.list th:nth-child(5),
  6933. form[action="departments.php"] table.list th:nth-child(7),
  6934. form[action="departments.php"] table.list th:nth-child(8) {
  6935.     width: calc((100% - 43.5%) / 5);
  6936. }
  6937. form[action="departments.php"] table.list td:nth-child(2) a {
  6938.     font-size: 14px;
  6939. }
  6940. form[action="departments.php"] table.list td:nth-child(2) small {
  6941.     font-weight: 600;
  6942.     padding-left: 6px;
  6943.     color: #f19090;
  6944.     font-size: 11px;
  6945.     position: relative;
  6946.     top: -1px;
  6947. }
  6948.  
  6949. /* ==========================================================================
  6950.  DIRECTORY
  6951. ========================================================================== */
  6952. .directory table.list th:first-child {
  6953.     width: 20%;
  6954.     background-image: initial; 
  6955. }
  6956. .directory table.list th:nth-child(5) {
  6957.     width: 10%;
  6958. }
  6959. .directory table.list th:nth-child(2)
  6960. .directory table.list th:nth-child(3),
  6961. .directory table.list th:nth-child(4),
  6962. .directory table.list th:nth-child(6) {
  6963.     width: calc(70% / 4);
  6964. }
  6965. .directory-page table.list th:first-child a.desc {
  6966.     padding: 1px 0 0 8px;
  6967. }
  6968. .directory table.list td:first-child {
  6969.     font-weight: 500;  
  6970.     padding-left: 20px;
  6971.     font-size: 14px !important;
  6972. }
  6973. form#users-list table.list td,
  6974. form#users-list table.list td a,
  6975. #mobile-only table.list a.preview.cursor,
  6976. #mobile-only table.list a.preview.cursor a {
  6977.     border: initial !important;
  6978. }
  6979. .directory table.list td[colspan="6"] {
  6980.     background: #fff !important;
  6981. }
  6982. .directory select#did {
  6983.     width: 184px;
  6984. }
  6985. .directory input[value="Filter"] {
  6986.     width: 90px !important;
  6987.     min-width: 90px !important;
  6988. }
  6989. .directory table.list tfoot td[colspan="6"] {
  6990.     border: 1px solid rgb(243, 243, 245) !important;
  6991.     padding: 12px !important;
  6992. }
  6993. .directory table.list tfoot td[colspan="6"]:before {
  6994.     display: none;
  6995. }
  6996. .note-name {
  6997.     display: inline-block;
  6998.     position: relative;
  6999.     top: -17px;
  7000.     border-right: 1px solid rgba(0, 0, 0, 0.2);
  7001.     padding-right: 10px;
  7002.     margin-right: 7px;
  7003. }
  7004. .quicknote .header .options {
  7005.     padding-left: 0;
  7006.     margin-left: 0;
  7007.     border-left: initial;
  7008. }
  7009. .quicknote .header .header-right a.action i,
  7010. .quicknote .header .header-right a.action i:before {
  7011.     background-size: 19px !important;
  7012.     background-position: 1px -3px;
  7013. }
  7014. .quicknote .header .header-right a.action  {
  7015.     position: relative;
  7016.     top: -5px;
  7017. }
  7018.  
  7019. /* ==========================================================================
  7020.  EMAILS
  7021. ========================================================================== */
  7022. form[action="emails.php"] table.list, #ticketTable {
  7023.     margin: 8px 0 0 0;
  7024. }
  7025. form[action="emails.php"] table.list th:first-child {
  7026.     width: 4%;
  7027. }
  7028. form[action="emails.php"] table.list th:nth-child(2) {
  7029.     width: calc(100% - 60% - 4%);
  7030. }
  7031. form[action="emails.php"] table.list th:nth-child(3),
  7032. form[action="emails.php"] table.list th:nth-child(4),
  7033. form[action="emails.php"] table.list th:nth-child(5),
  7034. form[action="emails.php"] table.list th:nth-child(6) {
  7035.     width: 15%;
  7036. }
  7037. form[action="emails.php"] table.list td:nth-child(6) {
  7038.     font-size: 12px;
  7039. }
  7040. form[action="emails.php"] table.list td:nth-child(2) a {
  7041.     font-size: 14px;
  7042. }
  7043. form[action="emails.php"] table.list td:nth-child(2) small {
  7044.     font-weight: 600;
  7045.     padding-left: 6px;
  7046.     color: #f19090;
  7047.     font-size: 11px;
  7048.     position: relative;
  7049.     top: -1px;
  7050. }
  7051.  
  7052. /* ==========================================================================
  7053.  FILTERS
  7054. ========================================================================== */
  7055. form[action="filters.php"] table.list th:first-child {
  7056.     width: 4%;
  7057. }
  7058. form[action="filters.php"] table.list th:nth-child(2) {
  7059.     width: calc(100% - (10% * 5) - 14% - 4%);
  7060. }
  7061. form[action="filters.php"] table.list th:nth-child(3),
  7062. form[action="filters.php"] table.list th:nth-child(4),
  7063. form[action="filters.php"] table.list th:nth-child(5),
  7064. form[action="filters.php"] table.list th:nth-child(6),
  7065. form[action="filters.php"] table.list th:nth-child(7) {
  7066.     width: 10%;
  7067. }
  7068. form[action="filters.php"] table.list th:nth-child(8) {
  7069.     width: 14%;
  7070. }
  7071. form[action="filters.php"] table.list td:nth-child(2) a {
  7072.     font-size: 14px;
  7073. }
  7074. .filters-page .form_table input[name="name"] {
  7075.     width: 281px;
  7076. }
  7077. .filters-page .form_table .select2-container {
  7078.     width: 294px !important;
  7079. }
  7080. .filters-page #filter_actions .select2-container {
  7081.     width: 294px !important;
  7082. }
  7083. .filters-page button#new-action-btn {
  7084.     padding: 4px 16px;
  7085. }
  7086. .filters-page .select2.select2-container.select2-container--default ~ .select2.select2-container.select2-container--default {
  7087.     margin-top: 0;
  7088. }
  7089.  
  7090. /* ==========================================================================
  7091.  FORMS
  7092. ========================================================================== */
  7093. form[action="forms.php"] table.list th:first-child {
  7094.     background-image: none;
  7095.     width: 4%;
  7096. }
  7097. form[action="forms.php"] table.list th:nth-child(2),
  7098. form[action="forms.php"] table.list th:nth-child(3) {
  7099.     width: calc((100% - 4%) / 2);
  7100. }
  7101. form[action="forms.php"] table.list tbody td:nth-child(3) {
  7102.     padding: 0;
  7103. }
  7104.  
  7105. /* ==========================================================================
  7106.  HELP TOPICS
  7107. ========================================================================== */
  7108. form[action="helptopics.php"] table.list td:not(:first-child) {
  7109.     padding-left: 0;
  7110. }
  7111. form[action="helptopics.php"] table.list th:first-child {
  7112.     width: 4% !important;
  7113. }
  7114. form[action="helptopics.php"] table.list th:nth-child(2) {
  7115.     width: calc(100% - (12% * 6) - 4%);
  7116. }
  7117. form[action="helptopics.php"] table.list th:nth-child(3),
  7118. form[action="helptopics.php"] table.list th:nth-child(4),
  7119. form[action="helptopics.php"] table.list th:nth-child(5),
  7120. form[action="helptopics.php"] table.list th:nth-child(6),
  7121. form[action="helptopics.php"] table.list th:nth-child(7),
  7122. form[action="helptopics.php"] table.list td:nth-child(8) {
  7123.     width: 12%;
  7124. }
  7125. form[action="helptopics.php"] table.list td:nth-child(2) a {
  7126.     font-size: 14px;
  7127. }
  7128. form[action="helptopics.php"] table.list td:nth-child(7),
  7129. form[action="helptopics.php"] table.list td:nth-child(8) {
  7130.     font-size: 11px;
  7131. }
  7132. form[action="helptopics.php"] table.list thead tr:first-child {
  7133.     display: none;
  7134. }
  7135.  
  7136. div[style="padding:8px 0;border-bottom: 2px dotted #ddd;"] {
  7137.     border: initial !important;
  7138. }
  7139. .language-commit {
  7140.     background: url(../../osta/img/priority-pattern-overlay.png) #e5bc61!important;
  7141. }
  7142. div.add-translation button {
  7143.     color: #25ad30;
  7144. }
  7145. table.list tbody tr.item-disabled td a {
  7146.     opacity: .6;
  7147. }
  7148. table.list tbody tr.item-disabled td {
  7149.     color: #777777a6;
  7150. }
  7151.  
  7152. /* ==========================================================================
  7153.  ADD A NEW HELP TOPIC
  7154. ========================================================================== */
  7155. .helptopics #topic-forms td.handle {
  7156.     padding: 0 0 10px 0!important;
  7157. }
  7158. #topic-tabs_container .select2-selection {
  7159.     width: 300px;
  7160. }
  7161. #topic-tabs_container div#info input[type="text"] {
  7162.     width: 289px;
  7163. }
  7164.  
  7165. /* ==========================================================================
  7166.  USERS
  7167. ========================================================================== */
  7168. form[action="users.php"] table.list, #ticketTable {
  7169.     margin: 2px 0 0 0;
  7170. }
  7171. form[action="users.php"] table.list th:first-child {
  7172.     width: 4%;
  7173. }
  7174. form[action="users.php"] table.list th:nth-child(2) {
  7175.     width: calc(100% - 4% - 45%);
  7176. }
  7177. form[action="users.php"] table.list th:nth-child(3),
  7178. form[action="users.php"] table.list th:nth-child(4),
  7179. form[action="users.php"] table.list th:nth-child(5) {
  7180.     width: 15%;
  7181. }
  7182. form[action="users.php"] table.list td:nth-child(2) a {
  7183.     font-size: 14px;
  7184. }
  7185. #content.users form#users-list td i.icon-fixed-width.icon-file-text-alt {
  7186.     font-size: 17px;
  7187.     float: right;
  7188.     padding-right: 30px;
  7189. }
  7190.  
  7191. /* ==========================================================================
  7192.  ORGANIZATIONS
  7193. ========================================================================== */
  7194. form[action="orgs.php"] table.list, #ticketTable {
  7195.     margin: 2px 0 0 0;
  7196. }
  7197. form[action="orgs.php"] table.list th:first-child {
  7198.     width: 4%;
  7199. }
  7200. form[action="orgs.php"] table.list th:nth-child(2) {
  7201.     width: calc(100% - 4% - 45%);
  7202. }
  7203. form[action="orgs.php"] table.list th:nth-child(3),
  7204. form[action="orgs.php"] table.list th:nth-child(4),
  7205. form[action="orgs.php"] table.list th:nth-child(5) {
  7206.     width: 15%;
  7207. }
  7208. form[action="orgs.php"] table.list td:nth-child(2) a {
  7209.     font-size: 14px;
  7210. }
  7211. .users a[href="#users/112/edit"] {
  7212.     color: #128dbe;
  7213.     font-weight: 500;
  7214.     font-size: 15px;
  7215.     top: 2px !important;
  7216. }
  7217. div#orgprofile_container .hidden th {
  7218.     padding-top: 25px;
  7219. }
  7220. #orgprofile_container td {
  7221.     height: 42px !important;
  7222. }
  7223. .orgs-page table.list td:nth-child(2) {
  7224.     font-size: 14px;
  7225.     padding: 10px 0;
  7226. }
  7227. .orgs #tickets table.list th:first-child {
  7228.     background-image: none;
  7229.     width: 10% !important;
  7230. }
  7231. .orgs #tickets form[action="users.php"] table.list th:nth-child(2) {
  7232.     width: 18%;
  7233. }
  7234. .orgs #tickets form[action="users.php"] table.list th:nth-child(3) {
  7235.     width: 8%;
  7236. }
  7237. .orgs #tickets form[action="users.php"] table.list th:nth-child(4),
  7238. .orgs #tickets form[action="users.php"] table.list th:nth-child(5) {
  7239.     width: 30%;
  7240. }
  7241. .orgs #tickets form[action="users.php"] table.list td:nth-child(3) {
  7242.     font-size: 14px;
  7243.     padding: 0;
  7244. }
  7245. .orgs-page td.user-count-hide {
  7246.     font-size: 0;
  7247. }
  7248. .orgs-page td.user-count-hide:after {
  7249.     background: initial !important;
  7250. }
  7251.  
  7252. /* ==========================================================================
  7253.  PAGES
  7254. ========================================================================== */
  7255. form[action="pages.php"] table.list th:first-child {
  7256.     width: 4%;
  7257. }
  7258. form[action="pages.php"] table.list th:nth-child(2) {
  7259.     width: 40%;
  7260. }
  7261. form[action="pages.php"] table.list th:nth-child(3),
  7262. form[action="pages.php"] table.list th:nth-child(4),
  7263. form[action="pages.php"] table.list th:nth-child(5),
  7264. form[action="pages.php"] table.list th:nth-child(6) {
  7265.     width: 14%;
  7266. }
  7267. .pages form[action="pages.php"] table.list tbody tr td:nth-child(2) {
  7268.     padding-left: 10px !important;
  7269.     font-size: 0 !important;
  7270. }
  7271. form[action="pages.php"] table.list td:nth-child(6) {
  7272.     /* font-size: 12px; */
  7273. }
  7274. .pages .tab_content {
  7275.     margin-bottom: 10px;
  7276. }
  7277. .pages table.form_table.fixed input[type="text"] {
  7278.     width: 308px !important;
  7279. }
  7280. /* ==========================================================================
  7281.  PLUGINS
  7282. ========================================================================== */
  7283. .plugins .centered {
  7284.     margin: 40px 0;
  7285. }
  7286. .plugins .button.action-button[type=submit]:hover {
  7287.     color: white;
  7288.     box-shadow: initial;
  7289.     border: .5px solid rgb(68, 162, 208) !important;
  7290.     background-color: rgb(68, 162, 208);
  7291. }
  7292. .plugins div.section-break {
  7293.     font-size: 100%;
  7294. }
  7295. .plugins tfoot tr {
  7296.     height: 43px;
  7297. }
  7298. .plugins-page table.list tbody td:first-child {
  7299.     padding: 0 30px;
  7300.     width: 82px;
  7301. }
  7302. .plugins-page table.list tbody td:nth-child(2) {
  7303.     padding: 0 10px;
  7304. }
  7305. .plugins-page button.button.action-button {
  7306.     background: #fff;
  7307.     font-size: 13px;
  7308. }
  7309. .plugins table.list tbody tr td:nth-child(2) {
  7310.     font-size: 14px !important;
  7311.     padding: 30px 34px 30px 0 !important;
  7312. }
  7313. .plugins table.list tbody tr td:nth-child(2) strong {
  7314.     font-size: 18px;
  7315.     font-weight: 500;
  7316.     padding-bottom: 12px;
  7317.     display: inline-block;
  7318. }
  7319. .plugins-page form[action="plugins.php"] table.list tbody td:nth-child(2) a {
  7320.     font-size: 15px;
  7321.     color: #227b9e;
  7322. }
  7323. .plugins-page form[action="plugins.php"] table.list tbody td:nth-child(2) {
  7324.     background-repeat: no-repeat;
  7325.     background-position: left center;
  7326.     background-size: 28px;
  7327.     padding-left: 41px !important;
  7328. background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg version='1.1' id='svg2' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 48 48' style='enable-background:new 0 0 48 48%3B' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:%23F9F9F9%3B%7D .st1%7Bfill:%23ECECEC%3B%7D .st2%7Bfill:%23CCCCCC%3B%7D .st3%7Bfill:none%3Bstroke:%234D4D4D%3B%7D %3C/style%3E %3Csodipodi:namedview bordercolor='%23666666' borderopacity='1.0' id='base' inkscape:current-layer='layer1' inkscape:cx='27.203376' inkscape:cy='26.578528' inkscape:document-units='px' inkscape:pageopacity='0.0' inkscape:pageshadow='2' inkscape:window-height='968' inkscape:window-maximized='1' inkscape:window-width='1280' inkscape:window-x='-4' inkscape:window-y='-4' inkscape:zoom='11.313708' pagecolor='%23ffffff' showgrid='true'%3E %3Cinkscape:grid empspacing='5' enabled='true' id='grid2985' snapvisiblegridlinesonly='true' type='xygrid' visible='true'%3E %3C/inkscape:grid%3E %3C/sodipodi:namedview%3E %3Cg id='layer1' transform='translate(0%2C-1004.3622)' inkscape:groupmode='layer' inkscape:label='Layer 1'%3E %3Cg id='g3000' transform='translate(-6%2C1003)'%3E %3Cpath id='path2987' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st0' d='M30%2C2.4l-20%2C10l20%2C10l20-10 L30%2C2.4z'/%3E %3Cpath id='path2989' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st1' d='M30%2C22.4v25l20-10v-25L30%2C22.4z' /%3E %3Cpath id='path2991' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st2' d='M30%2C22.4v25l-20-10v-25L30%2C22.4z '/%3E %3Cpath id='path2993' inkscape:connector-curvature='0' class='st3' d='M30%2C2.4l-20%2C10v25l20%2C10l20-10v-25L30%2C2.4z'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E ");
  7329. }
  7330. .plugins-page form[action="?"] table.list tbody td:nth-child(2) {
  7331.     padding-right: 152px !important;
  7332.     background-repeat: no-repeat;
  7333.     background-position: 97% 50%;
  7334.     background-size: 100px;
  7335. background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg version='1.1' id='svg2' xmlns:cc='http://creativecommons.org/ns%23' xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 48 48' style='enable-background:new 0 0 48 48%3B' xml:space='preserve'%3E %3Cstyle type='text/css'%3E .st0%7Bfill:%23F9F9F9%3B%7D .st1%7Bfill:%23ECECEC%3B%7D .st2%7Bfill:%23CCCCCC%3B%7D .st3%7Bfill:none%3Bstroke:%234D4D4D%3Bstroke-width:0.25%3B%7D %3C/style%3E %3Csodipodi:namedview bordercolor='%23666666' borderopacity='1.0' id='base' inkscape:current-layer='layer1' inkscape:cx='27.203376' inkscape:cy='26.578528' inkscape:document-units='px' inkscape:pageopacity='0.0' inkscape:pageshadow='2' inkscape:window-height='968' inkscape:window-maximized='1' inkscape:window-width='1280' inkscape:window-x='-4' inkscape:window-y='-4' inkscape:zoom='11.313708' pagecolor='%23ffffff' showgrid='true'%3E %3Cinkscape:grid empspacing='5' enabled='true' id='grid2985' snapvisiblegridlinesonly='true' type='xygrid' visible='true'%3E %3C/inkscape:grid%3E %3C/sodipodi:namedview%3E %3Cg id='layer1' transform='translate(0%2C-1004.3622)' inkscape:groupmode='layer' inkscape:label='Layer 1'%3E %3Cg id='g3000' transform='translate(-6%2C1003)'%3E %3Cpath id='path2987' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st0' d='M30%2C2.4l-20%2C10l20%2C10l20-10 L30%2C2.4z'/%3E %3Cpath id='path2989' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st1' d='M30%2C22.4v25l20-10v-25L30%2C22.4z' /%3E %3Cpath id='path2991' inkscape:connector-curvature='0' sodipodi:nodetypes='ccccc' class='st2' d='M30%2C22.4v25l-20-10v-25L30%2C22.4z '/%3E %3Cpath id='path2993' inkscape:connector-curvature='0' class='st3' d='M30%2C2.4l-20%2C10v25l20%2C10l20-10v-25L30%2C2.4z'/%3E %3C/g%3E %3C/g%3E %3C/svg%3E ");
  7336. }
  7337. .plugins-page form[action="plugins.php"] table.list tbody tr.item-disabled td:nth-child(2) {
  7338.     opacity: .6;
  7339. }
  7340. .plugins-page form[action="plugins.php"] table.list tbody tr.item-disabled:hover td:nth-child(2),
  7341. .plugins-page form[action="plugins.php"] table.list tbody tr.item-disabled.highlight td:nth-child(2),
  7342. .plugins-page form[action="plugins.php"] table.list tbody tr.item-disabled:nth-child(2n+1):hover td:nth-child(2) {
  7343.     opacity: 1;
  7344. }
  7345.  
  7346. /* ==========================================================================
  7347.  ROLES
  7348. ========================================================================== */
  7349. form[action="roles.php"] table.list, #ticketTable {
  7350.     margin: 8px 0 0 0;
  7351. }
  7352. form[action="roles.php"] table.list th:first-child {
  7353.     width: 4%;
  7354. }
  7355. form[action="roles.php"] table.list th:nth-child(2) {
  7356.     width: calc(100% - 4% - 45%);
  7357. }
  7358. form[action="roles.php"] table.list th:nth-child(3),
  7359. form[action="roles.php"] table.list th:nth-child(4),
  7360. form[action="roles.php"] table.list th:nth-child(5) {
  7361.     width: 15%;
  7362. }
  7363. form[action="roles.php"] table.list tbody td {
  7364.     padding-left: 0;
  7365. }
  7366. form[action="roles.php"] table.list td:first-child {
  7367.     padding-left: 10px;
  7368. }
  7369. form[action="roles.php"] table.list td:nth-child(2) a {
  7370.     font-size: 14px;
  7371. }
  7372. .roles-page a[href="#permissions"]:before {
  7373.     display: none;
  7374. }
  7375. /* ==========================================================================
  7376.  SERVICE LEVEL AGREEMENTS
  7377. ========================================================================== */
  7378. form[action="slas.php"] table.list th:first-child {
  7379.     width: 4%;
  7380. }
  7381. form[action="slas.php"] table.list th:nth-child(2) {
  7382.     width: calc(100% - 4% - 60%);
  7383. }
  7384. form[action="slas.php"] table.list th:nth-child(3),
  7385. form[action="slas.php"] table.list th:nth-child(4),
  7386. form[action="slas.php"] table.list th:nth-child(5),
  7387. form[action="slas.php"] table.list th:nth-child(6) {
  7388.     width: 15%;
  7389. }
  7390. td[style="text-align:right;padding-right:35px;"] {
  7391.     padding-right: 0;
  7392.     text-align: initial !important;
  7393. }
  7394. .staff-side.slas-page table.form_table input[type="text"] {
  7395.     width: 294px;
  7396. }
  7397.  
  7398. /* ==========================================================================
  7399.  STAFF MEMBERS (AGENTS)
  7400. ========================================================================== */
  7401. form[action="staff.php"] table.list, #ticketTable {
  7402.     margin: 6px 0 0 0;
  7403. }
  7404. form[action="staff.php"] table.list th:first-child {
  7405.     width: 40px !important;
  7406. }
  7407. form[action="staff.php"] table.list th:nth-child(2) {
  7408.     width: calc(100% - (14% * 5) - 40px);
  7409. }
  7410. form[action="staff.php"] table.list th:nth-child(3),
  7411. form[action="staff.php"] table.list th:nth-child(4),
  7412. form[action="staff.php"] table.list th:nth-child(5),
  7413. form[action="staff.php"] table.list th:nth-child(6),
  7414. form[action="staff.php"] table.list th:nth-child(7) {
  7415.     width: 14%;
  7416. }
  7417. .staff-page table.list tbody td:nth-child(3) {
  7418.     font-size: 14px !important;
  7419. }
  7420. .staff table.list + div {
  7421.     margin: 0 0 40px 0;
  7422. }
  7423. form[action="staff.php"] table.list td:nth-child(2) a {
  7424.     font-size: 14px;
  7425. }
  7426. .staff #basic_search {
  7427.     background: rgba(0, 0, 0, 0.10196078431372549);
  7428.     margin: -10px 0 4px 0;
  7429.     display: inline-block;
  7430.     padding: 4px 4px 2px 8px;
  7431.     height: 42px;
  7432.     width: 99%;
  7433. }
  7434. .staff i.icon-search {
  7435.     background-position: 1px -3px;
  7436. }
  7437. .staff div[style="min-height:25px;"] {
  7438.     float: left;
  7439. }
  7440. .staff .pull-left {
  7441.     margin: 5px 0 0 0;
  7442. }
  7443. .staff-page .select2.select2-container.select2-container--default ~ .select2.select2-container.select2-container--default {
  7444.     margin-top: 0;
  7445. }
  7446.  
  7447. /* ==========================================================================
  7448.  SYSTEM LOGS
  7449. ========================================================================== */
  7450. form[action="logs.php"] table.list th:first-child {
  7451.     width: 4% !important;
  7452. }
  7453. form[action="logs.php"] table.list th:nth-child(2) {
  7454.     width: 58%;
  7455. }
  7456.  
  7457. form[action="logs.php"] table.list th:nth-child(4) {
  7458.     width: 15%;
  7459. }
  7460. form[action="logs.php"] table.list th:nth-child(3),
  7461. form[action="logs.php"] table.list th:nth-child(5) {
  7462.     width: 12%;
  7463. }
  7464. form[action="logs.php"],
  7465. form[action="audits.php"],
  7466. form[action="banlist.php"] {
  7467.     display: inline-block;
  7468.     width: 100%;
  7469. }
  7470. .banlist .sticky.bar .content,
  7471. #system-logs .sticky.bar .content {
  7472.     margin: 18px 0 0 0;
  7473.     width: 100% !important;
  7474. }
  7475. form[action="logs.php"] select[name="type"] {
  7476.     width: 70px;
  7477. }
  7478. form[action="logs.php"] input[type="submit"],
  7479. form[action="audits.php"] input[type="submit"] {
  7480.     margin: 0 !important;
  7481.     padding: 4px 8px !important;
  7482.     min-width: initial;
  7483.     vertical-align: initial;
  7484.     position: relative;
  7485.     top: -1px;
  7486. }
  7487. form[action="logs.php"] div[style="margin-bottom:20px; padding-top:5px;"] {
  7488.     margin: 17px 0 0 0!important;
  7489. }
  7490. .logs #basic_search,
  7491. .audits #basic_search {
  7492.     background: rgba(0, 0, 0, 0.10196078431372549);
  7493.     height: 35px;
  7494. }
  7495. form[action="logs.php"] .flush-left h2 {
  7496.     position: relative;
  7497.     top: -7px;
  7498. }
  7499. form[action="logs.php"] table.list tbody td,
  7500. form[action="audits.php"] table.list tbody td {
  7501.     font-size: 12px;
  7502.     overflow: hidden;
  7503.     white-space: nowrap;
  7504.     text-overflow: ellipsis;
  7505. }
  7506. form[action="logs.php"] table.list tbody td a {
  7507.     font-size: 14px;
  7508. }
  7509. .logs-page #actions {
  7510.     margin: 0 0 5px 0;
  7511. }
  7512. .logs-page .pull-left.flush-left {
  7513.     margin-top: 10px;
  7514. }
  7515.  
  7516. /* ==========================================================================
  7517.  AUDIT LOGS (PLUGIN)
  7518. ========================================================================== */
  7519. .audits select[name="type"],
  7520. .audits select[name="state"] {
  7521.     min-width: 140px !important;
  7522.     width: 140px !important;
  7523. }
  7524. form[action="audits.php"] .content {
  7525.     margin-top: 10px !important;
  7526. }
  7527. form[action="audits.php"] .pull-right {
  7528.     margin-bottom: 15px;
  7529. }
  7530. table#dashboard-audit th:first-child {
  7531.     width: unset !important;
  7532. }
  7533. .audits-page #footer,
  7534. .audits-page #autocron {
  7535.     display: none;
  7536. }
  7537.  
  7538. /* ==========================================================================
  7539.  TASKS
  7540. ========================================================================== */
  7541. form[action="tasks.php"] table.list th:first-child {
  7542.     width: 4% !important;
  7543. }
  7544. form[action="tasks.php"] table.list th:first-child {
  7545.     background-position: 20px;
  7546. }
  7547. form[action="tasks.php"] td:nth-child(2) {
  7548.     padding: 0 0 0 10px !important;
  7549. }
  7550. form[action="tasks.php"] td:nth-child(3) {
  7551.     text-align: left !important;
  7552.     padding: 0 0 0 10px !important;
  7553. }
  7554. form[action="tasks.php"] table.list tbody tr.highlight td { /* highlight row borders acting weird */
  7555.     border-top: unset !important;
  7556.     border-bottom: unset !important;
  7557.     background-color: #ddd;
  7558. }
  7559. .tasks-page #content .pull-right .action-button.muted {
  7560.  
  7561. }
  7562. #add-task-mobile {
  7563.     display: none;
  7564. }
  7565. #task_response_options {
  7566.     margin-top: 20px;
  7567. }
  7568. form[action="tasks.php"] table.list, #ticketTable {
  7569.     margin: 0 0 0 0;
  7570. }
  7571. form[action="tasks.php"] table.list th:first-child {
  7572.     width: 4%;
  7573. }
  7574. form[action="tasks.php"] table.list th:nth-child(2) {
  7575.     width: 8%;
  7576. }
  7577. form[action="tasks.php"] table.list th:nth-child(3) {
  7578.     width: 8%;
  7579. }
  7580. form[action="tasks.php"] table.list th:nth-child(4) {
  7581.     width: 14%;
  7582. }
  7583. form[action="tasks.php"] table.list th:nth-child(5) {
  7584.     width: 34%;
  7585. }
  7586. form[action="tasks.php"] table.list th:nth-child(6) {
  7587.     width: 14%;
  7588. }
  7589. form[action="tasks.php"] table.list th:nth-child(7) {
  7590.     width: 18%;
  7591. }
  7592. form[action="tasks.php"] table.list th:nth-child(2) a {
  7593.     font-weight: 600;
  7594. }
  7595. form[action="tasks.php"] table.list td:nth-child(2) a {
  7596.     font-weight: 600;
  7597. }
  7598. form[action="tasks.php"] table.list td:nth-child(4) {
  7599.     padding: 10px 0 10px 10px;
  7600.     text-align: left;  
  7601. }
  7602. form[action="tasks.php"] table.list td:nth-child(4) a {
  7603.     padding: 0 10px 0 0;       
  7604.     font-size: 14px !important;
  7605. }
  7606. form[action="tasks.php"] table.list td:nth-child(4) div.wrap {
  7607.     float: left;
  7608.     max-width: 79%;
  7609. }
  7610. form[action="tasks.php"] table.list td:nth-child(4) .tasks-icons {
  7611.     float: right;
  7612.     height: 18px;
  7613. }
  7614. form[action="tasks.php"] table.list td:nth-child(4) .tasks-icons small {
  7615.     font-size: 12px !important;
  7616.     margin-right: 3px;
  7617. }
  7618. form[action="tasks.php"] table.list td:nth-child(5) {
  7619.     font-size: 14px;
  7620. }
  7621. form[action="tasks.php"] table.list i.icon-fixed-width.icon-comments-alt {
  7622.     width: 15px;
  7623. }
  7624. form[action="tasks.php"] table.list .wrap {
  7625.     float: left;
  7626. }
  7627. form[action="tasks.php"] table.list .tasks-icons {
  7628.     float: right;
  7629. }
  7630. form[action="tasks.php"] table.list i.icon-comments-alt {
  7631.     top: 4px;
  7632. }
  7633. #task_content a.preview {
  7634.     float: none;
  7635. }
  7636. #task_content .pull-left.flush-left a.preview {
  7637.     float: none;
  7638.     border: 1px solid #128dbe;
  7639.     line-height: initial;
  7640.     top: -1px;
  7641.     font-size: 15px;
  7642.     padding: 2px 6px;
  7643.     position: relative;
  7644.     background: #00000003;
  7645.     border-radius: 2px;
  7646.     margin: 0 0 0 3px;
  7647. }
  7648. #task_content .sticky.bar.fixed .pull-left.flush-left a.preview {
  7649.     color: var(--header-title);
  7650.     border-color: var(--header-title);
  7651. }
  7652. #tasks table.list th:first-child {
  7653.     width: 4% !important;
  7654. }
  7655. #tasks_content table.list tbody td {
  7656.     padding-left: 0;
  7657. }
  7658. #tasks_content table.list tbody td:first-child {
  7659.     padding-left: 14px;
  7660. }
  7661. @media screen and (min-width: 761px) {
  7662.     .tasks-page #content div[style="margin-bottom:20px; padding-top:5px;"] {
  7663.         margin: -21px 0 0 0 !important;
  7664.     }
  7665.  
  7666. }
  7667.  
  7668. /* ==========================================================================
  7669.  TEAMS
  7670. ========================================================================== */
  7671. form[action="teams.php"] table.list, #ticketTable {
  7672.     margin: 8px 0 0 0;
  7673. }
  7674. form[action="teams.php"] table.list th:first-child {
  7675.     width: 4%;
  7676. }
  7677. form[action="teams.php"] table.list th:nth-child(2) {
  7678.     width: calc(100% - (12% * 5) - 4%);
  7679. }
  7680. form[action="teams.php"] table.list th:nth-child(3),
  7681. form[action="teams.php"] table.list th:nth-child(4),
  7682. form[action="teams.php"] table.list th:nth-child(5),
  7683. form[action="teams.php"] table.list th:nth-child(6),
  7684. form[action="teams.php"] table.list th:nth-child(7) {
  7685.     width: 12%;
  7686. }
  7687. form[action="teams.php"] table.list td:nth-child(2) {
  7688.     font-size: 14px;
  7689. }
  7690. .teams-page #team input[type="text"] {
  7691.     width: 292px;
  7692. }
  7693. .teams-page #add_member .select2-container {
  7694.     width: 300px !important;
  7695. }
  7696. .teams-page #add_member button.action-button {
  7697.     padding: 4px 16px;
  7698. }
  7699. .teams-page i.icon-trash {
  7700.     top: -3px;
  7701. }
  7702.  
  7703. /* ==========================================================================
  7704.  TEMPLATES
  7705. ========================================================================== */
  7706. form[action="templates.php"] table.list, #ticketTable {
  7707.     margin: 8px 0 0 0;
  7708. }
  7709. form[action="templates.php"] table.list th:first-child {
  7710.     width: 4%;
  7711. }
  7712. form[action="templates.php"] table.list th:nth-child(2) {
  7713.     width: calc(100% - 60% - 4%);
  7714. }
  7715. form[action="templates.php"] table.list th:nth-child(3),
  7716. form[action="templates.php"] table.list th:nth-child(4),
  7717. form[action="templates.php"] table.list th:nth-child(5),
  7718. form[action="templates.php"] table.list th:nth-child(6) {
  7719.     width: 15%;
  7720. }
  7721. form[action="templates.php"] table.list td:nth-child(2) {
  7722.     font-size: 14px;
  7723. }
  7724. .templates i.icon-tags {
  7725.     position: relative;
  7726.     top: -2px;
  7727. }
  7728.  
  7729. /* ==========================================================================
  7730.  FLAGS
  7731. ========================================================================== */
  7732. .rtl #languages {
  7733.     float: left;
  7734. }
  7735. #languages svg { /* remove */
  7736.     width: 24px;
  7737.     height: 24px;
  7738.     display: none; 
  7739. }
  7740. #languages:hover {
  7741.     cursor: pointer;
  7742. }
  7743. .pages-page ul#translations .flag,
  7744. .forms-page ul#translations .flag { /* Manage > Forms */
  7745.     margin: 0px auto;
  7746.     position: relative;
  7747.     top: 6px;
  7748. }
  7749. .pages-page ul#translations li,
  7750. .forms-page ul#translations li { /* Manage > Forms */
  7751.     border: 1px solid #00000038 !important;
  7752.     border-radius: 2px;
  7753.     width: 28px !important;
  7754.     height: 28px !important;
  7755.     padding: 0 !important;
  7756.     text-align: center;
  7757.     position: initial !important;
  7758.     margin: 0 0 4px 0 !important;
  7759.     background: #00000012; 
  7760. }
  7761. .pages-page ul#translations li.active,
  7762. .forms-page ul#translations li.active {
  7763.     background: #b6c5ce;
  7764.     border: 1px solid #747476 !important;
  7765. }
  7766. .pages-page ul#translations li.empty,
  7767. .forms-page ul#translations li.empty { /* Manage > Forms */
  7768.     position: initial !important;
  7769.     margin: 0 !important;
  7770. }
  7771. .forms-page input.translatable + .flag {
  7772.     margin: 0 0 -3px 0;
  7773. }
  7774. .forms-page li[style="display: list-item;"] .flag {
  7775.     margin: 0 0 -4px 0;
  7776. }
  7777. .forms-page .translations .close {
  7778.     right: 11px;
  7779.     top: 0;
  7780. }
  7781. /*.flag.flag-ar {
  7782.     background: url(../../osta/svg/flags/argentina.svg) no-repeat;
  7783. }*/
  7784.  
  7785.  
  7786.  
  7787. .system .ar_EG,
  7788. .flag.flag-eg,
  7789. html[lang="ar_EG"] #languages {
  7790.     background: url(../../osta/svg/flags/egypt.svg) no-repeat;
  7791. }
  7792. .system .ar,
  7793. .system .ar_SA,
  7794. .flag.flag-ar,
  7795. .flag.flag-sa,
  7796. html[lang="ar_SA"] #languages {
  7797.     background: url(../../osta/svg/flags/saudi-arabia.svg) no-repeat;
  7798. }
  7799. .system .az,
  7800. .flag.flag-az,
  7801. html[lang="az"] #languages {
  7802.     background: url(../../osta/svg/flags/azerbaijan.svg) no-repeat;
  7803. }
  7804. .system .bg,
  7805. .flag.flag-bg,
  7806. html[lang="bg"] #languages {
  7807.     background: url(../../osta/svg/flags/bulgaria.svg) no-repeat;
  7808. }
  7809. .system .bn,
  7810. .flag.flag-bn,
  7811. html[lang="bn"] #languages {
  7812.     background: url(../../osta/svg/flags/bangladesh.svg) no-repeat;
  7813. }
  7814. .system .bs,
  7815. .flag.flag-bs,
  7816. html[lang="bs"] #languages {
  7817.     background: url(../../osta/svg/flags/bosnia.svg) no-repeat;
  7818. }
  7819. .system .ca,
  7820. .flag.flag-catalonia,
  7821. html[lang="ca"] #languages {
  7822.     background: url(../../osta/svg/flags/catalan.svg) no-repeat;
  7823. }
  7824. .system .cs,
  7825. .flag.flag-cz,
  7826. html[lang="cs"] #languages {
  7827.     background: url(../../osta/svg/flags/czech-republic.svg) no-repeat;
  7828. }
  7829. .system .da,
  7830. .flag.flag-dk,
  7831. html[lang="da"] #languages {
  7832.     background: url(../../osta/svg/flags/denmark.svg) no-repeat;
  7833. }
  7834. .system .de,
  7835. .flag.flag-de,
  7836. html[lang="de"] #languages {
  7837.     background: url(../../osta/svg/flags/germany.svg) no-repeat;
  7838. }
  7839. .system .el,
  7840. .flag.flag-gr,
  7841. html[lang="el"] #languages {
  7842.     background: url(../../osta/svg/flags/greece.svg) no-repeat;
  7843. }
  7844. .system .en_CAD,
  7845. .flag.flag-cad,
  7846. html[lang="en_CAD"] #languages {
  7847.     background: url(../../osta/svg/flags/canada.svg) no-repeat;
  7848. }
  7849. .system .en_GB,
  7850. .flag.flag-gb,
  7851. html[lang="en_GB"] #languages {
  7852.     background: url(../../osta/svg/flags/united-kingdom.svg) no-repeat;
  7853. }
  7854. .system .en_US,
  7855. .flag.flag-us,
  7856. html[lang="en_US"] #languages {
  7857.     background: url(../../osta/svg/flags/united-states.svg) no-repeat;
  7858. }
  7859. .system .es_AR,
  7860. .flag.flag-ar,
  7861. .flag.flag-arg, /*hmmm*/
  7862. html[lang="es_AR"] #languages {
  7863.     background: url(../../osta/svg/flags/argentina.svg) no-repeat;
  7864. }
  7865. .system .es_ES,
  7866. .flag.flag-es,
  7867. html[lang="es_ES"] #languages {
  7868.     background: url(../../osta/svg/flags/spain.svg) no-repeat;
  7869. }
  7870. .system .es_MX,
  7871. .flag.flag-mx,
  7872. html[lang="mx"] #languages {
  7873.     background: url(../../osta/svg/flags/mexico.svg) no-repeat;
  7874. }
  7875. .system .et,
  7876. .flag.flag-et,
  7877. html[lang="et"] #languages {
  7878.     background: url(../../osta/svg/flags/estonia.svg) no-repeat;
  7879. }
  7880. .system .eu,
  7881. .flag.flag-eu,
  7882. html[lang="eu"] #languages {
  7883.     background: url(../../osta/svg/flags/basque.svg) no-repeat;
  7884. }
  7885. .system .fa,
  7886. .flag.flag-ir,
  7887. html[lang="fa_IR"] #languages {
  7888.     background: url(../../osta/svg/flags/iran.svg) no-repeat;
  7889. }
  7890. .system .fi,
  7891. .flag.flag-fi,
  7892. html[lang="fi"] #languages {
  7893.     background: url(../../osta/svg/flags/finland.svg) no-repeat;
  7894. }
  7895. .system .fr,
  7896. .flag.flag-fr,
  7897. html[lang="fr"] #languages {
  7898.     background: url(../../osta/svg/flags/france.svg) no-repeat;
  7899. }
  7900. .system .gl,
  7901. .flag.flag-gl,
  7902. html[lang="gl"] #languages {
  7903.     background: url(../../osta/svg/flags/galician.svg) no-repeat;
  7904. }
  7905. .system .he,
  7906. .flag.flag-il,
  7907. html[lang="he"] #languages {
  7908.     background: url(../../osta/svg/flags/israel.svg) no-repeat;
  7909. }
  7910. .system .hi,
  7911. .flag.flag-hi,
  7912. html[lang="hi"] #languages {
  7913.     background: url(../../osta/svg/flags/india.svg) no-repeat;
  7914. }
  7915. .system .hr,
  7916. .flag.flag-hr,
  7917. html[lang="hr"] #languages {
  7918.     background: url(../../osta/svg/flags/croatia.svg) no-repeat;
  7919. }
  7920. .system .hu,
  7921. .flag.flag-hu,
  7922. html[lang="hu"] #languages {
  7923.     background: url(../../osta/svg/flags/hungary.svg) no-repeat;
  7924. }
  7925. .system .id,
  7926. .flag.flag-id,
  7927. html[lang="id"] #languages {
  7928.     background: url(../../osta/svg/flags/indonesia.svg) no-repeat;
  7929. }
  7930. .system .is,
  7931. .flag.flag-is,
  7932. html[lang="is"] #languages {
  7933.     background: url(../../osta/svg/flags/iceland.svg) no-repeat;
  7934. }
  7935. .system .it,
  7936. .flag.flag-it,
  7937. html[lang="it"] #languages {
  7938.     background: url(../../osta/svg/flags/italy.svg) no-repeat;
  7939. }
  7940. .system .ja,
  7941. .flag.flag-jp,
  7942. html[lang="ja"] #languages {
  7943.     background: url(../../osta/svg/flags/japan.svg) no-repeat;
  7944. }
  7945. .system .ka,
  7946. .flag.flag-ge,
  7947. html[lang="ka"] #languages {
  7948.     background: url(../../osta/svg/flags/georgia.svg) no-repeat;
  7949. }
  7950. .system .ke,
  7951. .flag.flag-ke,
  7952. html[lang="ke"] #languages {
  7953.     background: url(../../osta/svg/flags/kenya.svg) no-repeat;
  7954. }
  7955. .system .km,
  7956. .flag.flag-km,
  7957. html[lang="km"] #languages {
  7958.     background: url(../../osta/svg/flags/cambodia.svg) no-repeat;
  7959. }
  7960. .system .ko,
  7961. .flag.flag-ko,
  7962. html[lang="ko"] #languages {
  7963.     background: url(../../osta/svg/flags/south-korea.svg) no-repeat;
  7964. }
  7965. .system .lt,
  7966. .flag.flag-lt,
  7967. html[lang="lt"] #languages {
  7968.     background: url(../../osta/svg/flags/lithuania.svg) no-repeat;
  7969. }
  7970. .system .lv,
  7971. .flag.flag-lv,
  7972. html[lang="lv"] #languages {
  7973.     background: url(../../osta/svg/flags/latvia.svg) no-repeat;
  7974. }
  7975. .system .mk,
  7976. .flag.flag-mk,
  7977. html[lang="mk"] #languages {
  7978.     background: url(../../osta/svg/flags/macedonia.svg) no-repeat;
  7979. }
  7980. .system .mn,
  7981. .flag.flag-mn,
  7982. html[lang="mn"] #languages {
  7983.     background: url(../../osta/svg/flags/mongolia.svg) no-repeat;
  7984. }
  7985. .system .ms,
  7986. .flag.flag-ms,
  7987. html[lang="ms"] #languages {
  7988.     background: url(../../osta/svg/flags/malasya.svg) no-repeat;
  7989. }
  7990. .system .nl,
  7991. .flag.flag-nl,
  7992. html[lang="nl"] #languages {
  7993.     background: url(../../osta/svg/flags/netherlands.svg) no-repeat;
  7994. }
  7995. .system .no,
  7996. .flag.flag-no,
  7997. html[lang="no"] #languages {
  7998.     background: url(../../osta/svg/flags/norway.svg) no-repeat;
  7999. }
  8000. .system .pl,
  8001. .flag.flag-pl,
  8002. html[lang="pl"] #languages {
  8003.     background: url(../../osta/svg/flags/poland.svg) no-repeat;
  8004. }
  8005. .system .pt_BR,
  8006. .flag.flag-br,
  8007. html[lang="pt_BR"] #languages {
  8008.     background: url(../../osta/svg/flags/brazil.svg) no-repeat;
  8009. }
  8010. .system .pt_PT,
  8011. .flag.flag-pt,
  8012. html[lang="pt_PT"] #languages {
  8013.     background: url(../../osta/svg/flags/portugal.svg) no-repeat;
  8014. }
  8015. .system .ro,
  8016. .flag.flag-ro,
  8017. html[lang="ro"] #languages {
  8018.     background: url(../../osta/svg/flags/romania.svg) no-repeat;
  8019. }
  8020. .system .ru,
  8021. .flag.flag-ru,
  8022. html[lang="ru"] #languages {
  8023.     background: url(../../osta/svg/flags/russia.svg) no-repeat;
  8024. }
  8025. .system .sk,
  8026. .flag.flag-sk,
  8027. html[lang="sk"] #languages {
  8028.     background: url(../../osta/svg/flags/slovakia.svg) no-repeat;
  8029. }
  8030. .system .sl,
  8031. .flag.flag-si,
  8032. html[lang="sl"] #languages {
  8033.     background: url(../../osta/svg/flags/slovenia.svg) no-repeat;
  8034. }
  8035. .system .sq,
  8036. .flag.flag-sq,
  8037. html[lang="sq"] #languages {
  8038.     background: url(../../osta/svg/flags/albania.svg) no-repeat;
  8039. }
  8040. /* Serbian (Cyrillic) */
  8041. .system .sr,
  8042. .flag.flag-rs,
  8043. html[lang="sr"] #languages {
  8044.     background: url(../../osta/svg/flags/serbia.svg) no-repeat;
  8045. }
  8046. /* Serbian (Српски (Србија)) */
  8047. .system .sr_CS,
  8048. .flag.flag-rs,
  8049. .flag.flag-cs,
  8050. html[lang="sr-CS"] #languages {
  8051.     background: url(../../osta/svg/flags/serbia.svg) no-repeat;
  8052. }
  8053. .system .sv_SE,
  8054. .flag.flag-se,
  8055. html[lang="sv_SE"] #languages {
  8056.     background: url(../../osta/svg/flags/sweden.svg) no-repeat;
  8057. }
  8058. .system .sw,
  8059. .flag.flag-sw,
  8060. html[lang="sw"] #languages {
  8061.     background: url(../../osta/svg/flags/kenya.svg) no-repeat;
  8062. }
  8063. .system .th,
  8064. .flag.flag-th,
  8065. html[lang="th"] #languages {
  8066.     background: url(../../osta/svg/flags/thailand.svg) no-repeat;
  8067. }
  8068. .system .tr,
  8069. .flag.flag-tr,
  8070. html[lang="tr"] #languages {
  8071.     background: url(../../osta/svg/flags/turkey.svg) no-repeat;
  8072. }
  8073. .system .uk,
  8074. .flag.flag-ua,
  8075. html[lang="uk"] #languages {
  8076.     background: url(../../osta/svg/flags/ukraine.svg) no-repeat;
  8077. }
  8078. .system .ur_IN,
  8079. .flag.flag-in,
  8080. html[lang="ur_IN"] #languages {
  8081.     background: url(../../osta/svg/flags/india.svg) no-repeat;
  8082. }
  8083. .system .ur_PK,
  8084. .flag.flag-pk,
  8085. html[lang="ur_PK"] #languages {
  8086.     background: url(../../osta/svg/flags/pakistan.svg) no-repeat;
  8087. }
  8088. .system .vi,
  8089. .flag.flag-vi,
  8090. html[lang="vi"] #languages {
  8091.     background: url(../../osta/svg/flags/vietnam.svg) no-repeat;
  8092. }
  8093. .system .zh_CN,
  8094. .flag.flag-cn,
  8095. html[lang="zh_CN"] #languages {
  8096.     background: url(../../osta/svg/flags/china.svg) no-repeat;
  8097. }
  8098. .system .zh_TW,
  8099. .flag.flag-tw,
  8100. html[lang="zh_TW"] #languages {
  8101.     background: url(../../osta/svg/flags/taiwan.svg) no-repeat;
  8102. }
  8103.  
  8104.  
  8105.  
  8106.  
  8107.  
  8108. @media screen and (min-width: 600px) and (max-width: 622px) {
  8109.     .flag.flag-mn { /* Oops ran out of room sorry Mongolia you have to go */
  8110.         display: none;
  8111.     }
  8112. }
  8113. #trans .flag,
  8114. #translations .flag {
  8115.     background-size: 20px;
  8116.     width: 22px;
  8117.     height: 16px;
  8118.     background-position: center -2px;
  8119.     background-color: #b0b0b0;
  8120.     border-radius: 3px;
  8121. }
  8122. #translations i.icon-globe {
  8123.     width: 22px;
  8124.     height: 22px;
  8125.     margin: 0;
  8126.     padding: 0;
  8127.     top: 1px !important;
  8128. }
  8129. #translations li:not(.active) {
  8130.     border-bottom: 7px solid #fff;
  8131. }
  8132. #translations .icon-globe:before {
  8133.     content: "\f0ac";
  8134.     font-size: 22px;
  8135. }
  8136. .pages-page ul#translations li.empty i.icon-globe:before,
  8137. .forms-page ul#translations li.empty i.icon-globe:before {
  8138.     font-size: 19px !important;
  8139. }
  8140. ul.tabs.alt li:hover {
  8141.     border-bottom: 2px solid var(--nav-bar-bg);
  8142. }
  8143. .accordion-hide{display:none!important}.accordion-show-block,.accordion-show{display:block!important}.accordion-show-inline-block{display:inline-block!important}
  8144. button.accord {
  8145.     margin: 0 0 0 6px; 
  8146.     padding: initial;
  8147.     background: initial;
  8148.     border: initial;   
  8149. }
  8150. button.accord .icon-question-sign:before {
  8151.     width: 25px;
  8152.     top: 7px;
  8153. }
  8154. button.accord:hover > .icon-question-sign:before {
  8155.     width: 25px;
  8156.     top: 7px;
  8157. }
  8158. div#lang-choices {
  8159.     background: #0000000d;
  8160.     margin: 0 0 20px 0;
  8161.     padding: 20px;
  8162.     width: fit-content;
  8163. }
  8164. div#header-constrain {
  8165.     max-width: 1264px;
  8166.     margin: 0 auto;
  8167. }
  8168. div#sub_nav-wrap {
  8169.     background: var(--nav-bar-bg);
  8170.     border: 0;
  8171.     margin: 60px 0 0 0;
  8172.     padding: 0;
  8173.     height: 24px;
  8174.     line-height: 23px;
  8175. }
  8176. /* .tickets-page #sub_nav {
  8177.     margin: 0 auto;
  8178. } */
  8179. .jb-overflowmenu {
  8180.     position: initial;
  8181.     width: initial; /*reset*/
  8182.     max-width: 960px;
  8183. }
  8184. .jb-overflowmenu .jb-overflowmenu-menu-primary {
  8185.     padding: 0;
  8186.     margin: 2px 0 0 0;
  8187.     height: 27px !important;
  8188. }
  8189. .jb-overflowmenu-menu-primary div.customQ-dropdown {
  8190.     top: 28px;
  8191. }
  8192. .jb-overflowmenu-menu-primary div.customQ-dropdown {
  8193.     border: solid .5px rgba(0, 0, 0, 0.2);
  8194.     border-top: initial;
  8195.     background: var(--nav-bar-bg);
  8196.     left: -11px;
  8197.     top: 26px;
  8198. }
  8199. ul.subMenuQ {
  8200.     background: var(--nav-bar-bg) !important;
  8201. }
  8202. #customQ_nav .jb-overflowmenu-menu-primary li.item a > i {
  8203.     margin-top: 1px;
  8204. }
  8205. #customQ_nav .jb-overflowmenu-menu-primary li.item {
  8206.     padding: 0;
  8207.     margin: 0;
  8208. }
  8209. #customQ_nav .jb-overflowmenu-menu-primary li.item:hover {
  8210.     padding: 0;
  8211.     background-color: inherit;
  8212.     border-left: initial;
  8213.     border-top: initial;
  8214.     border-right: initial;
  8215. }
  8216. ul#sub_nav .icon-sort-down:before {
  8217.     color: var(--nav-bar-link);
  8218.     font-size: 12px;
  8219. }
  8220. #sub_nav > li > a,
  8221. #sub_nav > li + li > a,
  8222. #customQ_nav .jb-overflowmenu-menu-primary li.item > a {
  8223.     color: var(--nav-bar-link) !important;
  8224. }
  8225. #sub_nav > li > a:hover,
  8226. #sub_nav > li + li > a:hover,
  8227. #customQ_nav .jb-overflowmenu-menu-primary li.item:hover > a,
  8228. #customQ_nav .jb-overflowmenu-menu-primary li.item > a:hover {
  8229.     color: var(--nav-bar-link-hover) !important;
  8230. }
  8231. .customQ-dropdown ul li > span.newItemQ {
  8232.     padding: 0;
  8233.     margin: 0 8px 0 0;
  8234. }
  8235. .customQ-dropdown li.personalQ {
  8236.     border-bottom: 1px dashed var(--header-title);
  8237.     background-color: initial;
  8238.     margin: 4px 0;
  8239. }
  8240. .customQ-dropdown li:not(.personalQ) > span {
  8241.     color: var(--header-title);
  8242.     font-weight: initial;
  8243. }
  8244. .customQ-dropdown ul li:not(.personalQ):hover {
  8245.     color: var(--header-title);
  8246.     background-color: var(--header-bg);
  8247. }
  8248. .customQ-dropdown ul li:not(.personalQ):hover > a.truncate {
  8249.     color: var(--header-title) !important;
  8250. }
  8251. .customQ-dropdown ul.scroll-height {
  8252.     border-bottom: solid .5px rgba(0, 0, 0, 0.2);
  8253. }
  8254. .customQ-dropdown .add-queue a span {
  8255.     color: var(--nav-bar-link);
  8256.     opacity: .8;
  8257. }
  8258. .customQ-dropdown .add-queue a:hover span {
  8259.     color: var(--header-title) !important;
  8260.     opacity: 1;
  8261. }
  8262. .customQ-dropdown .add-queue a:hover {
  8263.     background-color: var(--header-bg);
  8264. }
  8265. .customQ-dropdown li h4, .customQ-dropdown li.top-level {
  8266.     margin: 8px 0 0 3px;
  8267.     background-color: initial;
  8268.     color: var(--nav-bar-link);
  8269.     text-align: left;
  8270.     font-weight: 600;
  8271.     font-family: 'Open Sans', sans-serif;
  8272. }
  8273. #nav.pull-right svg {
  8274.     content: "";
  8275.     position: relative;
  8276.     top: 4px;
  8277.     width: 18px !important;
  8278.     height: 18px !important;
  8279.     fill: var(--header-title);
  8280.     display: inline-block;
  8281. }  
  8282. a#dark-mode-link svg {
  8283.     fill: #ffdf5d !important;
  8284.     top: 6px !important;   
  8285. }
  8286. a#dark-mode-link:hover svg {
  8287.     color: #6C7B85 !important;
  8288.     fill: #6C7B85 !important;
  8289. }
  8290. a#profile-link {
  8291.     margin-left: 4px !important;
  8292. }
  8293.  
  8294. /* Dark Mode switch nav icon between day and night? */
  8295. svg#night-mode-svg {
  8296.     display: none !important;
  8297. }
  8298. svg#day-mode-svg {
  8299.     display: inline-block !important;
  8300. }
  8301. .dark-mode svg#day-mode-svg {
  8302.     display: none !important;
  8303. }
  8304. .dark-mode svg#night-mode-svg {
  8305.     display: inline-block !important;
  8306. }
  8307. .dark-mode svg#night-mode-svg {
  8308.     width: 17px !important;
  8309.     height: 17px !important;
  8310.     top: 2px;
  8311. }
  8312.  
  8313. @media screen and (max-width: 900px) {
  8314.     #header #nav a[href*="/profile.php"] {
  8315.         font-size: 0;
  8316.         /* background-color: #000; */
  8317.         width: 14px;
  8318.         display: inline-block;
  8319.     }
  8320.     #header #nav a[href*="/profile.php"] svg {
  8321.         display: inline-block; 
  8322.         fill: var(--header-title);
  8323.         width: 18px !important;
  8324.         height: 18px !important;
  8325.         content: "";
  8326.         position: relative;
  8327.         top: 4px;
  8328.         margin: 0 2px 0 -4px;
  8329.     }
  8330.     #header a {
  8331.         font-size: 12px;
  8332.     }
  8333. }
  8334. @media screen and (max-width: 1100px) {
  8335.     html[lang="el"] #header a {
  8336.         font-size: 12px;
  8337.     }
  8338. }
  8339. li.annotations {
  8340.     display: none !important;
  8341. }
  8342. .subject-bold {
  8343.     display: inline-block;
  8344.     margin: 0 0 0 -8px;
  8345.     padding-right: 4px;
  8346.     font-size: 14px;
  8347.     color: #848484;
  8348. }
  8349. .osta_subject .pull-left {
  8350.     width: 0;
  8351. }
  8352. .osta.show.overdueTicket-container {
  8353.     margin: 0 0 0 -25px;
  8354. }
  8355. .rtl .osta.show.overdueTicket-container {
  8356.     margin: 0 -25px 0 0;
  8357. }
  8358. .osta_subject small.faded-more {
  8359.     font-size: 12px;
  8360.     color: #8a8a8a;
  8361.     position: relative;
  8362.     top: 1px;
  8363. }
  8364. .faded-more i.icon-comments-alt {
  8365.     float: right;
  8366.     right: 0;
  8367.     margin: 0 0 0 3px;
  8368. }
  8369. .subject-bold {
  8370.     display: inline-block;
  8371.     margin: 0 0 0 -8px;
  8372.     padding-right: 4px;
  8373.     font-size: 14px;
  8374.     color: #8e8e8e;
  8375.     /* font-family: 'Open Sans', sans-serif; */
  8376.     font-family: "Lato", "Helvetica Neue", arial, helvetica, sans-serif;
  8377. }
  8378. .list .paperclip {
  8379.     float: right;
  8380. }
  8381. i.small.icon-paperclip.icon-flip-horizontal {
  8382.     width: 16px;
  8383.     height: 16px;
  8384.     margin: 0;
  8385.     padding: 0;
  8386.     top: 0;
  8387.     float: right;
  8388.     margin: 0 8px 0 0;
  8389. }
  8390. .selected-signature .inner {
  8391.     opacity: 1 !important;
  8392. }
  8393. /* */
  8394. /* add to Theme Options */
  8395. /* */
  8396. /* ON/OFF Switch */
  8397. input.switch:empty {
  8398.     visibility: hidden;
  8399. }
  8400. input.switch:empty ~ label {
  8401.     position: relative;
  8402.     float: left;
  8403.     line-height: 3em;
  8404.     text-indent: 4em;
  8405.     margin: 0.2em 0;
  8406.     cursor: pointer;
  8407.     -webkit-user-select: none;
  8408.     -moz-user-select: none;
  8409.     -ms-user-select: none;
  8410.     user-select: none;
  8411.     height: 2em;
  8412. }
  8413. input.switch:empty ~ label:before,
  8414. input.switch:empty ~ label:after {
  8415.     position: absolute;
  8416.     display: block;
  8417.     top: 0;
  8418.     bottom: 0;
  8419.     left: 0;
  8420.     content: '\2718';
  8421.     text-indent: 2.4em;
  8422.     color: #aaa;
  8423.     background-color: #aaa;
  8424.     width: 4em;
  8425.     height: 2em;
  8426.     border-radius: 4em;
  8427. }
  8428. input.switch:empty ~ label:before {
  8429.     box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.2), inset -1px 1px 5px rgba(0, 0, 0, 0.2);
  8430. }
  8431. input.switch:empty ~ label:after {
  8432.     content: ' ';
  8433.     background: #f2f2f2;
  8434.     width: 1.8em;
  8435.     height: 1.8em;
  8436.     border-radius: 1.8em;
  8437.     top: 0.1em;
  8438.     left: 0.2em;
  8439.     box-shadow: inset 0 -0.1em 0 rgba(0,0,0,0.1);
  8440.     -webkit-transition: all 100ms ease-in;
  8441.     transition: all 100ms ease-in;
  8442. }
  8443. /* toggle on */
  8444. input.switch:checked ~ label:before {
  8445.     content: '';
  8446.     background-color: #69bd48;
  8447. }
  8448. input.switch:checked ~ label:after {
  8449.     margin-left: 1.91em;
  8450. }
  8451. /* focus styles */
  8452. input.switch:focus ~ label {
  8453.     color: #000;
  8454. }
  8455. input.switch:focus ~ label:before {
  8456.     box-shadow: 0 0 0 1px #999;
  8457. }
  8458. .disabled {
  8459.     opacity: .5;
  8460. }
  8461. .form_table.settings_table {
  8462.     display: inline;
  8463. }
  8464. .settings-page .form_table.settings_table {
  8465.     display: block;
  8466. }
  8467. .form_table.settings_table td[colspan="2"] {
  8468.     padding: 0;
  8469. }
  8470. select[name="acl_backend"] {
  8471.     min-width: 140px !important;
  8472. }
  8473. input[name="autolock_minutes"] {
  8474.     min-width: 44px !important;
  8475. }
  8476. .settings-page .form_table.settings_table .action-button.pull-right {
  8477.     padding: 4px 10px !important;
  8478. }
  8479.  
  8480. /*
  8481.  
  8482. BACKDROPS
  8483.  
  8484. */
  8485. #system-backdrops-options {
  8486.     width: calc(100% - 40px) !important;
  8487.     margin: 0 auto;
  8488. }
  8489. #system-backdrops-options td.toggles {
  8490.     width: 60px;
  8491.     padding-right: 18px !important;
  8492. }
  8493. td#spacer {
  8494.     width: auto;
  8495. }
  8496. td.options-backdrop, td.option-solid {
  8497.     font-size: 18px;
  8498.     height: 52px;
  8499.     width: 296px !important;   
  8500. }
  8501. #system-backdrops {
  8502.     width: calc(100% - 34px) !important;
  8503.     margin: 16px auto;
  8504. }
  8505. td.backdrop {
  8506.     padding: 0 !important;
  8507. }
  8508. .backdrop .outer {
  8509.     display: inline-block;
  8510.     position: relative;
  8511.     background: #eee;
  8512.     border: .5px solid #ddd;
  8513.     margin: 0 18px 22px 0;
  8514. }
  8515. @media screen and (min-width: 1220px) {
  8516.     #system-backdrops label:nth-child(3n+3) > div,
  8517.     #custom-backdrops .backdrop-delete-icon-container:nth-child(3n+3) {
  8518.         margin-right: 0;
  8519.     }
  8520. }
  8521. .backdrop .select {
  8522.   padding-left: 20px;
  8523. }
  8524. .backdrop .inner {
  8525.     display: inline-block;
  8526.     position: relative;
  8527.     width: 337px;
  8528.     height: 190px;
  8529.     margin: 10px;
  8530.     background-size: contain !important;   
  8531. }
  8532. #one .inner {
  8533.     background-color: var(--header-bg);
  8534.     background-image: url(../../osta/img/backdrops/01.png);
  8535. }
  8536. #two .inner {
  8537.     background-color: var(--header-bg);
  8538.     background-image: url(../../osta/img/backdrops/02.png);
  8539. }
  8540. #three .inner {
  8541.     background-color: var(--header-bg);
  8542.     background-image: url(../../osta/img/backdrops/03.png);
  8543. }
  8544. #four .inner {
  8545.     background-color: var(--header-bg);
  8546.     background-image: url(../../osta/img/backdrops/04.png);
  8547. }
  8548. #five .inner {
  8549.     background-color: var(--header-bg);
  8550.     background-image: url(../../osta/img/backdrops/05.jpg);
  8551. }
  8552. #six .inner {
  8553.     background-color: var(--header-bg);
  8554.     background-image: url(../../osta/img/backdrops/06.jpg);
  8555. }
  8556. #seven .inner {
  8557.     background-color: var(--header-bg);
  8558.     background-image: url(../../osta/img/backdrops/07.jpg);
  8559. }
  8560. #eight .inner {
  8561.     background-color: var(--header-bg);
  8562.     background-image: url(../../osta/img/backdrops/08.jpg);
  8563. }
  8564. #nine .inner {
  8565.     background-color: var(--header-bg);
  8566.     background-image: url(../../osta/img/backdrops/09.jpg);
  8567. }
  8568. #ten .inner {
  8569.     background-color: var(--header-bg);
  8570.     background-image: url(../../osta/img/backdrops/10.jpg);
  8571. }
  8572. #eleven .inner {
  8573.     background-color: var(--header-bg);
  8574.     background-image: url(../../osta/img/backdrops/11.jpg);
  8575. }
  8576. #twelve .inner {
  8577.     background-color: var(--header-bg);
  8578.     background-image: url(../../osta/img/backdrops/12.jpg);
  8579. }
  8580. #custom-backdrops td {
  8581.     padding: 0;
  8582. }
  8583. .backdrop .top {
  8584.     width: 80px;
  8585.     height: 77px;
  8586.     background-color: var(--nav-bar-bg);
  8587.     background-image: url(../../osta/img/backdrops/login-box.png);
  8588.     background-position: center center;
  8589.     background-repeat: no-repeat;
  8590.     background-size: 80px 77px;
  8591.     margin: 0 auto;
  8592.     display: block;
  8593.     position: relative;
  8594.     top: 50%;
  8595.     transform: translateY(-50%);  
  8596. }
  8597. .backdrop [type=radio] {
  8598.     position: absolute;
  8599.     visibility: hidden;
  8600. }
  8601. .backdrop [type=radio] + div {
  8602.     cursor: pointer;
  8603. }
  8604. .backdrop [type=radio]:checked + div {
  8605.     outline: 1px solid #5a5a5a;
  8606. }
  8607. .checkbox-container {
  8608.     background: #000;
  8609.     z-index: 99;
  8610.     width: 50px;
  8611. }
  8612. .custom-backdrop-outer {
  8613.     display: inline-block;
  8614.     position: relative;
  8615.     background: #eee;
  8616.     border: .5px solid #ddd;
  8617. }
  8618. .custom-backdrop-inner {
  8619.     display: inline-block;
  8620.     position: relative;
  8621.     width: 337px;
  8622.     height: 190px;
  8623.     margin: 10px;
  8624.     background-size: cover;
  8625. }
  8626. .custom-backdrop-inner .top {
  8627.     width: 80px;
  8628.     height: 77px;
  8629.     background: url(../../osta/img/backdrops/login-box.png) no-repeat center center, var(--nav-bar-bg);
  8630.     background-size: 80px 77px;
  8631.     margin: 0 auto;
  8632.     display: block;
  8633.     position: relative;
  8634.     top: 50%;
  8635.     transform: translateY(-50%);
  8636. }
  8637. #custom-backdrops [type=radio] {
  8638.     position: absolute;
  8639.     opacity: 0;
  8640.     width: 0;
  8641.     height: 0;
  8642. }
  8643. #custom-backdrops [type=radio] + div {
  8644.     cursor: pointer;
  8645. }
  8646. #custom-backdrops input[type="radio"]:checked + div {
  8647.     outline: 1px solid #5a5a5a;
  8648. }
  8649. #custom-backdrops .checkbox-container {
  8650.     width: 36px;
  8651.     background: initial;
  8652.     position: relative;
  8653.     top: -67px;
  8654.     left: 310px;
  8655.     height: 49px;
  8656. }
  8657. #custom-backdrops .checkbox-container input[type="checkbox"] {
  8658.     position: absolute;
  8659.     visibility: hidden;
  8660. }
  8661. .backdrop-delete-icon-container {
  8662.     width: 358px;
  8663.     height: 215px;
  8664.     display: inline-block;
  8665.     margin: 0 23px 20px 0;
  8666.     float: left;
  8667. }
  8668. #custom-backdrops th,
  8669. #custom-backdrop-upload {
  8670.     text-align: left;
  8671. }
  8672. #custom-backdrop-container,
  8673. #upload-backdrop-container {
  8674.     padding: 20px 19px !important;
  8675. }
  8676. .custom-logo-group i.icon-trash,
  8677. #custom-backdrops i.icon-trash {
  8678.     font-size: 42px;
  8679.     width: 0;
  8680.     height: 0;
  8681. }
  8682. .custom-logo-group i.icon-trash {
  8683.     font-size: 25px;
  8684. }
  8685. .custom-logo-group i.icon-trash:before,
  8686. #custom-backdrops i.icon-trash:before {
  8687.     fill: #fff !important;
  8688.     color: #fff !important;
  8689.     width: 35px;
  8690.     height: 40px;  
  8691. }
  8692. .custom-logo-group i.icon-trash:hover::before,
  8693. #custom-backdrops i.icon-trash:hover::before {
  8694.     fill: red !important;
  8695.     color: red !important;
  8696.     text-shadow: initial;  
  8697. }
  8698. .custom-logo-group i.icon-trash:hover::before, #custom-backdrops i.icon-trash:hover::before {
  8699.  
  8700. }
  8701. .custom-logo-group input[type="checkbox"]:checked + i.icon-trash:before,
  8702. #custom-backdrops input[type="checkbox"]:checked + i.icon-trash:before {
  8703.     fill: red !important;
  8704.     color: red !important;
  8705. }
  8706. table[style="display: none;"] {
  8707.     display: initial !important;
  8708.     opacity: .5 !important;
  8709.     pointer-events: none;
  8710. }
  8711. table[style="display: table;"] {
  8712.     opacity: 1 !important;
  8713. }
  8714. .print-logo-upload .error {
  8715.     background: #000 !important;
  8716. }
  8717. /* Custom Text */
  8718. .indent {
  8719.     padding-left: 20px !important;
  8720. }
  8721. #row-one,
  8722. #row-two {
  8723.     width: 100%;
  8724.     overflow: hidden;
  8725. }
  8726. #row-two {
  8727.     margin: 0 0 20px 0;
  8728. }
  8729. .custom-text-container {
  8730.     float: left;
  8731.     margin: 0 80px 0 0;
  8732. }
  8733. .custom-text-input input {
  8734.     width: 210px !important;
  8735. }
  8736. .custom-color-container {
  8737.     overflow: hidden;
  8738.     width: 291px;
  8739.     float: left;
  8740.     margin: 0;
  8741. }
  8742. .custom-color-container:first-of-type {
  8743.     /* padding-left: 20px !important; */
  8744. }
  8745. .custom-color-container:last-of-type {
  8746.     padding-right: 0 !important;
  8747.     width: 240px;
  8748. }
  8749. #choose-theme-options,
  8750. #custom-theme-options {
  8751.   float: right;
  8752. }
  8753. #choose-theme-options {
  8754.     margin-top: -18px;
  8755. }
  8756. #custom {
  8757.     margin-top: 10px;
  8758. }
  8759. #custom-theme-options {
  8760.     width: calc(100% - 17px) !important;
  8761.     margin: -18px auto 0 auto;
  8762.     overflow: hidden;
  8763. }
  8764. .disabled {
  8765.     opacity: .5;
  8766.     pointer-events: none;
  8767. }
  8768. #list-tabs_container .disabled {
  8769.     pointer-events: initial;
  8770. }
  8771. #osta-settings-title {
  8772.     float: left;
  8773. }
  8774. #osta-toggle {
  8775.     float: right;
  8776. }
  8777. #choose-theme-options,
  8778. #custom-theme-options {
  8779.     width: 100%;
  8780.     display: block;
  8781. }
  8782. .theme .tab_content,
  8783. .theme2 .tab_content {
  8784.     overflow: hidden;
  8785.     padding: 16px;
  8786. }
  8787. #thank-you {
  8788.     font-size: 20px;
  8789.     margin: 30px 0 4px 0;
  8790. }
  8791. .custom-text-and-links-col1 {
  8792.     vertical-align: top;
  8793. }
  8794. .custom-text-and-links-col2 {
  8795.     vertical-align: top;
  8796.     padding-top: 34px; 
  8797. }
  8798. #ie,
  8799. #scroll,
  8800. #consent {
  8801.     float: right;
  8802.     position: relative;
  8803.     top: 4px;
  8804. }
  8805. #scroll-icon {
  8806.     width: 28px;
  8807.     height: 28px;
  8808.     float: left;
  8809.     margin: 0 9px 0 1px;
  8810.     opacity: .9;
  8811.     border-radius: 14%;
  8812. }
  8813. #scroll-top-img {
  8814.     margin-top: 10px;
  8815. }
  8816. .option-ie-redirect-url input[type="text"] {
  8817.     width: 245px;
  8818. }
  8819. div[rel="radio89"] {
  8820.     margin-top: 13px;
  8821. }
  8822. img#ie-icon {
  8823.     width: 32px;
  8824.     height: 32px;
  8825.     float: left;
  8826.     margin: 0 7px 0 0;
  8827. }
  8828. img#cookies {
  8829.     width: 30px;
  8830.     height: 30px;
  8831.     float: left;
  8832.     margin: 0 7px 0 0;
  8833.     opacity: .9;
  8834. }
  8835. .scroll-img {
  8836.     padding: 0 0 18px 0;
  8837. }
  8838. .scroll-title,
  8839. .custom-text-title,
  8840. .ie-redirect-title,
  8841. .consent-message-title {
  8842.     font-size: 16px;
  8843.     font-weight: 600;
  8844.     margin: 20px 0 6px 0;
  8845. }
  8846. label[for="radio89"],
  8847. label[for="radio77"] {
  8848.     position: relative;
  8849.     top: -3px;
  8850. }
  8851.  
  8852.  
  8853.  
  8854. .ie-redirect-table,
  8855. .consent-message-table {
  8856.     margin: 20px 0 50px 0;
  8857. }
  8858. .scroll-table {
  8859.     margin-top: 20px;
  8860.     margin-bottom: 50px;
  8861. }
  8862. .option-desktop-scroll,
  8863. .option-mobile-scroll {
  8864.     font-size: 18px;
  8865. }
  8866. #scroll-img-background {
  8867.     max-width: 400px !important;
  8868.     background-image: url(../img/custom-text/scroll-to-top.png) !important;
  8869.     height: 185px;
  8870.     background-repeat: no-repeat !important;
  8871.     background-position-y: 20px !important;
  8872. }
  8873. #scroll-spacer {
  8874.     height: 4px !important;
  8875.     font-size: 1px;
  8876. }
  8877. .option-desktop-scroll,
  8878. .option-mobile-scroll {
  8879.     font-size: 15px;
  8880. }
  8881. label[for="radio98"],
  8882. label[for="radio99"] {
  8883.     transform: scale(.7);
  8884. }
  8885. .option-ie-redirect-url input[type="text"] {
  8886.     width: 97% !important;
  8887.     padding: 0 0 0 8px !important;
  8888.     border: .5px solid #bfbfbf;
  8889. }
  8890. #consent-message-label-container,
  8891. #consent-message-text-container {
  8892.     margin-top: 10px;
  8893. }
  8894. textarea[name="consent-message"] {
  8895.     width: 97%;
  8896.     height: 47px;
  8897.     border: .5px solid #bfbfbf;
  8898. }
  8899. .consent-message-button-text-input input {
  8900.     width: 33%;
  8901.     border: .5px solid #bfbfbf;
  8902. }
  8903. #custom-text-and-links input {
  8904.     margin: 10px 0 10px 0 !important;
  8905. }
  8906. #copy-clipboard {
  8907.     padding: 10px;
  8908.     background: #f3f3f5;
  8909.     border: .5px solid #ddd;
  8910.     width: fit-content;
  8911. }
  8912. #copy-clipboard .code-green {
  8913.     color: #828282;
  8914. }
  8915. #get-support-container {
  8916.     padding-top: 14px;
  8917. }
  8918. #copy-clipboard-btn,
  8919. a#osta-settings-support {
  8920.     margin: 10px 0;
  8921.     box-shadow: none;
  8922.     padding-top: 14px;
  8923.     padding-bottom: 14px;
  8924.     color: #6d7989;
  8925.     border: initial !important;
  8926.     background: #dcdfe2;
  8927.     letter-spacing: 1.6px;
  8928.     font-weight: 700;
  8929.     font-size: 13px;
  8930.     width: 100%;
  8931.     text-align: center;
  8932.     border-radius: 3px;
  8933. }
  8934. #copy-clipboard-btn:hover,
  8935. a#osta-settings-support:hover {
  8936.     background: #c9cdd0;
  8937.     color: #343a42;
  8938. }
  8939. .form_table.settings_table img {
  8940.     box-shadow: initial !important;
  8941.     border: .5px solid #ddd;
  8942. }
  8943. #theme-header-options .container,
  8944. #logo-options .container {
  8945.     float: left;
  8946.     margin: 10px 10px 16px 0;
  8947.     padding: 10px;
  8948.     border: 1px solid #ddd;
  8949.     width: 372px;
  8950. }
  8951. #theme-header-options .container {
  8952.     margin: 10px 10px 10px 0;
  8953. }
  8954. #theme-header-options .container {
  8955.     margin-right: 31px;
  8956. }
  8957. #theme-header-options .left,
  8958. #logo-options .left {
  8959.     width: 290px;
  8960. }
  8961. #theme-header-options .right,
  8962. #logo-options .right {
  8963.     width: 68px;
  8964.     vertical-align: middle;  
  8965. }
  8966. #theme-header-options .title,
  8967. #logo-options .title {
  8968.     font-size: 18px;
  8969.     margin: -2px -2px 5px 2px;
  8970.     width: 278px;
  8971. }
  8972. #logo-options .title {
  8973.     margin: -3px -2px 7px 2px;
  8974. }
  8975. #theme-header-options .image img,
  8976. #logo-options .image img {
  8977.     max-width: 300px;
  8978.     height: 34px;
  8979.     margin: 12px 11px;
  8980. }
  8981. #choose-theme-options,
  8982. #custom-theme {
  8983.     opacity: .5;
  8984.     pointer-events: none;
  8985. }
  8986. #choose-theme-options {
  8987.     margin: 2px 0 10px;
  8988. }
  8989. #custom-theme {
  8990.     margin: 50px 0 24px;
  8991. }
  8992.  
  8993.  
  8994. #theme-header-options .image,
  8995. #theme-header-options .image,
  8996. #logo-options .image {
  8997.     background: var(--header-bg);
  8998.     border: .5px solid #ddd;
  8999.     width: 280px;
  9000.     height: 60px;
  9001.     opacity: .5;   
  9002. }
  9003. #print-logo .print-logo {
  9004.     opacity: .5;   
  9005. }
  9006. .highlight #choose-theme-options,
  9007. .highlight #custom-theme,
  9008. .highlight #logo-options,
  9009. #print-logo.highlight .print-logo  {
  9010.     opacity: 1;
  9011.     pointer-events: auto;  
  9012. }
  9013. .print-logo-upload input[type="file"] {
  9014.     margin-top: 10px;
  9015.     width: 273px !important;
  9016. }
  9017. #show-image #logo-upload .title {
  9018.     margin-top: 0;
  9019. }
  9020. .print-logo {
  9021.     max-width: 279px;
  9022.     height: 368px;
  9023.     background-image: url(../../osta/img/custom-text/print-logo-preview.png);
  9024.     background-repeat: no-repeat;
  9025.     border: .5px solid #e2e2e2 !important
  9026. }
  9027. .print-logo img {
  9028.     height: 18px !important;
  9029.     width: auto !important;
  9030.     margin: 10px 0 0 10px;
  9031. }
  9032. .print-logo {
  9033.     margin: 0 0 6px 0;
  9034. }
  9035. #print-logo-placeholder #print-logo {
  9036.     margin-top: 50px;
  9037. }
  9038. .print-logo-upload {
  9039.     display: none;
  9040.     padding: 0 !important; 
  9041. }
  9042. .highlight .print-logo-upload {
  9043.     display: inline-block;
  9044. }
  9045. #background-solid-image.highlight,
  9046. #background-solid-color.highlight,
  9047. #default-logo.highlight,
  9048. #custom-text.highlight,
  9049. #custom-logo.highlight {
  9050.     border: 1px solid #aaa !important;
  9051. }
  9052. #background-solid-image.highlight .image,
  9053. #background-solid-color.highlight.highlight .image,
  9054. #default-logo.highlight .image,
  9055. #custom-text.highlight .image,
  9056. #custom-logo.highlight .image,
  9057. #logo-options.highlight .print-logo img {
  9058.   opacity: 1 !important;
  9059. }
  9060. #background-solid-image .image {
  9061.     background-size: 569%;
  9062.     background-position: -182px 0;
  9063. }
  9064. input.switch:empty {
  9065.     opacity: 0;
  9066.     position: absolute;
  9067.     top: 22px;
  9068. }
  9069. input.switch:empty ~ label {
  9070.     position: relative;
  9071.     float: left;
  9072.     line-height: 3em;
  9073.     text-indent: 4em;
  9074.     margin: 0;
  9075.     cursor: pointer;
  9076.     -webkit-user-select: none;
  9077.     -moz-user-select: none;
  9078.     -ms-user-select: none;
  9079.     user-select: none;
  9080. }
  9081. input.switch:empty ~ label:before,
  9082. input.switch:empty ~ label:after {
  9083.     position: absolute;
  9084.     display: block;
  9085.     top: 0;
  9086.     bottom: 0;
  9087.     left: 0;
  9088.     content: '\2718';
  9089.     text-indent: 2.4em;
  9090.     color: #aaa;
  9091.     background-color: #aaa;
  9092.     width: 4em;
  9093.     height: 2em;
  9094.     border-radius: 4em;
  9095. }
  9096. input.switch:empty ~ label:before {
  9097.     box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.2), inset -1px 1px 5px rgba(0, 0, 0, 0.2);
  9098. }
  9099. input.switch:empty ~ label:after {
  9100.     content: '';
  9101.     background: #f2f2f2;
  9102.     width: 1.8em;
  9103.     height: 1.8em;
  9104.     border-radius: 1.8em;
  9105.     top: 0.1em;
  9106.     left: 0.2em;
  9107.     box-shadow: inset 0 -0.1em 0 rgba(0,0,0,0.1);
  9108.     -webkit-transition: all 100ms ease-in;
  9109.     transition: all 100ms ease-in;
  9110. }
  9111. /* toggle on */
  9112. input.switch:checked ~ label:before {
  9113.     content: '';
  9114.     text-indent: 0.5em;
  9115.     color: #7cbd7e;
  9116.     background-color: #7cbd7e;
  9117. }
  9118. input.switch:checked ~ label:after {
  9119.     margin-left: 1.91em;
  9120. }
  9121. /* focus styles */
  9122. input.switch:focus ~ label {
  9123.     color: #000;
  9124. }
  9125. input.switch:focus ~ label:before {
  9126.     box-shadow: 0 0 0 1px #999;
  9127. }
  9128. #theme-header-options .image svg,
  9129. #default-logo .image svg {
  9130.     height: 34px;
  9131.     fill: var(--header-title);
  9132.     padding: 13px;
  9133. }
  9134. #logo-type {
  9135.     width: 445px;
  9136. }
  9137. #logo-type table {
  9138.     margin-left: 20px !important;
  9139. }
  9140. #logo-type #custom-logo img {
  9141.     border: initial;
  9142. }
  9143. .custom-logo-group {
  9144.     vertical-align: top;
  9145. }
  9146. .custom-logo-link a {
  9147.     font-size: 14px !important;
  9148.     white-space: nowrap;
  9149.     text-decoration: underline;
  9150.     line-height: 26px;
  9151. }
  9152. #custom-logo-container {
  9153.     margin-bottom: 17px;
  9154. }
  9155. #custom-logo-container td {
  9156.     vertical-align: top;
  9157.     /* padding-top: 8px !important; */
  9158. }
  9159. .custom-logo-group img {
  9160.     box-shadow: initial !important;
  9161.     border: 1px solid #ddd;
  9162. }
  9163. #show-image img {
  9164.     border: 1px solid #aaa !important;
  9165.     background: var(--header-bg);
  9166.     margin: 6px;
  9167.     height: 72px;
  9168. }
  9169. #logo-upload h2 {
  9170.     margin-top: 15px;
  9171. }
  9172. #custom-text #header-text {
  9173.     width: 264px;
  9174.     margin: 11px 0 11px 11px;
  9175. }
  9176. #custom-text #header-text {
  9177.     display: inline-block;
  9178. }
  9179. #theme-info {
  9180.     background: url(../img/osticket-awesome-mobile.jpg) no-repeat #ffffff;
  9181.     background-size: 359px;
  9182.     background-position: bottom right;
  9183. }
  9184. td.info-column {
  9185.     max-width: 466px;
  9186. }
  9187. #brace {
  9188.     line-height: 0;
  9189.     position: relative;
  9190.     width: 15px;
  9191.     top: 5px;
  9192.     padding: 0 25px 0 15px;
  9193. }
  9194. #brace img {
  9195.     width: 18px !important;
  9196. }
  9197. #theme-header-options {
  9198.     margin: 5px 0 10px 12px;
  9199.     display: inline-block;
  9200. }
  9201. td[style="display: none;"] {
  9202.     display: initial !important;
  9203.     opacity: .5 !important;
  9204.     pointer-events: none;
  9205. }
  9206. td[style="display: table;"] {
  9207.   opacity: 1 !important;
  9208. }
  9209.  
  9210. /* LOGO OPTIONS > HEADER BACKGROUND OPTIONS */
  9211. .options-header-image .container,
  9212. .options-header-color .container {
  9213.     float: left;
  9214.     margin: 10px 10px 10px 0;
  9215.     padding: 10px;
  9216.     border: 1px solid #ddd;
  9217.     width: 372px;
  9218. }
  9219. #background-solid-image .image
  9220. #background-solid-color .image {
  9221.     background: var(--header-bg);
  9222.     border: .5px solid #ddd;
  9223.     width: 280px;
  9224.     height: 60px;
  9225. }
  9226. .options-header-image .title,
  9227. .options-header-color .title {
  9228.     font-size: 18px;
  9229.     margin: 0 0 20px 0;
  9230.     width: 290px;
  9231. }
  9232. input[name="selected-logo"] {
  9233.     display: none;
  9234. }
  9235. input[name="selected-logo-scp"] {
  9236.     position: absolute;
  9237.     visibility: hidden;
  9238. }
  9239. .logo-image-container {
  9240.     width: fit-content;
  9241.     padding: 0 !important;
  9242.     margin: 0 0 20px 0 !important;
  9243.     display: inline-block;
  9244.     position: relative;
  9245.     background: #eee;
  9246.     border: .5px solid #ddd;
  9247.     outline: 2px solid #fff;
  9248. }
  9249. input[type="radio"]:checked + div {
  9250.     outline: 1px solid #5a5a5a;
  9251. }
  9252. .checkbox-container input[type="checkbox"] {
  9253.     position: absolute;
  9254.     visibility: hidden;
  9255. }
  9256. .logo-delete-icon-container .checkbox-container {
  9257.     width: 1px;
  9258.     height: 1px;
  9259.     position: relative;
  9260.     top: 21px;
  9261.     background: initial;
  9262.     text-shadow: 1px 1px 1px rgba(0,0,0,0.85);
  9263. }
  9264. table#custom-logo-column-inner {
  9265.     max-width: 374px;
  9266. }
  9267. td#custom-logo-column {
  9268.     float: none;
  9269.     margin: 0 0 0 20px;
  9270.     padding: 13px 0 12px 0 !important;
  9271.     border: 1px solid #ddd;
  9272.     width: 372px;
  9273. }
  9274. .logo-delete-icon-container label.inline.checkbox {
  9275.     display: inline-block;
  9276.     width: 1px;
  9277.     position: relative;
  9278.     left: -32px;
  9279. }
  9280. #custom-logo-column .indent {
  9281.     padding-left: 12px !important;
  9282. }
  9283. #thank-you img {
  9284.     width: 16px;
  9285.     height: 16px;
  9286.     display: inline-block;
  9287.     position: relative;
  9288.     top: 1px;
  9289.     margin: 0 0 0 6px;
  9290. }
  9291.  
  9292. /* ==========================================================================
  9293.  TABLE CHECKBOX 2019
  9294. ========================================================================== */
  9295. table.list .checkbox * {
  9296.   cursor: pointer;
  9297. }
  9298. table.list p.checkbox {
  9299. /*     width: 14px;
  9300.     height: 14px; */
  9301.     margin: 0;
  9302. }
  9303. table.list.queue.tickets td:first-child {
  9304.     /* padding-left: 14px; */
  9305. }
  9306. .index-page table.list p.checkbox {
  9307.     margin: 2px 0 0 0;
  9308. }
  9309. table.list .checkbox label {
  9310.   display: inline-block;
  9311.   vertical-align: middle;
  9312.   position: relative;
  9313. }
  9314. table.list .checkbox label::before {
  9315.     content: "";
  9316.     display: inline-block;
  9317.     position: absolute;
  9318.     width: 14px;
  9319.     height: 14px;
  9320.     top: -9px;
  9321.     left: -16px;
  9322.     margin-left: 0;
  9323.     border: .5px solid #aaa;
  9324.     border-radius: 3px;
  9325.     background-color: #fff;
  9326.     -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  9327.     -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  9328.     transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  9329. }
  9330. .locked .checkbox label::before {
  9331.     background: url(../../osta/icons/lock.png) 2px 1px no-repeat !important;
  9332. }
  9333. table.list .checkbox label::after {
  9334.     display: inline-block;
  9335.     position: absolute;
  9336.     width: 16px;
  9337.     height: 16px;
  9338.     left: -17px;
  9339.     top: -10px;
  9340.     margin-left: 0;
  9341.     padding-left: 0;
  9342.     padding-top: 0;
  9343.     font-size: 11px;
  9344.     color: #555555;
  9345. }
  9346. table.list .checkbox input[type="checkbox"]{
  9347.     opacity: 0;
  9348.     z-index: 1;
  9349.     margin-left: 0 !important;
  9350. }
  9351. table.list .checkbox input[type="checkbox"]:checked + label::after{
  9352.   font-family: "FontAwesome";
  9353.   content: "";
  9354. background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgZmlsbD0iIzRjNTE1NiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTIxLDdMOSwxOUwzLjUsMTMuNUw0LjkxLDEyLjA5TDksMTYuMTdMMTkuNTksNS41OUwyMSw3WiIgLz48L3N2Zz4=) center center no-repeat;  
  9355.   background-size: 16px;
  9356.     background-color: #fff;
  9357.     border: 1px solid #737373;
  9358.     border-radius: 3px;
  9359. }
  9360. table.list .checkbox {
  9361.   /* margin-top: 0; */
  9362. }
  9363. .helptopics table.list tbody tr td:nth-child(2),
  9364. .filters table.list tbody tr td:nth-child(2),
  9365. .apikeys table.list tbody tr td:nth-child(2),
  9366. .pages table.list tbody tr td:nth-child(2) {
  9367.     font-size: 13px !important;
  9368.     padding: 10px 0 !important;
  9369. }
  9370. .forms table.list tbody tr td:nth-child(2),
  9371. .lists table.list tbody tr td:nth-child(2),
  9372. .slas table.list tbody tr td:nth-child(2),
  9373. .schedules table.list tbody tr td:nth-child(2),
  9374. .pages table.list tbody tr td:nth-child(2) a  {
  9375.     font-size: 14px !important;
  9376.     padding: 10px 0 !important;
  9377. }
  9378. .apikeys th:first-child,
  9379. .banlist th:first-child,
  9380. .canned th:first-child,
  9381. .categories-page th:first-child,
  9382. .departments th:first-child,
  9383. .directory th:first-child,
  9384. .forms-page th:first-child,
  9385. .lists-page th:first-child,
  9386. .emails th:first-child,
  9387. .filters th:first-child,
  9388. .helptopics th:first-child,
  9389. .orgs th:first-child,
  9390. .pages th:first-child,
  9391. .plugin-add th:first-child,
  9392. .plugins-page th:first-child,
  9393. .queues-ticket th:first-child,
  9394. .roles th:first-child,
  9395. .schedules th:first-child,
  9396. .settings-page th:first-child,
  9397. .slas-page th:first-child,
  9398. .staff-page table.list th:first-child,
  9399. .logs-page th:first-child,
  9400. .system th:first-child,
  9401. .tasks th:first-child,
  9402. .teams th:first-child,
  9403. .templates th:first-child,
  9404. .tickets-page th:first-child,
  9405. .users-page th:first-child {
  9406.     background-position: center left 12px !important;
  9407. }
  9408. .apikeys td:first-child,
  9409. .banlist td:first-child,
  9410. .canned td:first-child,
  9411. .categories-page td:first-child,
  9412. .departments td:first-child,
  9413. .directory td:first-child,
  9414. .forms-page td:first-child,
  9415. .lists-page td:first-child,
  9416. .emails td:first-child,
  9417. .filters td:first-child,
  9418. .helptopics td:first-child,
  9419. .orgs td:first-child,
  9420. .pages td:first-child,
  9421. .plugin-add td:first-child,
  9422. .plugins-page table.list tbody td[align="center"],
  9423. .queues-ticket td:first-child,
  9424. .roles td:first-child,
  9425. .schedules td:first-child,
  9426. .settings-page table.list td:first-child,
  9427. .settings-page table.list td:nth-child(2),
  9428. .slas-page td:first-child,
  9429. .staff-page td:first-child,
  9430. .logs-page td:first-child,
  9431. /* .tasks td:first-child, */
  9432. .teams td:first-child,
  9433. .templates td:first-child,
  9434. .tickets-page table.list td:first-child,
  9435. .users-page td:first-child {
  9436.     /* wth is this for */
  9437.     padding: 18px 0 18px 14px;
  9438.     text-align: left;
  9439. }
  9440. .rtl .apikeys td:first-child,
  9441. .rtl .banlist td:first-child,
  9442. .rtl .canned td:first-child,
  9443. .rtl .categories-page td:first-child,
  9444. .rtl .departments td:first-child,
  9445. .rtl .directory td:first-child,
  9446. .rtl .forms-page td:first-child,
  9447. .rtl .lists-page td:first-child,
  9448. .rtl .emails td:first-child,
  9449. .rtl .filters td:first-child,
  9450. .rtl .helptopics td:first-child,
  9451. .rtl .orgs td:first-child,
  9452. .rtl .pages td:first-child,
  9453. .rtl .plugin-add td:first-child,
  9454. .rtl .plugins-page table.list tbody td[align="center"],
  9455. .rtl .queues-ticket td:first-child,
  9456. .rtl .roles td:first-child,
  9457. .rtl .schedules td:first-child,
  9458. .rtl .settings-page table.list td:first-child,
  9459. .rtl .settings-page table.list td:nth-child(2),
  9460. .rtl .slas-page td:first-child,
  9461. .rtl .staff-page td:first-child,
  9462. .rtl .logs-page td:first-child,
  9463. /* .rtl .tasks td:first-child, */
  9464. .rtl .teams td:first-child,
  9465. .rtl .templates td:first-child,
  9466. .rtl .tickets-page table.list td:first-child,
  9467. .rtl .users-page td:first-child {
  9468.     /* wth is this for */
  9469.     text-align: right;
  9470. }
  9471. .orgs table.ticket_info td {
  9472.     padding-top: 0;
  9473. }
  9474. .system td:first-child {
  9475.     padding: 7px 0;
  9476. }
  9477. .settings-page table.list td:nth-child(3) {
  9478.     padding: 0 20px 0 0;
  9479. }
  9480. .settings-page table.list th:nth-child(2) {
  9481.     padding-left: 10px !important;
  9482.     padding-right: 20px;
  9483. }
  9484. .settings-page table.list td:nth-child(2) {
  9485.     font-size: 14px;
  9486.     padding-right: 20px;
  9487. }
  9488. .settings-page table.list td:nth-child(3) a {
  9489.     font-size: 14px;
  9490.     margin-left: -10px;
  9491. }
  9492. .osta_ticket .icon-code-fork,
  9493. .osta_ticket .icon-code-link  {
  9494.     display: none;
  9495. }
  9496. .osta-ticket-merged .icon-code-fork,
  9497. .osta-ticket-linked .icon-code-link {
  9498.     display: inline-block;
  9499. }
  9500. /* new reply icon */
  9501. #new-reply-icon {
  9502.     float: left;
  9503.     width: 14px;
  9504.     height: 14px;
  9505.     margin: 0 9px 0 0;
  9506. }
  9507. .dot {
  9508.     display: none;
  9509.     width: 20px;
  9510.     height: 20px;
  9511.     background-position: -3px 0;
  9512.     background-size: 20px;
  9513.     background-repeat: no-repeat;
  9514.     background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%2388c80b' d='M10%2C9V5L3%2C12L10%2C19V14.9C15%2C14.9 18.5%2C16.5 21%2C20C20%2C15 17%2C10 10%2C9Z' /%3E %3C/svg%3E");
  9515. }
  9516. .new-reply-waiting .dot,
  9517. .ticket-status .dot {
  9518.     display: inline-block; 
  9519.     animation:  slowbounceIn 3s ease-in-out 3s infinite;     
  9520. }
  9521. /* merged tickets icon */
  9522. .osta_ticket .icon-code-fork:before {
  9523.     content: "\f126";
  9524.     font-size: 16px;
  9525.     top: 1px !important;
  9526.     color: #8a8a8a;
  9527. }
  9528. .osta_ticket .icon-code-fork {
  9529.     font-size: 16px;
  9530.     position: relative;
  9531.     top: 4px;
  9532.     margin: 0 0 0 9px;
  9533. }
  9534. /* linked tickets icon */
  9535. .icon-link:before {
  9536.     content: "\f0c1";
  9537.     font-size: 18px;
  9538. }
  9539. a#tickets-merge .icon-code-fork:before {
  9540.     font-size: 20px;
  9541.     top: 0;
  9542. }
  9543. .sticky.bar.fixed .icon-code-fork:before {
  9544.     color: #fff !important;
  9545.     fill: #fff !important;
  9546. }
  9547. .sticky.bar.fixed a#tickets-link .icon-link:before {
  9548.     color: #fff !important;
  9549. }
  9550. .icon-code-link {
  9551.     content: "\f0c1";
  9552. }
  9553. /* action button */
  9554. a#tickets-link .icon-link:before {
  9555.     font-size: 18px;
  9556.     top: 1px;
  9557. }
  9558. /* ticket queue icon */
  9559. .osta_ticket .icon-code-link {
  9560.     margin: 0 0 0 5px;
  9561. }
  9562. .osta_ticket .icon-code-link:before {
  9563.     content: "\f0c1";  
  9564.     font-size: 14px;
  9565.     position: relative;
  9566.     top: 3px;
  9567.     color: #969696;
  9568. }
  9569. @keyframes slowbounceIn {
  9570.   0% {
  9571.     transform: scale(1);
  9572.     opacity: 1;
  9573.   }
  9574.   60% {
  9575.     transform: scale(1.2);
  9576.     opacity: 1;
  9577.   }
  9578.   100% {
  9579.     transform: scale(1);
  9580.   }
  9581. }
  9582. td.osta_ticket {
  9583.     vertical-align: middle;
  9584.     padding: 16px 10px 16px 6px;
  9585.     white-space: nowrap;;
  9586. }
  9587. table.list tbody td:first-child {
  9588.     /* padding-right: 0; */
  9589. }
  9590. div[style="font-weight:bold"] #new-reply-icon .dot {
  9591.     display: inherit;
  9592. }
  9593.  
  9594. .ticket-num {
  9595.     display: inline-block;
  9596.     /* float: left; */
  9597. }
  9598.  
  9599. /* ==========================================================================
  9600.  WARNING BAR
  9601. ========================================================================== */
  9602. #warning_bar {
  9603.     margin: 0;
  9604.     width: 100%;
  9605.     padding: 0;
  9606.     height: 36px;
  9607.     border: initial;
  9608.     background-image: initial;
  9609.     background-color: #000;
  9610.     position: fixed !important;
  9611.     top: 0;
  9612.     z-index: 99;
  9613.     color: #fff;
  9614.     display: none;
  9615.     -webkit-box-shadow: 0px 1px 0px 0px rgba(0,0,0,1);
  9616.     -moz-box-shadow: 0px 1px 0px 0px rgba(0,0,0,1);
  9617.     box-shadow: 0px 1px 0px 0px rgba(0,0,0,1);
  9618. }
  9619. #warning-inner {
  9620.     display: table;
  9621.     margin: 6px auto;
  9622.     background: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23ffffff' d='M19%2C19H5V5H19M19%2C3H5A2%2C2 0 0%2C0 3%2C5V19A2%2C2 0 0%2C0 5%2C21H19A2%2C2 0 0%2C0 21%2C19V5C21%2C3.89 20.1%2C3 19%2C3M11%2C15H13V17H11V15M11%2C7H13V13H11V7' /%3E %3C/svg%3E");
  9623.     background-repeat: no-repeat;
  9624.     height: 20px;
  9625.     padding: 4px 0 0 28px;
  9626. }
  9627. @media only screen and (min-width:761px){  
  9628.     #warning_bar {
  9629.         display: inline-block;
  9630.     }
  9631.     #warning_bar + #header {
  9632.         margin-top: 37px !important;
  9633.     }
  9634.     #warning_bar + #header + #right-menu + #sidr-right + #pjax-container #sub_nav-wrap {
  9635.         margin: 98px 0 0 0;
  9636.     }
  9637. }
  9638.  
  9639. /* ==========================================================================
  9640.  RTL TRANSLATIONS
  9641. ========================================================================== */
  9642. .rtl,
  9643. .rtl div[dir="ltr"],
  9644. .rtl::placeholder,
  9645. .rtl::-moz-placeholder,
  9646. .rtl::-ms-input-placeholder,
  9647. .rtl::-webkit-input-placeholder,
  9648. .rtl .redactor-placeholder:after,
  9649. .rtl .redactor-linebreaks.redactor-placeholder,
  9650. .rtl .redactor-linebreaks.redactor-placeholder:after {
  9651.     direction: rtl;
  9652.     text-align: right;
  9653. }
  9654. .rtl .redactor-placeholder:after {
  9655.     width: 100%;
  9656.     text-align: right;
  9657.     left: initial;
  9658.     right: 10px;   
  9659. }
  9660. .rtl .pull-left.avatar {
  9661.     float: left;
  9662. }
  9663. .rtl .pull-right.avatar {
  9664.     float: right;
  9665. }
  9666.  
  9667. /* ==========================================================================
  9668.  SCROLL TO TOP
  9669. ========================================================================== */
  9670. #scroll-to-top {
  9671.     visibility: hidden;
  9672.     position: fixed;
  9673.     bottom: 11px;
  9674.     right: 20px;
  9675.     z-index: 99;
  9676.     font-size: 18px;
  9677.     border: none;
  9678.     outline: none;
  9679.     background-color: var(--header-bg);
  9680.     color: var(--header-title);
  9681.     cursor: pointer;
  9682.     padding: 13px;
  9683.     border-radius: 4px;
  9684.     opacity: 0;
  9685.     transition: visibility 0s, opacity 0.5s ease-in-out;
  9686.     -moz-transition: visibility 0s, opacity 0.5s ease-in-out;
  9687.     -webkit-transition: visibility 0s, opacity 0.5s ease-in-out;
  9688. }
  9689. #scroll-to-top:hover {
  9690.     opacity: 1 !important;
  9691. }
  9692. #scroll-to-top svg {
  9693.     fill: var(--header-title);
  9694. }
  9695. .demo button#scroll-to-top {
  9696.     right: 90px;
  9697. }
  9698. /* ==========================================================================
  9699.  COOKIE CONSENT BAR
  9700. ========================================================================== */
  9701. #complianceouter {
  9702.     background: var(--header-bg);
  9703.     color: var(--header-title);
  9704.     font-size: 14px;
  9705.     -ms-flex-align: center;
  9706.     align-items: center;
  9707.     width: 100%;
  9708. }
  9709. #compliance {
  9710.     margin: 0 auto;
  9711.     max-width: 1264px; 
  9712.     color: var(--header-title);
  9713.     -ms-flex-align: center;
  9714.     align-items: center;
  9715.     width: 100%;
  9716.     -ms-flex-direction: row;
  9717.     flex-direction: row;
  9718.     overflow: hidden;
  9719.     box-sizing: border-box;
  9720.     display: -ms-flexbox;
  9721.     display: flex;
  9722.     -ms-flex-wrap: nowrap;
  9723.     flex-wrap: nowrap;
  9724. }
  9725. #icon-compliance-outer {
  9726.     float: right;
  9727.     margin-left: .7em;
  9728. }
  9729. #icon-compliance {
  9730.     width: 20px;
  9731.     fill: var(--header-title);
  9732.     position: relative;
  9733.     top: 3px;
  9734. }
  9735. #complaince-message {
  9736.     display: block;
  9737.     -ms-flex: 1 1 auto;
  9738.     flex: 1 1 auto;
  9739.     max-width: 100%;
  9740.     margin-right: 1em;
  9741.     margin-left: .7em;
  9742.     line-height: 100%; 
  9743.     font-size: 14px;
  9744. }
  9745. @media only screen and (max-width:1000px) {
  9746.     #complaince-message {
  9747.         font-size: 13px;
  9748.     }
  9749. }
  9750. @media only screen and (max-width:800px) {
  9751.     #complaince-message {
  9752.         font-size: 12px;
  9753.     }
  9754. }
  9755. @media only screen and (max-width:600px) {
  9756.     #complaince-message {
  9757.         font-size: 11px;
  9758.     }
  9759. }
  9760. @media only screen and (max-width:400px) {
  9761.     #complaince-message {
  9762.         font-size: 10px;
  9763.     }
  9764. }
  9765.  
  9766. a#compliance-link {
  9767.     /* border: .5px solid; */
  9768.     border-radius: 2px;
  9769.     padding: 0 4px 1px 4px;
  9770.     margin: 0 0 0 6px;
  9771.     font-size: 80%;
  9772.     position: relative;
  9773.     top: -1px;
  9774. }
  9775. #complaince-button {
  9776.     float: right;
  9777.     background: var(--header-title);
  9778.     font-weight: 700;
  9779.     width: fit-content;
  9780.     margin: 0;
  9781.     padding: .8em 1.8em;
  9782.     height: 100%;
  9783.     display: -ms-flexbox;
  9784.     display: flex;
  9785.     -ms-flex-align: center;
  9786.     align-items: center;
  9787.     -ms-flex-line-pack: justify;
  9788.     align-content: space-between;
  9789.     -webkit-transition: 1s;
  9790.     transition: background color 1s;   
  9791. }
  9792.  
  9793. /* Icon Pop */
  9794. @-webkit-keyframes compliance-pop {
  9795.   50% {
  9796.     -webkit-transform: scale(1.05);
  9797.     transform: scale(1.05);
  9798.   }
  9799. }
  9800. @keyframes compliance-pop {
  9801.   50% {
  9802.     -webkit-transform: scale(1.05);
  9803.     transform: scale(1.05);
  9804.   }
  9805. }
  9806. #warning_bar,
  9807. #compliance {
  9808.   -webkit-transform: perspective(1px) translateZ(0);
  9809.   transform: perspective(1px) translateZ(0);
  9810.   position: relative;
  9811.   -webkit-transition-duration: 1s;
  9812.   transition-duration: 1s;
  9813.   overflow: hidden;
  9814. }
  9815. #warning_bar,
  9816. .compliance-animate {
  9817.   -webkit-animation-name: compliance-pop;
  9818.   animation-name: compliance-pop;
  9819.   -webkit-animation-duration: 1s;
  9820.   animation-duration: 1s;
  9821.   -webkit-animation-timing-function: linear;
  9822.   animation-timing-function: linear;
  9823.   -webkit-animation-iteration-count: 1;
  9824.   animation-iteration-count: 1;
  9825. }
  9826.  
  9827. /* ==========================================================================
  9828.  SELECT2
  9829. ========================================================================== */
  9830. .select2-container--default .select2-selection--single {
  9831.     height: 32px;
  9832.     position: relative;
  9833.     color: #424242;
  9834.     padding: 0 0 0 10px;
  9835.     background-color: #fff;
  9836.     background-image: url(../../osta/svg/chevron-down-thin.svg);
  9837.     background-position: right 6px center;
  9838.     background-repeat: no-repeat;
  9839.     background-size: 20px 20px;
  9840. }
  9841. .select2-container .select2-selection--single .select2-selection__rendered {
  9842.     padding-left: 0;
  9843.     padding-right: 0;
  9844. }
  9845. .select2-container--default .select2-selection--single .select2-selection__arrow b {
  9846.     display: none;
  9847. }
  9848. .select2-container {
  9849.     margin-right: 10px;
  9850. }
  9851. .rtl .select2-container {
  9852.     margin-left: 10px;
  9853.     margin-right: 0;
  9854. }
  9855. .select2.select2-container.select2-container--default {
  9856.     margin-right: 0;   
  9857. }
  9858. .tickets .select2.select2-container.select2-container--default,
  9859. .tickets .form_table .select2.select2-container.select2-container--default,
  9860. .tickets .form_table .select2-container--default .select2-selection--multiple {
  9861.     width: 320px !important;   
  9862. }
  9863. .profile-page .select2.select2-container.select2-container--default {
  9864.     width: 305px !important;
  9865. }
  9866. .select2-container--default .select2-selection--single .select2-selection__clear {
  9867.     padding-right: 30px;
  9868. }
  9869. .select2-container--default .select2-selection--multiple .select2-selection__rendered {
  9870.     padding: 0 8px;
  9871. }
  9872. .tickets-page .tickets .form_table .select2-container--default .select2-selection--multiple {
  9873.     height: 32px !important;
  9874. }
  9875. .select2-selection__arrow b {
  9876.     margin-top: 0 !important;  
  9877. }
  9878. .select2-search--dropdown .select2-search__field {
  9879.     width: calc(100% - 9px) !important; /* eg. Open Ticket > select User */
  9880. }
  9881. .form_table.fixed .select2-container {
  9882.     margin-right: 0;   
  9883. }
  9884. .form_table.fixed .rtl .select2-container {
  9885.     margin-right: 0;       
  9886.     margin-left: 0;
  9887. }
  9888. .form_table.fixed .select2-container .select2-selection--single .select2-selection__rendered {
  9889.     padding-right: 0;
  9890.     margin-right: 0;
  9891.     width: calc(100% - 8px) !important;
  9892. }
  9893. .select2-container--default .select2-results__option[aria-selected=true] {
  9894.     background-color: #dcdfe2;
  9895. }
  9896. .select2-container--default .select2-results__option--highlighted[aria-selected] {
  9897.     background-color: #08C;
  9898. }
  9899. .select2-selection.select2-selection--single {
  9900.     border: 1px solid #a1a6ad;
  9901. }
  9902. .client-required .select2-selection.select2-selection--single {
  9903.     border-right: 4px solid red;
  9904. }
  9905. #timezone-dropdown ~ .select2.select2-container.select2-container--default {
  9906.     width: 305px !important;
  9907. }
  9908. #select2-timezone-dropdown-container {
  9909.     padding: 2px 0;
  9910. }
  9911. #select2-datetime_format-sp-container {
  9912.     padding: 0;
  9913. }
  9914. #user-account #timezone-dropdown + .select2 + button {
  9915.     margin: 8px 0 0 0;
  9916. }
  9917. select#timezone-dropdown ~ button.action-button {
  9918.     margin: 0 0 0 20px;
  9919. }
  9920. .select2-results__options::-webkit-scrollbar {
  9921.   width: 16px;
  9922.   background-clip: padding-box;
  9923. }
  9924. .select2-results__options::-webkit-scrollbar-track {
  9925.   background-color: #F4F4F4;
  9926.   height: 8px;
  9927.   background-clip: padding-box;
  9928.   border-right: 10px solid rgba(0, 0, 0, 0);
  9929.   border-top: 10px solid rgba(0, 0, 0, 0);
  9930.   border-bottom: 10px solid rgba(0, 0, 0, 0);
  9931. }
  9932. .select2-results__options::-webkit-scrollbar-thumb {
  9933.     background-clip: padding-box;
  9934.     background-color: #C1C1C1;
  9935.     border-right: 10px solid rgba(0, 0, 0, 0);
  9936.     border-top: 20px solid rgba(0, 0, 0, 0);
  9937.     border-bottom: 20px solid rgba(0, 0, 0, 0);
  9938. }
  9939. .select2-results__options::-webkit-scrollbar-button {
  9940.   display: none;
  9941. }
  9942. #content.staff .select2-selection.select2-selection--single {
  9943.     min-width: 245px;
  9944. }
  9945. .settings-page #site-pages .select2-container {
  9946.     width: 220px !important;
  9947. }
  9948. select[name="default_dept_id"] ~ .select2 {
  9949.     width: 308px !important;
  9950. }
  9951. .select2.select2-container.select2-container--default ~ .select2.select2-container.select2-container--default {
  9952.     margin-top: 8px;
  9953. }
  9954. .emailsettings .form_table.settings_table .select2.select2-container {
  9955.     width: 400px !important;
  9956. }
  9957. .emailsettings .form_table.settings_table input[type=text] {
  9958.     width: 389px !important;
  9959. }
  9960. form[action="emailtest.php"] .select2.select2-container {
  9961.     width: 450px !important;
  9962. }
  9963. h2 .select2 {
  9964.     font-size: 14px !important;
  9965. }
  9966.  
  9967. /* ==========================================================================
  9968.  TABLE PADDING SLIDER
  9969. ========================================================================== */
  9970. .padding-slider-container {
  9971.     width: 200px;
  9972.     float: right;
  9973.     margin-right: 12px;
  9974. }
  9975. .padding-slider {
  9976.     -webkit-appearance: none;
  9977.     width: 200px;
  9978.     height: 5px;
  9979.     padding: 0;
  9980.     background: #d3d3d3;
  9981.     outline: none;
  9982.     opacity: 0.7;
  9983.     -webkit-transition: .2s;
  9984.     transition: opacity .2s;
  9985. }
  9986. .padding-slider:hover {
  9987.     opacity: 1;
  9988. }
  9989. .padding-slider::-webkit-slider-thumb {
  9990.     -webkit-appearance: none;
  9991.     appearance: none;
  9992.     width: 16px;
  9993.     height: 16px;
  9994.     background: #128dbe;
  9995.     cursor: pointer;
  9996.     border-radius: 100%;
  9997. }
  9998. .padding-slider.left::-webkit-slider-thumb {
  9999.   background-size: 14px !important;
  10000.   background-position: center center;
  10001.   background-repeat: no-repeat;
  10002. background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23ffffff' d='M8.59%2C16.58L13.17%2C12L8.59%2C7.41L10%2C6L16%2C12L10%2C18L8.59%2C16.58Z' /%3E %3C/svg%3E");
  10003. }
  10004. .padding-slider.right::-webkit-slider-thumb {
  10005.   background-size: 14px !important;
  10006.   background-position: center center;
  10007.   background-repeat: no-repeat;
  10008. background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23ffffff' d='M15.41%2C16.58L10.83%2C12L15.41%2C7.41L14%2C6L8%2C12L14%2C18L15.41%2C16.58Z' /%3E %3C/svg%3E");
  10009. }
  10010.  
  10011. .padding-slider::-moz-range-thumb {
  10012.     -webkit-appearance: none;
  10013.     appearance: none;
  10014.     width: 16px;
  10015.     height: 16px;
  10016.     background: #128dbe;
  10017.     cursor: pointer;
  10018.     border-radius: 100%;
  10019. }
  10020. .padding-slider.left::-moz-range-thumb {
  10021.   background-size: 14px !important;
  10022.   background-position: center center;
  10023.   background-repeat: no-repeat;
  10024. background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23ffffff' d='M8.59%2C16.58L13.17%2C12L8.59%2C7.41L10%2C6L16%2C12L10%2C18L8.59%2C16.58Z' /%3E %3C/svg%3E");
  10025. }
  10026. .padding-slider.right::-moz-range-thumb {
  10027.   background-size: 14px !important;
  10028.   background-position: center center;
  10029.   background-repeat: no-repeat;
  10030. background-image: url("data:image/svg+xml;charset=utf-8, %3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath fill='%23ffffff' d='M15.41%2C16.58L10.83%2C12L15.41%2C7.41L14%2C6L8%2C12L14%2C18L15.41%2C16.58Z' /%3E %3C/svg%3E");
  10031. }
  10032.  
  10033. #padding-slider {
  10034.     color: #ccc;
  10035.     display: none;
  10036. }
  10037. .checkbox-cell {
  10038.     padding-left: 14px !important;
  10039. }
  10040. .empty .padding-slider-container {
  10041.     display: none;
  10042. }
  10043.  
  10044. .rtl .padding-slider-container,
  10045. .rtl #resize-buttons-container {
  10046.     float: left;
  10047.     margin: 0 2px 0 20px;
  10048. }
  10049.  
  10050. /* ==========================================================================
  10051.  TICKET QUEUE FONT RESIZING (EXPERIMENTAL)
  10052. ========================================================================== */
  10053. /*
  10054. table.list.queue.tickets.font-reg a.preview {
  10055.     font-size: 11px;
  10056. }
  10057. table.list.queue.tickets.font-reg tbody td {
  10058.     font-size: 12px;
  10059. }
  10060. table.list.queue.tickets.font-reg a[style="display:inline"],
  10061. table.list.queue.tickets.font-reg table.list tbody td.osta_username {
  10062.     font-size: 14px;
  10063. }
  10064. table.list.queue.tickets.font-reg .date-text {
  10065.     top: 2px;
  10066. }  
  10067. table.list.queue.tickets.font-reg .checkbox-cell {
  10068.     padding: 18px 0;
  10069. }
  10070.  
  10071. table.list.queue.tickets.font-med a.preview {
  10072.     font-size: 12px;
  10073. }
  10074. table.list.queue.tickets.font-med tbody td {
  10075.     font-size: 13px;
  10076. }
  10077. table.list.queue.tickets.font-med a[style="display:inline"],
  10078. table.list.queue.tickets.font-med table.list tbody td.osta_username {
  10079.     font-size: 15px;
  10080. }
  10081. table.list.queue.tickets.font-med .date-text {
  10082.     top: 2px;
  10083. }  
  10084.  
  10085. table.list.queue.tickets.font-lrg a.preview {
  10086.     font-size: 12px;
  10087. }
  10088. table.list.queue.tickets.font-lrg tbody td {
  10089.     font-size: 14px;
  10090. }
  10091. table.list.queue.tickets.font-lrg a[style="display:inline"],
  10092. table.list.queue.tickets.font-lrg tbody td.osta_username {
  10093.     font-size: 16px;
  10094. }  
  10095. table.list.queue.tickets.font-lrg .date-text {
  10096.     width: 112px;
  10097. }
  10098. table.list.queue.tickets.font-lrg th.osta_lastupdated {
  10099.     width: 133px;
  10100. }
  10101. table.list.queue.tickets.font-lrg i.icon-comments-alt {
  10102.     transform: scale(1.2);
  10103. }
  10104. table.list.queue.tickets.font-lrg i.small.icon-paperclip.icon-flip-horizontal {
  10105.     transform: scale(1.2);
  10106.     top: 1px;
  10107. }
  10108. table.list.queue.tickets.font-lrg .osta_subject small.faded-more {
  10109.     font-size: 16px;
  10110. }
  10111.    
  10112. table.list.queue.tickets.font-x-lrg a.preview {
  10113.     font-size: 13px;
  10114. }
  10115. table.list.queue.tickets.font-x-lrg tbody td {
  10116.     font-size: 15px;
  10117. }
  10118. table.list.queue.tickets.font-x-lrg a[style="display:inline"],
  10119. table.list.queue.tickets.font-x-lrg tbody td.osta_username {
  10120.     font-size: 17px;
  10121. }  
  10122. table.list.queue.tickets.font-x-lrg .date-text {
  10123.     width: 124px;
  10124. }
  10125. table.list.queue.tickets.font-x-lrg i.icon-comments-alt {
  10126.     transform: scale(1.2);
  10127. }
  10128. table.list.queue.tickets.font-x-lrg i.small.icon-paperclip.icon-flip-horizontal {
  10129.     transform: scale(1.2);
  10130.     top: 1px;
  10131. }
  10132. table.list.queue.tickets.font-x-lrg .osta_subject small.faded-more {
  10133.     font-size: 16px;
  10134. }
  10135. */
  10136.  
  10137.  
  10138. /* ==========================================================================
  10139.  JFONTSIZE
  10140. ========================================================================== */
  10141. .resizable-text {
  10142.     background: #FFE9D2;
  10143.     font-family: 'Open Sans', sans-serif;
  10144.     padding: 20px 20px 0 20px;
  10145.     height: 30px;
  10146.     font-size: 16px;
  10147. }
  10148. .resizable-text.two {
  10149.     font-size: 14px;
  10150.     padding: 0 20px 20px 20px;  
  10151. }
  10152. #resize-buttons-container {
  10153.     float: right;
  10154.     font-family: 'Open Sans', sans-serif;
  10155.     font-size: 22px;
  10156.     font-weight: 500;
  10157.     margin: 0 21px 0 0;
  10158.     padding: 0;
  10159.     height: 21px;
  10160.     line-height: 21px;
  10161. }
  10162. #resize-buttons-container a {
  10163.     display: inline-block;
  10164.     text-align: center;
  10165.     /* border-bottom: 1px solid; */ /*useful to toggle on and off when positioning*/
  10166. }
  10167. .resize-buttons {
  10168.     background: #fff;
  10169.     width: 19px;
  10170.     color: #128dbe;
  10171.     padding: 0;
  10172.     vertical-align: bottom;
  10173.     position: relative;
  10174.     bottom: 0;
  10175. }
  10176. .resize-buttons a {
  10177.     color: #128dbe;
  10178. }
  10179. #resize-buttons-container a:hover {
  10180.     color: #0c4f69;
  10181. }
  10182. #text-down {
  10183.     font-size: 13px;
  10184.     line-height: 20px;
  10185. }
  10186. #text-reset {
  10187.     font-size: 15px;
  10188.     padding-right: 4px;
  10189.     line-height: 21px;
  10190. }
  10191. #text-up {
  10192.     font-size: 16px;
  10193.     line-height: 22px;
  10194. }
  10195.  
  10196.  
  10197.  
  10198.  
  10199. /* ==========================================================================
  10200.  MODAL: KEYBOARD SHORTCUTS HELP
  10201. ========================================================================== */
  10202. .fade {
  10203.     opacity: 0;
  10204.     -webkit-transition: opacity .15s linear;
  10205.     -o-transition: opacity .15s linear;
  10206.     transition: opacity .15s linear;
  10207. }
  10208. .fade.in {
  10209.     opacity: 1;
  10210. }
  10211. .hide {
  10212.     display: none!important
  10213. }
  10214.  
  10215. .show {
  10216.     display: block!important
  10217. }
  10218. .invisible {
  10219.     visibility: hidden
  10220. }
  10221. .modal .close {
  10222.     float: right;
  10223.     font-size: 21px;
  10224.     font-weight: 700;
  10225.     line-height: 1;
  10226.     color: #000;
  10227.     text-shadow: 0 1px 0 #fff;
  10228.     filter: alpha(opacity=20);
  10229.     opacity: .2;
  10230. }
  10231. button.close {
  10232.     -webkit-appearance: none;
  10233.     padding: 0;
  10234.     cursor: pointer;
  10235.     background: 0 0;
  10236.     border: 0;
  10237. }
  10238. .modal {
  10239.     position: fixed;
  10240.     top: 0;
  10241.     right: 0;
  10242.     bottom: 0;
  10243.     left: 0;
  10244.     z-index: 1040;
  10245.     display: none;
  10246.     overflow: hidden;
  10247.     -webkit-overflow-scrolling: touch;
  10248.     outline: 0;
  10249. }
  10250. .modal-open .modal {
  10251.     overflow-x: hidden;
  10252.     overflow-y: auto;
  10253. }
  10254. .modal-backdrop {
  10255.     position: absolute;
  10256.     top: 0;
  10257.     right: 0;
  10258.     left: 0;
  10259.     background-color: #000;
  10260.     opacity: .5 !important;
  10261. }
  10262. .modal-backdrop.in {
  10263.     filter: alpha(opacity=50);
  10264.     opacity: .5;
  10265. }
  10266. .modal-backdrop.fade {
  10267.     filter: alpha(opacity=0);
  10268.     opacity: 0;
  10269. }
  10270. .modal-dialog {
  10271.     position: relative;
  10272.     width: auto;
  10273.     margin: 10px;
  10274. }
  10275. @media screen and (min-width: 768px) {
  10276.     .modal-dialog {
  10277.         width: 600px;
  10278.         margin: 30px auto;
  10279.     }
  10280. }
  10281. .modal.in .modal-dialog {
  10282.     -webkit-transform: translate(0, 0);
  10283.     -ms-transform: translate(0, 0);
  10284.     -o-transform: translate(0, 0);
  10285.     transform: translate(0, 0);
  10286. }
  10287. .modal-content {
  10288.     width: 700px;
  10289.     margin: 100px auto 0;
  10290.     position: relative;
  10291.     -webkit-background-clip: padding-box;
  10292.     background-clip: padding-box;
  10293.     outline: 0;
  10294.     background: #FFF;
  10295.     border: 1px solid #AAA;
  10296.     border-radius: 5px;
  10297.     -webkit-box-shadow:  rgba(0,0,0,0.4) 0 10px 26px;
  10298.     box-shadow: rgba(0,0,0,0.4) 0 10px 26px;   
  10299. }
  10300. @media screen and (min-width: 768px) {
  10301.     .modal-content {
  10302.         -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  10303.         box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  10304.     }
  10305. }
  10306. .modal-header {
  10307.     padding: 15px 0 0 15px;
  10308. }
  10309. .modal-header h3 {
  10310.     font-weight: 400;
  10311.     font-size: 25px;
  10312.     text-align: left;
  10313.     padding: 2px 0 13px 0;
  10314. }
  10315. .modal-header .close {
  10316.     margin-top: -2px;
  10317. }
  10318. .modal-body {
  10319.     position: relative;
  10320.     padding: 15px;
  10321.     padding-top: 0 !important;
  10322.     border-top: .5px solid #d4d4d4;
  10323. }
  10324. .modal-body .label-default {
  10325.     background-color: #777;
  10326. }
  10327. td.keyb:first-child {
  10328.     width: 40px;
  10329. }
  10330. td.keyb2 {
  10331.     width: 40px;
  10332. }
  10333. .shift,
  10334. .key2 {
  10335.     display: inline;
  10336.     padding: .2em .7em .3em;
  10337.     font-size: 100%;
  10338.     line-height: 1;
  10339.     color: #4c5156;
  10340.     background: #fff;
  10341.     text-align: center;
  10342.     white-space: nowrap;
  10343.     vertical-align: baseline;
  10344.     border: 1px solid #4c5156;
  10345.     border-radius: .25em;
  10346. }
  10347. .key2 {
  10348.     width: 11px;
  10349.     display: inline-block;
  10350.     margin-top: 1px;
  10351.     padding: 7px 10px 5px 10px;
  10352. }
  10353. .plus-td {
  10354.     width: 20px !important;
  10355.     text-align: center !important;
  10356. }
  10357. .plus-sign {
  10358.     color: #4c5156;
  10359.     font-size: 20px;
  10360.     position: relative;
  10361.     top: 0;
  10362.     left: 0;
  10363.     font-weight: 100;  
  10364. }
  10365. .modal-body td {
  10366.     height: 40px;
  10367.     color: #4c5156;
  10368.     font-size: 13px;
  10369.     text-align: left;
  10370. }
  10371.  
  10372.  
  10373.  
  10374.  
  10375.  
  10376.  
  10377.  
  10378. /* ==========================================================================
  10379.  DARK MODE: EXPERIMENTAL
  10380. ========================================================================== */
  10381.  
  10382. /* Theme Options > Dark Mode */
  10383. .theme-page #dark-mode-message {
  10384.  
  10385. }
  10386. .dark-mode.theme-page #dark-mode-message {
  10387.     display: inline-block;
  10388.     border: 1px solid #393d44;
  10389.     background: #000000;
  10390.     color: #8b949e;
  10391. }
  10392. .theme-page #dark-mode-message {
  10393.     display: none; 
  10394.     width: calc(100% - 43px);
  10395.     border: 2px solid #a5b6d0;
  10396.     border-radius: 3px;
  10397.     background: #dcdfe2;
  10398.     color: #414957;
  10399.     margin: 0 0 30px 0;
  10400.     padding: 20px;
  10401. }
  10402. .dark-mode.theme-page #dark-mode-message a {
  10403.     color: #f0f6fc;
  10404. }
  10405. .theme-page #dark-mode .header {
  10406.     margin-top: 14px;
  10407. }
  10408. .theme-page #dark-mode-option .header:before {
  10409.     display: inline-block;
  10410.     width: 23px;
  10411.     height: 25px;
  10412.     background-size: 25px;
  10413.     background-repeat: no-repeat;
  10414.     position: relative;
  10415.     margin-right: 0px;
  10416.     top: 4px;
  10417.     content: ' ';
  10418.     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill='%23777777' d='M17.75%2C4.09L15.22%2C6.03L16.13%2C9.09L13.5%2C7.28L10.87%2C9.09L11.78%2C6.03L9.25%2C4.09L12.44%2C4L13.5%2C1L14.56%2C4L17.75%2C4.09M21.25%2C11L19.61%2C12.25L20.2%2C14.23L18.5%2C13.06L16.8%2C14.23L17.39%2C12.25L15.75%2C11L17.81%2C10.95L18.5%2C9L19.19%2C10.95L21.25%2C11M18.97%2C15.95C19.8%2C15.87 20.69%2C17.05 20.16%2C17.8C19.84%2C18.25 19.5%2C18.67 19.08%2C19.07C15.17%2C23 8.84%2C23 4.94%2C19.07C1.03%2C15.17 1.03%2C8.83 4.94%2C4.93C5.34%2C4.53 5.76%2C4.17 6.21%2C3.85C6.96%2C3.32 8.14%2C4.21 8.06%2C5.04C7.79%2C7.9 8.75%2C10.87 10.95%2C13.06C13.14%2C15.26 16.1%2C16.22 18.97%2C15.95M17.33%2C17.97C14.5%2C17.81 11.7%2C16.64 9.53%2C14.5C7.36%2C12.31 6.2%2C9.5 6.04%2C6.68C3.23%2C9.82 3.34%2C14.64 6.35%2C17.66C9.37%2C20.67 14.19%2C20.78 17.33%2C17.97Z' /%3E %3C/svg%3E");
  10419. }
  10420. .theme-page #dark-mode-option h2 {
  10421.     display: inline-block;
  10422. }
  10423. .theme-page #dark-mode-option .text {
  10424.     border: 2px solid #a5b6d0;
  10425.     border-radius: 3px;
  10426.     background: #dcdfe2;
  10427.     color: #414957;
  10428.     margin: 20px 17px 0;
  10429.     padding: 20px;
  10430. }
  10431. .dark-mode.theme-page #dark-mode-option {
  10432.     display: none;
  10433. }
  10434. .dark-mode.theme-page li.error {
  10435.     border-top: 1px solid #30363d !important;
  10436. }
  10437. .dark-mode input.switch:checked ~ label:before {
  10438.     background-color: #398532;
  10439. }
  10440.  
  10441. /* Color Theme Options*/
  10442.  
  10443. /* Logo Options */
  10444. .dark-mode.#background-solid-image.highlight,
  10445. .dark-mode.#background-solid-color.highlight,
  10446. .dark-mode.#default-logo.highlight,
  10447. .dark-mode.#custom-text.highlight,
  10448. .dark-mode.#custom-logo.highlight {
  10449.     border: 1px solid #30363d !important;
  10450. }
  10451.  
  10452. /* Custom Text and Links Options */
  10453.  
  10454. /* Background Image Options */
  10455. .dark-mode .backdrop .outer {
  10456.     display: inline-block;
  10457.     position: relative;
  10458.     background: #000000;
  10459.     border: .5px solid #273344;
  10460.     margin: 0 18px 22px 0;
  10461. }
  10462. .dark-mode .backdrop [type=radio]:checked + div {
  10463.     outline: 1px solid #727272;
  10464. }
  10465. .dark-mode input[type="file"] {
  10466.     color: #c9d1d9;
  10467.     background-color: #21262d;
  10468.     border-color: #f0f6fc1a;
  10469. }
  10470. .dark-mode #theme-header-options .container,
  10471. .dark-mode #logo-options .container,
  10472. .dark-mode td#custom-logo-column {
  10473.     border: 1px solid #393d44 !important;
  10474. }
  10475.  
  10476. /* Custom CSS */
  10477.  
  10478. /* Theme Information */
  10479.  
  10480.  
  10481. /* My Account Profile > Dark Mode */
  10482.  
  10483. #dark-mode-notes {
  10484.     border: 2px solid #a5b6d0;
  10485.     border-radius: 3px;
  10486.     background: #dcdfe2;
  10487.     color: #414957;
  10488.     margin: 0 10px;
  10489.     padding: 20px;
  10490. }
  10491. .dark-mode #dark-mode-notes {
  10492.     border: 2px solid #303846;
  10493.     background: #171b22;
  10494.     color: #606b7e;
  10495. }
  10496. #dark-mode-notes ul {
  10497.     line-height: 34px;
  10498.     padding: 0 0 0 20px;
  10499. }
  10500. #dark-mode-notes ul li {
  10501.     list-style-type: none;
  10502.     margin: 0 0 0 0 !important;
  10503. }
  10504. #dark-mode-notes ul li:before {
  10505.     content: '•';
  10506.     margin: 0 4px 0 0;
  10507. }
  10508. #osta-toggle.dark-mode-toggle {
  10509.     float: left;
  10510.     margin: 20px;
  10511. }
  10512. a[href="#dark-mode-tab"]:before { /*Clean tab with no icon*/
  10513.     display: inline-block;
  10514.     width: 20px;
  10515.     height: 20px;
  10516.     background-size: 18px;
  10517.     background-repeat: no-repeat;
  10518.     position: relative;
  10519.     margin-right: 6px;
  10520.     top: 6px;
  10521.     content: ' ';
  10522. background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill='%23128dbe' d='M17.75%2C4.09L15.22%2C6.03L16.13%2C9.09L13.5%2C7.28L10.87%2C9.09L11.78%2C6.03L9.25%2C4.09L12.44%2C4L13.5%2C1L14.56%2C4L17.75%2C4.09M21.25%2C11L19.61%2C12.25L20.2%2C14.23L18.5%2C13.06L16.8%2C14.23L17.39%2C12.25L15.75%2C11L17.81%2C10.95L18.5%2C9L19.19%2C10.95L21.25%2C11M18.97%2C15.95C19.8%2C15.87 20.69%2C17.05 20.16%2C17.8C19.84%2C18.25 19.5%2C18.67 19.08%2C19.07C15.17%2C23 8.84%2C23 4.94%2C19.07C1.03%2C15.17 1.03%2C8.83 4.94%2C4.93C5.34%2C4.53 5.76%2C4.17 6.21%2C3.85C6.96%2C3.32 8.14%2C4.21 8.06%2C5.04C7.79%2C7.9 8.75%2C10.87 10.95%2C13.06C13.14%2C15.26 16.1%2C16.22 18.97%2C15.95M17.33%2C17.97C14.5%2C17.81 11.7%2C16.64 9.53%2C14.5C7.36%2C12.31 6.2%2C9.5 6.04%2C6.68C3.23%2C9.82 3.34%2C14.64 6.35%2C17.66C9.37%2C20.67 14.19%2C20.78 17.33%2C17.97Z' /%3E %3C/svg%3E");
  10523. }
  10524. #dark-mode-tab th:before {
  10525.     display: inline-block;
  10526.     width: 19px;
  10527.     height: 19px;
  10528.     background-size: 20px;
  10529.     background-repeat: no-repeat;
  10530.     position: relative;
  10531.     margin-right: -2px;
  10532.     top: 2px;
  10533.     content: ' ';
  10534.     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E %3Cpath fill='%238C949F' d='M17.75%2C4.09L15.22%2C6.03L16.13%2C9.09L13.5%2C7.28L10.87%2C9.09L11.78%2C6.03L9.25%2C4.09L12.44%2C4L13.5%2C1L14.56%2C4L17.75%2C4.09M21.25%2C11L19.61%2C12.25L20.2%2C14.23L18.5%2C13.06L16.8%2C14.23L17.39%2C12.25L15.75%2C11L17.81%2C10.95L18.5%2C9L19.19%2C10.95L21.25%2C11M18.97%2C15.95C19.8%2C15.87 20.69%2C17.05 20.16%2C17.8C19.84%2C18.25 19.5%2C18.67 19.08%2C19.07C15.17%2C23 8.84%2C23 4.94%2C19.07C1.03%2C15.17 1.03%2C8.83 4.94%2C4.93C5.34%2C4.53 5.76%2C4.17 6.21%2C3.85C6.96%2C3.32 8.14%2C4.21 8.06%2C5.04C7.79%2C7.9 8.75%2C10.87 10.95%2C13.06C13.14%2C15.26 16.1%2C16.22 18.97%2C15.95M17.33%2C17.97C14.5%2C17.81 11.7%2C16.64 9.53%2C14.5C7.36%2C12.31 6.2%2C9.5 6.04%2C6.68C3.23%2C9.82 3.34%2C14.64 6.35%2C17.66C9.37%2C20.67 14.19%2C20.78 17.33%2C17.97Z' /%3E %3C/svg%3E");
  10535. }
  10536.  
  10537.  
  10538.  
  10539. /* ==========================================================================
  10540.  SUPRESS BROSWER OUTLINE
  10541. ========================================================================== */
  10542.  
  10543. .select2-container--default .select2-selection--single {
  10544.     outline: 0;
  10545. }
  10546. input[type=text], input[type=password], textarea, input {
  10547.     outline: none!important;   
  10548. }
  10549. .select2-container--default .select2-selection--single {
  10550.     outline: none !important;
  10551. }
  10552.  
  10553.  
  10554.  
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!