header {
    padding-top: 60px;
}

#header-row2 {
    background-color: #3284be;
    color: white;
    font-weight: 400;
    min-height: 50px;
    padding: 5px;
}

#header-row2 {
    /*padding-left: 15%;*/
}

nav li a {
    font-weight: 400;
    color: #3284be;
}
#main-logo {
    width: 240px;
}

#main-container {
    min-height: 600px;
    height: 100%;
    /*padding: 0 15px 0 15px;*/
}

#main-container .container {
    min-height: 600px;
}

header {
    background: #fff;
}

#main-header .container {
    padding-top: 10px;
    padding-bottom: 5px;
}

#main-header .name {
    font-size: 30px;
    padding: 15px 1px 0 10px;
    font-family: 'Josefin Sans', sans-serif;
}

#main-header .title {
    padding: 10px 0 0 25px;
    font-size: 30px;
    font-family: 'Josefin Sans', sans-serif;
}

#mainNav {
    border-bottom: 1px solid lightgray;
}

#mainNav .nav-item {
    font-size: 1.25rem;
}

#mainNav .navbar-brand {
    padding-left: 10px;
}
#profile-section {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
}
#profile-section a,
#profile-section div,
#profile-section img {
    display: inline;
}

.logout-button svg {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
}

.profile-pic {
    padding: 5px;
    width: 57px;
}

.img-thumbnail.profile-pic {
    background-color: #4F4D52;
    border: 0;
    margin-right: 20px;
    padding: 0.15rem;
    cursor: pointer;
    width: 57px;
}

.img-thumbnail.profile-pic-large {
    width: 300px;
    background-color: #4F4D52;
    border: 0;
    margin-right: 20px;
    padding: 0.20rem;
    filter: drop-shadow(5px 5px 4px #7F7F7F);
}

.img-thumbnail.profile-pic-none-interactive {
    background-color: #4F4D52;
    border: 0;
    margin-right: 20px;
    padding: 0.15rem;
    width: 57px;
    height: 57px;
}

.img-thumbnail.user-details-appointment-profile-pic {
    background-color: #4F4D52;
    border: 0;
    margin-right: 20px;
    padding: 0.15rem;
    width: 40px;
    height: 40px;
    display: inline;
}

.popover-body table td {
    padding: 3px;
}

.popover-body .btn {
    margin-right: 5px;
}

.popover-body .btn-group .btn {
    margin-right: 0;
}


#profile-section a #users-name {
    color: #000;
}

#profile-section a:hover {
    text-decoration: none;
}

#profile-section a:hover #users-name {
    color: #4F4D52;
}

footer {
    /*background-color: #aed7f2;*/
    min-height: 40px;
    bottom: 0;
    /*position: absolute;*/
}

footer .container {
    padding-top: 5px;
}

div.spacer {
    background: #fff;
    box-shadow: 0 1px 1px #3284be;
    margin: 0 0 0 15px;
    padding: 15px 15px;
    min-height: 600px;
}

ol.breadcrumb {
    background-color: initial;
    padding: 0 1rem 0 0;
    margin-bottom: 0;
}

.breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-item a,
.breadcrumb-item.active {
    color: #fff;
}

.growl.growl-notice {
    color: #FFF;
    background: #009541;
}

.growl {
    opacity: .9;
}

div.dt-buttons {
    margin-right: 10px;
}

#reports-table_wrapper div.dt-buttons {
    margin-right: 0;
}

.input-group-prepend span.input-group-text {
    width: 120px;
}

#reports-table_length {
    padding-top: .55em;
}

#reports-table_paginate {
    padding-top: .25em;
}

#search_spinner {
    display: none;
}

#message_box {
    display: none;
}

.form-horizontal .control-label {
    padding-top: 0px;
}

.table-striped tbody tr:nth-of-type(2n+1) {
    background-color: rgba(0,0,0,.02);
}

.btn-default {
    background-color: rgba(50,132,190,0.12);
}

.btn-default:hover {
    background-color: rgba(50,132,190,0.25);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0;
    margin-left: 0;
}

/*
    Appointment CSS
*/

.appointment-subtitle {
    margin-top: 10px;
}

.appointment-ul {
    list-style-type: none;
}

#add-new-type {
    margin-top: 15px;
}

div.row .btn {
    margin: .375rem;
}

div.row .btn-group .btn {
    margin-right: 0;
}

div.counselor-assign-box {
    margin: 1rem 0;
}

.learner-list .drop-target, .counselor-assign-box .drop-target {
    background-color: #3284be;
    color: #fff;
    border: 3px solid #fff;
}

.learner-list .drop-information, .counselor-assign-box .drop-information {
   /*background-color: #90D1FF;*/
    background-color: #FFC000;
    padding: 10px;
    display: none;
}

.learner-list .drop-information p, .counselor-assign-box .drop-information p {
    margin: 15px;
    color: black;
    font-weight: bold;
}

.learner-row {
    z-index: 1000;
}

/*
    Login
 */

.login-button {
    width: 100%;
    display: block;
    margin-top: 15px;
    padding: 5px;
}

a div.login-button  {
    color: white;
    font-weight: bold;
}

div.row .btn.login-button {
    margin-top: 15px;
    margin-left: 0;
    margin-right: 0;
}


/*
 Manage Users CSS
 */

ul.userRoles {
    list-style-type: none;
    padding-left: 0.25rem;
}

/*
 calendar popover css
 */

.popover {
    border-width: 2px;
    min-width: 100px;
}

.popover .time_long {
    font-size: .75rem;
}

.popover button.close-popover,
.popover button.edit-popover,
.popover button.delete-popover,
.popover button.assign-learner-popover,
.popover button.assign-spot-popover {
    font-size: 0.75rem;
    margin-bottom: 10px;
}

.popover button.assign-spot-popover,
.popover button.assign-learner-popover {
    margin-right: 10px;
}

.popover-body ul {
    margin: 15px 10px;
    padding-left: 2px;
}

.popover-body li {
    list-style: none;
}

.popover-body li div.btn-group {
    display: inline;
}

.popover-body li .btn-group {
    margin-left: 10px;
}

/*.popover button.edit-popover {*/
    /*margin-right: 15px;*/
/*}*/

.popover .popover-header {
    background-color: #3284be;
    color: #fff;
}


#legend-row  {
    margin-top: 10px;
}
.square-swatch {
    height: 10px;
    width: 10px;
    display: inline-block;
}

.selected-square-swatch {
    background-color: #168DFF
}

.available-square-swatch {
    background-color: #2D9C3D
}

.unavailable-square-swatch {
    background-color: #B03B2F
}

div.learner-appointments-container {
    padding: 10px 0;
}

div.learner-appointment {
    padding: 5px 10px 5px 10px;
}

.appointment-form form .row {
    margin-bottom: 10px;
}

.appointment-form form {
    margin: 0 25px;
}

#current-users .select-user .fa-circle {
    color: #122b40;
}

#current-users .select-user:hover .fa-circle {
    color: white;
}
#current-users .select-user .fa-check-circle {
    color: seagreen;
}
#recurring-row {
    min-height: 30px;
}
.data-item.row {
    border-bottom: solid 1px #DDD;
    padding: 15px 0;
}
.data-item .remove-item {
    color: #666;
}
.data-item .remove-item:hover {
    color: #B03B2F;
    cursor: pointer;
}
.data-item.row:first-child {
    border-top: solid 1px #DDD;
}
.data-item.row:last-child {
    border-bottom: none;
}
.add-more-link {
    padding: 25px;
    cursor: pointer;
    color: #666;
}
.add-more-link:hover {
    background-color: #e9ecef;
    color: #1b6dd1;
}
.row#form-options {
    padding-bottom: 20px;
}
#monthly-select-group {
    margin-left: 5px;
    margin-right: 5px;
}
#dayofweek-select-group {
    margin-left: 5px;
    margin-right: 5px;
}
.help-block {
    font-size: 12px;
    color: #666;
}
#login_information .card {
    margin-bottom: 10px;
}
#login_information .card .card-header {
    background-color: #3284be;
    color: white;
    font-weight: bold;
}
#header-row2 .breadcrumb-item + .breadcrumb-item::before {
    color: white;
}

#header-row2 .breadcrumb-item.active {
    color: white;
}
.badge-request-item-list {
    padding: 8px;
    background-color: #f5f5f5;
    color: #666;
    margin-right: 5px;
}

.row-timeslot .datetimepicker-timeslot {
    z-index: 1040;
}

.profile-menu-container {
    position: relative;
}

.profile-menu {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    border-width: 0px;
    width: 250px;
    text-align: left;
    position: absolute;
    z-index: 5;
    background: #fff;
    right: 0;
    top: 75px;
    font-size: 18px;
    border-radius: 3px;
    box-sizing: border-box;
    box-shadow: 1px 1px 4px #999;
}

.profile-menu-item {
    padding: 15px 20px;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    color: #4c4c4c;
}

.profile-menu-item:last-child {
    border-bottom-width: 0px;
}

.profile-menu-item a {
    color: inherit;
}

.profile-menu-item span {
    padding-left: 15px;
}

.profile-menu-item:hover {
    background-color: #007bff;
    color: #fff;
}

.profile-menu-btn {
    font-size: 40px;
    margin-left: 25px;
    cursor: pointer;
}

.profile-menu-btn i {
    display: block;
}

.fa-caret-square-right {
    color: #4c4c4c;
    transform: rotate(0deg);
    animation-fill-mode: forwards !important;
}

@keyframes rotateright {
    0% { transform: rotate(90deg); }
    100% { transform: rotate(0deg); }
}

@keyframes rotatebottom {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(90deg); }
}

div.question {
    margin-left: 10px;
}

.choice-container .card-body {
    padding: 0.5rem
}

.option-choices div.row .btn.arrow {
    margin: 0 0 0 5px;
}

.option-choices .middle-column textarea {
    width: 100%;
}


.poster-list-group {
    margin: 0;
    padding: 0;
    list-style: none;
    display: table;
}

.poster-list-item {
    position: relative;
    padding: 10px 0;
}
.poster-list-item a {
    color: #000;
    text-decoration: none;
    letter-spacing: 0.15em;
    display: block;
    padding: 10px;
    position: relative;
}

.poster-list-item a:after {
    position: absolute;
    content: "";
    bottom: 0;
    left: 50%;
    display: block;
    height: 2px;
    background: #3284be;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
}

.poster-list-item a:hover:after,
.poster-list-item a:focus:after {
    width: 100%;
    left: 0;
}

.main-page-events .poster-list-item a {
    padding: 3px;
}

.main-page-events p.poster-list-item {
    padding: 0;
}