/** * Custom styles */ /** * Layout */ #app { min-height: 100%; } .footer { text-align: center; font-size: 12px; /*position: absolute; bottom: 0;*/ color: #b4c0ca; margin-bottom: 20px; margin-top: 20px; width: 100%; } .content { margin-top: 20px; /*padding-bottom: 60px;*/ min-height: 400px; } .layout-2col { display: flex; background-color: #fff; align-items: stretch; -ms-flex: 1; flex: 1; -webkit-flex: 1; justify-content: space-between; min-height: calc((100vh) - (54px)); width: 100%; } .sidebar-2col { width: 250px; background-color: #f1f3f5; } .content-2col { background-color: #fff; box-shadow: -1px 0 0 #d6dde3, 1px 0 0 #d6dde3, 0 1px 0 #d6dde3; box-sizing: border-box; flex: 1; flex-basis: auto; -ms-flex: 1; -webkit-flex: 1; max-width: 100%; min-width: 0; position: relative; z-index: 2; overflow: hidden; } .sidebar-title { color: #2a3b47; font-size: 20px; font-weight: 400; line-height: 24.4px; margin: 16px 20px; } .sidebar-title .dropdown-toggle { cursor: pointer; } .sidebar-title-extra-value { display: none; } .sidebar-menu { margin-left: 0; margin-bottom: 18px; list-style: none; padding: 0; } .sidebar-menu > li { margin: 0 0 2px 0; position: relative; line-height: 18px; display: list-item; text-align: -webkit-match-parent; } .sidebar-menu > li:hover { background-color: #e3e8eb; } .sidebar-menu > li > a { color: #4f5d6b; display: block; font-size: 14px; line-height: 16px; padding: 9px 20px 9px 50px; position: relative; word-wrap: break-word; } .sidebar-menu > li > a:hover { text-decoration: none; color: #394956; } .sidebar-menu > li > a:hover .glyphicon { text-decoration: none; color: #72808e; } .sidebar-menu .active a, .sidebar-menu .active .glyphicon { color: #3197d6 !important; font-weight: 700; } .sidebar-menu .glyphicon { color: #b5c1cc; font-size: 16px; left: 20px; margin-right: 10px; position: absolute; top: 8px; } .sidebar-menu-toggle { background: #e9edef; border: 1px solid #d3dae0; border-radius: 3px; display: none; height: 36px; padding: 0 9px; position: relative; margin-left: 12px; margin-right: 12px; top: 7px; width: 36px; cursor: pointer; float: left; } .sidebar-menu-toggle:hover { background-color: #e6e5e5; } .sidebar-menu-toggle .icon-bar { background-color: #72808e; display: block; height: 2px; border-radius: 1px; margin-top: 3px; position: relative; top: -2px; } .sidebar-menu-toggle.active { background: #3197d6; border-color: #3197d6; } .sidebar-menu-toggle.active .icon-bar { background-color: #fff; } .sidebar-menu a.no-active { color: #93a1af; } .sidebar-buttons .btn { background-color: #e9edef; color: #687b8d; border-color: #d3dae0; border-radius: 0; color: #93a1af; font-size: 16px; /*padding: 5px 12px; height: 26px;*/ } .sidebar-buttons .btn:hover, .sidebar-buttons .btn-group.open .btn { box-shadow: none; color: #687b8d; background-color: #dde3e7; } .sidebar-buttons .btn-group .btn { border-right: none; } .sidebar-buttons .btn i { position: relative; top: 3px; } .sidebar-buttons .dropdown-menu i { margin-right: 3px; } @media (max-width:767px) { .layout-2col { display: block; align-items: stretch; -ms-flex: 0; flex: 0; -webkit-flex: 0; width: 100%; } .content-2col { flex: 0; -ms-flex: 0; -webkit-flex: 0; box-shadow: none; } .sidebar-2col { border-bottom: 1px solid #cad3db; width: 100%; position: relative; height: 51px; } .sidebar-menu { background-color: #f1f3f5; border-radius: 0 4px 4px 0; box-shadow: 0 2px 6px rgba(179,190,195,.8); left: -270px; overflow-y: auto; padding-top: 15px; position: absolute; max-height: 90vh; max-width: 250px; min-width: 225px; top: 106%; transition: transform .2s ease-in-out; z-index: 110; } .sidebar-menu.active { transform: translate(270px,0); } .sidebar-menu-toggle { display: block; } .sidebar-title { padding: 13px 0 0 0; margin: 0 20px 13px 50px; } .sidebar-title-extra { padding-top: 5px; margin-right: 120px; white-space: nowrap; overflow: hidden; } .sidebar-title-extra-value { font-size: 14px; font-weight: bold; } .sidebar-title-real { display: block; font-size: 13.4px; line-height: 14.4px; color: #4f5d6b; overflow: hidden!important; text-overflow: ellipsis!important; white-space: nowrap!important; } .sidebar-title-extra-value { display: block; } .sidebar-buttons { position: absolute; top: 10px; right: 11px; width: 50px; } .user-is-admin .sidebar-buttons { width: 100px; } .sidebar-buttons .dropdown-menu { right: 0; } } /** * Typography */ h1, h2, h3, h4, h5, h6 { color: #2a3b47; } /** * Navbar */ a.navbar-brand.active img, a.navbar-brand:hover img { -webkit-filter: brightness(2); filter: brightness(2); } .dropdown-menu .dropdown-header { font-size: 14px; } .navbar-nav .dropdown-toggle-icon { font-size: 16px; } .navbar-nav .dropdown-toggle:hover { color: #fff; } .navbar-nav .dropdown-toggle .glyphicon { top: 3px; } .navbar-default .navbar-toggle .icon-bar, .navbar-default .navbar-toggle.collapsed:hover .icon-bar { background-color: #fff; } .navbar-default .navbar-toggle.collapsed .icon-bar { background-color: #83b8db; } .navbar-default .navbar-toggle, .navbar-default .navbar-toggle.collapsed:hover, .navbar-default .navbar-toggle:hover { border-color: #fff; } .navbar-default .navbar-toggle.collapsed { border-color: #83b8db; } .dropdown-menu>li>a { padding-top: 7px; padding-bottom: 7px; } .nav-user { font-size: 14px; } @media (max-width:767px) { .navbar-collapse { background-color:#e9edef; } .navbar-default .navbar-nav>li>a{ color:#777; } .navbar-nav .dropdown-toggle:hover, .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover { color: #000 !important; } } /** * Forms */ label.disabled { color: #93a1af; } label.checkbox, label.radio { cursor: pointer; } select.form-control { height: 28px; line-height: 28px; } .input-sized { width: 270px; } .input-sized2 { width: 387px; } .control-label { font-size: 13.4px; } .controls>.checkbox:first-child, .controls>.radio:first-child { padding-top: 5px; } .checkbox.inline, .radio.inline { display: inline-block; margin-bottom: 0; padding-top: 5px; vertical-align: middle; font-size: 13.4px; } .checkbox, .radio { min-height: 18px; padding-left: 22px; padding-right: 7px; position: relative; } .input-group { padding-top: 3px; } .input-group-btn .btn { height: 28px; } /** * Cards */ .card { background: #fff; border: 1px solid #c1cbd4; border-radius: 3px; box-sizing: border-box; display: block; margin: 0 18px 18px 0; margin: 0 18px 18px 0; padding: 18px; width: 250px; height: 90px; float: left; } a.card:active, a.card:focus, a.card:hover { text-decoration: none; } a h4 { color: #2a3b47; } .card > h4 { font-size: 18px; font-weight: 400; margin: 2px 0 4px 66px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card > p { color: #93a1af; font-size: 14px; margin: 0 0 0 66px; } .card > img { border: 1px solid #fff; border-radius: 4px; display: block; float: left; max-height: 50px; max-width: 50px; } .card-avatar { border-radius: 4px; float: left; line-height: 11px; text-align: center; } .card-avatar:before { background: #c1cbd4; color: #fff; content: attr(data-initial); border-radius: 4px; display: inline-block; font-size: 18px; font-style: normal; font-weight: 300; height: 50px; line-height: 50px; overflow: hidden; position: relative; text-transform: uppercase; width: 50px; } .card.no-img h4, .card.no-img p { margin-left: 0; } .card-active { border-top: 4px solid #5cb85c; } .card-inactive { border-top: 4px solid #93a1af; } .dash-cards { box-sizing:border-box; display:flex; flex-wrap:wrap; } .dash-card { float: left; position: relative; background: #fff; border: 1px solid #c1cbd4; border-radius: 4px; border-top: 4px solid #5cb85c; box-shadow: 0 1px 7px 0 rgba(0,0,0,.08); box-sizing: border-box; min-height: 295px; margin: 0 20px 20px 0; width: 235px; } .dash-card-content { padding-bottom: 48px; padding-top: 20px; } .dash-card-content h3 a, .dash-card-content h3 a:hover, .dash-card-content h3 a:focus { color: #194c6e; } .dash-card-footer { border-radius: 0 0 4px 4px; bottom: 0; left: 0; padding: 10px; position: absolute; right: 0; text-align: right; } .dash-card h3 { padding-left: 20px; padding-right: 20px; margin-bottom: 8px; margin-top: 0; } .dash-card a.dash-card-list-item, .dash-card a.dash-card-list-item:hover, .dash-card a.dash-card-list-item:focus { color: #2a3b47; } .dash-card a.dash-card-list-item:hover { text-decoration: underline; } .dash-card-link { padding-left: 20px; padding-right: 20px; margin-bottom: 16px; } .dash-card-list-item { font-size: 14px; text-decoration: none!important; padding-bottom: 8px; padding-top: 8px; padding-left: 20px; padding-right: 20px; margin: 0; display: block; } .dash-card-list-item:hover { background-color: #f1f3f5; } .dash-card-list-item span { display: block; float: right; } .dash-card-inactive-content { display: none; padding: 8px 20px; } .dash-card-inactive-content .help-block { font-size: 14px; } .dash-card-inactive-content .btn-link { padding-left: 0; } .dash-card-inactive .dash-card-inactive-content { display: block; } .dash-card-inactive .dash-card-list { display: none; } .dash-card.dash-card-inactive { border-top-color: #93a1af; } .dash-card-item-empty span { display: none; } .dash-card a.dash-card-item-empty, .dash-card a.dash-card-item-empty:hover, .dash-card a.dash-card-item-empty:focus { color: #93a1af; } .dash-card-footer > a { color: #c1cbd4; display: inline-block; font-size: 16px; margin: 0 6px; float: right; } .dash-card-footer > a:hover { color: #677f95; text-decoration: none; } @media (max-width:582px) { .card, .dash-card { width: 100%; } } /** * Editor */ .note-editor.note-frame { border-color: #d6dde3 !important; } .note-editor .btn-default { color: #86929e; background-color: #f9fafa; border-color: #f9fafa; } .note-editor .btn-default.active, .note-editor .btn-default:hover { background-color: #e6e6e6; border-color: #e6e6e6; } /** * Conversations table */ .tickets .caret { display: none; } /** * General */ .banner { text-align: center; margin-top: 50px; margin-bottom: 50px; } .margin-top { margin-top: 20px !important; } .margin-top-25 { margin-top: 25px !important; } .margin-top-40 { margin-top: 40px !important; } .margin-left { margin-left: 20px !important; } .margin-bottom { margin-bottom: 20px !important; } .margin-0 { margin: 0 !important; } .margin-top-0 { margin-top: 0 !important; } .margin-bottom-0 { margin-bottom: 0 !important; } .padding-top-0 { padding-top: 0 !important; } .heading { color: #253540; font-size: 20px; font-weight: 400; } .section-heading { border-bottom: 1px solid #d6dde3; padding: 12px 18px; color: #253540; font-size: 16px; font-weight: 400; line-height: 30px; } .section-heading-noborder { padding: 12px 18px; color: #253540; font-size: 16px; font-weight: 400; line-height: 30px; } .flexy { display: flex; } .flexy-container { box-sizing: border-box; align-items: center; display: flex; justify-content: space-between; } .flexy-item { max-width: 100%; min-width: 0; box-sizing: border-box; } .flexy-block { max-width: 100%; min-width: 0; flex: 1; } .is-error { color: #cc1f19 !important; } .icon-info { color: #a5b2bd; cursor: help; display: inline-block; font-size: 15px; margin-left: 7px; float: left; top: 7px; } .help-icon { color: #a5b2bd; cursor: pointer; display: inline-block; font-size: 15px; top: 3px; } a.help-icon:hover { color: #a5b2bd; text-decoration: none; } .popover { color:#4f5d6b; font-size:13.4px } .help-block { color: #93a1af; display: block; font-size: 13.4px; margin: 4px 0 9px; } .help-block a { color: #93a1af; } .help-block a:hover { color: #23527c; } .text-help { color: #93a1af; } .help-link, .help-link:hover, .help-link:focus { color: #93a1af!important; } .help-link:hover { text-decoration: underline; } .wizard-header { padding: 40px 50px 0; text-align: center; } .wizard-header h1 { font-size: 24px; margin: 12px 0 10px; color: #2a3b47; } .wizard-header p { color: #93a1af; font-size: 15px; margin: 0; } .wizard-body { padding: 10px 50px 0; } .wizard-footer { border-radius: 0 0 4px 4px; padding: 0 50px 40px; text-align: center; } #permissions-fields .control-group { display: inline-block; vertical-align: top; width: 200px; text-overflow: ellipsis; } #permissions-fields .control-label { margin-top: 0; margin-bottom: 0; } #permissions-fields .control-label { text-align: left; } .control-padded { padding-top: 4px; } .nav-tabs-main { padding-left: 18px; } .accordion .panel-title > a { display: block; text-decoration: none; color: #2a3b47; font-size: 16px; font-weight: normal; padding: 10px 15px; } .accordion .panel-title > a .caret { float: right; top: 7px; right: 2px; position: relative; border-top-color: #a5b2bd; } .accordion .panel-title > a .label { padding-bottom: 1px; position: relative; padding-left: 5px; top: -2px; font-style: normal; } .accordion .panel-default > .panel-heading { background-color: #fff; padding: 0; } .accordion .panel-default > .panel-heading:hover { background-color: #f1f3f5; } .accordion-status { margin-left: 4px; } .form-divider { border: 0; border-top: 1px solid #eee; margin-top: 10px; margin-bottom: 10px; } .empty-content { box-shadow: none; margin: 12em auto 0; text-align: center; text-align: center; } .empty-content i { font-size: 57px; color: #a5b2bd; } .empty-content p { color: #a5b2bd; font-size: 16px; } .multi-item { display: flex; flex: 1; flex-basis: auto; -ms-flex: 1; -webkit-flex: 1; margin-bottom: 5px; } .multi-remove, .multi-remove:focus { color: #c1cbd4; font-size: 18px; position: relative; top: 2px; margin-left: 5px; } .multi-remove:hover { color: #8899aa; text-decoration: none; } .customer-photo-container { margin: 20px auto 0 auto; max-width: 86px; position: relative; } .customer-photo { border:3px solid #fff; border-radius:3px; box-shadow:0 1px 1px rgba(0,0,0,.2); display:block; max-height:86px; max-width:86px; min-height:43px; } .customer-snippet h3 { text-align: center; word-wrap: break-word; color: #253540; font-size: 1.6em; font-weight: 400; line-height: 1.2em; margin: 0 0 4px 0; } .customer-data { padding: 0 17px; margin-top: 24px; margin-bottom: 24px; } .customer-contacts { margin: 0; padding: 0; text-align: center; } .customer-contacts li, .customer-contacts li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; color: #72808e; line-height: 16px; } .customer-contacts li a:hover { text-decoration: none; color: #1f5e89; } .customer-contacts li i { color: #b5c1cc; font-size: 14px; margin-right: 6px; vertical-align: top; display: inline-block; } .customer-divider { display: block; text-align: center; color: #93a1af; font-size: 1.5em; margin: 12px 0 18px; line-height: 6px; letter-spacing: 3px; } .text-truncate { overflow: hidden!important; text-overflow: ellipsis!important; white-space: nowrap!important; } .text-wrap-break { word-wrap: break-word!important; } .text-charcoal { color: #2a3b47!important; } .table.table-conversations { margin: 0; table-layout: fixed; width: 100%; } .table-conversations .conv-fader { background: linear-gradient(to right,rgba(255,255,255,0),#fff); position: absolute; width: 18px; bottom: 1px; right: 0; z-index: 2; height: 100%; } .table-conversations .conv-fader::after { content: ""; position: absolute; width: 18px; bottom: 0; height: 100%; } .table.table-conversations th { padding: 4px 13px 1px 13px; white-space: nowrap; border-bottom: 1px solid #e3e8eb; } .table.table-conversations th.conv-customer { padding-left: 0; } .table-conversations .conv-cb { padding: 4px 0; text-align: center; vertical-align: middle; } .table-conversations td input { margin: 0; } .table-conversations th a, .table-conversations th a:hover, .table-conversations th a:focus, .table-conversations th span { color: #7a8da0; text-decoration: none; cursor: default; line-height: 26px; display: block; font-weight: normal; } .table.table-conversations tbody td { line-height: 1em; padding: 0; vertical-align: middle; border-bottom: 1px solid #e3e8eb; } .table-conversations td a { color: #2a3b47; display: block; font-size: 14px; padding: 14px; } .table-conversations td a:hover, .table-conversations td a:focus { text-decoration: none; } .table-conversations .conv-active td { font-weight: bold; line-height: 1.2em; } .table-conversations td.conv-customer a { line-height: 1.2em; padding-left: 0; word-wrap: break-word; } table.table-conversations td.conv-subject { overflow: hidden; white-space: nowrap; vertical-align: top; padding-bottom: 6px; } table.table-conversations td.conv-attachment { color: #93a1af; vertical-align: top; padding: 7px 0 0 0; text-align: center; } .table-conversations td.conv-attachment i { top: 4px; font-size: 12px; } .table-conversations td.conv-subject a { overflow: hidden; padding: 8.4px 4px 7px 4px; position: relative; white-space: nowrap; } .table-conversations td p { color: #2a3b47; font-size: 13.4px; } .table-conversations td .conv-preview { color: #93a1af; font-weight: normal; } .table-conversations td.conv-subject p { line-height: 1.5em; margin: 0; } .table-conversations .conv-current { width: 2px; } .table-conversations .conv-cb { width: 40px; } .table-conversations .conv-customer { width: 150px; } .table-conversations .conv-attachment { width: 20px; } .table-conversations .conv-thread-count { width: 42px; } .table-conversations .conv-thread-count span { background: #f1f3f5; border: 1px solid #d6dde3; color: #a5b2bd; font-size: 11px; font-weight: 400; padding: .1em .4em; border-radius: 4px; } .table-conversations .conv-number { width: 86px; } .table-conversations .conv-date { width: 138px; } .table.table-conversations tfoot td { border: 0; color: #7a8da0; font-size: 13px; height: 28px; padding: 0 17px; vertical-align: middle; } .table-conversations tfoot strong { color: #676d7a; } .table-pager { float: right; } .table-pager a.pager-nav { display: inline-block; color: #a5b2bd; padding: 4px 0; width: 25px; line-height: 24px; font-size: 16px; } .conv-subject-number { display: none; } @media (max-width:1000px) { /** * Make conversations table responsive */ .table-conversations { display: block; } .table-conversations thead { border: none; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .table.table-conversations td, .table.table-conversations tr, .table.table-conversations tbody, .table.table-conversations tfoot { display: block; width: 100%; border: 0; } .table.table-conversations tbody td { border: 0; } .table.table-conversations tbody tr { position: relative; height: 80px; border-bottom: 1px solid #e3e8eb; } .conv-cb { width: 27px !important; float: left; padding: 11px 0 !important; } .conv-subject { position: absolute !important; top: 24px; padding-left: 25px!important; padding-right: 20px!important; } .table-conversations .conv-fader { width: 80px; } .conv-customer { position: absolute; top: 0; padding-left: 28px!important; } .conv-customer a, .conv-date a { padding: 11px 5px 0 0 !important; line-height: 1.2em; } .conv-date a { padding-top: 13px!important; } .conv-date a { font-size: 12px!important; } .conv-subject-number { display: inline; } .conv-number { display: none!important; } .conv-attachment { position: absolute; left: 7; top: 24px; text-align: center; width: 25px!important; } .conv-date { width: 50%; position: absolute; top: 0; right: 0; text-align: right; } .conv-thread-count { position: absolute; right: 0; top: 30px; z-index: 999; text-align: right; } .conv-thread-count a { padding-right: 5px!important; } .table.table-conversations tfoot tr { display: block; position: relative; height: 32px; } .conv-totals { line-height: 31px!important; } .conv-totals { position: absolute; left: 0; text-align: left; } .conv-nav { position: absolute; right: 0; } }