/* Calendar status circles */
.circle {
    border-radius: 50%;
    width: 12px;
    height: 12px;
    margin: 0px 5px 0px 10px;
    display: inline-block;
}

.circle.event-important, .vis-item.event-important  { background-color: #FF7373; }
.circle.event-info, .vis-item.event-info  { background-color: #A6DEEE; }
.circle.event-warning, .vis-item.event-warning  { background-color: #FFF284; }
.circle.event-success, .vis-item.event-success  { background-color: #7CEB98; }

#cal-slide-content {
    background-image: none;
}
#cal-slide-content a.event-item {
    color: #212529;
};

/* Ensure auto-sizing textareas are not too small */
textarea {
    min-height: 100px;
}

div.product-select {
    display: inline-block;
    margin-left: 40px;
}

.product-select .cr {
    position: relative;
    border: 1px solid #a9a9a9;
    border-radius: .25em;
    width: 1.3em;
    height: 1.3em;
    float: left;
    margin-right: .5em;
}

.product-select .cr .cr-icon {
    position: absolute;
    font-size: .8em;
    line-height: 0;
    top: 50%;
    left: 20%;
}

.product-select label input[type="checkbox"]
 {
    display: none;
}

.product-select label input[type="checkbox"] + .cr > .cr-icon {
    opacity: 0;
}

.product-select label input[type="checkbox"]:checked + .cr > .cr-icon {
    opacity: 1;
}

.product-select label input[type="checkbox"]:disabled + .cr {
    opacity: .5;
}

button.buy, a.buy {
    color: white;
    background-color: #f76536;
    border-color: #f76536;
    font-weight: 600;
}

button.buy:focus, button.buy:hover, a.buy:focus, a.buy:hover {
    color: white;
    background-color: #e34616;
    border-color: #e34616;
    font-weight: 600;
}
.circle-large {
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0px 5px 0px 10px;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    color: white;
}

.red {
    background-color: red;
}

.amber {
    background-color: orange;
}

.yellow {
    color: black; /* normal white is unreadable for yellow */
    background-color: yellow;
}

.green {
    background-color: green;
}
.nowrap {
    white-space: nowrap;
}

/* Ensure side menu drop-down carets do not wrap to following line */
.fa { display:inline; }

/* The following code ensures that the bootstrap-select drop-down options are
 * not too wide. This was reported by a customer, who had controls with very
 * long descriptions and they were disappearing off the page to the left */
.bootstrap-select-wide .dropdown-menu {
    max-width: 150%;
}
.bootstrap-select-wide .dropdown-menu li a {
    overflow: hidden;
}
.bootstrap-select-wide .dropdown-menu li a span.text {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

table.pricing td, table.pricing thead th {
    text-align: center;
}

.btn-secondary.question {
    width:230px;
    height:100px;
    font-size:1.5rem;
    display:inline-flex;
    align-items:center;
}
.btn-secondary.question:hover {
    background-color:#2245D9;
    border-color:#2245D9;
}
.btn-secondary:not(:disabled):not(.disabled).active.question {
    background-color:#2245D9;
    border-color:#2245D9;
    font-weight:600;
}

.manual-content img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Begin CSS for definition buttons in headings and checkboxes */
a.definition {
    border-bottom:1px dotted;
    padding: 0px 1px 0px 1px;
    cursor: pointer;
    color: inherit;
}
a.definition:hover {
    text-decoration: none;
}
#answer_div .form-check-input {
    height: 1.5rem;
}
#answer_div .form-check-label {
    margin-top: 0.3rem;
}
.jstree-default .unanswered {
    color: red;
}
.jstree-node {
    overflow: hidden;
}

.loader {
    margin: auto;
    border: 5px solid #f3f3f3;
    position: absolute;
    bottom: 50%;
    left: 0;
    right: 0;
    height: 50px;
    border-top: 5px solid #555;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.centered-overlay {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.3);
    /*dim the background*/
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: black;
    text-align: center;
    z-index: 1050;
    display: none;
}

ol.breadcrumb {
    background-color: white;
}

/* Prevent sorting icon wrapping in datatables */
.data-table th {
    white-space: nowrap;
}

.popover{
    max-width:400px;
}

/* Remove spacing between options in questionnaire rendering */
p.hft-paras:last-of-type {
    margin-bottom:0;
}
/* And also for paras in alerts */
.alert p:last-of-type {
    margin-bottom:0;
}
/* End definition CSS */

.large-badge {
    font-size: 1em;
}

tbody.anticipatory-subscription {
    font-style: italic;
}