/************************************************************************************************************************ components.css: Reusable snippets to provide distinct visual elements Copyright (c) 2012-Present - agileKaizen, Ltd., all rights reserved. http://agileKaizen.com ************************************************************************************************************************/ ul.table {list-style:none; padding:0px; margin:0px; min-height:24px;} ul.table div.table-row {display:flex; align-items:center; min-height:24px;} ul.table div.table-row .cell-wide {width:100%} /* ============================ ul.tree =========================== ul.tree transforms a list element into a hierarchical tree (like a folder structure). It can be combined with form-control to produce a tree element in a form control. It does not need a wrapper. */ ul.tree {margin:0; padding:0px; list-style:none; width:100%;} ul.tree ul {list-style:none; padding:0; margin-left:0.975rem;} ul.tree ul ul {margin-left:0.975rem; padding-bottom:0.25rem;} ul.tree ul li {background:url(../../images/tree/node.png) no-repeat 0 -16px; padding-left:1rem; padding-bottom:.25rem;} ul.tree ul li:not([style*="display:none"]):last-child {background:rgba(255,255,255,0.001) url(../../images/tree/lastnode.png) no-repeat 0 -108px; padding-left:1.25rem; padding-top:.25rem;} ul.tree ul li:not([style*="display:none"]):nth-last-child(2) {padding-bottom:1rem;} ul.tree ul li ul li:not([style*="display:none"]):nth-last-child(2) {padding-bottom:0rem;} ul.tree .tree-row {display:flex; align-items:center; min-height:2.5em;} ul.tree .tree-lg {} ul.tree.tree-lg .tree-row {height:3em;} ul.tree.tree-lg .tree-cell {line-height:1.5em;} ul.tree.tree-lg ul li {background:url(../../images/tree/node.png) no-repeat 0 -8px;} ul.tree.tree-lg ul li:last-child {background:#FFF url(../../images/tree/lastnode.png) no-repeat 0 -102px;} /* Row styling */ ul.tree .tree-cell {min-width:2rem; justify-content:center; text-align:center;} ul.tree .tree-cell i, .icon-selector i.icon-braille, .icon-selector i.icon-reorder {color:#979797; cursor:pointer;} ul.tree .tree-cell i:hover, .icon-selector:hover i.icon-braille, .icon-selector:hover i.icon-reorder {color:#333333;} ul.tree .tree-row .tree-cell.icon-selector {} ul.tree .tree-cell input[type="checkbox"], ul.tree input[type="radio"] {position:absolute; margin:-3px 0 0 0; cursor:pointer;} ul.tree .tree-cell label {margin-bottom:0px; width:100%; cursor:pointer;} ul.tree .cell-wide {width:100%; text-align:left; position:relative;} ul.tree .cell-wide i {cursor:default;} ul.tree .tree-cell.cell-offset {padding-left:1rem; min-width:2.000rem;} ul.tree .tree-cell.cell-offset-sm {padding-left:.5rem; min-width:1.625rem;} ul.tree .tree-cell.cell-offset-lg {padding-left:1.5rem; min-width:3.075rem;} ul.tree .tree-cell.cell-offset-xl {padding-left:2rem; min-width:3.450rem;} ul.tree .tree-cell.cell-top {vertical-align:top;} ul.tree .tree-cell.cell-sm {min-width:.825rem;} /* coloring */ ul.tree.tree-hover .tree-row:hover {background:rgba(215,215,215,0.2);} ul.tree .tree-row.active, ul.tree li.active > .tree-row {background-color:rgba(160,160,160,0.1);} /* purple: rgba(30,170,252,.10) */ ul.tree .tree-row.active label .input-label {font-weight:bolder;} ul.tree.form-control {height:auto; padding:10px; padding-top:4px;} /* ==================== ul.scorecard ==================== When added to an ul.tree, it generates a scorecard */ .scorecard {} .scorecard .progress {height:22px; margin-bottom:0;} .tree.scorecard .cell-wide {padding-top:0px; padding-bottom:0px;} .tree.scorecard .cell-text {left:14px; position:absolute; color:#474747; font-weight:bolder;} .tree.scorecard .taxonomy .cell-text {font-size:1.1rem; top:0px; font-variant:small-caps;} .tree.scorecard .indicator .cell-text {font-size:1rem; top:1px; font-variant:normal;} .tree.scorecard .competence .cell-text {font-size:0.9rem; top:2px; font-weight:normal;} .tree.scorecard .cell-wide.cell-offset .cell-text {left:28px;} .score {position:absolute; left:-15px; z-index:1;} .score i {font-size:22px; position:absolute;} .tree-cell .score i.icon-score-bg {position:absolute; z-index:1; color:#777777;} .tree-cell .score i.icon-score {position:absolute; z-index:2; color:#cccccc;} .score .score-result {position:absolute; width:21px; left:5px; top:6px; text-align:center; font-size:0.8rem; font-weight:bolder; line-height:10px; z-index:3;} .score.score-self {} .score.score-supervisor i.icon-score::before {content:"\e613";} /* triangle */ .score.score-supervisor i.icon-score-bg::before {content:"\e614";} /* triangle */ .score.score-others i.icon-score::before {content:"\e616";} /* circle */ .score.score-others i.icon-score-bg::before {content:"\e617";} /* circle */ .score.score-combined i.icon-score::before {content:"\e619";} /* chat bubble */ .score.score-combined i.icon-score-bg::before {content:"\e61A";} /* chat bubble */ /* Checked states */ input[type=checkbox]:checked + .icon-score::before {content:'\e612';} .icon-score-self::before {content:"\e610";} input[type=checkbox]:checked + .icon-score-self::before {content:'\e612';} .icon-score-supervisor::before {content:"\e613";} input[type=checkbox]:checked + .icon-score-supervisor::before {content:'\e615';} .icon-score-others::before {content:"\e616";} input[type=checkbox]:checked + .icon-score-others::before {content:'\e618';} .icon-score-combined::before {content:"\e619";} input[type=checkbox]:checked + .icon-score-combined::before {content:'\e61B';} /* ============================ Cards =========================== Styles cards */ /* ----- card-square: square cards ----- */ .card-square {position:relative; width:100%;} .card-square::after {content:""; display:block; padding-bottom:100%;} .card-square > .card-content {position:absolute; width:100%; height:100%;} .card-square .card-background-opacity {position:absolute; background-color:rgb(35,55,82); opacity:0.75; width:100%; height:100%; top:0; left:0; z-index:0} .card-square .card-background-opacity-light {position:absolute; background-color:rgb(255,255,255); opacity:0.75; width:100%; height:100%; top:0; left:0; z-index:0} .card-square .img-thumbnail .card-background-opacity, .card-square .img-thumbnail .card-background-opacity-light {width:calc(100% - .5rem); height:calc(100% - .5rem); top:.25rem; left:.25rem;} .card-square .card-img-overlay {z-index:1;} .card-square .img-fluid {height:100%;} /* ----- Thumbnail cards ----- */ .card-thumbnail {position:relative; display:block; padding-bottom:5px; height:100%; border-radius:3px; overflow:hidden; box-shadow:0 1px 1px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1); transition:0.15s;} .card-thumbnail:hover {color: rgb(35,55,82); -webkit-transform: translateY(-5px); transform: translateY(-5px); cursor:pointer; -webkit-box-shadow: 0 2px 2px rgba(35, 55, 82, 0.075), 0 4px 4px rgba(35, 55, 82, 0.075), 0 8px 8px rgba(35, 55, 82, 0.075), 0 16px 16px rgba(35, 55, 82, 0.075), 0 32px 32px rgba(35, 55, 82, 0.075); box-shadow: 0 2px 2px rgba(35, 55, 82, 0.075), 0 4px 4px rgba(35, 55, 82, 0.075), 0 8px 8px rgba(35, 55, 82, 0.075), 0 16px 16px rgba(35, 55, 82, 0.075), 0 32px 32px rgba(35, 55, 82, 0.075);} a.card-thumbnail {text-decoration:none !important;} .card-thumbnail .thumbnail-image {position:relative; display:block; height:8rem; background-size:cover; background-repeat:no-repeat; background-position:center; /* height:0; overflow:hidden; */} .card-thumbnail .thumbnail-image:after {content:""; background:rgb(255,204,0); left:0; top:0; width:100%; height:100%; position:absolute; opacity:0; -webkit-transition:.25s; transition:.25s} .card-thumbnail:hover .thumbnail-image:after {opacity:.6;} /* ----- Card Slide Hover ----- */ .card-slide-hover {position:relative; padding-bottom:5px; height:100%; border-radius:3px; overflow:hidden; box-shadow:0 1px 1px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1); transition:0.15s;} .card-slide-hover:hover {color: rgb(35,55,82); -webkit-transform: translateY(-5px); transform: translateY(-5px); cursor:pointer; -webkit-box-shadow: 0 2px 2px rgba(35, 55, 82, 0.075), 0 4px 4px rgba(35, 55, 82, 0.075), 0 6px 6px rgba(35, 55, 82, 0.075), 0 8px 8px rgba(35, 55, 82, 0.075); box-shadow: 0 2px 2px rgba(35, 55, 82, 0.075), 0 4px 4px rgba(35, 55, 82, 0.075), 0 6px 6px rgba(35, 55, 82, 0.075), 0 8px 8px rgba(35, 55, 82, 0.075);} a.card-slide-hover {text-decoration:none !important;} .card-slide-hover .thumbnail-image {position:relative; display:block; height:8rem; background-size:cover; background-repeat:no-repeat; background-position:center; /* height:0; overflow:hidden; */} .card-slide-hover .thumbnail-image:after {content:""; background:rgb(255,204,0); left:0; top:0; width:100%; height:100%; position:absolute; opacity:0; -webkit-transition:.25s; transition:.25s} .card-slide-hover:hover .thumbnail-image:after {opacity:.6;} .card-slide-hover .hover-child:hover {background-color:#f9f9cc !important;} .card-slide-hover figure {overflow:auto;} /* ----- Card Brief ----- */ .card-brief {position:relative; height:100%; overflow:hidden; box-shadow:0 1px 1px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.1); transition:0.15s; border-radius:.5rem; -webkit-border-radius:.5rem; -moz-border-radius:.5rem; -ms-border-radius:.5rem; -o-border-radius:.5rem;} .card-brief:hover {color: rgb(35,55,82); -webkit-transform: translateY(-5px); transform: translateY(-5px); -webkit-box-shadow: 0 2px 2px rgba(35, 55, 82, 0.075), 0 4px 4px rgba(35, 55, 82, 0.075), 0 6px 6px rgba(35, 55, 82, 0.075), 0 8px 8px rgba(35, 55, 82, 0.075); box-shadow: 0 2px 2px rgba(35, 55, 82, 0.075), 0 4px 4px rgba(35, 55, 82, 0.075), 0 6px 6px rgba(35, 55, 82, 0.075), 0 8px 8px rgba(35, 55, 82, 0.075);} a.card-brief {text-decoration:none !important;} .card-brief .card-header {background-color:white; text-transform:uppercase; font-weight:bold; border-bottom:1px dotted rgba(0,0,0,.125);} .card-brief .card-body {padding:0;} .card-brief .card-body .legend {text-transform:none; padding:.5rem 0 0 1rem; margin-bottom:0; font-weight:normal; border:0;} .card-brief .card-body .border-top {border-top-style:dotted !important;} .card-brief .card-body .border-bottom {border-bottom-style:dotted !important;} .card-brief .card-footer {display:flex; justify-content:space-between; align-items:center; background:none; border-top-style:dotted;} /* ----- Practice Cards ----- */ .card.card-practice {} .card.card-practice .card-title {font-weight:bolder; font-size:1.25em; line-height:1.25em;} .card.card-practice .card-text {font-size:.9em; line-height:1.25em; color:#777777;} .card.card-practice .card-footer {background-color:#ffffff; padding-top:0; margin-top:-.5em; border-top:none;} /* ----- Contact Cards ----- */ .contact-card {} .card.contact-card {padding:5px; min-height:120px; margin-bottom:12px; text-align:center;} .contact-card .options-menu {position:absolute; top:10px; right:16px;} .contact-card .contact-name {display:flex; align-items:center; justify-content:center; line-height:1em; min-height:32px;} .contact-card .contact-occupation {line-height:1em; min-height:32px;} .contact-card .group-manager {position:absolute; top:10px; left:14px;} .contact-card .group-manager i {font-size:1.25rem; color:#777777;} .options-menu {position:absolute; right:10px; top:20px;} .options-menu .dropdown-menu {font-size:0.9rem; padding:3px 0; min-width:114px; border-radius:3px; box-shadow:0 1px 2px rgba(0, 0, 0, 0.176);} .options-menu .dropdown-menu-end {right:-4px;} .options-menu .dropdown-menu li.dropdown-divider {margin:3px 0;} .options-menu .dropdown-menu > li > a {padding:4px 8px;} /* ----- Event Cards ----- */ .card-event {} .card-event .card-body {position:relative; min-height:8em; padding:0; cursor:pointer;} .card-background-opacity {position:absolute; background-color:#FFFFFF; opacity:0.5; height:100%; width:100%; top:0; bottom:0; left:0; right:0; z-index:0;} /*----- CARD-INPUT-ELEMENTS ------*/ .card-input-element:checked + .card-input {box-shadow: 0 0 1px 1px RGB(35,55,82); background:rgba(35,55,82,.1);} .card-input-element:checked + .card-input > .icon-radio::before {content:'\e600'} /* icon-ok */ .card-input-element:disabled + .card-input {background-color:#e7e7e7; opacity:.5;} .card-input-element-lg:checked + .card-input {box-shadow: 0 0 3px 3px RGB(35,55,82); background:rgba(35,55,82,.1);} .card-input-element-lg:disabled + .card-input {background-color:#e7e7e7; opacity:.5;} .category {position:absolute; display:inline-block; z-index:1; border-radius:8px; padding:2px 10px 1px; font-size:.85rem; background:rgba(255,255,255,0.875); font-weight:600; left:1rem; top:1rem; max-width:calc(100% - 32px); -webkit-transition:0.35s; transition:0.35s} .resourceType {display:flex; top:.75rem; right:.75rem; align-items:center; border-radius:50%; color:rgb(35,55,82); background-color:rgb(244,245,246); width:2rem; height:2rem; padding:.25rem; font-size:1.1rem; opacity:.9;} .resourceType.floatRight {position:absolute;} .avatars {display:inline-flex; list-style-type:none; margin:auto 0; z-index:1;} .avatar {position:relative; border:2px solid #fff; border-radius:50%; overflow:hidden;} .avatar:not(:first-child) {margin-left:-26px;} .avatar img {width:100%; display:block;} .avatar:nth-child(1) {z-index:9;} .avatar:nth-child(2) {z-index:8;} .avatar:nth-child(3) {z-index:7;} .avatar:nth-child(4) {z-index:6;} .avatar:nth-child(5) {z-index:5;} .avatar:nth-child(6) {z-index:4;} .avatar:nth-child(7) {z-index:3;} .avatar:nth-child(8) {z-index:2;} .avatar:nth-child(9) {z-index:1;} /* ============================ progressCircle =========================== */ .progressCircle {position:relative; display:table;} svg.progressRing {width:40px; height:40px;} svg.progressRing circle {width:100%; height:100%; fill:none; stroke-width:3; stroke-linecap:round; stroke-dasharray:113px;} .progressCircle .progressLabel {position:absolute; top:31%; left:25%; color:rgba(35,55,82,.85);} .progressCircle.pending {} .progressCircle.pending svg.progressRing circle {stroke:#ccc; fill:#ccc;} .progressCircle.pending .progressLabel {color:#666;} .progressCircle.inProgress {} .progressCircle.inProgress svg.progressRing circle {stroke:rgb(35,55,82); fill:#F7F7F7;} .progressCircle.inProgress .progressLabel {color:rgba(35,55,82,.85);} .progressCircle.danger {} .progressCircle.danger svg.progressRing circle {stroke:rgb(35,55,82); fill:#B94A48;} .progressCircle.danger .progressLabel {color:rgb(35,55,82);} .progressCircle.awaiting {} .progressCircle.awaiting svg.progressRing circle {stroke:#FFCC00; fill:#FFCC00;} .progressCircle.awaiting .progressLabel {color:#666;} .progressCircle.completed {} .progressCircle.completed svg.progressRing circle {stroke:#468847; fill:#468847;} .progressCircle.completed .progressLabel {color:#fff;} /* ============================ ul.timeline =========================== ul.timeline transforms a tree element into a vertical timeline (ordered events in sequence). Panels are shown on the right side of the vertical line. */ ul.timeline {padding-left:7px;} ul.timeline ul {padding-top:10px;} ul.timeline li {padding-bottom:15px; position:relative;} ul.timeline ul li {background-position:0px 9px;} ul.timeline li ul:first-child {background-position:0 20px;} ul.timeline .tree-row:hover {background:transparent;} ul.timeline .tree-row.active {background:transparent;} .timeline li .timeline-badge {position:absolute; width:17px; height:17px; top:13px; margin-left:-8px; border-radius:50%; background-color:#CCC; border:1px solid #999;} .timeline li .tree-row:hover .timeline-badge {background-color:#979797; border:1px solid #777777;} .timeline li .tree-row.active .timeline-badge {background-color:#487dad; border:1px solid #1d587f;} .timeline li .timeline-panel {margin-left:21px; background:#fcfcfc; border:1px solid #e5e5e5; border-radius:8px; padding:10px 12px; position:relative;} .timeline li .timeline-panel:before {position:absolute; top:12px; left:-9px; display:inline-block; content:" "; border-top:9px solid transparent; border-left:0 solid #e5e5e5; border-right:9px solid #e5e5e5; border-bottom:9px solid transparent;} .timeline li .timeline-panel:after {position:absolute; top:13px; left:-8px; display:inline-block; content:" "; border-top:8px solid transparent; border-left:0 solid #ffffff; border-right:8px solid #ffffff; border-bottom:8px solid transparent;} .timeline li .tree-row.active .timeline-panel {border:1px solid #1d587f; background-color:#effbff;} .timeline li .tree-row.active .timeline-panel:before {border-left-color:#1d587f; border-right-color:#1d587f; left:-10px;} .timeline li .tree-row.active .timeline-panel:after {border-left-color:#effbff; border-right-color:#effbff;} .timeline li .timeline-item {margin-top:10px; margin-left:32px;} /* ============================ ul.tree .status-card =========================== An item that looks like a card with a vertical status line to its left */ ul.tree .status-card {position:relative; padding:2px 6px 2px 10px; margin-right:10px; color:#777777;} ul.tree .status-card:before {content:""; position:absolute; top:8px; bottom:5px; width:4px; background-color:#979797; margin:-3px 0 0 -10px; border-radius:2px;} ul.tree .status-card.yellow:before {background-color:#F89406;} ul.tree .status-card.green:before {background-color:#468847;} ul.tree .status-card.red:before {background-color:#B94A48;} ul.tree .status-card.blue:before {background-color:#3A87AD;} /* ============================ ul.tree .status-card =========================== An item that looks like a card with a vertical status line to its left */ .feed {} .feed .card {margin-bottom:1rem;} .feed .card-footer {padding-top:.25rem; padding-bottom:1rem; background-color:transparent; border-top:none;} .feed .card .card-title {cursor:pointer; font-weight:bolder; font-size:1.25rem;} .feed .card .card-title:hover {text-decoration:underline;} .feed .card .card-parent-entity {padding-top:6px; font-size:0.9rem; color:#777777; font-variant:small-caps; cursor:pointer;} .feed .card .card-parent-entity:hover {text-decoration:underline;} .feed .card .card-tag {} .label-competence {position:relative; display:inline-block; border-radius:4px; border:1px solid #e5e5e5; cursor:pointer;} .label-competence .label-tag {position:absolute; height:100%; width:5px; border-top-left-radius:4px; border-bottom-left-radius:4px;} .label-competence .label-name {padding:2px 6px; font-size:0.8rem; color:#777777;} .label-competence .label-tag + .label-name {padding-left:10px;} .label-competence:hover {border:1px solid #cccccc;} .label-competence:hover .label-name {text-decoration:underline;} /* ============================ ul.ticket-items =========================== A list of tickets for user purchase */ ul.ticket-items {margin:0; padding:0; list-style:none; width:100%; border-radius:7px;} ul.ticket-items li {padding:0; margin:0; list-style:none;} ul.ticket-items .ticket-item {padding:1em; border-top:1px solid rgba(0, 0, 0, 0.125)} ul.ticket-items .ticket-item:first-child {margin-top:0px; border-top:none;} ul.ticket-items .ticket-item-lg {min-height:36px;} ul.ticket-items.checkout .ticket-item {border-top:1px solid rgba(255, 255, 255, 0.125)} ul.ticket-items.checkout .ticket-item:first-child {border-top:1px solid rgba(255, 255, 255, 0.125)} ul.ticket-items.checkout {margin-bottom:15px;} ul.ticket-items.checkout li {padding:10px 15px;} ul.ticket-items.checkout li.ticket-total {padding-bottom:5px; border-top:1px solid rgba(255, 255, 255, 0.125)} .card.card-ticket {cursor:pointer;} .card.card-ticket.active {box-shadow:0 0 5px rgba(0, 0, 0, 0.25); transition:all 0.5s ease 0s;} /* ==================== Action Plan ==================== Items that show in the rightPanel actionPlan */ .plan {} .plan-edit {display:block; height:17px; padding:0 15px; margin:6px 0px; text-align:right; font-size:0.8rem;} .plan-edit > span.edit-link {font-color:#474747; cursor:pointer; border-radius:0.25em; padding:4px 12px; border:1px solid #ffffff;} .plan-edit > span.edit-link:hover {text-decoration:underline; border:1px solid #999999;} .plan-score {display:flex; align-items:center; justify-content:center; white-space:nowrap; border-radius:0.25em; color:#ffffff; font-size:0.8rem; font-weight:bolder; height:22px; width:30px;} /* ==================== 9-Box Grid ==================== */ .matrix {position:relative; height:0; padding-bottom:100%;} .matrix .matrix-inset {position:absolute; top:0; left:0; height:100%; width:100%; font-size:0} .matrix .matrix-inset .matrix-box {display:inline-block; border:1px solid #999; opacity:0.5;} .matrix .matrix-inset .matrix-box:hover, .matrix .matrix-inset .matrix-box.active {opacity:1;} .matrix-9 .matrix-box {height:33.33333%; width:33.33333%;} /* 9-Box display */ .matrix-4 .matrix-box {height:50%; width:50%;} /* 4-Box display */ .matrix .score {top:-18px;} /* Background colors*/ .matrix-9 .matrix-box:nth-child(1), .matrix-9 .matrix-box:nth-child(5), .matrix-9 .matrix-box:nth-child(9), .matrix-4 .matrix-box:nth-child(1), .matrix-4 .matrix-box:nth-child(4) {background-color:#F1F1BE;} /* Blue */ .matrix-9 .matrix-box:nth-child(2), .matrix-9 .matrix-box:nth-child(3), .matrix-9 .matrix-box:nth-child(6), .matrix-4 .matrix-box:nth-child(2) {background-color:#D2F1C8;} /* Green */ .matrix-9 .matrix-box:nth-child(4), .matrix-9 .matrix-box:nth-child(7), .matrix-9 .matrix-box:nth-child(8), .matrix-4 .matrix-box:nth-child(3) {background-color:#F1C8C8;} /* Red */ /* Round corners */ .matrix-9 .matrix-box:nth-child(1), .matrix-4 .matrix-box:nth-child(1) {border-top-left-radius:10px;} .matrix-9 .matrix-box:nth-child(3), .matrix-4 .matrix-box:nth-child(2) {border-top-right-radius:10px;} .matrix-9 .matrix-box:nth-child(7), .matrix-4 .matrix-box:nth-child(3) {border-bottom-left-radius:10px;} .matrix-9 .matrix-box:nth-child(9), .matrix-4 .matrix-box:nth-child(4) {border-bottom-right-radius:10px;} /* Hide extra boxes*/ .matrix-4 .matrix-box:nth-child(5), .matrix-4 .matrix-box:nth-child(6), .matrix-4 .matrix-box:nth-child(7), .matrix-4 .matrix-box:nth-child(8), .matrix-4 .matrix-box:nth-child(9) {display:none;} /* ================== Icon-font inputs ================== Replacement of checkboxes and radio buttons with icon fonts */ input[type=checkbox]:not(.featureSelector):not(.form-check-input), input[type=radio] {position:absolute; opacity:0; margin-top:6px; height:24px; width:22px; cursor:pointer;} input[type=checkbox]:checked:not(.featureSelector):not(.form-check-input), input[type=radio]:checked, input[type=checkbox]:focus:not(.featureSelector):not(.form-check-input), input[type=radio]:focus {outline:none !important; opacity:0 !important;} input[type=checkbox] + .icon-checkbox, input[type=radio] + .icon-radio {color:#777777; display:table-cell;} .has-error input[type="checkbox"] + .icon-checkbox, .has-error input[type="radio"] + .icon-radio {color:#b94a48;} /* form validation */ .has-success input[type="checkbox"] + .icon-checkbox, .has-success input[type="radio"] + .icon-radio {color:#468847;} /* form validation */ table tbody tr td.centered input[type=checkbox] + .icon-checkbox, table tbody tr td.centered input[type=radio] + .icon-radio {display:inline-block;} /* Icon colors */ input[type=checkbox]:hover + .icon-checkbox, input[type=radio]:hover + .icon-radio, input[type=checkbox]:indeterminate + .icon-checkbox, input[type=checkbox] + .icon-checkbox:hover, input[type=radio] + .icon-radio:hover {color:#777777;} input[type=checkbox]:checked + .icon-checkbox, input[type=radio]:checked + .icon-radio {color:#333333;} input[type=checkbox]:disabled + .icon-checkbox, input[type=radio]:disabled + .icon-radio, input[type=checkbox][disabled] + .icon-checkbox, input[type=radio][disabled] + .icon-radio, input[type=checkbox].disabled + .icon-checkbox, input[type=radio].disabled + .icon-radio {color:#999999;} /* Icon content */ input[type=checkbox] + .icon-checkbox::before {content:"\e806";} /* icon-check-empty */ input[type=checkbox]:checked + .icon-checkbox::before {content:'\e600';} /* icon-ok */ input[type=checkbox]:indeterminate + .icon-checkbox::before {content:'\e604';} /* icon-indeterminate */ input[type=radio] + .icon-radio::before {content:"\e602";} /* icon-radio */ input[type=radio]:checked + .icon-radio::before {content:'\e600';} /* icon-ok */ /* Special settings */ .input-label {font-weight:normal; padding:0; opacity:.5; display:table-cell;} .input-label span.label {font-size:9px; vertical-align:middle; margin-left:4px;} .input-label.checked {opacity:1;} label input[type=checkbox]:disabled + .icon-checkbox + .input-label, label input[type=radio]:disabled + .icon-radio + .input-label {opacity:.5; cursor:not-allowed;} input[type=checkbox]:checked + .icon-checkbox.colored::before, input[type=radio]:checked + .icon-radio.colored::before {color:unset; content:'\e601';} label input[type=checkbox]:checked + .icon-checkbox + .input-label, label input[type=radio]:checked + .icon-radio + .input-label {opacity:1;} .form-check.form-switch label.form-check-label {opacity:0.5; cursor:pointer;} .form-check.form-switch input[type=checkbox]:checked + label.form-check-label {opacity:1;} /* ============================ table.tree =========================== table.tree transforms a table element into a hierarchical tree (like a folder structure). */ table.table-tree {} table:not(.table-tree) .tree-toggle {display:none;} table.table-tree tbody .tree-toggle {padding:12px 0px; vertical-align:middle;} table.table-tree tbody tr:not(:nth-child(1)) .tree-toggle {border-top:none !important;} table.table-tree .table-tree tbody tr:first-child td {border-top:none !important;} table.table-tree tbody > tr:first-child td.tree-toggle + td, table.table-tree tbody > tr:last-child td.tree-toggle + td {border-left:none;} table.table-tree tbody > tr:not(:first-child) td.tree-toggle {background:url(../../images/tree/node.png) repeat-y 23px 12px;} table.table-tree tbody tr:first-child td.tree-toggle {background:none;} table.table-tree.table-hover > tbody tr:first-child:hover td.tree-toggle {background-color:#F5F5F5;} table.table-tree tbody tr:last-child td.tree-toggle {background:url(../../images/tree/lastnode.png) repeat-y 23px -100px;} table.table-tree tbody .entity-priority {color:#999; background-color:#F0F0F0; border-bottom:1px solid #F0F0F0; border-right:1px solid #e5e5e5; } table.table-tree tbody tr:last-child td.entity-priority {border-bottom:1px solid #e5e5e5;} table.table-tree table.table-tree {margin-bottom:0px;} /* ============================ Assessment calendar =========================== The timeline component in the scorecard assessment selection */ .calendar {position:relative; background-color:#FFF; margin:0px 14px 20px 70px;} .calendar .calendar-selector {position:absolute; margin-left:-70px; top:-34px;} .calendar .calendar-bar {position:relative; margin-top:35px; height:3px; width:100%; background-color:#CCC; border-radius:2px;} .calendar .calendar-year {position:relative; top:-40px;} .calendar .calendar-year div {position:absolute; height:15px; width:28px; left:-14px; text-align:center; font-size:0.8rem; font-weight:bolder; color:#AAA;} .calendar .calendar-month {position:relative; top:-24px;} .calendar .calendar-month div {position:absolute; height:15px; width:28px; left:-14px; text-align:center; font-size:9px; color:#BBB; text-transform:uppercase;} .calendar .calendar-item {position:relative; top:-11px;} .calendar .calendar-item div {position:absolute; height:20px; width:20px; left:-10px; cursor:pointer; border-radius:50%; background-color:#CCC; border:2px solid #FFF;} .calendar .calendar-item div.active {border-color:#333333; background-color:#777777;} .calendar .calendar-item div:hover {border-color:#777777;} .calendar .calendar-reviewers {margin-top:20px; height:22px; } /* ================== Input Combo ================== To be used in a menu, combining descriptive and action icons to a text input - like a date selection input */ .input-combo {position:relative; display:table; border-collapse:separate;} .input-combo .form-control, .input-combo-pre, .input-combo-action {display:table-cell; vertical-align:middle;} .input-combo .form-control {padding:0 0 0 5px; width:70px; font-size:1rem; height:38px;} .input-combo .form-control:not(:last-child) {border-top-right-radius:0px; border-bottom-right-radius:0px; border-right:none;} .input-combo .input-combo-action {padding:0px 5px 0px 0px; font-size:0.8rem; min-width:4px; border:1px solid #d7d7d7; border-left:none; background:#FFFFFF; border-top-right-radius:5px; border-bottom-right-radius:5px; border-bottom-left-radius:0px; border-top-left-radius:0px; box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;} .input-combo .input-combo-action:focus {border-color:#66AFE9; color:#333333; box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);} .input-combo .input-combo-pre i {color:#333333;} .input-combo .input-combo-action i {color:#979797;} .input-combo .input-combo-action i {padding:7px 0px 8px 3px; vertical-align:middle;} .input-combo .input-combo-action:hover i {color:#333333; cursor:pointer;} /* ================== UI Group Buttons ================== Combination of two choice buttons for an upvote and a downvote */ .ui-group-buttons {display:-ms-flexbox; display:-webkit-inline-flex; display:inline-flex; vertical-align:middle; margin:0px 4px;} .ui-group-buttons:after {content:"."; display:block; height:0; clear:both; visibility:hidden; } .ui-group-buttons .btn {float:left; border-radius:0; padding:5px 10px;} .ui-group-buttons .btn:first-child {margin-left:0; border-top-left-radius:.25em; border-bottom-left-radius:.25em; padding-right:12px} .ui-group-buttons .btn:last-child {border-top-right-radius:.25em; border-bottom-right-radius:.25em; padding-left:12px} .ui-group-buttons .button-positive {background-color:#F5FFF5; border-color:#D2F1C8; color:#777777;} .ui-group-buttons .button-negative {background-color:#FFF5F5; border-color:#F1C8C8; color:#777777;} .ui-group-buttons .button-positive-active {background-color:#5CB85C; border-color:#4CAE4C; color:#FFFFFF;} .ui-group-buttons .button-negative-active {background-color:#D9534F; border-color:#D43F3A; color:#FFFFFF;} .ui-group-buttons.btn-compact {margin:0px;} .ui-group-buttons.btn-compact .btn {padding:6px 8px;} .ui-group-buttons.btn-compact .btn:first-child {padding-right:8px} .ui-group-buttons.btn-compact .btn:last-child {padding-left:8px} /* ================== nav-filter ================== Reactive search element that grows when active */ .entity-toolbar .nav-pills li.nav-item.nav-filter {margin-right:0.25rem;} .nav-filter input.form-control {width:5rem; transition:width 0.5s ease;} .nav-filter input.form-control:hover {width:7.5rem;} .nav-filter input.form-control:focus {width:9rem;} /* ================== Rating Items ================== Combination of two choice buttons for an upvote and a downvote */ .rating-item {margin-bottom:30px;} .rating-item-body {display:table-cell; vertical-align:top; padding-right:15px; width:100%;} .rating-item-button {display:table-cell; vertical-align:middle;} .rating-item-button button {min-height:56px; min-width:80px; margin-left:8px} .rating-item-button .button-negative {background-color:#FFF5F5; border-color:#F8D8D8; color:#777777;} .rating-item-button .button-neutral {background-color:#effbff; border-color:#c5e9f3; color:#777777;} .rating-item-button .button-positive {background-color:#F5FFF5; border-color:#D2F1C8; color:#777777;} .rating-item-button .button-negative-active {background-color:#D9534F; border-color:#D43F3A; color:#FFFFFF;} .rating-item-button .button-neutral-active {background-color:#31b0d5; border-color:#2ca1c2; color:#FFFFFF;} .rating-item-button .button-positive-active {background-color:#5CB85C; border-color:#4CAE4C; color:#FFFFFF;} .rating-item-sm {margin-bottom:15px;} .rating-item-sm .rating-item-button button {min-height:40px; min-width:74px; margin-left:4px} .rating-item-sm .btn {font-size:0.9rem; padding:6px 8px;} .rating-item-sm .rating-item-button {padding-top:4px;} /* ============================ reviewerRole Shapes ============================ */ .triangle {position:absolute; top:-8px; left:-6px;} .triangle-user {position:absolute; font-size:0.8rem; font-weight:bolder; margin-left:-5px; margin-top:1px;} .triangle-bg {background-color:#fcfcfc; transform:rotate(-60deg) skewX(-30deg) scale(1,.866);} .triangle-bg, .triangle-bg:before, .triangle-bg:after {width:12px; height:12px; border-top-right-radius:40%;} .triangle-bg:before, .triangle-bg:after {content:''; position:absolute; background-color:inherit;} .triangle-bg:before {transform:rotate(-135deg) skewX(-45deg) scale(1.414,.707) translate(0,-50%);} .triangle-bg:after {transform:rotate(135deg) skewY(-45deg) scale(.707,1.414) translate(50%);} .square {position:absolute; top:-8px; left:-8px;} .square-bg {position:absolute; height:16px; width:16px; border-radius:20%; transform:rotate(45deg)} /* ============================ scrollableMenu ============================ */ .scrollableMenu {height:auto; max-height:300px; overflow-x:hidden;} .scrollable {height:auto; overflow-x:hidden;} /* ============================ Skill pills ============================ skill pills similar to the ones in linkedIn */ .skills-section {} span.skill-pill {display:inline-block; vertical-align:middle; overflow:hidden; white-space:nowrap; cursor:default;} a.endorse-count {min-width:18px; padding:0 2px; width:auto;} span.skill-pill a.endorse-count, span.skill-pill span.endorse-item-name {float:left; line-height:24px;} span.skill-pill a.endorse-count {color:#FFFFFF; background-color:#1BA8E5; border-bottom:1px solid #1BA8E5; border-radius:3px 0 0 3px; text-shadow:0 1px 0 #777777; font-size:0.8rem; font-weight:normal; line-height:14px; text-align:center; transition:min-width 0.2s linear 0s;} span.skill-pill a.endorse-count span.num-endorsements {color:#FFFFFF; display:inline; font-weight:bolder;} span.skill-pill span.endorse-item-name {border-radius:0 3px 3px 0; background-color:#fcfcfc; border-bottom:1px solid #e5e5e5; border-radius:3px; border-right:1px solid #e5e5e5; color:#333333; font-size:0.8rem; font-weight:normal; line-height:17px; padding:0 13px; position:relative;} span.skill-pill span.endorse-item-name a.endorse-item-name-text {color:#333333; font-size:0.8rem; font-weight:normal; line-height:17px; text-decoration:none;} /* ============================ actions ============================ Composed of: .action-items: a table cell or form column tag that removes the padding of the parent element and formats actionable items (i, a, button) within .icon-action: an icon tag (for the element) to format and position it in navs and stand-alone situations */ .table thead > tr > th.action-items, .table tbody > tr > th.action-items, .table thead > tr > td.action-items, .table tbody > tr > td.action-items {padding:0px; vertical-align:middle !important; text-align:center; width:4em;} .action-items > [class^="icon-"], .action-items > a > [class^="icon-"] {font-size:2em;} .action-items > [class^="icon-"], .action-items > a > [class^="icon-"], .icon-action, .icon-action-small, .actionable-item {color:#999; cursor:pointer;} .action-items > [class^="icon-"]:hover, .action-items > a > [class^="icon-"]:hover, .icon-action:hover, .icon-action-small:hover, .actionable-item:hover {color:#303236;} .icon-action-active {color:#333333; cursor:pointer;} .icon-action-active:hover {color:#777777;} .icon-action, .icon-action-active {display:inline-block; font-size:1.5rem; padding:2px 10px;} .icon-action-small {display:inline-block; font-size:1rem; padding:0px 10px;} .icon-button {display:inline-block; font-size:1.5rem; padding:7px 0px;} .icon-clickable {color:#979797; cursor:pointer;} .icon-clickable:hover {color:#333333;} .icon-drag {position:absolute; margin:0 0 0 -30px; padding:6px 0 0 0 !important; font-size:1rem !important; color:#c7c7c7 !important; cursor:move !important;} .icon-drag:hover {color:#333333 !important;} .action-items > [class^="icon-"], .action-items > a > [class^="icon-"] {position:relative; display:inline-block;} .action-items > a {text-decoration:none; padding:0} .action-items > .icon-action {padding:10px 6px} .mb-100 .action-items {padding-left:0px; padding-right:0px;} .mb-100 .action-items > [class^="icon-"] {display:inline-block; font-size:1rem; padding:2px 4px 8px 4px; width:100%; text-align:center;} .mb-100 i.icon-action {width:100%; padding-top:7px;} .mb-100 label > i.icon-action {font-size:1rem; padding:2px 8px 2px 8px; text-align:center; width:auto;} .btn-apply {background-color:#dddddd; border-color:#bbbbbb;} /* ============================ Detail Icon ============================ Right-arrow icon used to show details of an entity on the main page */ i.item-details {display:inline-block; font-size:28px; vertical-align:middle; padding:0px 0px 0px 8px;} .action-items > [class^="icon-"].item-details, .action-items > a > [class^="icon-"].item-details {font-size:28px;} ul.tree .tree-cell i.item-details {display:inline-block; font-size:24px; vertical-align:middle; padding:0px 0px 0px 8px} td.item-details {padding:0px; text-align:right; vertical-align:middle !important;} /* Showing items on hover */ .hidden-item, .item-details {opacity:0.2;} .faded-item, .faded-contained-item {opacity:0.65;} .faded-item-light {opacity:0.75;} .faded-item-lighter {opacity:0.5;} .tree-row:hover .hidden-item, tr:hover .hidden-item, .entity:hover .hidden-item, .tree-row:hover .item-details, tr:hover .item-details, .entity:hover .item-details, .hidden-item-parent:hover .hidden-item, .faded-item-parent:hover .faded-item, .faded-item-parent:hover .faded-item-light, .faded-contained-item-parent:hover .faded-contained-item {opacity:1; -webkit-transition:all .3s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease;} .tree-row.active .hidden-item, li.active > .tree-row .hidden-item, tr.active .hidden-item, .entity.active .hidden-item {opacity:1;} .tree-row.active .item-details, li.active > .tree-row .item-details, tr.active .item-details, .entity.active .item-details {color:#333333; opacity:1;} /* ============================ Invisible Item ============================ Keep an item hidden until its parent element is hovered on */ .invisible-item {display:none;} .invisible-item-parent:hover .invisible-item {display:block; -webkit-transition:all .3s ease; -moz-transition:all .5s ease; -ms-transition:all .5s ease; -o-transition:all .5s ease; transition:all .5s ease;} /* ============================ Status Items ============================ Formatting the status icons */ table td.status-item {width:2.75rem; padding:0; font-size:1.75rem; text-align:right; vertical-align:middle;} table td.status-item .icon-pending {color:#F89406;} table td.status-item .icon-inProgress {color:#3A87AD;} table td.status-item .icon-completed, table td.status-item .icon-accepted, table td.status-item .icon-closed {color:#468847;} table td.status-item .icon-rejected, table td.status-item .icon-discarded {color:#B94A48;} table td.status-item .icon-paused, table td.status-item .icon-highlighted {color:#D9534F;} table td.action-item {padding:0px; vertical-align:middle !important; text-align:right; width:4rem;} .table tbody > tr > th.status-items, .table tbody > tr > td.status-items {padding:0px; text-align:center; vertical-align:middle;} td.status-items > a > [class^="icon-"] {font-size:2em; cursor:default;} th.status-items > a > [class^="icon-"] {font-size:2em;} li.status-items > a {} li.status-items > a > i {display:table-cell; vertical-align:middle; font-size:1.25rem;} li.status-items > a > span {display:table-cell; vertical-align:middle; padding:6px;} i.status-items {font-size:1rem;} .status-items .icon-pending, .status-items.icon-pending, .status-items, .status-pending {color:#F89406;} .status-items .icon-inProgress, .status-items.icon-inProgress {color:#3A87AD;} .status-items .icon-completed, .status-items.icon-completed, .status-items .icon-accepted, .status-items.icon-accepted, .status-items .icon-closed, .status-items.icon-closed {color:#468847;} .status-items .icon-rejected, .status-items.icon-rejected, .status-items .icon-discarded, .status-items.icon-discarded {color:#B94A48;} .status-items .icon-paused, .status-items.icon-paused, .status-items .icon-highlighted, .status-items.icon-highlighted {color:#D9534F;} .status-items .icon-draft {color:#999999;} .status-items .icon-published {color:#3A87AD;} .status-items .icon-archived {color:#333333;} .status-items .icon-text {display:block; margin-left:10px; border-radius:50%; width:24px; height:24px; background-color:#777777;} .status-items .icon-text .text {color:#FFFFFF; font-weight:bolder; font-size:0.8rem; line-height:24px;} /* ============================ Practice State ============================ State labels for practices */ .item-state {display:block; padding:6px 8px; border:1px solid #e5e5e5; border-radius:8px; background-color:#efefef; font-size:0.8rem; font-weight:bolder; margin-top:4px; color:#979797;} /* ==================== Status Tables ==================== */ .table > tbody > tr > td.active, .table > tbody > tr > th.active, .table > tbody > tr.active > td, .table > tbody > tr.active > th, .table-hover > tbody > tr.active > td {background:rgba(35,55,82,.05) url(../../images/background/noise.png);} .table tbody tr.active td.entity-priority {border-right-color:transparent; border-bottom:1px solid #e5e5e5; border-top:1px solid #e5e5e5; font-weight:normal} .table tbody tr.active td.data, .table tbody tr.active td.data input {font-weight:normal;} .table tbody tr.active td.date-due {font-weight:normal;} .table tbody tr.completed td {background-color:#efefef; background-size:7px 7px; opacity:1; border-top:1px solid #FFF; background-image:linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .table tbody tr.completed td.entity-priority {border-right-color:transparent; border-bottom:1px solid #e5e5e5;} .table tbody tr.completed td.data, .table tbody tr.completed td.data input {color:#979797; text-decoration:line-through;} .table tbody tr.completed td.date-due {color:#979797;} .table tbody tr.pastDue td {background-color:#FFF6F6; background-size:7px 7px; opacity:1; border-top:1px solid #FFFFFF; background-image:linear-gradient(135deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);} .table tbody tr.pastDue td.date-due {color:#DD514C;} .table tbody tr.pastDue td.entity-priority {background-color:#fcfcfc;} td.entity-priority {color:#999; background-color:#fcfcfc; border-bottom:1px solid #fcfcfc; border-right:1px solid #e5e5e5; } .table-border-bottom tr:last-child td.entity-priority {border-bottom:1px solid #e5e5e5;} /* ==================== advancement ==================== */ .advance {display:inline-block; height:20px; width:21px; text-align:center; padding-top:3px; white-space:nowrap; background-color:#979797; border-radius:50%; color:#fff; font-size:0.7rem;} /* ==================== stat-group ==================== */ ul.stat-group {background:#FFF; border:1px solid #e5e5e5; border-radius:3px; display:inline-block; overflow:hidden; margin:0; padding:0; white-space:nowrap; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;} ul.stat-group li {display:table-cell; list-style-type:none; margin:0;} ul.stat-group li a {display:inline-block; height:20px; padding:0 6px; border-left:1px solid #e5e5e5; color:#777777; font-size:.9em; text-decoration:none} ul.stat-group li:first-child a {border-left:none} .stat-group .stat-created {background-color:#979797;} .stat-group .stat-pending, .stat-group .stat-awaiting {background-color:#F89406} .stat-group .stat-progress {background-color:#3A87AD; color:#FFFFFF;} .stat-group .stat-rejected {background-color:#B94A48; color:#FFFFFF;} .stat-group .stat-completed {background-color:#468847; color:#FFFFFF;} .stat-group .stat-closed {background-color:#333333; color:#FFFFFF;} .stat-group .stat-created a, .stat-group .stat-pending a, .stat-group .stat-progress a, .stat-group .stat-awaiting a, .stat-group .stat-rejected a, .stat-group .stat-completed a, .stat-group .stat-closed a {border:none; color:#FFF; font-size:.8em; font-weight:bolder; text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25); cursor:default} ul.stat-group .stat-statistics:hover {background:#1d587f} ul.stat-group .stat-statistics:hover a {color:#FFF} ul.stat-group .stat-statistics a {display:inline-block; height:22px; line-height:22px; padding:0 6px; border-left:1px solid #e5e5e5; color:#777777; font-size:.9em; text-decoration:none} /* ================== Entity definitions ================== Styling for all livanto entities, including single or listing of posts that can be used in combination with ui-group-buttons */ .entity {padding:1rem;} .entity-name, .entity-name input.input-borderless {font-size:1.25rem; font-weight:bolder; color:#474747;} .entity-name .input-group-text.input-borderless {font-size:.85rem; font-weight:normal;} .entity-definition, .entity-definition input.input-borderless {color:#777777;} .entity-description {margin-bottom:16px;} .entity-synopsis {padding:12px 20px; margin:20px 0px 26px 0px; min-height:72px; border-top:1px solid #dddddd; border-bottom:1px solid #dddddd;} .entity-meta {border-left:5px solid #eee; padding:10px 20px; margin-bottom:20px; font-style:italic;} .entity-legend {font-size:0.9rem; color:#999; font-variant:small-caps; margin-bottom:4px; font-style:normal;} .entity-source {margin-left:15px;} .entity-source .form-control {font-size:0.9rem;} .entity-info {font-size:0.8rem; color:#777777; margin:4px 0px; font-style:italic;} .entity-body {color:#474747; margin-top:6px; margin-bottom:12px;} .entity-body p {font-size:1rem;} .entity-authorship {padding:0 0 5px 5px;} .entity-author {line-height:22px; font-weight:bolder; margin-left:45px;} .entity-author-info {line-height:16px; font-size:.85rem; color:#777777; margin-left:45px;} img.author-image {float:left; height:32px; width:32px; margin:4px 8px 0 0; background-color:#999;} .entity-comment {border-left:5px solid #eee; padding:1rem; margin-top:1.25rem;} .entity-rating {font-size:0.7rem; margin-left:10px; border:1px solid #e5e5e5; color:#777777; border-radius:3px; padding:2px 4px; vertical-align:text-top; cursor:default} .entity-count {border-left:1px solid #979797; font-weight:bolder; margin-left:4px; padding-left:8px;} .entity-actions {display:inline-block;} .entity-status {float:right; height:32px; width:32px; margin:6px 4px 0 0;} .entity-status i {font-size:28px;} .entity-expand {border:1px solid #e5e5e5; border-radius:4px; padding:0 4px; margin-left:10px; cursor:pointer;} .entity-expand:hover {background:#efefef; border-color:#e5e5e5;} .entity-expand-paragraph {display:table; margin-top:1.5rem; cursor:pointer; background-color:#ffffff; border:1px solid #cccccc; border-radius:.2rem;} .entity-expand-paragraph:hover {background:rgba(255,204,0,.85); border-color:#adadad;} .entity.active {background-color:#f5f5f5;} .entity.active .action-items i.icon-right, .entity.active .entity-name {color:#333333;} .subEntity {padding:30px 0px; border-bottom:1px solid #d7d7d7;} .entity-subName {font-size:1.25rem; font-weight:bolder; color:#474747; min-height:36px; line-height:1.2em; padding-top:4px;} .mb-100.entity-name, .mb-100.entity-definition, .mb-100.entity-synopsis, .mb-100.entity-body {margin-bottom:0px;} /* form-header fieldset */ .entity-header {text-align:center; padding:10px 18px} .entity-header .entity-name {font-size:1.25rem; line-height:24px; min-height:24px;} .entity-header .entity-definition {font-size:0.9rem;} .entity-header .entity-description {font-size:0.9rem;} .form-header {} .form-header .mb-100 {margin-bottom:10px} .form-header .form-control {padding:6px 10px;} .form-header .entity-name {font-size:1.25rem;} .rightPanel .form-header {padding:10px;} .rightPanel .form-header .mb-100 {margin-bottom:1px} .rightPanel .form-header .entity-name label.col-form-label, .rightPanel .form-header .entity-description label.col-form-label, .rightPanel .form-header .entity-synopsis label.col-form-label {display:none} input.entity-description, textarea.entity-description, textarea.entity-synopsis {margin-bottom:2px; outline:none; font-size:.9rem; -webkit-transition:all 0.30s ease-in-out; -moz-transition:all 0.30s ease-in-out; -ms-transition:all 0.30s ease-in-out; -o-transition:all 0.30s ease-in-out;} span.entity-name {display:block; min-height:20px; padding:2px 0px;} button.entity-name {font-size:1.25rem !important} input.entity-description, textarea.entity-description {height:30px} textarea.entity-synopsis {height:30px;} /* ================== Event definitions ================== Styling for all livanto events, including single or listing of posts that can be used in combination with ui-group-buttons */ .cover {} .cover-background { background-color:#070826; background-position:center bottom; background-repeat:no-repeat; background-size:cover; position:relative; min-height:250px; height:100%; width:100%; margin-bottom:0; z-index:1; text-align:center; vertical-align:middle; display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-webkit-flex; display:flex; -webkit-box-pack:center; -webkit-box-align:center; -moz-box-align:center; -ms-flex-pack:center; -ms-flex-align:center; -webkit-flex-pack:center; -webkit-flex-align:center; -webkit-align-items:center; align-items:center; -ms-flex-direction:column; -webkit-flex-direction:column; flex-direction:column; -webkit-justify-content:center; justify-content:center; } .cover-background-opacity {position:absolute; background-color:#233752; opacity:0.85; height:100%; width:100%; top:0; bottom:0; left:0; right:0; z-index:0;} .cover-background-opacity-light {position:absolute; background-color:#233752; opacity:0.35; height:100%; width:100%; top:0; bottom:0; left:0; right:0; z-index:0;} .cover-background-tint {background:radial-gradient(ellipse at center, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.45) 100%); background-size:cover; background-position:center;} .cover-banner {width:100%; z-index:2; color:#FFFFFF; line-height:1.25;} .cover-footer-left {position:absolute; left:25px; bottom:25px;} .cover-footer-right {position:absolute; bottom:2rem; text-align:right; color:#FFFFFF; z-index:2;} .cover-footer-right a, .cover-footer-right a:active, .cover-footer-right a:visited {color:#FFFFFF; text-shadow:-1px -1px 0 rgb(35,55,82), 1px -1px 0 rgb(35,55,82), -1px 1px 0 rgb(35,55,82), 1px 1px 0 rgb(35,55,82);} .cover-footer-right a:hover, .cover-footer-right a:focus {color:rgb(243,245,248);} /* ================== Log definitions ================== Styling for activity logging */ .log-panel {display:table; table-layout:fixed; width:100%;} .log-panel .row {display:table-row;} .log-panel .col {display:table-cell;} .log-panel .entry-image {width:2.25rem; vertical-align:middle; padding:.15rem 0 0 0;} .log-panel .entry-image img {margin-top:-2px;} .log-panel .entry-creator {width:10rem; font-size:.9rem; font-weight:600; vertical-align:middle; line-height:1.1; padding:.5rem 0;} .log-panel .entry-creator:hover {cursor:pointer; color:#333;} .log-panel .entry-action {width:7rem; text-align:center; vertical-align:middle; padding:0;} .log-panel .entry-details {vertical-align:middle; padding:.25rem .5rem;} .log-panel .entry-date {width:6rem; margin-left:.5rem; text-align:center; vertical-align:middle; padding:0;} /* log-link gives styling to foreign entities included in log messages */ .log-panel .log-link {quotes:"«" "»"; font-variant:small-caps; line-height:1.2rem;} /* « = « » = »*/ .log-panel .log-link:before {content:open-quote;} .log-panel .log-link:after {content:close-quote;} /* ==================== Topic badge ==================== */ .topic-badge {display:inline-block; border-radius:0.25em; font-size:0.8rem; line-height:13px; padding:0.25em 0.75em; text-align:center; vertical-align:middle; white-space:nowrap; margin-right:4px; margin-bottom:6px; border:1px solid #d7d7d7; background-color:#efefef; } /* ==================== Pricing Table ==================== */ .pricing-table {} .pricing-table .price-definition {display:table-cell; height:85px; vertical-align:middle; text-align:center; padding-top:5px;} ul.feature-list {margin:2rem 0; padding:0px; list-style:none; display:table; width:100%; table-layout:fixed;} ul.feature-list li {height:28px; text-align:center; vertical-align:middle !important; font-size:0.8rem;} /* ==================== Horizontal Rulers ==================== */ hr.soften {height:1px; margin:15px 0; border:0; background:linear-gradient(90deg, rgba(153,153,153,0) 0%, rgba(153,153,153,1) 20%, rgba(153,153,153,1) 80%, rgba(153,153,153,0) 100%);} hr.soften-xs {margin:.5rem 0;} hr.soften-sm {margin:.75rem 0;} hr.soften-lg {margin:2rem 0;} hr.soften-xl {margin:3rem 0;} hr.soften-white {height:1px; margin:15px 0; border:0; background-image: -webkit-linear-gradient(left, transparent, rgba(255, 255, 255, .2), transparent); background-image: -moz-linear-gradient(left, transparent, rgba(255, 255, 255, .2), transparent); background-image: -ms-linear-gradient(left, transparent, rgba(255, 255, 255, .2), transparent); background-image: -o-linear-gradient(left, transparent, rgba(255, 255, 255, .2), transparent);} hr.circle-icon {position:relative; border:none; height:20px; background-repeat:no-repeat; background-position:50% 50%; margin:3rem; background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23e5e5e5%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");} hr.circle-icon::before,hr.circle-icon::after {content:""; position:absolute; top:50%; max-width:calc(50% - (50px / 2)); border-bottom:1px solid #e5e5e5} hr.circle-icon::before {right:calc(50% + (50px / 2)); width:100%} hr.circle-icon::after {left:calc(50% + (50px / 2)); width:100%} /* ==================== Index ==================== */ .index {position:absolute; -moz-box-sizing:border-box; background-color:#553966; border-radius:50% 50% 50% 50%; color:#FFFFFF;} .index-xlarge {height:65px; width:65px; font-size:28px; line-height:50px; text-align:center; border:6px solid #886c99;} .section .index-xlarge {left:150px; top:10px;} /* ==================== img-screen ==================== */ .img-screenshot {padding:10px; background:#fcfcfc; border-radius:8px; box-shadow:0 1px 6px #CCCCCC;} /* ==================== img-hover ==================== */ .img-hover {overflow:hidden; position:relative; cursor:default;} .img-hover .img-overlay {width:100%; height:100%; position:absolute; overflow:hidden; top:0; left:0; opacity:0; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:1rem; -webkit-transition:all .4s ease-in-out; transition:all .4s ease-in-out} .img-hover .img-overlay button {margin-left:0.25rem !important; margin-right:0.25rem !important;} .img-hover img {display:inline-block; position:relative; -webkit-transition:all .4s linear; transition:all .4s linear;} .img-hover:hover img {-ms-transform:scale(1.2); -webkit-transform:scale(1.2); transform:scale(1.2);} .img-hover:hover .img-overlay {opacity:1; filter:alpha(opacity=100);} /* ==================== inlineEdit ==================== */ /* Styling of input element when inline-editing is activated. See /resources/jquery/inlineEdit/inlineEdit.js */ input.inlineEditElement.form-control {padding:0px; margin:0px; border:none; box-shadow:none; background:none; font-size:1rem; color:#036; height:28px;} /* ==================== Track Menu ==================== */ ul.nav li.nav-item a.nav-link.nav-badge {padding:.5rem 1rem; border-radius:1rem; white-space:nowrap; background-color:rgb(232,232,232); margin-right:.5rem;} ul.nav li.nav-item a.nav-link.nav-badge:hover {background-color:rgb(224,224,224);} ul.nav li.nav-item a.nav-link.nav-badge.active {background-color:rgb(35,55,82);} ul.nav li.nav-item a.nav-link.nav-badge-light {padding:.5rem 1rem; border-radius:1rem; white-space:nowrap; color:#8E9093 !important; background-color:rgb(240,240,240); margin-right:.5rem;} ul.nav li.nav-item a.nav-link.nav-badge-light:hover {background-color:rgb(232,232,232);} ul.nav li.nav-item a.nav-link.nav-badge-light.active {background-color:rgba(35,55,82,0.25);} /* ==================== Breadcrumb wizard ==================== */ ul.wizard {clear:both; min-height:34px; padding:0;} ul.wizard li.active {background:#e5e5e5;} ul.wizard li.active .wizard-arrow:after {border-color:transparent transparent transparent #e5e5e5;} ul.wizard li {float:left; height:34px; line-height:30px; margin-right:0; padding:0px 14px; position:relative; max-width:25%; text-align:center; background:none repeat scroll 0 0 #fcfcfc; border-right:1px solid #e5e5e5;} ul.wizard li .wizard-label {display:inline-block; font-size:.9em; line-height:1em; vertical-align:middle} ul.wizard li .wizard-arrow {border-color:transparent transparent transparent #e5e5e5; border-style:solid; border-width:7px; display:block; height:0; margin-top:-7px; position:absolute; right:-14px; top:50%; width:0; z-index:2;} ul.wizard li .wizard-arrow:after {border-color:transparent transparent transparent #fcfcfc; border-style:solid; border-width:7px; content:""; display:block; height:0; left:-8px; margin-top:-7px; position:absolute; top:50%; width:0;} ul.wizard li:last-child .wizard-arrow {display:none} .cookie-alert {background:#f9fafc; color:#303030; max-width:420px; border:1px solid #999999; border-radius:6px; padding:2rem; min-height:150px; opacity:.975; cursor:default; box-shadow:0 4px 4px rgba(0,0,0,0.1), 0 0 0 1px rgba(0,0,0,0.08);} /* ==================== Callouts ==================== */ .callout {padding:1.25rem; margin-top:1.25rem; margin-bottom:1.25rem; background-color:#bce0f1; border-left:0.25rem solid rgb(var(--primary-color));} .callout h1 {font-size:120% !important;} .callout p {margin-bottom:0px !important;} /* ==================== Collapsable Nav ==================== */ .nav-collapse {} .show-nav-collapse {text-decoration:none; color:rgb(35,55,82); background:#f5f5f6; text-align:center; padding:10px 0; margin-bottom:0px; display:none;} /*Hide checkbox*/ input[type=checkbox]#show-nav-collapse {display:none;} /*Show menu when invisible checkbox is checked*/ input[type=checkbox]#show-nav-collapse:checked ~ #navMenu {display:block;} /* ============================== Media Queries ============================== */ /* Max on Medium devices (iPhone and iPad in vertical, 768px and smaller) */ @media screen and (max-width:768px){ .show-nav-collapse {display:block;} ul.nav-collapse {position:static; display:none; background-color:#f5f5f6;} ul.nav-collapse li {margin-bottom:1px;} ul.nav-collapse li, ul.nav-collapse li a {width:100%;} } /* No media query since this is the default in Bootstrap */ @media (min-width:0px) and (max-width:576px) { .content {padding:2rem 0;} .content-sm {padding:1rem 0;} .cover-footer-right {bottom:16px; text-shadow:-1px -1px 0 rgb(35,55,82), 1px -1px 0 rgb(35,55,82), -1px 1px 0 rgb(35,55,82), 1px 1px 0 rgb(35,55,82);} .card-deck-responsive li:nth-child(n+4) {display:none;} } /* SM: Small devices (old phones - 576 and up) */ @media (min-width:576px) { .content {padding:3rem 0;} .content-sm {padding:1.5rem 0;} .card-deck-responsive li:nth-child(n+5) {display:none;} } /* MD: Medium devices (iPhone and iPad in vertical, 768px and up) */ @media (min-width:768px) { .content {padding:4rem 0;} .content-sm {padding:2rem 0;} input[type=checkbox]#show-nav-collapse:checked ~ #navMenu {display:flex;} } /* LG: Large devices (iPhone and iPad in Landscape, 1024px wide) */ @media (min-width:992px) { .content {padding:5rem 0;} .content-sm {padding:2.5rem 0;} .card-deck-responsive li:nth-child(-n+6) {display:block;} .card-deck-responsive li:nth-child(n+7) {display:none;} } /* XL: Extra-Large devices (Desktops, 1280px wide) */ @media (min-width:1200px) { .content {padding:6rem 0;} .content-sm {padding:3rem 0;} } /* XXL: Very-Large devices (Big screens, 1600px wide) */ @media (min-width:1600px) { .content {padding:7rem 0;} .content-sm {padding:3.5rem 0;} .card-deck-responsive li:nth-child(n) {display:block;} } /* Big Screens (1920px wide) */ @media (min-width:1888px) { } @media (min-height:600px) {.cover-background {min-height:375px; height:375px;}} @media (min-height:700px) {.cover-background {min-height:500px; height:500px;}} @media (min-height:750px) {.cover-background {min-height:550px; height:550px;}} @media (min-height:785px) {.cover-background {min-height:600px; height:600px;}} @media (min-height:885px) {.cover-background {min-height:700px; height:700px;}} @media (min-height:1000px) {.cover-background {min-height:824px; height:824px;}} @media (min-height:1050px) {.cover-background {min-height:880px; height:880px;}}