#logoutForm {
    margin: 23px 0 0 10px;
}

    #logoutForm a {
        text-transform: uppercase;
        color: #fff;
    }

.btn {
    margin: 0;
}

btn-marginright {
    margin-right: 10px;
}

.warning-block {
    position: absolute;
    top: 0;
    width: 100%;
    background-color: #fcf8e3;
    border-bottom: 2px solid #faebcc;
    z-index: 1000;
    text-align: center;
}

    .warning-block p, .warning-block p strong {
        color: #8a6d3b !important;
        margin: 5px 0;
    }


/*************  Photo Masonry  ****************/
#grid {
 -moz-column-width: 15em;
 -webkit-column-width: 15em;
 -moz-column-gap: 1em;
 -webkit-column-gap:1em; 
  
}

.item {
    text-align:center;
 display: inline-block;
 padding:  .25rem;
 width:  100%; 
 margin-bottom: 15px;
}

/*************  Important Information Well  ****************/


.important-information-well, .share-dialog {
    min-height: 20px;
    padding: 15px 5px;
    background-color: #151515;
    color: #ffffff;
    text-align: center;
}

    .important-information-well h5, .important-information-well p strong {
        color: #ffffff;
    }


/*************  Customer portal Messages  ****************/
.customer-portal-well {
    min-height: 20px;
    padding: 15px;
    background-color: #151515;
    color: #ffffff;
}

    .customer-portal-well h5 {
        color: #ffffff;
    }

.customer-portal-messages {
    margin: 0;
    padding: 0;
}

customer-portal-messages > li {
    border-bottom: 1px #ccc solid;
}

.customer-portal-message-recipient {
    font-size: 10px;
    line-height: 10px;
    color: #AFAFAF;
    padding-top: 10px;
}

/*************  DatePicker ****************/


.ui-datepicker {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #ccc;
}

.ui-datepicker-next {
    float: right;
}


/*************  Photographer portal ****************/

.section-hr {
    border-bottom: 2px solid #151515;
    margin-bottom: 40px !important;
}

.photo-count {
    display: inline-block;
    margin-bottom: 0;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 12px;
    line-height: 1.8;
    user-select: none;
    font-size: 10px;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-family: "Radikal", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.photo-count-black {
    background-color: #151515;
}

.photo-count-red {
    background-color: #900;
}




/*************  Custom Padding and margins ****************/
.padding-bottom-25 {
    padding-bottom: 35px;
}

.margin-right-10 {
    margin-right: 10px !important;
}


/*************  Custom Form ****************/
.form-contact table {
    max-width: 600px;
    margin: 0 auto;
}



.alert-danger {
    background-color: #900;
    border: none;
    color: #fff;
}

.alert-success {
    background-color: #3c763d;
    border: none;
    color: #fff;
}

.alert {
    padding: 15px;
    margin-bottom: 25px !important;
    border: none;
    border-radius: 0px;
}

.input-validation-error, input.error, textarea.error, select.error {
    background-color: #ffeeee !important;
}

.field-validation-error, label.error {
    display: block;
    color: #900;
    margin-top: 0 !important;
    padding-top: 5px !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/*************  Responsive Tables ****************/
/* 
Generic Styling, for Desktops/Laptops 
*/
table.photographer-bookings, table.customer-bookings {
    width: 100%;
    border-collapse: collapse;
}

    table.photographer-bookings td, table.photographer-bookings th, table.customer-bookings td, table.customer-bookings th {
        padding: 6px;
        border: none;
        text-align: left;
    }

    table.photographer-bookings tr td, table.customer-bookings tr td {
        border-top: none;
    }

@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
    table.photographer-bookings table, table.photographer-bookings thead, table.photographer-bookings tbody, table.photographer-bookings th, table.photographer-bookings td, table.photographer-bookings tr,
    table.customer-bookings table, table.customer-bookings thead, table.customer-bookings tbody, table.customer-bookings th, table.customer-bookings td, table.customer-bookings tr {
        display: block;
    }

        table.photographer-bookings thead tr, table.customer-bookings thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    table.photographer-bookings tr, table.customer-bookings tr {
        border: 1px solid #151515;
    }

        table.photographer-bookings td, table.photographer-bookings tr td:first-child, table.photographer-bookings tr th:first-child,
        table.customer-bookings td, table.customer-bookings tr td:first-child, table.customer-bookings tr th:first-child {
            border: none;
            position: relative;
            padding-left: 33%;
        }

            table.photographer-bookings td:before, table.customer-bookings td:before {
                position: absolute;
                top: 6px;
                left: 6px;
                width: 30%;
                font-weight: bold;
                padding-right: 10px;
                white-space: nowrap;
            }

            table.photographer-bookings td:nth-of-type(1):before {
                content: "ID";
            }

            table.photographer-bookings td:nth-of-type(2):before {
                content: "Confirmed Date";
            }

            table.photographer-bookings td:nth-of-type(3):before {
                content: "Itinerary";
            }

            table.photographer-bookings td:nth-of-type(4):before {
                content: "Time";
            }

            table.photographer-bookings td:nth-of-type(5):before {
                content: "Photos";
            }

            table.photographer-bookings td:nth-of-type(6):before {
                content: "Customer";
            }

            table.photographer-bookings td:nth-of-type(7):before {
                content: "Actions";
            }

            table.customer-bookings td:nth-of-type(1):before {
                content: "ID";
            }

            table.customer-bookings td:nth-of-type(2):before {
                content: "Confirmed Date";
            }

            table.customer-bookings td:nth-of-type(3):before {
                content: "Location";
            }

            table.customer-bookings td:nth-of-type(4):before {
                content: "Photographer";
            }

            table.customer-bookings td:nth-of-type(5):before {
                content: "Itinerary";
            }

            table.customer-bookings td:nth-of-type(6):before {
                content: "Paid";
            }

            table.customer-bookings td:nth-of-type(7):before {
                content: "Total";
            }

            table.customer-bookings td:nth-of-type(8):before {
                content: "Oweing";
            }
}

/*************  Pagination overides ****************/
.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 0;
}

    .pagination li a {
        font-size: 14px !important;
    }

    .pagination > li > a,
    .pagination > li > span {
        position: relative;
        float: left;
        padding: 6px 12px;
        margin-left: -1px;
        line-height: 1.428571429;
        text-decoration: none;
        background-color: #ffffff;
        border: 2px solid #151515;
    }

    .pagination > li:first-child > a,
    .pagination > li:first-child > span {
        margin-left: 0;
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }

    .pagination > li:last-child > a,
    .pagination > li:last-child > span {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .pagination > li > a:hover,
    .pagination > li > span:hover,
    .pagination > li > a:focus,
    .pagination > li > span:focus {
        background-color: #151515;
        border-color: #151515;
        color: #fff;
    }


    .pagination > .active > a,
    .pagination > .active > span,
    .pagination > .active > a:hover,
    .pagination > .active > span:hover,
    .pagination > .active > a:focus,
    .pagination > .active > span:focus {
        z-index: 2;
        color: #ffffff;
        cursor: default;
        background-color: #151515;
        border-color: #151515;
    }

    .pagination > .disabled > span,
    .pagination > .disabled > a,
    .pagination > .disabled > a:hover,
    .pagination > .disabled > a:focus {
        color: #ffffff;
        cursor: not-allowed;
        background-color: #151515;
        border-color: #151515;
    }


/*************  Feedback form  ****************/


#add-feedback-container, #nps-feedback-container {
    background-color: #151515;
    color: #fff;
    padding: 20px;
}

#nps-feedback-container {
    background-color: #151515;
    color: #fff;
    padding: 20px;
}

#nps-feedback-container h3 {
    color: #fff;
}

* [title="rating"] input {
    position: absolute;
    top: -2em;
    clip: rect(0,0,0,0);
}

* [title="rating"] {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: center;
    border: 0;
    font-size: 0;
    display: inline-block;
    vertical-align: middle;
}

* [title="rating"] label {
    font-size: 32px;
    font-size: 3rem;
    line-height: 32px;
    line-height: 2rem;
    display: inline-block;
    position: relative;
    text-align: center;
    width: 1.2em;
    height: 1em;
    overflow: hidden;
    text-indent: 100%;
}

* [title="rating"] label:before {
    content: "★";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-indent: 0;
    line-height: 1em;
    color: #fff;
}

* [title="rating"] label:hover:before,
* [title="rating"] label:hover ~ label:before,
* [title="rating"] input:checked ~ label:before {
    content: "★";
    color: #ffbb04;
}

* [title="rating"] label:active {
    position: relative;
    top: 1px;
}

.terms-well {
    max-height:400px; 
    overflow-y: scroll; 
    font-size: 0.8em; line-height: 18px;
}
.terms-well p {
    line-height: 18px;
}