table.with-headline thead tr {
    background-color: #f5f5f5;
}

.text-purple {
    color: #800080;
}
.text-magenta {
    color: #FF4081;
}

.cursor-help {
    cursor: help;
}

span.vote-square {
    border: 2px solid #272727;
    padding: 4px 14px;
    font-size: 30px;
    font-weight: bold;
    color: #fff;
}

.vote-square.disabled {
    background-color: #c0c0c0;
}

.vote-text.A {
    color: #5df222
}

.vote-square.A {
    background-color: #5df222;
}

.list-group-item.A {
    background-color: #e4ffe4;
}

.vote-text.B {
    color: #f2f208
}

.vote-square.B {
    background-color: #f2f208;

}

.list-group-item.B {
    background-color: #ffffb7;
}

.vote-text.C {
    color: #f18109
}

.vote-square.C {
    background-color: #f18109;
}

.list-group-item.C {
    background-color: #fcdac3;
}

.vote-text.D {
    color: #f10a0b
}

.vote-square.D {
    background-color: #f10a0b;
}

.list-group-item.D {
    background-color: #ffdada;
}

.has-error .form-control {
    background-image: linear-gradient(to bottom, #f2dede 0px, #e7c3c3 100%);
    background-repeat: repeat-x;
    background-color: f2dede;
    border-color: #dca7a7;
    color: #a94442;
}

.error-hint-popover > .popover-title {
    background-image: linear-gradient(to bottom, #f2dede 0px, #e7c3c3 100%);
    background-repeat: repeat-x;
    background-color: #f2dede;
    color: #a94442;
    border-bottom: 1px solid #dca7a7;
}

.error-hint-popover {
    background-image: linear-gradient(to bottom, #f2dede 0px, #e7c3c3 100%);
    background-repeat: repeat-x;
    background-color: #f2dede;
    border-color: #dca7a7;
    color: #a94442;
    max-width: 400px;
}

.error-hint-popover > .popover-content {
    background-color: #ffffff;
}

.error-hint-popover ul {
    padding: 0px 20px;
}

.max-length-indicator {
    position: absolute;
    bottom: 1px;
    right: 31px;
    font-size: 11px;
    font-weight: 400;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
    cursor: help;
    color: #8c8c8c;
    background-color: white;
}

.element-error-icon {
    position: absolute;
    top: 8px;
    right: 24px;
    font-size: 16px;
    font-weight: 400;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none;   /* Chrome/Safari/Opera */
    -khtml-user-select: none;    /* Konqueror */
    -moz-user-select: none;      /* Firefox */
    -ms-user-select: none;       /* Internet Explorer/Edge */
    user-select: none;           /* Non-prefixed version, currently
                                  not supported by any browser */
    cursor: help;
    color: #a94442;
}

a.sortflag {
    color: #ccc;
}

a.sortflag.active {
    color: #000;
}

@media print {
  a[href]:after {
    content: none;
  }
}

/* The max width is dependant on the container (more info below) */
.popover{
    max-width: 100%; /* Max Width of the popover (depending on the container!) */
}

/* placeholder for applicant detail block during drag and drop operations */
.block-placeholder {
    border: 2px dashed #666;
    background-color: #f7f7f7;
    visibility: visible !important; /* Ensures the placeholder is always visible during sorting */
    height: 50px; /* Adjust based on your block height */
    padding: 20px;
    background-color: #f0f0f0;
    -webkit-box-shadow: inset 0 0 10px #000;
    -moz-box-shadow: inset 0 0 10px #000;
    box-shadow: inset 0 0 10px #000;
    opacity: 0.5;
}

/* drag handle for block drag and drop */
.handle {
    cursor: grab;
}
.handle:active {
    cursor: grabbing;
}
.handle .drag-icon {
    float: right;
    margin-left: 15px;
    opacity: 0.4;
}