.vertical-align {
    display: flex;
    align-items: center;
}
.ng-invalid.ng-touched {
    box-shadow:0 0 3px red;
}
.panel-body {
    padding-bottom: 15px;
}
#adminInterface {
    margin-bottom: 2em;
}
.error-message {
    color: #F59797;
}
.pad-top {
    margin-top: 1em;
}
.help-text-toggle {
    color: #5bc0de;
}
.help-text-desc {
    margin-bottom: 0px !important;
}
.strike {
    text-decoration: line-through;
    color: #DEDEDE;
}
.help-popup {
    padding-top: 10px;
}
.tab-content {
    padding: 0px;
}
.help-popup-content {
    padding-top: 2em;
}
.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}
@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}
    @media only screen and (max-width: 770px) {
      [class*="help-popup-content"] {
        padding-top:0px;
      }
    }
.employee-heading {
    text-align: center;
}
.link-functionality {
    cursor: pointer;
}
.link-disabled {
    cursor: not-allowed;
}
.is-working {
    cursor: progress;
}
.employee-email-alert {
    font-weight: bold;
}
.admin-section-content {
    min-width: 600px; /* The table can't go smaller than this */
}
.filter-badge {
    margin-right:1%;
    background-color: #5bc0de !important; 
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 13px !important;
    padding-right: 13px !important;
    cursor: pointer;
}
.drop-box {
    background: #eef7fb;
    border: 5px dashed #b1d0e7;
    text-align: center;
    padding: 50px 10px;
    width: 100%; 
    cursor: pointer;
}
.drop-box.done {
    padding-top: 25px;
    padding-bottom: 25px;
}
.drop-box.dragover {
    background: #e2f1f9;
    border: 5px dotted #9fd5f9;
}
.drop-box.dragover-err {
    background: #fbf4f4;
    border: 5px dotted #e2b6b6;
}
.admin-answered {
    border: solid 3px;
    border-color:#337AB7 !important;
}
.admin-text {
    color: #22557f;
}
.search-box {
    border-top:0px;
    border-right:0px;
    border-left:0px;
    margin-right:1%;
}
.answer-card {
    background: #fff;
    box-shadow: 0 0 8px rgba(0,0,0,0.5);
    margin: 26px auto 0;
    min-height: 100px;
    padding: 24px;
    position: relative;
    width: 80%;
    z-index: 0;
}
.answer-cards-container {
    margin-bottom:5%;
}
.answer-card:not(:first-child) {
    background-color: #D5D4D4;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.6) 35px, rgba(255,255,255,.6) 70px);
}
.answer-card-centent {
    z-index: 1;
    position: relative;
}
.sap-squares-description {
    min-height: 50px;
}
.sap-step {
    color: #149966;
    font-weight: bold;
}
.sap-step-completed {
    text-decoration: line-through;
}
.sap-squares .row .col .sap-square-info .sap-square-contents .sap-square-contents-expanded .sap-square-table-container .table td {
    border-color: #BCE8F1;
}
.sap-squares .row .col .sap-square-info .sap-square-contents .sap-square-contents-expanded .sap-square-table-container .table tr:nth-child(2n+1) td {
    background-color: #E9F5FA;
}
.sap-squares .row .col .sap-square-info .sap-square-contents .sap-square-contents-expanded .sap-square-table-container .table th {
    border-color: #BCE8F1;
}

.sap-squares .row .col .sap-square-success .sap-square-contents .sap-square-contents-expanded .sap-square-table-container .table td {
    border-color: #D6E9C6;
}
.sap-squares .row .col .sap-square-success .sap-square-contents .sap-square-contents-expanded .sap-square-table-container .table tr:nth-child(2n+1) td {
    background-color: #EBF5E6;
}
.sap-squares .row .col .sap-square-success .sap-square-contents .sap-square-contents-expanded .sap-square-table-container .table th {
    border-color: #D6E9C6;
}

.sap-squares .row .col .sap-square-warning .sap-square-contents .sap-square-contents-expanded .sap-square-table-container .table td {
    border-color: #FAEBCC;
}
.sap-squares .row .col .sap-square-warning .sap-square-contents .sap-square-contents-expanded .sap-square-table-container .table tr:nth-child(2n+1) td {
    background-color: #FEFCF5;
}
.sap-squares .row .col .sap-square-warning .sap-square-contents .sap-square-contents-expanded .sap-square-table-container .table th {
    border-color: #FAEBCC;
}

.sap-squares .row .col .sap-square-fail .sap-square-contents .sap-square-contents-expanded .sap-square-table-container .table td {
    border-color: #EBCCD1;
}
.sap-squares .row .col .sap-square-fail .sap-square-contents .sap-square-contents-expanded .sap-square-table-container .table tr:nth-child(2n+1) td {
    background-color: #F8ECEC;
}
.sap-squares .row .col .sap-square-fail .sap-square-contents .sap-square-contents-expanded .sap-square-table-container .table th {
    border-color: #EBCCD1;
}
.sap-square-title-expanded {
    font-size: 1.5em !important;
    font-weight: bold;
    margin-bottom: 30px;
}
.sap-square-title-expanded-part {
    margin-bottom: 20px;
}
.sap-square {
    border-radius: 10px;    
    border-style: solid;
    border-width: 2px;
    padding: 10px;
    margin: 10px;
    min-height: 150px !important; /* Keep the icons square regardless of content */
    min-width: 150px !important;  /* Keep the icons square regardless of content */
}
.sap-square-default {
    background-color: #FFFFFF;
    border-color:#FFFF00;
}
.sap-square-success {
    background-color: #DFF0D8;
    border-color: #D6E9C6;
    color: #3C763D;
}
.sap-square-info {
    background-color: #D9EDF7;
    border-color: #BCE8F1;
    color: #4a8cb2;
}
.sap-square-warning {
    background-color: #FCF8E3;
    border-color: #FAEBCC;
    color: #8A6D3B;
}
.sap-square-fail {
    background-color: #F2DEDE;
    border-color: #EBCCD1;
    color: #A94442;
}
.box4 {
	box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.3);
}
.selected-user-form-answer {
    background-color: #f0fff0 !important;
}
.answer-square {
    cursor: pointer;
}
.answer-square:hover {
    background-color: white;
}
.width-100 {
    width: 100px;
}

ul.dropdown-menu > li {
    cursor: pointer;
}

.modal-dialog {
    max-width: 70vw !important;
}

/* Bootstrap 4 style for ng-dropdown-multiselect modules */
div[ng-dropdown-multiselect] > div > ul > li > a:hover {
    text-decoration: none;
}

div[ng-dropdown-multiselect] > div > ul > li:hover {
    background-color: #F5F5F5;
}

li.divider {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    height: 1px;
    background-color: #e5e5e5;
}