/** * Custom styles */ /** * Layout */ body.user-is-guest { background-color: #f8f9f9; } #app { min-height: 100%; overflow: hidden; } .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: 260px; /*background-color: #f4f5f5;*/ background-color: #fff; padding-right: 12px; } .content-2col { background-color: #fff; /*-webkit-box-shadow: -1px 0 0 #d6dde3, 1px 0 0 #d6dde3, 0 1px 0 #d6dde3; box-shadow: -1px 0 0 #d6dde3, 1px 0 0 #d6dde3, 0 1px 0 #d6dde3;*/ /*-webkit-box-shadow: -10px 0 0 rgba(0,0,0,.2), 10px 0 0 rgba(0,0,0,.2), 0 10px 0 rgba(0,0,0,.2); box-shadow: -10px 0 0 rgba(0,0,0,.2), 10px 0 0 rgba(0,0,0,.2), 0 10px 0 rgba(0,0,0,.2); border-right:1px solid #dedede; border-bottom:1px solid #dedede; border-left:1px solid #dedede;*/ -webkit-box-shadow:0 0 10px rgba(0,0,0,.2); box-shadow:0 0 10px rgba(0,0,0,.2); 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 h3 { margin: 0; } .sidebar-menu > li { /*margin: 0 0 2px 0;*/ position: relative; line-height: 18px; display: list-item; text-align: -webkit-match-parent; border-radius: 0 17px 17px 0; } .sidebar-menu > li.no-link { padding: 9px 20px 9px 20px; } .sidebar-menu > li:hover { background-color: #f1f3f5; } .sidebar-menu > li.no-link:hover { background-color: transparent; } .sidebar-menu > li > a { color: #4f5d6b; display: block; font-size: 14px; line-height: 16px; padding: 11px 20px 9px 50px; position: relative; word-wrap: break-word; border-radius: 0 17px 17px 0; } .sidebar-menu > li.menu-link > a { color: #337ab7; } .sidebar-menu-noicons > li > a { padding: 9px 20px 9px 20px; } .sidebar-menu > li.menu-padded > a { padding-left: 30px; } .sidebar-menu > li > a:hover, .sidebar-menu > li > a:focus { text-decoration: none; color: #394956; } .sidebar-menu > li.menu-link > a:hover, .sidebar-menu > li.menu-link > a:focus { color: #23527c; } .sidebar-menu > li > a:hover .glyphicon { text-decoration: none; color: #72808e; } .sidebar-menu .active a, .sidebar-menu .active .glyphicon { color: #005a9e !important; font-weight: 700; background-color: #deecf9; } .sidebar-menu .glyphicon { color: #b5c1cc; font-size: 16px; left: 20px; margin-right: 10px; position: absolute; top: 10px; z-index: 9; } .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 { padding-left: 15px; padding-right: 5px; } .sidebar-buttons .btn { font-size: 16px; } .sidebar-buttons .btn-group.open .btn.dropdown-toggle { -webkit-box-shadow: none; box-shadow: none; } .sidebar-buttons .btn-group .btn { border-right: none; } .sidebar-buttons .btn i { position: relative; top: 3px; } .sidebar-buttons .dropdown-menu i { margin-right: 3px; } .sidebar-buttons .btn-group a.btn { /*background-color: #e0e0e0;*/ /*border-right: 1px solid #dbdbdb;*/ border-radius: 14px 0 0 14px; } .sidebar-buttons > a.btn { /*width: 154px;*/ /*margin-left: 0!important;*/ border-radius: 0 14px 14px 0; } @media (max-width:991px) { .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; -webkit-box-shadow: none; box-shadow: none; } .sidebar-2col { border-bottom: 1px solid #cad3db; width: 100%; position: relative; height: 51px; } .sidebar-no-height .sidebar-2col { height: auto; } .sidebar-menu { background-color: #f4f5f5; border-radius: 0 4px 4px 0; -webkit-box-shadow: 0 2px 6px rgba(179,190,195,.8); 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 > li > a { border-radius: 0; } .sidebar-menu-toggle { display: block; } .sidebar-title { padding: 13px 0 0 0; margin: 0 20px 13px 50px; white-space: nowrap; } .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; padding: 0; } .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-default .navbar-nav > li > a.dropdown-toggle-icon { font-size: 18px; } .navbar-default .navbar-nav > li > a.dropdown-toggle-account { font-size: 17px; padding-right: 7px; } .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: #fff; } .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; } .form-nav-search { padding: 1px 11px 4px; width: 250px; } /*.navbar-nav > li > .dropdown-menu { margin-top: -10px; border-radius: 3px; }*/ /*.navbar-nav.navbar-right > li > .dropdown-menu { margin-top: -8px; }*/ @media (min-width: 768px) { .navbar-nav > li > a.dropdown-toggle-icon { padding-top: 14px; padding-bottom: 14px; } /*.navbar-nav.navbar-right { position: relative; top: 1px; }*/ } @media (max-width:767px) { .navbar-collapse { background-color:#fff; } .navbar-default .navbar-nav > li > a { color: #4f5d6b; } } /** * Forms */ label.disabled { color: #93a1af; } label.checkbox, label.radio { cursor: pointer; } select.form-control { height: 28px; line-height: 28px; } .input-sized-xs { width: 87px; } .input-sized-sm { width: 187px; } .input-sized { width: 270px; } .input-sized-lg { width: 320px; } .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; } .btn-sidebar { margin: 8px 0 0 20px; } .btn-grey { color: #fff; /*background-color: #87939f; border-color: #727f8b;*/ background-color: #6b6b6b; border-color: #585858; } .btn-grey:focus, .btn-grey:hover { color: #fff; /*background-color: #64717b; border-color: #4f5d69;*/ background-color: #444444; border-color: #292929; } .btn-lightgrey { color: #fff; /*background-color: #a5b2bd; border-color: #8796a1;*/ background-color: #8b98a6; border-color: #69737d; } .btn-lightgrey:focus, .btn-lightgrey:hover { color: #fff; /*background-color: #72808e; border-color: #72808e;*/ background-color: #747f8a; border-color: #636c75; } .btn-success.btn-light { background-color: #6ac27b; } .btn-success.btn-light:hover { background-color: #51a862; } .btn-warning.btn-light { background-color: #f2b661; } .btn-warning.btn-light:hover { background-color: #ec971f; } .btn-danger.btn-light { background-color: #de6864; } .btn-danger.btn-light:hover { background-color: #c9302c; } .has-error.help-block { color: #a94442; } .has-error .form-control[data-parsley-exclude="true"] { border-color: #ccc; } .input-md { height: 38px; /*padding: 10px 16px;*/ /*font-size: 18px;*/ line-height: 18px; /*border-radius: 3px;*/ } .btn .glyphicon { top: 2px; } select.input-lg { height: 38px; line-height: 38px; } textarea.input-md, select[multiple].input-md { height: auto; } .btn-group-xs .btn-default { color: #72808e; } .btn-group-xs .btn-default:hover { color: #4f5d6b; } .btn-xs, .btn-group-xs > .btn { padding: 1px 7px; } .form-help { color: #93a1af; display: block; font-size: 13.4px; margin: 4px 0 0; } .btn-group-rounded .btn:first-child, .btn-group-rounded *:first-child .btn { border-radius: 14px 0 0 14px; } .btn-group-rounded .btn:last-child, .btn-group-rounded *:last-child .btn { border-radius: 0 14px 14px 0; } .btn-trans { color: #93a1af; background-color: transparent; border-color: #d3dae0; } .btn-trans:hover { color: #0078D7; } .btn-trans:focus { -webkit-box-shadow: none; box-shadow: none; background-color: transparent; color: #0078D7; } .btn-bordered { color: #0078D7; background-color: transparent; border-color: #dedede; } .btn-bordered:hover, .btn-bordered:focus { color: #fff; background-color: #0078D7; border-color: #0078D7; } .btn-text { color: #0078D7; background-color: transparent; } .btn-text:hover, .btn-text:focus { color: #0068bd; } .btn-group.open .glyphicon.dropdown-toggle { -webkit-box-shadow: none; box-shadow: none; } @media (min-width: 435px) { .input-sized-lg { width: 387px; } } /** * Cards */ .card { border: 1px solid #dedede; box-sizing: border-box; display: block; position: relative; margin: 0 18px 18px 0; padding: 14px; width: 250px; height: 82px; float: left; -webkit-box-shadow:0 0 5px rgba(0,0,0,.2); box-shadow:0 0 5px rgba(0,0,0,.2); } 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: 50%; display: block; float: left; max-height: 50px; max-width: 50px; } .card-avatar { border-radius: 4px; float: left; line-height: 11px; text-align: center; width: 50px; height: 50px; line-height: 50px; } .person-photo-auto { float: left; line-height: 11px; text-align: center; } .card-avatar:before, .person-photo-auto:before { background: #c1cbd4; color: #fff; content: attr(data-initial); border-radius: 50%; display: block; font-size: 18px; font-style: normal; font-weight: 300; /*height: 50px; line-height: 50px;*/ line-height: inherit; overflow: hidden; position: relative; text-transform: uppercase; /*width: 50px;*/ } .card.no-img h4, .card.no-img p { margin-left: 0; } /*.card-active { border-left: 4px solid #5cb85c; }*/ .card-inactive { /*border-left: 4px solid #93a1af;*/ background-color: #f4f5f5; } .card .invite-state { background-color: #f4f5f5; border-radius: 100%; color: #5cb85c; display: block; padding-top: 5px; padding-left: 5px; font-size: 14px; height: 24px; position: absolute; left: 45px; top: 49px; width: 24px; z-index: 1; } .card .invite-state.invited { padding-top: 6px; /*color: #5cb85c;*/ color: #333; font-size: 13px; } .card .invite-state.not-invited { color: #d9534f; padding-left: 5px; } .dash-cards { box-sizing:border-box; display:flex; flex-wrap:wrap; } .dash-card { float: left; position: relative; border: 1px solid #dedede; border-radius: 0; /*border-left: 4px solid #5cb85c;*/ /*-webkit-box-shadow: 0 1px 7px 0 rgba(0,0,0,.08); box-shadow: 0 1px 7px 0 rgba(0,0,0,.08);*/ -webkit-box-shadow:0 0 5px rgba(0,0,0,.2); box-shadow:0 0 5px rgba(0,0,0,.2); box-sizing: border-box; min-height: 295px; margin: 0 20px 20px 0; width: 257px; } .dash-card-content { padding-bottom: 60px; 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 { bottom: 19px; left: 0; padding: 0 18px; 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 .waiting-since { color: #93a1af; font-size: 13.4px; margin-left: 4px; } .dash-card-list-item:hover { background-color: #f4f5f5; } .dash-card-list-item strong { display: block; float: right; } .dash-card-inactive-content { display: none; padding: 8px 20px; } .dash-card-inactive-content .block-help { 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-left-color: #93a1af;*/ background: #f4f5f5; } .dash-card-item-empty strong { 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; } @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; color: #72808e; } .note-editor .note-actions .btn-default.active, .note-editor .note-actions .btn-default:hover { background-color: transparent; border-color: transparent; } .note-editor.panel { margin: 0; } .note-btn, .note-btn.btn.active, .note-btn:focus { outline: none!important; -webkit-box-shadow: none; box-shadow: none; } .note-btn i.glyphicon { position: relative; top: 2px; } .note-btn.btn-sm { font-size: 14px; line-height: 18px; } .note-actions { float: right; } .note-actions .note-btn-save-draft { font-size: 16px; } .note-actions-select { margin-top: 3px!important; float: right; } .note-actions-select select { color: #2a3b47; border-color: #c1cbd4; height: 24px; line-height: 24px; padding-top: 2px; } .note-actions-select .note-btn, .note-actions-select .note-btn:hover { background-color: transparent; border-color: transparent; padding-top: 3px; cursor: default; -webkit-box-shadow: none; box-shadow: none; outline: none; } .note-editor.note-frame .note-statusbar.note-statusbar-toolbar { /*border-top: 1px solid #ddd;*/ background-color: #f9fafa; text-align: right; color: #72808e; } .note-bottom-div { margin: 0 4px; color: #c1cbd4; font-size: 9px; } .btn-group-send { margin-left: 12px; margin-top: -1px; margin-bottom: -1px; } .btn-group-send .btn { height: 38px; } .btn-send-menu { padding-left: 8px; padding-right: 8px; font-size: 9px; border-left-color: #659ac8; } .btn-send-text { min-width: 94px; } .btn-reply-submit { font-size: 13.4px; } .note-statusbar-toolbar select.form-control { height: 24px; line-height: 24px; width: auto; display: inline-block; padding-top: 2px; padding-bottom: 1px; } .note-editor .btn-default.text-success { color: #53b961; } .draft-saved { color: #a5b2bd; font-size: 13.4px; float: left; position: relative; top: 2px; } #editor_signature { text-align: left; font-size: 14px; line-height: 20px; background-color: #fff; padding: 8px; border-bottom: 1px solid #ddd; color: #394956; } .note-toolbar .note-btn-group .note-btn { border-radius: 0; } .note-toolbar .note-btn-group.open .note-btn { border-color: #e6e6e6; } .note-toolbar.panel-heading { background-color: #f9fafa; } @media (max-width:390px) { .note-bottom-div { display: none; } .note-statusbar-toolbar select.form-control { width: 85px; } } @media (max-width:582px) { .draft-saved { display: none!important; } .note-actions, .note-actions-select { float: none; } .note-btn .glyphicon-paperclip { font-size: 13px; } .btn-sm, .btn-group-sm > .btn { padding: 5px 9px!important; } .panel-heading.note-toolbar>.btn-group { margin-right: 1px!important; } .panel-heading.note-toolbar { padding: 0 0 4px 1px!important; } .editor-btm-text { display: none; } } /** * Customer */ .customer-photo-container { margin: 8px 0 0 12px; /*margin: 0 0 0 12px;*/ max-width: 86px; position: relative; height: 70px; } #conv-layout-customer .customer-photo-container { margin-top: -53px; } .customer-photo { border: 3px solid #fff; border-radius: 50%; box-shadow:0 1px 6px rgba(147,161,175,.5); display: block; max-height: 70px; max-width: 70px; } .customer-name { color: #2a3b47; font-size: 17px; line-height: 21px; } .customer-name:hover, .customer-name:focus { color: #2a3b47; } .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-social-profiles { position: absolute; top: 0; left: 92px; } .customer-social-profiles a { font-size: 17px; color: #b6bec6; } .customer-social-profiles a:hover { color: #72808e; text-decoration: none; } .profile-preview .customer-social-profiles { top: 61px; } .profile-preview .customer-photo { max-width: 100%; } .profile-preview .customer-data { margin: 15px 0 0 0!important; } .customer-data { padding: 0px 26px 0 12px; margin-top: 15px; margin-bottom: 15px; } .customer-contacts { margin: 0; padding: 0; } .customer-contacts li, .customer-contacts li a { /*overflow: hidden; text-overflow: ellipsis;*/ word-wrap: break-word; overflow-wrap: break-word; /*white-space: nowrap;*/ display: block; margin-top: 2px; color: #93a1af; line-height: 16px; } .customer-contacts li a:hover { color: #93a1af; } .customer-contacts li i { color: #b5c1cc; font-size: 14px; margin-right: 3px; vertical-align: top; display: inline-block; } .customer-contacts .contact-main, .customer-contacts .contact-main:hover { color: #3197d6; } .customer-section { margin-top: 10px; color: #93a1af; word-wrap: break-word; } .customer-divider { display: block; text-align: center; color: #93a1af; font-size: 1.5em; margin: 12px 0 18px; line-height: 6px; letter-spacing: 3px; } /** * Conversations list */ .table.table-conversations { margin: 0; table-layout: fixed; width: 100%; } .table-conversations thead { background-color: #deecf9; } .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-active .conv-fader { background: linear-gradient(to right,rgba(255,255,255,0), #eff6fc); } .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.table-conversations th.conv-subject { padding-left: 3px; } .table-conversations .conv-cb { padding: 4px 0; text-align: center; vertical-align: middle; } .conv-cb label { position: relative; top: -8px; left: 9px; } thead .conv-cb label { top: -9px; left: -3px; } .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: #005a9e; text-decoration: none; cursor: default; line-height: 26px; display: block; font-weight: bold; } .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.table-conversations tbody .conv-active { /*background-color: #eff6fc;*/ /*background-color: #f2f7fd;*/ background-color: #f4f8fd; } /*.conv-row:hover { filter: brightness(98%); -webkit-filter: brightness(98%); -moz-filter: brightness(98%); -o-filter: brightness(98%); -ms-filter: brightness(98%); } .conv-row:hover { background-color: #fbfcfd; }*/ .conv-active .conv-date a { /*background-color: #deecf9;*/ background-color: #e1edfa; } .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; /* Probably not needed */ /*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; margin-top: 8.4px; padding: 0 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-attachment .conv-star { font-size: 15px; margin-bottom: 6px; } .table-conversations .conv-attachment .glyphicon-star-empty { color: #d6dbe0; } .table-conversations .conv-attachment-mobile { font-size: 12px; color: #93a1af; margin-right: 3px; display:none; } .table-conversations .conv-thread-count { /*width: 42px;*/ width: 1px; text-align: right; } .table-conversations .conv-thread-count span { background: #f8f9f9; border: 1px solid #d6dde3; color: #a5b2bd; font-size: 11px; font-weight: 400; padding: .1em .4em; border-radius: 4px; } .conv-counter { border: 1px solid #d6dde3; background: #f8f9f9; color: #a5b2bd; line-height: 17px; position: relative; margin-left: 3px; top: -1px; font-size: 10px; padding: 0 3px; } .table-conversations .conv-thread-count a { padding: 0; } .table-conversations .conv-thread-count .conv-star { font-size: 14px; margin-top: 2px; padding-bottom: 8px; } .table-conversations .conv-number { width: 86px; } .table-conversations .conv-number i { font-size: 10px; margin-right: 2px; color: #93a1af; } .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; }*/ .conv-owner-mobile { display: none; font-weight: normal; } .conv-date a { /*background-color: #f8f9f9;*/ border-radius: 17px 0 0 17px; padding-top: 11px!important; padding-bottom: 11px!important; } button.conv-checkbox-clear { 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; -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; } .table.table-conversations tr.selected { background-color: #e1edfa; } .table-conversations tr.selected .conv-fader { background: linear-gradient(to right,rgba(255,255,255,0), #e1edfa); } .table.table-conversations tbody td { border: 0; } .table.table-conversations tbody tr { position: relative; height: 80px; border-bottom: 1px solid #e3e8eb; } .table-conversations .conv-attachment-mobile { display: inline; } .conv-cb { display: none !important; } .conv-attachment { display: none !important; } .conv-subject { position: absolute !important; top: 24px; padding-left: 2px!important; padding-right: 20px!important; } .table-conversations .conv-fader { width: 80px; } .conv-owner { display: none!important; } .conv-owner-mobile { display: inline!important; } .conv-owner-mobile .glyphicon { top: 0; } .conv-customer { position: absolute; top: 0; margin-left: 10px!important; } .conv-customer a { width: 350px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conv-customer a, .conv-date a { padding: 11px 8px 0 0 !important; line-height: 1.2em; } .table-conversations td.conv-subject a { padding-left: 8px; } .conv-date a { padding-top: 13px!important; font-size: 12px!important; background-color: transparent!important; font-weight: normal; } /*.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; width: auto !important; } .conv-thread-count a, .conv-thread-count .conv-star { padding-right: 6px!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; } button.conv-checkbox-clear { display: block; } } @media (max-width:700px) { .conv-customer a { width: 250px; } } /** * Conversation */ .body-conv .content-2col { display: flex; } #conv-layout { position: relative; width: 100%; } #conv-layout-header { float: left; width: 100%; padding-right: 280px; } #conv-layout-main { float: left; width: 100%; padding-right: 280px; } #conv-layout-customer { box-shadow: -1px 0 0 #d6dde3, 1px 0 0 #d6dde3, 0 1px 0 #d6dde3; position: absolute; right: 0; /*background-color: #f4f5f5;*/ /*background-color: #eff6fc;*/ background-color: #fff; width: 280px; height: 100%; z-index: 9; } #conv-toolbar { background-color: #deecf9; /*border-bottom: 1px solid #e3e8eb;*/ padding-left: 9px; } .conv-actions .conv-action { display: inline-block; padding: 16px 16px 9px; /*color: #4f5d69;*/ color: #005a9e; font-size: 19px; cursor: pointer; } .conv-actions .conv-action:hover { /*color: #394956;*/ color: #0078d7; } .conv-action.inactive { color: #aeb6c0; } .conv-action.dropdown { padding: 0!important; } .conv-action .dropdown-toggle { font-size: 17px; padding-left: 13px; } #conv-subject { border-bottom: 1px solid #e3e8eb; } .conv-subj-block { padding: 16px 9px 24px 20px; } .conv-subjwrap { padding-right: 145px; position: relative; overflow: hidden; } .conv-subjtext { float: left; display: inline-block; color: #2a3b47; font-weight: 400; font-size: 23px; line-height: 30px; word-wrap: break-word; margin-right: 8px; } .conv-numnav { margin: 0; position: absolute; color: #93a1af; right: 0; top: 5px; } .conv-numnav strong { color: #2a3b47; font-size: 18px; font-weight: bold; padding-right: 8px; } .conv-numnav i { cursor: pointer; font-size: 15px; } .conv-numnav i:hover { color: #364a5a; } .conv-star { color: #bbc4cc; } .conv-star.glyphicon-star { color: #ffd76e; } .conv-star:hover { color: #f4b400!important; } .conv-info { overflow: visible; float: right; text-align: right; list-style: none; margin: 11px 11px 12px 0; padding: 0; white-space: nowrap; } .conv-info .btn { height: 30px; } .conv-info > li { display: inline-block; margin: 0 4px; } /*.conv-info .btn-group button.btn-default.conv-info-val { color: #727d87!important; }*/ .conv-info .btn-group button.conv-info-icon { padding: 0 7px; } .conv-info .btn-group button.conv-info-val { max-width: 100px; text-overflow: ellipsis; overflow: hidden; padding-right: 22px; } .conv-info .btn-group button.conv-info-val .caret { position: absolute; top: 12px; right: 8px; } .conv-info .btn-group button i { position: relative; top: 2px; } .conv-info .btn-group button .caret { margin-left: 3px; } .conv-actions { display: inline-block; } .conv-sidebar-block { margin: 20px 10px 5px 10px; /*background: #deecf9;*/ /*box-shadow: 0 1px 3px 0 rgba(0,0,0,.1);*/ /*box-shadow: 0 1px 3px 0 #c7e0f4;*/ border-radius: 14px 0 0 14px; } .conv-sidebar-block .panel { border: 0; -webkit-box-shadow: none; box-shadow: none; background-color: #f8f9f9; } .conv-sidebar-block .panel-heading { background-color: #f1f3f5 !important; } .conv-customer-block { position: relative; margin-top: 7px; } .conv-customer-header { background-color: #f1f3f5; height: 53px; } .conv-customer-hist .accordion .panel-title a { color: #2a3b47; font-size: 13.4px; font-weight: bold; } .conv-customer-hist .accordion .panel-default > .panel-heading:hover { background-color: transparent; } .customer-snippet { padding: 5px 0; /*margin-top: 60px;*/ position: relative; } .conv-next-prev { vertical-align: middle; margin-right: 0!important; } .conv-next-prev a { font-size: 16px; color: #a5b2bd; position: relative; top: 3px; text-decoration: none; } .conv-next-prev a:hover, .conv-next-prev a:focus { cursor: pointer; color: #4f5d69; } /*.conv-assignee .btn { background-color: transparent!important;; border: 0; box-shadow: none!important; -webkit-box-shadow: none!important; color: #005a9e!important; }*/ /*.conv-assignee .conv-info-icon { padding-right: 0!important; font-size: 19px; top: 1px; }*/ .customer-trigger { display: inline-block; position: absolute; font-size: 16px; right: 6px; top: -43px; height: 22px; } .customer-trigger a { color: #93a1af; } .customer-trigger a:hover, .customer-trigger a:focus { color: #0078D7; text-decoration: none; } .customer-hist-trigger { display: none; } .thread { position: relative; /*border-bottom: 1px solid #ebeff1;*/ border-bottom: 1px solid #e3e8eb; } .thread:last-child { border-bottom: 0; } .thread-header { overflow: hidden; min-height: 42px; padding-left: 72px; } .thread-message { margin: 0 24px 0 0; padding: 25px 13px 20px 12px; } .thread-photo { /*padding: 16px 18px 25px 20px;*/ padding: 25px 18px 25px 20px; position: absolute; } .thread-photo .person-photo { border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.2); width: 45px; height: 45px; /* for automatic photo */ line-height: 41px; padding: 2px; background-color: #fff; } .thread-title { float: left; max-width: 68%; } .thread-person { color: #8494a4; font-size: 18px; line-height: 1.2em; display: inline-block; margin-bottom: 12px; overflow-wrap: break-word; word-wrap: break-word; } .thread-person strong { font-weight: bold; color: #253540; font-size: 18px; } .thread-person strong a, .thread-person strong a:hover, .thread-person strong a:focus { color: #253540; } .draft-actions { display: inline-block; margin-bottom: 5px; } .thread-info { color: #a5b2bd; float: right; text-align: right; font-size: 12px; } .thread-recipients { clear: both; margin: -8px 0 14px; color: #a5b2bd; font-size: 12px; line-height: 14px; } .thread-recipients strong { color: #72808e; } .thread-recipients div { margin-top: 2px; } .thread-body { color: #253540; font-size: 14px; line-height: 1.45em; overflow-y: hidden; margin: 0 -18px 0 50px; padding: 0 18px 0 22px; /*border-radius: 10px;*/ /*margin-top: 5px;*/ /*padding-top: 12px;*/ /*padding-bottom: 10px;*/ } .thread-opened-at { font-size: 12.5px; margin: 15px 0 0 0; color: #a5b2bd; display: inline-block; } .thread-opened-at .glyphicon { font-size: 12px; color: #b8c7d4; margin-right: 5px; } .thread-options { position: absolute; top: 22px; cursor: pointer; right: 5px; color: #a5b2bd; } .thread-options .dropdown-toggle { padding: 4px 8px; } .thread-type-lineitem { background: #f9fafa; /*overflow: auto;*/ } .thread-type-lineitem .thread-options { top: 8px; } .thread-type-lineitem .thread-message { padding-top: 12px; padding-bottom: 9px; color: #a5b2bd; font-size: 12px; } .thread-type-lineitem .thread-header { min-height: auto; } .thread-attachments { position: relative; } /*.thread-type-customer .thread-body { border: 1px solid #d9dee3; -webkit-box-shadow:inset 3px 0 0 0 #d9dee3; box-shadow:inset 3px 0 0 0 #d9dee3; }*/ /*.thread-type-message .thread-body { background-color: #f1f7fc; /*border: 1px solid #2b8fdd; -webkit-box-shadow:inset 3px 0 0 0 #2b8fdd; box-shadow:inset 3px 0 0 0 #2b8fdd;* / border: 1px solid #abd2f1; -webkit-box-shadow:inset 3px 0 0 0 #abd2f1; box-shadow:inset 3px 0 0 0 #abd2f1; }*/ .thread-type-message { background-color: #f4f8fd; } /*.thread-type-draft .thread-body { border: 1px solid #6db2e8; -webkit-box-shadow:inset 3px 0 0 0 #6db2e8; box-shadow:inset 3px 0 0 0 #6db2e8; }*/ .thread-type-draft { -webkit-box-shadow:inset 5px 0 0 0 #abd2f1; box-shadow:inset 5px 0 0 0 #abd2f1; } /*.thread-type-note .thread-body { background-color: #fffbf1; /*border: 1px solid #ffc646; -webkit-box-shadow:inset 3px 0 0 0 #ffc646; box-shadow:inset 3px 0 0 0 #ffc646;* / border: 1px solid #ffe19d; -webkit-box-shadow:inset 3px 0 0 0 #ffe19d; box-shadow:inset 3px 0 0 0 #ffe19d; }*/ .thread-type-note { background-color: #fffbf1; -webkit-box-shadow:inset 5px 0 0 0 #ffe19d; box-shadow:inset 5px 0 0 0 #ffe19d; } /*.thread-type-message .thread-message, .thread-type-note .thread-message { padding-bottom: 17px; }*/ .thread-type-note .thread-person { color: #f7b126; } .thread-type-message .thread-person { /*color: #8494a4;*/ color: #3197d6; } /*.thread-type-draft { background-color: #e9f2fb; /*-webkit-box-shadow:inset 5px 0 0 0 #3197d6; box-shadow:inset 5px 0 0 0 #3197d6* / }*/ .thread-type-draft .thread-person { color: #3197d6; margin-right: 10px; } .thread-type-draft .thread-header { padding-top: 2px; } .thread-attachments ul { list-style: none; padding-left: 23px; } .thread-attachments li { border-radius: 2px; /*border: 1px solid #dadada;*/ display: inline-block; line-height: 1; background-color: #f1f3f4; margin: 8px 4px 8px 0; padding: 4px 10px; position: relative; } .thread-attachments i.glyphicon-paperclip { color: #a5b2bd; font-size: 14px; position: absolute; top: 12px; } .thread-attachments a { display: inline-block; } .thread-attachments a.disabled, .thread-attachments a.disabled:hover, .thread-attachments a.disabled:focus { color: #93a1af; text-decoration: none; cursor: default; } .thread-attachments span { text-transform: lowercase; } .conv-new #conv-toolbar { border-bottom: 1px solid #d4d9dd; padding: 6px 0 7px 0; } .conv-new #conv-toolbar h2 { color: #253540; float: left; font-size: 20px; font-weight: normal; line-height: 39px; margin: 0; padding: 0 0 0 20px; } .conv-new #conv-toolbar .btn-group { margin: 5px 0 0 20px; color: #4f5d6b; } .conv-new #conv-toolbar .btn-group i { color: #4f5d6b; position: relative; top: 3px; } .conv-new .conv-info { font-size: 14px; color: #253540; margin: 0px 20px 0px 0; } .conv-new .conv-info strong { font-size: 20px; line-height: 39px; font-weight: normal; } .conv-new-form { padding-top: 15px; padding-bottom: 150px; } .conv-new-form .form-group { margin-bottom: 10px; } .toggle-cc { padding-left: 4px; padding-bottom: 5px; margin-top: -5px; } .conv-block { margin: 0 20px; } .conv-block.conv-reply-block { margin-top: -7px; margin-bottom: 12px; } .conv-reply-block .form-group { margin-bottom: 5px; } .conv-reply-block .form-group label { width: 33px; padding-right: 0; padding-left: 0px; } .conv-reply-block .form-group input { max-width: 600px; min-width: 150px; } .conv-reply-block .control-label { float: left; text-align: right; } .conv-reply-body { margin-top: 13px; } .conv-reply-field { padding-left: 10px; float: left; width: 68%; } .btn-add-note-text, .conv-note-block .btn-send-text, .conv-note-block .conv-recipient { display: none; } .conv-note-block .btn-add-note-text { display: block; } .conv-note-block .conv-reply-body { margin-top: 5px; } .conv-note-block .note-editor.note-frame .note-statusbar.note-statusbar-toolbar { border-top: 1px solid #ffd56d; background-color: #fff7dd; color: #d79400; } .conv-note-block .note-editor.note-frame { border-color: #ffd56d !important; color: #d79400; } .conv-note-block .form-control { border-color: #ffd56d; color: #b37100; } .conv-note-block .btn-primary, .conv-note-block .btn-primary:focus { background-color: #f5b126; border-color: #f5b126; color: #fff; } .conv-note-block .btn-primary:hover { background-color: #de980a; border-color: #de980a; color: #fff; } .conv-note-block .btn-send-menu { border-left-color: #ffd56d; } .conv-note-block .note-bottom-div { color: #b37100; } .conv-note-block .panel-default > .panel-heading { border-color: #ffd56d; background-color: #fff7dd; color: #d79400; } .conv-note-block .note-actions .note-btn-save-draft, .conv-note-block .note-actions .draft-saved { display: none; } .conv-note-block .note-editor .btn-default { color: #b37100; background-color: #fff7dd; border-color: #fff7dd; } .conv-note-block .alert-switch-to-note { display: none; } .conv-note-block #editor_signature { display: none; } .alert-switch-to-note { -webkit-box-shadow: inset 5px 0 0 0 #ffc646; box-shadow: inset 5px 0 0 0 #ffc646; margin: 8px -15px -9px; padding-top: 8px; padding-bottom: 8px; } .alert-switch-to-note .glyphicon { font-size: 15px; position: relative; top: 2px; margin-left: 3px; margin-right: 5px; } .alert-switch-to-note a, .alert-switch-to-note a:hover, .alert-switch-to-note a:focus { color: #b37100; text-decoration: underline; } ul.prev-convs { padding-left: 0; list-style: none; margin-bottom: 7px; } .prev-convs li { margin-top: 4px; } /*.prev-convs li:first-child { margin-top: 0; }*/ .prev-convs .glyphicon { margin-right: 4px; position: relative; top: 2px; } .conv-customer-hist .panel-body { border-top: 0!important; padding-top: 0; padding-bottom: 6px; } .link-prev-convs { margin-bottom: 4px; display: inline-block; } .prev-convs-full { display: block; } .prev-convs-mobile { display: none; } .prev-convs-header2 { display: none; } .conv-star { cursor: pointer; } @media (max-width:700px) { .conv-info .btn-group button.conv-info-val span:first-child { display: none!important; } .conv-info .dropdown-menu { right: 0!important; left: auto!important; } .conv-actions .conv-action { padding: 18px 10px 9px; } .conv-subjtext { font-size: 20px; } .conv-subjwrap { padding-right: 90px; } .conv-subj-block { padding: 16px 2px 18px 13px; } .conv-customer-block { padding-left: 12px!important; padding-right: 15px!important; } .customer-data { margin-left: 43px!important; } .conv-numnav { top: 0; } .conv-info .btn-group button.conv-info-val { padding-right: 17px; } .conv-info { margin-right: 6px; } /*.conv-info > li { margin: 0 2px; }*/ #conv-toolbar { padding-left: 6px; } .conv-actions .conv-action/*, .conv-assignee .conv-info-icon*/ { font-size: 17px; } .thread-photo { padding: 17px 15px 25px 12px; } .conv-customer-block { padding: 15px; } .thread-message { margin-right: 15px; margin-left: 0; padding-top: 17px; } .thread-header { padding-left: 55px; min-height: 53px; } .thread-type-draft .thread-header { padding-left: 3px; } .thread-body { margin-left: 0; padding-left: 3px; } /*.thread-type-note .thread-body, .thread-type-message .thread-body { border-radius: 0; margin: 0 -17px 0 -3px; padding-left: 10px; }*/ .thread-info { max-width: 32%; } .thread-options { right: 0; top: 15px; } .conv-new #conv-toolbar h2 { padding-left: 13px; font-size: 17px; } .conv-new .conv-info { margin-right: 13px; } .conv-new .conv-info strong { font-size: 17px; } .conv-new-form { padding-top: 0; } .conv-new #conv-toolbar .btn-group { margin-left: 13px; } .conv-block { margin: 0 13px; } .conv-reply-field { width: 80%; } } @media (max-width:1100px) { #conv-layout-header, #conv-layout-main, #conv-layout-customer { float: none; width: 100%; padding-right: 0; position: static; background-color: #fff; height: auto; } #conv-layout-customer { border-bottom: 1px solid #e3e8eb; } .customer-snippet { min-height: 46px; } .customer-snippet, .conv-sidebar-block { padding: 0; margin: 0; } .conv-customer-header { display: none; } #conv-layout-customer, .conv-sidebar-block { -webkit-box-shadow: none; box-shadow: none; } #conv-layout-customer .customer-photo-container { margin: 0; width: 45px; float: left; margin-top: 0; height: auto; } .customer-photo { max-width: 45px; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); } .conv-customer-block { padding: 15px 20px 15px; } .customer-data { margin: 0 0 0 50px; } .thread-person { font-size: 16px; } .customer-contacts { margin: 0; padding-top: 2px; } .customer-contacts li { display: inline-block; } .customer-contacts li a { display: inline; } .customer-name { float: left; margin-right: 7px; font-weight: bold; font-size: 18px; } .customer-section { margin-top: 0px; } .customer-trigger { top: 16px; right: 11px; } .profile-preview { padding: 15px; } /*.customer-email { width: 100%; }*/ .customer-email:before { content: '<'; } .customer-email:after { content: '>,'; } .customer-email:last-child:after { content: '>'; } .customer-phone:before { content: 'tel:'; } .customer-phone:after { content: ','; } .customer-phone:last-child:after { content: ''; } .customer-social-profiles { position: static; } .conv-customer-hist .panel-heading { display: none; } .customer-hist-trigger { display: list-item; } /*.customer-hist-trigger { display: inline-block; position: absolute; font-size: 13px; right: 14px; top: 43px; height: 22px; color: #c7ccd2; cursor: pointer; } .customer-hist-trigger:hover { color: #72808e; }*/ .conv-sidebar-block .panel { background-color: #fff; } .conv-customer-hist .panel-group { margin: 0; } .conv-customer-hist .panel-body { /*border-top: 1px solid #e3e8eb!important;*/ border-bottom: 0; padding-left: 83px; } .prev-convs-full { display: none; } .prev-convs-mobile { display: block; } .prev-convs-header2 { display: block; } } @media (max-width:991px) { .conv-info .btn-group button.conv-info-val { max-width: 148px; } .conv-attachment .conv-star { display: none; } } @media (min-width:992px) { .conv-info .btn-group button.conv-info-val { max-width: 170px; } .conv-thread-count .conv-star { display: none; } } @media (min-width:1100px) and (max-width:1239px) { .conv-info .btn-group button.conv-info-val { max-width: 94px; } .conv-actions .conv-action { padding: 17px 10px 9px; } } @media (min-width:1240px) { .conv-info .btn-group button.conv-info-val { max-width: 150px; } } /** * Subscriptions */ .subscriptions-email, .subscriptions-browser, .subscriptions-mobile { text-align: center; } .user-subscriptions { margin-bottom: 30px; } .user-subscriptions .table-header th, .user-subscriptions .table-header td { border-top: none; font-size: 14px; padding-top: 20px; vertical-align: bottom; line-height: 18px; } .user-subscriptions .table-header td { padding-bottom: 4px; } .user-subscriptions .table-header input { margin-top: 6px; } /** * Alerts */ .alert-floating { font-size: 14px; left: 50%; display: none; /*display: flex;*/ font-size: 15px; position: fixed; text-align: center; top: 16px; transform: translate(-50%,0) translate(-1px,0); z-index: 1099; max-width: 300px; border-radius: 2px; flex-direction: row; padding: 9px 14px; -webkit-box-shadow: 4px 4px 12px rgba(0, 0, 0, .175); box-shadow: 4px 4px 12px rgba(0, 0, 0, .175); cursor: default; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ /*word-break: break-all;*/ /* Instead use this non-standard one: */ word-break: break-word; /* Adds a hyphen where the word breaks, if supported (No Blink) */ -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } .alert-floating.alert-danger, .alert-floating.alert-warning { position: fixed; } .alert-floating .glyphicon { margin-right: 8px; position: relative; top: 4px; } .alert-floating a, .alert-floating a:hover, .alert-floating a:focus { color: #2a3b47; text-decoration: underline; } .alert-floating.alert-success { background-color: #deffde; /*color: #3c763d;*/ color: #6ac27b; border: 1px solid #6ac27b; } .alert-floating.alert-danger { border: 1px solid #a94442; } .alert-floating.alert-warning { background-color: #fff6e2; color: #b37100; border: 1px solid #f5b126; } .alert-info.alert-striped { -webkit-box-shadow:inset 4px 0 0 0 #3197d6; box-shadow:inset 4px 0 0 0 #3197d6; } .alert-narrow { padding-top: 5px; padding-bottom: 5px; } /** * Tables */ .table-dark-header th { background-color: #f9f9f9; } .table-main-col { width: 70%; } .table-header { font-size: 14px; } .table-narrow > thead > tr > th, .table-narrow > tbody > tr > th, .table-narrow > tbody > tr > td { padding-top: 4px; padding-bottom: 4px; } /** * Modal */ .modal-header { cursor: default; } .modal .close { opacity: 0.7; } .modal-body { min-height: 115px; } .modal-loader img { position: absolute; top: 50%; height: 31px; margin-top: -15px; } .modal-body p.block-help { font-size: 11.4px; } .modal-body.modal-body-fit { max-height: calc(100vh - 200px); overflow-y: auto; } .modal-width-auto { display: table; width: auto; min-width: 320px; } /** * Attachments */ .attachments-upload { display: none; /*margin-right: -15px; margin-left: -15px;*/ } .attachments-upload img { margin-right: 3px; } .attachments-upload.thread-attachments ul { margin-bottom: 0; padding-left: 0; } .attachments-upload.thread-attachments li { margin-bottom: 0; } .attachments-upload .glyphicon-remove { display: none; } .attachment-loaded img, .attachment-loaded .ellipsis { display: none; } .attachment-loaded .glyphicon-remove { display: inline-block; color: #999; cursor: pointer; position: relative; top: 2px; } .attachment-loaded .glyphicon-remove:hover { color: #333; } /** * Fancy checkbox * https://proto.io/freebies/onoff/ */ .onoffswitch { position: relative; width: 40px; -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; display: inline-block; } .onoffswitch-wrap { padding-top: 4px; line-height: 11px; } .onoffswitch-wrap .icon-info { top: -2px; } .onoffswitch-checkbox { display: none; } .onoffswitch-label { display: block; overflow: hidden; cursor: pointer; height: 20px; padding: 0; line-height: 20px; border: 4px solid #D7D7D7; border-radius: 20px; background-color: #D7D7D7; transition: background-color 0.3s ease-in; margin-bottom: 0; } .onoffswitch-label:before { content: ""; display: block; width: 20px; margin: 0px; background: #FFFFFF; position: absolute; top: 0; bottom: 0; right: 19px; border: 4px solid #D7D7D7; border-radius: 20px; transition: all 0.3s ease-in 0s; height: 20px; } .onoffswitch-checkbox:checked + .onoffswitch-label { background-color: #106ebe; } .onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before { border-color: #106ebe; } .onoffswitch-checkbox:checked + .onoffswitch-label:before { right: 0px; } /** * Change customer */ .customer-not-found-title { display: none; } .customer-not-found .customer-not-found-title { display: block; } .customer-not-found .customer-create-title { display: none; } /** * Select2 */ .select2-container--default .select2-selection--multiple { border-radius: 3px; border: 1px solid #c1cbd4; } .select2-container--default.select2-container--focus .select2-selection--multiple { border: 1px solid #c1cbd4; } .select2-dropdown { border: 1px solid #c1cbd4; } .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { float: right; color: #a5b2bd; margin-right: 0; margin-left: 2px; } .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: #f4f5f5; border: 1px solid #d6dde3; color: #2a3b47; border-radius: 3px; } .select2-multi-dropdown.select2-dropdown { border-bottom: 0; } .select2-multi-dropdown .select2-results__message { display: none !important; } .select2-multi-dropdown .select2-results__option:last-child { border-bottom: 1px solid #c1cbd4; } /*.select2-with-loader .select2-selection__rendered { padding-right: 30px; } .select2-with-loader.loading .select2-selection__rendered:after { content: ""; position: absolute; width: 16px; height: 16px; background: url('/img/loader-tiny.gif') 50% 50% no-repeat transparent; right: 10px; top: 50%; transform: translate(0,-50%); }*/ /** * Website notifications */ .web-notifications .dropdown-menu { min-width: 270px; max-width: 460px; min-height: 208px; max-height: 800px; width: 460px; padding: 0; } .web-notifications-list { overflow-y: auto; list-style: none; padding: 0; max-height: 70vh; } .web-notifications-header { background-color: #fff; border-bottom: 1px solid #e3e8eb; -webkit-box-shadow: 0 2px 3px -1px rgba(0,0,0,.05); box-shadow: 0 2px 3px -1px rgba(0,0,0,.05); padding: 13px 16px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; } .web-notifications-header h1 { font-size: 18px; font-weight: normal; display: inline-block; margin: 0; } .web-notifications-header a { color: #93a1af; } .web-notifications-header a:hover, .web-notifications-header a:focus { color:#4f5d6b; text-decoration:none } .web-notifications-count { color: #ff9139; margin-left: 3px; position: relative; top: -1px; cursor: default; } .web-notifications-mark-read { float: right; position: relative; top: 1px; } .web-notification-date { background-color: #f9fafa; border-bottom: 1px solid #e3e8eb; color: #c1cbd4; font-size: 11px; font-weight: bold; letter-spacing: .5px; line-height: 1; padding: 9px 16px 8px; text-transform: uppercase; } .web-notification { border-bottom: 1px solid #e3e8eb; } .web-notification a, .web-notification a:hover, .web-notification a:focus { color: #4f5d6b; padding: 16px 16px 14px 14px; text-decoration: none; outline: 0; display: flex; } .web-notification a:hover, .web-notification a:focus { background-color: #f9fafa; } .web-notification.is-unread a { background-color: #f1faff; } .web-notification.is-unread a:hover, .web-notification.is-unread a:focus { background-color: #e7f6ff; } .web-notification-msg { line-height: 18px; overflow: hidden; } .web-notification-msg-header { font-size: 14px; margin-bottom: 4px; } .web-notification-img { width: 36px; min-width: 36px; margin-right: 8px; overflow: hidden; } .web-notification-img .person-photo { -webkit-box-shadow: 0 1px 0 0 #e3e8eb; box-shadow: 0 1px 0 0 #e3e8eb; height: 36px; width: 36px; line-height: 32px; border: 2px solid #fff; border-radius: 50%; font-size: 13px; } .web-notification-msg-preview { color: #93a1af; font-size: 13.4px; overflow: hidden!important; -o-text-overflow: ellipsis!important; text-overflow: ellipsis!important; white-space: nowrap!important; } .web-notifications .dropdown-toggle.has-unread:after { content: ""; background-color: #ff734c; /*border: 2px solid #fff;*/ border-radius: 50%; width: 10px; height: 10px; position: absolute; right: 11px; top: 12px; } .web-notification-more .btn { padding: 7px 0 5px; outline: none!important; } .web-notification-more .btn.disabled { cursor: default; } /* Take notifications bell out of the dropdown menu */ .navbar-header .web-notifications { position: absolute; top: 1px; right: 71px; display: block; } .navbar-header .web-notifications .dropdown-menu { right: 0; left: auto; width: calc(90vw - 71px); } .navbar-header .web-notifications > a { color: #fff; font-size: 18px; display: block; padding: 13px 15px; } .navbar-header .web-notifications > a:focus, .navbar-header .web-notifications > a:hover { color: #fff!important; } /** * Modules */ .module-card { background-color: #f4f5f5; border: 1px solid #dedede; box-sizing: border-box; display: block; position: relative; margin: 0 18px 18px 0; padding: 18px; -webkit-box-shadow:0 0 10px rgba(0,0,0,.2); box-shadow:0 0 10px rgba(0,0,0,.2); } .module-card.active { background-color: #fff; } .module-card img { width: 128px; height: 128px; float: left; border-radius: 5px; } .module-card h4 { font-size: 18px; font-weight: 400; margin-top: 2px; } .module-details { color: #93a1af; } .module-wrap { margin-left: 144px; } .module-actions { margin-top: 13px; } .module-actions .input-group { max-width: 378px; } .alert-module-update { margin: 15px 0 0; padding: 10px 15px; } @media (max-width:582px) { .module-card img { float: none; width: 128px; margin: 0 auto; display: block; } .module-wrap { margin-left: 0; } .module-card h4 { margin-top: 10px; text-align: center; } } /** * Misc */ .banner { text-align: center; margin-top: 30px; margin-bottom: 50px; } .margin-top { margin-top: 20px !important; } .margin-top-10 { margin-top: 10px !important; } .margin-top-25 { margin-top: 25px !important; } .margin-top-30 { margin-top: 30px !important; } .margin-top-40 { margin-top: 40px !important; } .margin-left { margin-left: 20px !important; } .margin-right { margin-right: 20px !important; } .margin-left-10 { margin-left: 10px !important; } .margin-bottom { margin-bottom: 20px !important; } .margin-bottom-0 { margin-bottom: 0 !important; } .margin-bottom-10 { margin-bottom: 10px !important; } .margin-bottom-30 { margin-bottom: 30px !important; } .margin-bottom-40 { margin-bottom: 40px !important; } .margin-bottom-5 { margin-bottom: 5px !important; } .margin-0 { margin: 0 !important; } .margin-top-0 { margin-top: 0 !important; } .padding-0 { padding: 0 !important; } .padding-top-0 { padding-top: 0 !important; } .heading { color: #253540; font-size: 20px; font-weight: 400; } .section-heading { background-color: #deecf9; /*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; } .subheading { font-size: 16px; margin: 20px 0 15px 15px; font-weight: bold; } .section-search { line-height: inherit; } .section-search .input-group { padding-top: 0; } .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; } .icon-info { color: #a5b2bd; cursor: help; display: inline-block; font-size: 15px; margin-left: 7px; float: left; top: 7px; } .icon-info-inline { float: none; top: 0; } .help-icon { color: #a5b2bd; cursor: pointer; display: inline-block; font-size: 15px; top: 3px; } a.help-icon:focus, a.help-icon:hover { color: #a5b2bd; text-decoration: none; } .popover { color:#4f5d6b; font-size:13.4px } .descr-block { margin: 20px; color: #93a1af; } .block-help { color: #93a1af; display: block; font-size: 13.4px; margin: 4px 0 9px; } .block-help a { color: #93a1af; } .block-help a:hover { color: #23527c; } .text-help { color: #93a1af; } .text-help a:hover { color: #23527c; } .link-black, .link-black:hover, .link-black:focus { color: #4f5d6b!important; font-weight: bold; } .link-black:hover { text-decoration: underline; } .link-blue, .link-blue:hover, .link-blue:focus { color: #3197d6!important; } .link-blue:hover { text-decoration: underline; } .help-link, .help-link:hover, .help-link:focus { color: #93a1af!important; } .help-link:hover { text-decoration: underline; } .wizard-header { padding: 40px 0 0; text-align: center; } .wizard-header-small { padding: 25px 0 0; } .wizard-header h1 { font-size: 24px; margin: 12px 0 10px; color: #2a3b47; } .wizard-header-small h1 { font-size: 21px; } .wizard-header p { color: #93a1af; font-size: 15px; margin: 0; } .wizard-header .glyphicon { position: relative; top: 3px; } .wizard-body { padding: 10px 0 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; } .nav-tabs-no-bottom { position: relative; top: -1px; border-bottom: 0; } .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: #f4f5f5; } .accordion-status { margin-left: 4px; } .form-divider { border: 0; border-top: 1px solid #eee; margin-top: 10px; margin-bottom: 10px; } .empty-content { -webkit-box-shadow: none; 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 { margin-bottom: 5px; } .multi-item > div { display: flex; flex: 1; flex-basis: auto; -ms-flex: 1; -webkit-flex: 1; } .multi-remove, .multi-remove:focus { color: #c1cbd4; font-size: 13px; position: relative; top: 5px; margin-left: 5px; outline: none; } .multi-remove:hover { color: #8899aa; text-decoration: none; } .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; } .text-warning-light { color: #ffc646; } .text-large { font-size: 14px; } .text-larger { font-size: 16.8px; } #loader-main { position: fixed; display: none; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 9999; background: url('/img/loader-main.gif') 50% 50% no-repeat #fff; opacity: 0.60; filter: alpha(opacity=60); /* For IE8 and earlier */ } a.text-danger, a.text-danger:hover, a.text-danger:focus { color: #d9534f!important; } .break-words { /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all; /* Instead use this non-standard one: */ word-break: break-word; /* Adds a hyphen where the word breaks, if supported (No Blink) */ -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } .nowrap { white-space: nowrap; } .row-container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } a.disabled, a.disabled:hover, a.disabled:focus { color: #7abce4; text-decoration: none; cursor: default; } .link-dark { color: #237ab3!important; } .link-dark:hover, .link-dark:focus { color: #1b5d88!important; } .pre-wrap { word-wrap: break-word; white-space: pre-wrap; } .panel-shaded { -webkit-box-shadow:0 0 10px rgba(0,0,0,.2); box-shadow:0 0 10px rgba(0,0,0,.2); } .icon-large { font-size: 57px; color: #a5b2bd; } #user-photo-delete { line-height: 25px; } .console { background: #000; border: 1px groove #ccc; color: #ccc; display: block; padding: 5px; white-space: pre-wrap; /* Since CSS 2.1 */ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-word; /* Internet Explorer 5.5+ */ } .badge.success { background-color: #53b961; } .badge.danger { background-color: #d43f3a; } .badge .glyphicon { line-height: 5px; } #conversations-bulk-actions { z-index: 100; display: none; pointer-events: none; } #conversations-bulk-actions>.btn-group { pointer-events: auto; } #conversations-bulk-actions.affix-top { position: absolute; } #conversations-bulk-actions.affix { top: 0; right: 0; } .inline-block { display: inline-block; } .panel-wizard { background-color: #f8f9f9; -webkit-box-shadow:0 0 10px rgba(0,0,0,.2); box-shadow:0 0 10px rgba(0,0,0,.2); } .dropdown-menu .glyphicon { position: relative; color: #0078D7; left: -5px; } .hover-shade:hover { -webkit-box-shadow:0 0 13px rgba(0,0,0,.2); box-shadow:0 0 13px rgba(0,0,0,.2); } .dropdown-menu > li > span { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857143; cursor: default; } /** * Only main content is visible */ @media (max-width:991px) { .1col-hidden { display: none; } } /** * Left sidebar and main content are visible */ @media (max-width:1100px) { .2col-hidden { display: none; } } /** * Left sidebar, main content and right siderbar are visible */ @media (min-width:1101px) { .3col-hidden { display: none; } }