.vs-font {
    font-family: Arial, Helvetica, sans-serif;
}

.btn.vs-btn-classic {
    border: 1px solid var(--gray-5);
    border: 1px solid hsl(206, 11%, 71%);
    border-radius: 5px;
    color: var(--gray-1);
    color: hsl(217, 11%, 15%);
    background-color: var(--gray-7);
    background-color: hsl(217, 14%, 89%);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    background-image: none;
    padding: .375rem .75rem;
    line-height: 1.5;
}
.btn.btn-sm.vs-btn-classic {
    padding: .25rem .5rem;
    line-height: 1.5;
}
.btn.vs-btn-classic:not(:disabled):hover {
    border: 1px solid var(--gray-4);
    border: 1px solid hsl(206, 7%, 56%);
    color: var(--gray-1);
    color: hsl(217, 11%, 15%);
    background-color: var(--gray-5);
    background-color: hsl(206, 11%, 71%);
    background-image: none;
}
.btn.vs-btn-classic:not(:disabled):not(.disabled):focus {
    border: 1px solid var(--gray-5);
    border: 1px solid hsl(206, 11%, 71%);
    background-color: var(--gray-7);
    background-color: hsl(217, 14%, 89%);
    color: var(--gray-1);
    color: hsl(217, 11%, 15%);
    box-shadow: 0 0 0 2px hsla(207, 57%, 45%, 0.5);
    background-image: none;
}
.btn.vs-btn-classic:not(:disabled):not(.disabled):active,  .btn.vs-btn-classic:not(:disabled):not(.disabled):active:focus{
    border: 1px solid var(--gray-4);
    border: 1px solid hsl(206, 7%, 56%);
    color: var(--gray-1);
    color: hsl(217, 11%, 15%);
    background-color: var(--gray-5);
    background-color: hsl(206, 11%, 71%);
    transform: translateY(1px);
    transition: none;
    background-image: none;
    box-shadow: none;
}
.btn.vs-btn-classic:disabled, .btn.vs-btn-classic:disabled:hover .btn.vs-btn-classic:disabled:focus, .btn.vs-btn-classic:disabled:active {
    opacity: .35;
    cursor: auto;
    border: 1px solid var(--gray-5);
    border: 1px solid hsl(206, 11%, 71%);
    border-radius: 5px;
    color: var(--gray-1);
    color: hsl(217, 11%, 15%);
    background-color: var(--gray-7);
    background-color: hsl(217, 14%, 89%);
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 1em;
    background-image: none;
}
.btn.vs-btn-classic-outline {
    border: 1px solid var(--gray-3);
    border: 1px solid hsl(212, 9%, 32%);;
    border-radius: 5px;
    color: var(--gray-2);
    color: hsl(212, 9%, 23%);
    background-color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    background-image: none;
    padding: .375rem .75rem;
    line-height: 1.5;
}
.btn.btn-sm.vs-btn-classic-outline {
    padding: .25rem .5rem;
    line-height: 1.5;
}
.btn.vs-btn-classic-outline:not(:disabled):hover {
    color: var(--gray-10);
    color: hsl(220, 27%, 98%);
    background-color: var(--gray-3);
    background-color: hsl(212, 9%, 32%);
    background-image: none;
}
.btn.vs-btn-classic-outline:not(:disabled):not(.disabled):focus {
    color: var(--gray-2);
    color: hsl(212, 9%, 23%);
    background-color: var(--white);
    box-shadow: 0 0 0 2px hsla(207, 57%, 45%, 0.5);
}
.btn.vs-btn-classic-outline:not(:disabled):not(.disabled):active, .btn.vs-btn-classic-outline:not(:disabled):not(.disabled):active:focus {
    color: var(--gray-10);
    color: hsl(220, 27%, 98%);
    background-color: var(--gray-3);
    background-color: hsl(212, 9%, 32%);
    transform: translateY(1px);
    box-shadow: none;
}
.btn.vs-btn-classic-outline:disabled, .btn.vs-btn-classic-outline:disabled:hover .btn.vs-btn-classic-outline:disabled:focus, .btn.vs-btn-classic-outline:disabled:active {
    opacity: .35;
    cursor: auto;
    border: 1px solid var(--gray-3);
    border: 1px solid hsl(212, 9%, 32%);;
    border-radius: 5px;
    color: var(--gray-2);
    color: hsl(212, 9%, 23%);
    background-color: white;
    box-shadow: var(--box-shadow-1);
    box-shadow: 0 1px 3px hsla(0, 0%, 0%, .2);
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 1em;
    background-image: none;
}

.btn.vs-btn-primary {
    border: 1px solid var(--primary-3);
    border: 1px solid hsl(218.23, 62%, 39.22%);
    border-radius: 5px;
    color: var(--gray-10);
    color: hsl(220, 27%, 98%);
    background-color: var(--primary-3);
    background-color: hsl(218.23, 62%, 39.22%);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    background-image: none;
    padding: .375rem .75rem;
    line-height: 1.5;
}
.btn.btn-sm.vs-btn-primary {
    padding: .25rem .5rem;
    line-height: 1.5;
}
.btn.vs-btn-primary:not(:disabled):hover {
    border: 1px solid var(--primary-2);
    border: 1px solid hsl(207, 59%, 28%);
    color: var(--gray-10);
    color: hsl(220, 27%, 98%);
    background-color: var(--primary-2);
    background-color: hsl(207, 59%, 28%);
    background-image: none;
}
.btn.vs-btn-primary:not(:disabled):not(.disabled):focus {
    border: 1px solid var(--primary-3);
    border: 1px solid hsl(218.23, 62%, 39.22%);
    background-color: var(--primary-3);
    background-color: hsl(218.23, 62%, 39.22%);
    color: var(--gray-10);
    color: hsl(220, 27%, 98%);
    box-shadow: 0 0 0 2px hsla(207, 57%, 45%, 0.5);
    background-image: none;
}
.btn.vs-btn-primary:not(:disabled):not(.disabled):active, .btn.vs-btn-primary:not(:disabled):not(.disabled):active:focus {
    border: 1px solid var(--primary-2);
    border: 1px solid hsl(207, 59%, 28%);
    color: var(--gray-10);
    color: hsl(220, 27%, 98%);
    background-color: var(--primary-2);
    background-color: hsl(207, 59%, 28%);
    transform: translateY(1px);
    transition: none;
    background-image: none;
    box-shadow: none;
}
.btn.vs-btn-primary:disabled, .btn.vs-btn-primary:disabled:hover .btn.vs-btn-primary:disabled:focus, .btn.vs-btn-primary:disabled:active {
    opacity: .35;
    cursor: auto;
    border: 1px solid var(--primary-3);
    border: 1px solid hsl(218.23, 62%, 39.22%);
    border-radius: 5px;
    color: var(--gray-10);
    color: hsl(220, 27%, 98%);
    background-color: var(--primary-3);
    background-color: hsl(218.23, 62%, 39.22%);
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 1em;
    background-image: none;
}
.btn.vs-btn-primary-outline {
    border: 1px solid var(--primary-3);
    border: 1px solid hsl(218.23, 62%, 39.22%);
    border-radius: 5px;
    color: var(--primary-2);
    color: hsl(207, 59%, 28%);
    background-color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    background-image: none;
    padding: .375rem .75rem;
    line-height: 1.5;
}
.btn.btn-sm.vs-btn-primary-outline {
    padding: .25rem .5rem;
    line-height: 1.5;
}
.btn.vs-btn-primary-outline:not(:disabled):hover {
    color: var(--gray-10);
    color: hsl(220, 27%, 98%);
    background-color: var(--primary-3);
    background-color: hsl(218.23, 62%, 39.22%);
    background-image: none;
}
.btn.vs-btn-primary-outline:not(:disabled):not(.disabled):focus {
    color: var(--primary-2);
    color: hsl(207, 59%, 28%);
    background-color: var(--white);
    box-shadow: 0 0 0 2px hsla(207, 57%, 45%, 0.5);
}
.btn.vs-btn-primary-outline:not(:disabled):not(.disabled):active, .btn.vs-btn-primary-outline:not(:disabled):not(.disabled):active:focus {
    color: var(--gray-10);
    color: hsl(220, 27%, 98%);
    background-color: var(--primary-3);
    background-color: hsl(218.23, 62%, 39.22%);
    transform: translateY(1px);
    box-shadow: none;
}
.btn.vs-btn-primary-outline:disabled, .btn.vs-btn-primary-outline:disabled:hover .btn.vs-btn-primary-outline:disabled:focus, .btn.vs-btn-primary-outline:disabled:active {
    opacity: .35;
    cursor: auto;
    border: 1px solid var(--primary-3);
    border: 1px solid hsl(218.23, 62%, 39.22%);
    border-radius: 5px;
    color: var(--primary-2);
    color: hsl(207, 59%, 28%);
    background-color: white;
    box-shadow: var(--box-shadow-1);
    box-shadow: 0 1px 3px hsla(0, 0%, 0%, .2);
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 1em;
    background-image: none;
}

.btn.vs-btn-danger {
    border: 1px solid var(--danger-3);
    border: 1px solid hsl(358, 69%, 43%);
    border-radius: 5px;
    color: var(--gray-10);
    color: hsl(220, 27%, 98%);
    background-color: var(--danger-3);
    background-color: hsl(358, 69%, 43%);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    background-image: none;
    padding: .375rem .75rem;
    line-height: 1.5;
}
.btn.btn-sm.vs-btn-danger {
    padding: .25rem .5rem;
    line-height: 1.5;
}
.btn.vs-btn-danger:not(:disabled):hover {
    border: 1px solid var(--danger-2);
    border: 1px solid hsl(358, 65%, 32%);
    color: var(--gray-10);
    color: hsl(220, 27%, 98%);
    background-color: var(--danger-2);
    background-color: hsl(358, 65%, 32%);
    background-image: none;
}
.btn.vs-btn-danger:not(:disabled):not(.disabled):focus {
    border: 1px solid var(--danger-3);
    border: 1px solid hsl(358, 69%, 43%);
    background-color: var(--danger-3);
    background-color: hsl(358, 69%, 43%);
    color: var(--gray-10);
    color: hsl(220, 27%, 98%);
    box-shadow: 0 0 0 2px hsla(207, 57%, 45%, 0.5);
    background-image: none;
}
.btn.vs-btn-danger:not(:disabled):not(.disabled):active, .btn.vs-btn-danger:not(:disabled):not(.disabled):active:focus {
    border: 1px solid var(--danger-2);
    border: 1px solid hsl(358, 65%, 32%);
    color: var(--gray-10);
    color: hsl(220, 27%, 98%);
    background-color: var(--danger-2);
    background-color: hsl(358, 65%, 32%);
    transform: translateY(1px);
    transition: none;
    background-image: none;
    box-shadow: none;
}
.btn.vs-btn-danger:disabled, .btn.vs-btn-danger:disabled:hover .btn.vs-btn-danger:disabled:focus, .btn.vs-btn-danger:disabled:active {
    opacity: .35;
    cursor: auto;
    border: 1px solid var(--danger-3);
    border: 1px solid hsl(358, 69%, 43%);
    border-radius: 5px;
    color: var(--gray-10);
    color: hsl(220, 27%, 98%);
    background-color: var(--danger-3);
    background-color: hsl(358, 69%, 43%);
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 1em;
    background-image: none;
}
.btn.vs-btn-danger-outline {
    border: 1px solid var(--danger-3);
    border: 1px solid hsl(358, 69%, 43%);
    border-radius: 5px;
    color: var(--danger-3);
    color: hsl(358, 69%, 43%);
    background-color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1em;
    background-image: none;
    padding: .375rem .75rem;
    line-height: 1.5;
}
.btn.btn-sm.vs-btn-danger-outline {
    padding: .25rem .5rem;
    line-height: 1.5;
}
.btn.vs-btn-danger-outline:not(:disabled):hover {
    color: var(--gray-10);
    color: hsl(220, 27%, 98%);
    background-color: var(--danger-3);
    background-color: hsl(358, 69%, 43%);
    background-image: none;
}
.btn.vs-btn-danger-outline:not(:disabled):not(.disabled):focus {
    color: var(--danger-3);
    color: hsl(358, 69%, 43%);
    background-color: var(--white);
    box-shadow: 0 0 0 2px hsla(207, 57%, 45%, 0.5);
}
.btn.vs-btn-danger-outline:not(:disabled):not(.disabled):active, .btn.vs-btn-danger-outline:not(:disabled):not(.disabled):active:focus {
    color: var(--gray-10);
    color: hsl(220, 27%, 98%);
    background-color: var(--danger-3);
    background-color: hsl(358, 69%, 43%);
    transform: translateY(1px);
    box-shadow: none;
}
.btn.vs-btn-danger-outline:disabled, .btn.vs-btn-danger-outline:disabled:hover .btn.vs-btn-danger-outline:disabled:focus, .btn.vs-btn-danger-outline:disabled:active {
    opacity: .35;
    cursor: auto;
    border: 1px solid var(--danger-3);
    border: 1px solid hsl(358, 69%, 43%);
    border-radius: 5px;
    color: var(--danger-3);
    color: hsl(358, 69%, 43%);
    background-color: white;
    box-shadow: var(--box-shadow-1);
    box-shadow: 0 1px 3px hsla(0, 0%, 0%, .2);
    font-family: Arial, Verdana, Helvetica, sans-serif;
    font-size: 1em;
    background-image: none;
}

/* Header */

.headerDiv #menu li ul {
    background-color: hsl(226.9, 36.71%, 53.53%);
}

/* Cards */

.card.vs-card {
    margin-bottom: 20px;
    border-radius: 5px;
    border: 1px solid var(--gray-6);
    border: 1px solid hsl(212, 13%, 83%);
}
.card-header.vs-card-title {
    padding: 4px;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid var(--gray-4);
    border-bottom: 1px solid hsl(206, 7%, 56%);
    background-color: var(--gray-6);
    background-color: hsl(212, 13%, 83%);
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background-image: none;
}

/* Taskbox */

.vs-taskbox .taskbox-title {
    padding: 4px;
    text-align: center;
    font-weight: bold;
    border-bottom: 1px solid var(--gray-4) !important;
    border-bottom: 1px solid hsl(206, 7%, 56%) !important;
    background-color:hsl(210, 10%, 85%);
    background-image: none;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.vs-taskbox .vs-taskbox-row {
    background: none;
    background-color: var(--gray-9);
    background-color: hsl(220, 13%, 95%);
    transition: none;
    border-top: none;
}

.vs-taskbox .vs-taskbox-row:hover {
    background: none;
    box-shadow: none;
    transition: none;
    background-color: var(--gray-7);
    background-color: hsl(217, 14%, 89%);
}

.vs-taskbox li.vs-taskbox-row a {
    /* Increase default in vistashare-common.css */
    width: auto;
    min-width: 140px;
}

.vs-taskbox .vs-taskbox-row i {
    min-width: 15px;
    text-align: center;
  }

.vs-caret-right {
    /* Replaces the caret right gif with a FontAwesome alternative. */
    font-size: 1.1em;
    color: var(--primary-3);
    color: hsl(218.23, 62%, 39.22%);
}

.vs-bullet {
    font-size: 5px;
    color: var(--primary-3);
    color: hsl(218.23, 62%, 39.22%);
    vertical-align: middle;
}

.vs-square {
    color: var(--primary-3);
    color: hsl(218.23, 62%, 39.22%);
}

.vs-check-square {
    color: var(--primary-3);
    color: hsl(218.23, 62%, 39.22%);
}

.modal-content {
    box-shadow: var(--box-shadow-5);
    box-shadow: 0 15px 35px hsla(0, 0%, 0%, .2);
}

/* bootstrap carousel style */
.carousel-indicators {
    position: relative;
    bottom: 0px;
    margin-bottom: 0;
}

.carousel-indicators li.vs-carousel-indicator {
    background-color: var(--gray-5);
    background-color: hsl(206, 11%, 71%);
    width: .7em;
    height: .7em;
    border-radius: 50%;
}
.carousel-indicators li.vs-carousel-indicator:hover {
    cursor: pointer;
    background-color: var(--gray-4);
    background-color: hsl(206, 7%, 56%);
}
.carousel-indicators li.vs-carousel-indicator.active {
    background-color: var(--primary-3);
    background-color: hsl(218.23, 62%, 39.22%);
}

a.carousel-control-prev {
    color: var(--gray-3);
    color: hsl(212, 9%, 32%);
    font-size: 1.3em;
    opacity: .5;
}
a.carousel-control-prev:focus {
    color: var(--gray-3);
    color: hsl(212, 9%, 32%);
    opacity: .8;
}
a.carousel-control-prev:hover {
    cursor: pointer;
    color: var(--primary-3);
    color: hsl(218.23, 62%, 39.22%);
    opacity: .9;
}
a.carousel-control-next {
    color: var(--gray-3);
    color: hsl(212, 9%, 32%);
    font-size: 1.3em;
    opacity: .5;
}
a.carousel-control-next:focus {
    color: var(--gray-3);
    color: hsl(212, 9%, 32%);
    opacity: .8;
}
a.carousel-control-next:hover {
    cursor: pointer;
    color: var(--primary-3);
    color: hsl(218.23, 62%, 39.22%);
    opacity: .9;
}

.carousel-caption {
    min-height: 12em;
    position: static;
    padding: 1em 0;
}
.carousel-caption h3 {
    padding: 0 3em;
    word-wrap: break-word;
}

/* Shared header */

.vs-tab-header {
    margin: 1rem;
}

.vs-record-title {
    flex-grow: 1;
    margin: 0 10px;
    margin-bottom: 5px;
    display: inline-block;
    max-width: 100%;
}

.vs-record-title a[data-toggle="collapse"] {
    color: var(--gray-1);
    color: hsl(217, 11%, 15%);
    outline: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.vs-record-title a[data-toggle="collapse"]:hover {
    cursor: pointer;
    text-decoration: none;
}

.vs-record-title h1 {
    padding: 1px;
    font-weight: bold;
    display: flex;
    vertical-align: middle;
    min-width: 0;
}

.vs-record-title i {
    font-size: 14px;
    vertical-align: middle;
    margin-right: .1rem;
}

.vs-record-details {
    margin: 10px;
}

/* Subtabs */

.vs-subtabs {
    background-image: none;
    /* Only collapse tabs up to 500px */
    min-width: 500px;
}

.vs-subtabs .nav-tabs {
    border: none;
    margin: 0 10px;
}

.vs-tabs-multiline .tabs-background {
    border: 1px solid var(--gray-5);
    border: 1px solid hsl(206, 11%, 71%);
    border-width: 0 1px;
    background-color: var(--gray-7);
    background-color: hsl(217, 14%, 89%);
    z-index: -1;
}
.modal .vs-tabs-multiline .tabs-background {
    /* Keep the tab background in front of the modal */
    z-index: 0;
}
.modal .vs-tabs-multiline .nav-item  {
    /* Keep the tab in front of the tab background */
    z-index: 0;
}

.vs-subtabs .nav-tabs .nav-item {
    border: none;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    background-color: var(--gray-7);
    background-color: hsl(217, 14%, 89%);
    margin: 0 2px 0 2px;
}

.vs-subtabs .nav-tabs .nav-item:first-child {
    margin-left: 0;
}

.vs-subtabs .nav-tabs a.nav-link {
    border: 1px solid var(--gray-5);
    border: 1px solid hsl(206, 11%, 71%);
    padding: 4px 7px;
    color: var(--gray-2);
    color: hsl(212, 9%, 23%);
    border-bottom: none;
}

.vs-subtabs .nav-tabs .active a.nav-link {
    padding: 4px 7px;
    color: var(--gray-2);
    color: hsl(212, 9%, 23%);
}

.vs-subtabs .nav-tabs a.nav-link:hover {
    color: var(--gray-1);
    color: hsl(217, 11%, 15%);
    background-color: var(--gray-6);
    background-color: hsl(212, 13%, 83%);
    border-color: var(--gray-4);
    border-color: hsl(206, 7%, 56%);
    border-bottom: none;
}

.vs-subtabs .nav-item.active {
    border:none;
    margin-bottom: -2px;

    /* Default to yellow subtab */
    background: none;
    background-color: #FFFFE0;
}

.vs-subtabs .nav-tabs .nav-item.active a.nav-link:hover {
    background-color: #FFFFE0;
}

.vs-subtabs .nav-tabs .dropdown-toggle {
    outline: 0;
}

.vs-subtabs .nav-tabs .dropdown-menu {
    font-size: inherit;
    text-align: center;
    border: 1px solid var(--gray-5);
    border: 1px solid hsl(206, 11%, 71%);
    margin-top: 0px;
    margin-right: 0px;
}

.vs-subtabs .nav-tabs .nav-item.show .nav-item {
    border-radius: 5px;
}

.vs-subtabs .nav-tabs .nav-item.show .dropdown-menu .nav-link {
    background-color: transparent;
    border: 1px solid var(--gray-5);
    border: 1px solid hsl(206, 11%, 71%);
    border-radius: 5px;
    padding: 4px 7px;
    color: var(--gray-2);
    color: hsl(212, 9%, 23%);
    margin-bottom: 2px;
}

.vs-subtabs .nav-tabs .nav-item.show .dropdown-menu .nav-item {
    margin:1px 2px;
}

.vs-subtabs .nav-tabs .nav-item.show .dropdown-menu a.nav-link:hover {
    color: var(--gray-1);
    color: hsl(217, 11%, 15%);
    border-color: var(--gray-4);
    border-color: hsl(206, 7%, 56%);
}

.vs-subtabs .nav-tabs .nav-item a.nav-link.disabled {
    opacity: 0.35;
    background: white;
    border-color: var(--gray-6);
}

/* Subtab body */

.subtab-body {
    background-color: #FFFFE0;
    border: solid #AAA 1px;
    border-radius: 5px;
    margin: 0 4px;
    margin-bottom: 20px;
    padding: 24px;
    box-shadow: inset 0 1px 0 var(--gray-10), var(--box-shadow-1);
    box-shadow: inset 0 1px 0 hsl(220, 27%, 98%), 0 1px 3px hsla(0, 0%, 0%, .2);

    /* Only collapse subtab-body up to 500px */
    min-width: 500px;
}

.wizard-tab-body {
    background-color: #FFFFE0;
    border: solid #AAA 1px;
    border-radius: 5px;
    margin: 0 4px;
    padding: 1rem;
}

/* Small devices (landscape iPads and smaller, less than 1025px) */
@media (max-width: 1024.98px) {
    .subtab-body {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.subtab-divider {
    background-color: var(--gray-7);
    background-color: hsl(217, 14%, 89%);
    border: 1px solid var(--gray-5);
    border: 1px solid hsl(206, 11%, 71%);
    color: var(--gray-3);
    color: hsl(212, 9%, 32%);
    border-radius: 5px;
    margin-top: 2em;
    margin-bottom: 0.25em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    text-align: center;
}

.subtab-divider[data-toggle="collapse"] {
    cursor: pointer;
}

a.subtab-collapse-title {
    background-color: var(--gray-7);
    background-color: hsl(217, 14%, 89%);
    border: 1px solid var(--gray-5);
    border: 1px solid hsl(206, 11%, 71%);
    color: var(--gray-3);
    color: hsl(212, 9%, 32%);
    border-radius: 5px;
    margin-top: 2em;
    margin-bottom: 0.25em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

a.subtab-collapse-title {
    color: var(--gray-3);
    color: hsl(212, 9%, 32%);
    text-decoration: none;
    cursor: pointer;
}

.subtab-collapse-title i {
    margin-right: .1rem;
}

/* Add icon toggling arrow */
.subtab-collapse a.subtab-collapse-title i.fa:before {
    /* fa-chevron-down */
    content: "\f078";
    margin-right: 2px;
}

.subtab-collapse a.subtab-collapse-title.collapsed i.fa:before {
    /* fa-chevron-right */
    content: "\f054";
    margin-right: 5px;
}

/* Icon toolbar */
.vs-toolbar {
    margin: 0;
    margin-right: 10px;
    padding: 0;
    text-align: center;
}

.vs-toolbar-item {
    display: inline-block;
    margin: 2px 2px;
    font-size: 16px;
    list-style: none;
    text-align: center;
    border-radius: 5px;
}

.vs-toolbar-item a {
    display: block;
    min-width: 32px;
    min-height: 32px;
    padding: 4px;
    color: var(--gray-2);
    color: hsl(212, 9%, 23%);
    background-color: var(--gray-7);
    background-color: hsl(217, 14%, 89%);
    border: 1px solid var(--gray-5);
    border: 1px solid hsl(206, 11%, 71%);
    border-radius: 5px;
    outline: 0;
}

.vs-toolbar-item a:hover {
    color: var(--gray-1);
    color: hsl(217, 11%, 15%);
    background-color: var(--gray-6);
    background-color: hsl(212, 13%, 83%);
    border-color: var(--gray-4);
    border-color: hsl(206, 7%, 56%);
}

.vs-toolbar-item a:active {
    background-color: var(--gray-6);
    background-color: hsl(212, 13%, 83%);
    border-color: var(--gray-4);
    border-color: hsl(206, 7%, 56%);
}

.no-transition {
    transition: none;
}

/* Field labels in header */
.vs-field-descriptor {
    text-align: right;
    color: hsl(201, 6%, 45%);
    font-weight: normal;
    font-size: 12px;
    float: right;
    margin-right: 10px;
}

.vs-field-extension {
    text-align: right;
    color: hsl(201, 6%, 45%);
    font-weight: normal;
    font-size: 12px;
}

.vs-field-container,
.vs-label-container {
    display: flex;
    flex-direction: column;
    min-height: 38px;
}
.vs-label-container label {
    margin-bottom: 0;
}

.vs-form-readonly .vs-field-container,
.vs-form-readonly .vs-label-container {
    min-height: 26px;
}

label.fieldError, .errorlist {
    color: hsl(0, 100%, 46%);
    list-style: none;
    margin-left: 0;
    font-size: .85rem;
}

.vs-field-group:first-child {
    margin-top: 0 !important;
}

.vs-field-group:not(:first-child) {
    padding-top: .2rem;
}

.vs-field-group .fieldDescriptor label {
    margin-bottom: .3rem;
}

.fieldValue {
    /* Match input font size */
    font-size: 1rem;
}

.taskwidget-taskbox {
    margin-right: 10px;
}

.field-icon-container {
    position: relative;
}
.field-icon-container input {
    padding-right: 2.2rem;
}
.field-icon-container .field-icon {
    display: none;        /* enable with javascript */
    position: absolute;
    right: 7px;
    top: 5px;
    border: 0;
    padding: 5px;
    background: transparent;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1rem;
    cursor: pointer;
    opacity: 0.5;
}
.field-icon-container .field-icon:hover {
    opacity: 1;
}

.vs-hoz-label,
.vs-hoz-field {
    flex: 0 0 50%;
    max-width: 50%;
    word-break: break-word;
}
.vs-hoz-label .fieldDescriptor {
    text-align: right;
}

/* Widgets */

.vs-reorder-widget {
    width: 100%;
    overflow: auto;
}
.vs-reorder-widget > .reorder-border {
    border: 1px solid var(--gray-6);
    border: 1px solid hsl(212, 13%, 83%);
    border-radius: 5px;
    overflow: hidden;
}
.vs-reorder-widget table {
    table-layout: fixed;
}
.vs-reorder-widget tbody tr:nth-child(odd) {
    background-color: white;
}
.vs-reorder-widget tbody tr:nth-child(even) {
    background-color: #eee;
}
.vs-reorder-widget td {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
}
.vs-reorder-widget td:hover {
    background: var(--gray-5);
    background: hsl(206, 11%, 71%);
    cursor: move;  /* fallback if grab cursor is unsupported */
    cursor: grab;
}
.vs-reorder-widget td:active {
    cursor: grabbing;
}
.vs-reorder-widget td span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vs-reorder-widget-placeholder td {
    background: white;
}

/* Datatables */

.vs-datatable-header, .vs-datatable-table, .vs-datatable-footer {
    background-color: white;
    border: 1px solid var(--gray-5);
    border: 1px solid hsl(206, 11%, 71%);
}

.vs-datatable-header {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom: none;
    padding-top: 15px;
}

.vs-datatable-table {
    border-top: none;
    border-bottom: none;
    padding: 5px 0;
}

.vs-datatable-footer {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top: none;
    padding-bottom: 15px;
}

.page-item.active a.page-link {
    z-index: 1;
    color: #fff;
    background-color: var(--primary-3);
    background-color: hsl(218.23, 62%, 39.22%);
    border-color: var(--primary-3);
    border-color: hsl(218.23, 62%, 39.22%);
}

.vs-datatable-icon {
    color: var(--gray-4);
    color: hsl(206, 7%, 56%);
    font-size: 1.1em;
}

.vs-datatable-icon:not(.no-hover):hover, .vs-datatable-icon.hovered:not(.no-hover) {
    color: var(--primary-3);
    color: hsl(218.23, 62%, 39.22%);
    cursor: pointer;
}

.vs-datatable-icon.no-hover:hover {
    color: var(--gray-4);
    color: hsl(206, 7%, 56%);
}

.vs-datatable-export {
    color: var(--gray-4);
    color: hsl(206, 7%, 56%);
    font-size: 1.6rem;
    padding-left: 10px;
}

.vs-datatable-export:hover, .vs-datatable-export.hovered {
    color: var(--gray-3);
    color: hsl(212, 9%, 32%);
    cursor: pointer;
}

.vs-datatable-export.no-hover:hover {
    color: var(--gray-4);
    color: hsl(206, 7%, 56%);
}

.vs-datatable-table .hover-error {
    color: var(--danger-3);
    color: hsl(358, 69%, 43%);
    font-size: 1.25rem;
}

/* Non DataTables */
.table.table-borderless td, .table.table-borderless th {
    border: none !important;
}

/* Modals */

.modal {
    /* Fix scrolling with multiple modals. */
    overflow: auto !important;
}

.modal .modal-responsive .modal-content {
    max-width: 95vw;
}

.modal .modal-responsive .modal-body {
    overflow: auto;
}

.modal-title i.vs-help-text-info {
    font-size: 15px !important;
    margin-left: 0.33rem;
}

/*
This print-modal class can be used to print only the modal contents when
printing a page.
*/
@media print {
    .modal.print-modal {
        padding: 0 !important;
    }
    .modal.print-modal  > .modal-dialog {
        margin: 0;
        height: 100%;
        width: 100%;
        max-width: none;
    }
    .modal.print-modal  .modal-content {
        height: 100%;
        border: none;
        border-radius: unset;
    }
    .modal.print-modal .modal-header,
    .modal.print-modal .modal-footer {
        display: none;
    }
}

/* Progress bar */
.progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.progress-container .progress-wrapper {
    width: 100%;
    max-width: 600px;
}

.progress {
    border: 1px solid #ccc;
}

.progress-bar {
    background-color: var(--primary-3);
    background-color: hsl(218.23, 62%, 39.22%);
}

/* Prompted Fields form */
.vs-prompted-fields .card-header > a {
    color: inherit;
    text-decoration: none;
}
.vs-prompted-fields .card-header > a:not([data-toggle="collapse"]) {
    /* If we remove this attribute to make the prompts non-collapsible,
       don't use the pointer cursor. */
    cursor: inherit;
}
.vs-prompted-fields [data-toggle="collapse"] > .fa:before {
    content: "\f078";
    margin-right: 2px;
}
.vs-prompted-fields [data-toggle="collapse"].collapsed > .fa:before {
    content: "\f054";
    margin-right: 5px;
}