/* Shift Role Title */
.new-shift-details-popup {
    /* overflow-x: hidden; */
}

.shift-details-content-container .fa-lg {
    font-size: 18px !important;
}

.shift-details-content-container {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 20px 0;
}

.shift-details-content-container.bottom-drop-shadow {
    -webkit-box-shadow: inset 0 -7px 9px -7px rgba(50,50,50,0.5);
    -moz-box-shadow:    inset 0 -7px 9px -7px rgba(50,50,50,0.5);
    box-shadow:         inset 0 -7px 9px -7px rgba(50,50,50,0.5);
}

.shift-details-popup {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.shift-details-popup-header.shift-signup-header {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.shift-details-popup-header.shift-signup-header div.add-to-shift-cart-holder {
    flex: 1;
    margin-top: 2px;
    padding-left: 10px;
}

.shift-details-popup-header.shift-signup-header div.add-to-shift-cart-holder label {
    color: #FFF;
    margin-top: 4px;
    margin-left: 5px;
    vertical-align: top;
}

.shift-details-popup-header.shift-signup-header div.open-spots-holder {
    flex: 1;
}

.shift-details-popup-header.shift-signup-header div.open-spots-holder h6.open-spots {
    color: #FFF;
    margin-top: 5px;
    margin-right: 40px;
    padding-right: 15px;
    padding-top: 4px;
    padding-bottom: 5px;
    text-align: right;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 700;
    border-right: 1px solid #fff;
    line-height: 15px;
}

.shift-details-popup-header.shift-signup-header div.open-spots-holder button {
    position: absolute;
    right: 15px;
    top: 22px;
}

.shift-details-popup .shift-details-wrapper {
    flex: 1;
    -ms-flex: 1; /* IE 10 */
}

.shift-details-popup .conflicts-wrapper {
    flex: 1;
    -ms-flex: 1; /* IE 10 */
    margin-left: 25px;
}

.shift-details-popup .shift-title-holder {
    margin-top: 15px;
    margin-bottom: 15px;
}

.shift-details-popup .shift-role-title-holder h3 {
    font-weight: 600;
    font-size: 18px;
    margin: 10px 0 15px;
}

.shift-details-popup .shift-role-title-holder p {
    font-weight: 400;
    font-size: 15px;
    color: #999;
}

/* Shift Details */

.shift-details-popup .shift-details-holder p {
    font-weight: 400;
    font-size: 15px;
    color: #999;
    margin: 0;
}

.shift-details-popup .shift-details-holder h6 {
    font-weight: 700;
    font-size: 15px;
    /* color: rgb(44, 62, 80); */
    margin: 1px;
    padding: 0;
}

.shift-details-popup .shift-details-holder span.details h6 i.fa-external-link {
    color: inherit;
}

.shift-details-popup .shift-details-holder div.row {
    margin-top: 5px;
}

.shift-details-popup .shift-details-holder div.row:first-child {
    margin-top: 0;
}

.shift-details-popup .shift-details-holder i {
    font-weight: 400;
    font-size: 13px;
    color: #ccc;
    line-height: 1.5em;
    vertical-align: top;
}

.shift-details-popup .shift-details-holder i.special-case {
    line-height: 1.05em;
    font-size: 15px;
}

.shift-details-popup .shift-details-holder h5 {
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 5px;
}

.shift-details-popup h4 {
    font-weight: 600;
    font-size: 16px;
}

.shift-details-popup p.desc-text {
    font-size: 15px;
    word-break: break-all;
}

.shift-details-popup .shift-conflicts-container .shift-conflicts-holder,
.shift-details-popup .opportunity-overlap-conflicts-container .opportunity-overlap-conflicts-holder,
.shift-details-popup .shift-confirmation-container .shift-confirmation-holder,
.shift-details-popup .availability-conflict-container .availability-conflict-holder,
.shift-details-popup .max-shift-limit-conflict-container .max-shift-limit-conflict-holder,
.shift-details-popup .max-hours-limit-conflict-container .max-hours-limit-conflict-holder,
.shift-details-popup .group-conflict-container .group-conflict-holder {
    background: #E9EAEA;
    border: 1px solid #dfdfdf;
    border-radius: 3px;
    padding: 8px;
}

.shift-details-popup .shift-conflicts-container .shift-conflicts-holder h4 i,
.shift-details-popup .opportunity-overlap-conflicts-container .opportunity-overlap-conflicts-holder h4 i,
.shift-details-popup .availability-conflict-container .availability-conflict-holder h4 i,
.shift-details-popup .max-shift-limit-conflict-container .max-shift-limit-conflict-holder h4 i,
.shift-details-popup .max-hours-limit-conflict-container .max-hours-limit-conflict-holder h4 i,
.shift-details-popup .group-conflict-container .group-conflict-holder h4 i {
    color: #EE4A5D;
    padding-right: 3px;
}

.shift-details-popup .shift-confirmation-container .shift-confirmation-holder i.shift-confirmation-icon {
    width: 100%;
    text-align: center;
    color: #EE4A5D;
}

.shift-details-popup .availability-conflict-container .availability-conflict-holder h4,
.shift-details-popup .max-shift-limit-conflict-container .max-shift-limit-conflict-holder h4,
.shift-details-popup .max-hours-limit-conflict-container .max-hours-limit-conflict-holder h4,
.shift-details-popup .shift-conflicts-container .shift-conflicts-holder h4,
.shift-details-popup .opportunity-overlap-conflicts-container .opportunity-overlap-conflicts-holder h4,
.shift-details-popup .group-conflict-container .group-conflict-holder h4 {
    font-weight: 600;
    font-size: 16px;
}

.shift-details-popup h4.conflict-counter {
    font-size: 18px;
    padding: 0;
    margin: 10px 0 10px;
}

.shift-details-popup h4.conflict-counter {
    color: #EE4A5D;
}

.shift-details-popup h4.conflict-counter i {
    color: #EE4A5D;
    padding-right: 3px;
}

.shift-details-popup .shift-confirmation-container .shift-confirmation-holder h4 {
    text-align: center;
}

.shift-details-popup .shift-confirmation-container .shift-confirmation-holder h6 {
    text-align: center;
    font-size: 15px;
}

.shift-details-popup .shift-confirmation-container .shift-confirmation-holder.confirmed h6 {
    color: #70B300;
}

.shift-details-popup .shift-confirmation-container .shift-confirmation-holder.confirmed i {
    color: #70B300;
}

.shift-details-popup .shift-confirmation-container .shift-confirmation-holder.declined h6 {
    color: #EE4A5D;
}

.shift-details-popup .shift-confirmation-container .shift-confirmation-holder.declined i {
    color: #EE4A5D;
}

.shift-details-popup .availability-conflict-container .availability-conflict-holder p,
.shift-details-popup .max-shift-limit-conflict-container .max-shift-limit-conflict-holder p,
.shift-details-popup .max-hours-limit-conflict-container .max-hours-limit-conflict-holder p,
.shift-details-popup .shift-conflicts-container .shift-conflicts-holder p,
.shift-details-popup .opportunity-overlap-conflicts-container .opportunity-overlap-conflicts-holder p,
.shift-details-popup .group-conflict-container .group-conflict-holder p {
    font-size: 15px;
    font-weight: 500;
    margin: 0 0 5px;
}

.shift-details-popup .shift-conflicts-container .shift-conflicts-holder ul.shift-conflicts-list,
.shift-details-popup .opportunity-overlap-conflicts-container .opportunity-overlap-conflicts-holder ul.opportunity-overlap-conflicts-list {
    margin-bottom: 5px;
}

.shift-details-popup .shift-conflicts-container .shift-conflicts-holder ul.shift-conflicts-list li,
.shift-details-popup .opportunity-overlap-conflicts-container .opportunity-overlap-conflicts-holder ul.opportunity-overlap-conflicts-list li {
    font-size: 15px;
    list-style-type: none;
    position: relative;
    display: block;
    padding-left: 10px;
    line-height: 20px;
}

.shift-details-popup .shift-conflicts-container .shift-conflicts-holder ul.shift-conflicts-list li.see-more,
.shift-details-popup .opportunity-overlap-conflicts-container .opportunity-overlap-conflicts-holder ul.opportunity-overlap-conflicts-list li.see-more {
    color: #3F8F24;
}

.shift-details-popup .shift-conflicts-container .shift-conflicts-holder ul.shift-conflicts-list li.see-more:hover,
.shift-details-popup .opportunity-overlap-conflicts-container .opportunity-overlap-conflicts-holder ul.opportunity-overlap-conflicts-list li.see-more:hover {
    cursor: pointer;
    color: #2F6B1B;
}

.shift-details-popup .shift-conflicts-container .shift-conflicts-holder ul.shift-conflicts-list li.see-more::after,
.shift-details-popup .opportunity-overlap-conflicts-container .opportunity-overlap-conflicts-holder ul.opportunity-overlap-conflicts-list li.see-more::after {
    content: "\25bc";
    position: absolute;
    bottom: 4px;
    height: 6px;
    left: 80px;
    line-height: 0;
    font-size: 7px;
}

.shift-details-popup .shift-conflicts-container .shift-conflicts-holder ul.shift-conflicts-list li.see-more.open::after,
.shift-details-popup .opportunity-overlap-conflicts-container .opportunity-overlap-conflicts-holder ul.opportunity-overlap-conflicts-list li.see-more.open::after {
    content: "\25b4";
    font-size: 20px;
}

.shift-details-popup .shift-conflicts-container .shift-conflicts-holder ul.shift-conflicts-list li:not(.see-more)::before,
.shift-details-popup .opportunity-overlap-conflicts-container .opportunity-overlap-conflicts-holder ul.opportunity-overlap-conflicts-list li:not(.see-more)::before {
    content: "•";
    font-size: 24px;
    padding-right: 5px;
    position: absolute;
    top: 9px;
    height: 5px;
    left: -10px;
    line-height: 0;
}

.shift-details-popup .shift-confirmation-container .shift-confirmation-holder .shift-confirmation-actions-container {
    display: flex;
    flex-direction: row;
    -webkit-flex-direction: row;
}

.shift-details-popup .shift-confirmation-container .shift-confirmation-holder .shift-confirmation-actions-container .shift-confirmation-action-holder {
    flex: 1;
    -webkit-flex: 1;
    margin: 0 3px 0;
}

.shift-details-popup .shift-confirmation-container .shift-confirmation-holder .shift-confirmation-actions-container .shift-confirmation-action-holder:first-child button {
    float: right;
}

.shift-details-popup .shift-confirmation-container .shift-confirmation-holder .shift-confirmation-actions-container .shift-confirmation-action-holder button {
    line-height: 16px;
}

.shift-details-popup .shift-confirmation-container .shift-confirmation-holder .shift-confirmation-actions-container .shift-confirmation-action-holder button i {
    font-size: 16px;
    vertical-align: top;
}

.shift-details-popup .shift-confirmation-container .shift-confirmation-holder.confirmed .light-gray-disabled-btn i,
.shift-details-popup .shift-confirmation-container .shift-confirmation-holder.declined .light-gray-disabled-btn i {
    color: #999999;
}

.shift-details-popup .shift-confirmation-container .shift-confirmation-holder .shift-confirmation-actions-container .shift-confirmation-action-holder a {
    font-size: 15px;
    color: #3d3d3d;
}

.shift-details-popup .shift-confirmation-container .shift-confirmation-holder.confirmed .shift-confirmation-actions-container .shift-confirmation-action-holder,
.shift-details-popup .shift-confirmation-container .shift-confirmation-holder.declined .shift-confirmation-actions-container .shift-confirmation-action-holder {
    text-align: center;
}

.new-shift-details-popup .modal-footer {
    margin-top: 0;
}

.modal-footer button.remove-me-btn {
    background: #E9EAEA;
    color: #464646;
    border: 1px solid #d3d3d3;
    line-height: 20px;
}



.modal-footer button.remove-me-btn i {
    margin-right: 3px;
    vertical-align: top;
    margin-top: 4px;
}

.modal-footer .add-to-shift-cart-holder {
    padding: 5px 10px 0 0;
    margin: 1px 10px 0 0;
    float: right;
    border-right: 1px #dfdfdf solid;
}

.modal-footer .add-to-shift-cart-holder input[type="checkbox"] {
    vertical-align: middle;
    margin-top: 0;
}

.modal-footer .add-to-shift-cart-holder label {
    margin-right: 5px;
}


.shift-setting-display button{
    margin-top:0px;
}
@media (min-width: 992px) {
    .shift-details-popup-window .modal-dialog {
        width: 70%;
    }
    #master-conflicts-container {
        display: block !important;
        height: auto !important;
        overflow: hidden !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .shift-details-popup-window .modal-dialog {
        width: 80%;
    }
    #master-conflicts-container {
        display: block !important;
        height: auto !important;
        overflow: hidden !important;
    }
}

@media (max-width: 767px) {
    .shift-details-popup-window .modal-dialog {
        width: 95%;
    }
    .shift-details-popup {
        flex-direction: column-reverse;
        flex-wrap: nowrap;
    }
    .shift-details-popup h4.conflict-counter {
        padding: 10px 16px;
        border-radius: 8px;
        background-color: #ff9999;
        color: #fff;
        cursor: pointer;
    }
    .shift-details-popup h4.conflict-counter.collapsed::after {
        content: "\f078"; 
        font-family: FontAwesome;
        font-weight: 400;
        padding-left: 10px;
    }
    .shift-details-popup h4.conflict-counter::after {
        content: "\f077"; 
        font-family: FontAwesome;
        font-weight: 400;
        padding-left: 10px;
    }
    .shift-details-popup h4.conflict-counter i {
        color: #fff;
    }
    .shift-details-popup .shift-details-wrapper {
        flex: 0 0 100%;
        -ms-flex: 0 0 100%; /* IE 10 */
        margin-top: 10px;
    }
    .shift-details-popup .conflicts-wrapper {
        flex: 0 0 100%;
        -ms-flex: 0 0 100%; /* IE 10 */
        margin-left: 0;
    }
    /* NOT IN POPUP */
    .tooltip {
        visibility: hidden;
    }
}

@media only screen and (max-width: 420px) {
  .shift-setting-display button{
    font-size:12px !important;
  }

  .shift-details-display span{
    font-size:12px !important;
  }
}

@media (min-width: 400px) and (max-width: 550px) {
    .shift-details-popup-header.shift-signup-header div.open-spots-holder {
        flex: 1.5;
    }
}

@media (max-width: 399px) {
    .shift-details-popup-header.shift-signup-header div.open-spots-holder {
        flex: 1.5;
    }
    .shift-details-popup-header.shift-signup-header div.open-spots-holder h6.open-spots {
        font-size: 12px;
        border: none;
        padding: 4px 0 0 0;

    }
    .shift-details-popup-header.shift-signup-header div.add-to-shift-cart-holder label {
        font-size: 12px;
        padding: 2px 0 0 0;
    }
}

@media (min-height: 610px) and (max-height: 700px) {
    .shift-details-content-container {
        max-height: 400px;
    }
}

@media (min-height: 511px) and (max-height: 609px) {
    .shift-details-content-container {
        max-height: 300px;
    }
}

@media (min-height: 420px) and (max-height: 510px) {
    .shift-details-content-container {
        max-height: 200px;
    }
}

@media (max-height: 419px) {
    .shift-details-content-container {
        max-height: 150px;
    }
}