.add-image-image-container {
    -o-justify-content: center;
    -webkit-justify-content: center;
    display: flex;
    justify-content: center;
    max-height: 250px;
    max-width: 250px;
}

.add-image-image-container.vertical { max-width: 100%; }

#aboutus-container .add-image-image-container.vertical { height: 250px; }


.add-image-image-container.header { max-height: 385px; }

#logo-image-container .add-image-image-container { height: 173px; }

#logo-image-container .add-image-image-container {
    margin: 0 auto;
    max-width: 100%;
}

.add-image-image-container img{
    align-self: center;
    max-width: 100%;
    max-height: 100%;
}

.horizontal-image-buttons{
    display: flex;
    justify-content: space-evenly;
    width: 100%;
}

#logo-image-container-text, .selected-color-text, palette-color-text { margin: 10px 0 10px 3px; }

.selected-color-text { clear: both; }

.picture-button-form-container .btn {
    padding-left: 10px;
    padding-right: 10px;
}

#logo-image-buttons { margin: 0 auto; }

.list-image-image-container {
    height: 100%;
    max-height: 200px;
    max-width: 200px;
    width: 100%;
}

.add-margin-top { margin-top: 15px; }

.add-margin-bottom { margin-bottom: 15px; }

.validationMessage { color: red; }

.images-list-container {
    max-height: 500px;
    overflow: auto;
}

ul.thumbnails.image_picker_selector li .thumbnail {
    height: 260px;
    width: 174px;
}

ul.thumbnails.image_picker_selector li .thumbnail p {
    font-weight: bold;
    margin: 0;
    padding: 15px 5px 15px 5px;
    text-align: center;
}

ul.thumbnails.image_picker_selector li .thumbnail.selected p { color: whitesmoke; }

.well { background-color: #cecece; }

.middle-helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.image_picker_selector .thumbnail > div {
    height: 160px;
    width: 160px;
}

ul.thumbnails.image_picker_selector li .thumbnail img {
    display: inline-block;
    vertical-align: middle;
}

.company-image-container {
    max-height: 350px;
    max-width: 250px;
}

.readmote-toggle { cursor: pointer; }

.beoordeling .sender { margin-top: 15px; }

.review-content { margin-bottom: 0; }

.gallery-item {
    cursor: pointer;
    min-height: 200px;
}

.track { display: block; }

.circle-button {
    -moz-user-select: none;
    -ms-border-radius: 3px;
    -ms-touch-action: manipulation;
    -ms-user-select: none;
    -webkit-user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 18px;
    color: white;
    cursor: pointer;
    display: inline-block;
    font-size: 20px;
    font-weight: 500;
    height: 35px;
    line-height: 1.714285;
    margin-bottom: 0;
    text-align: center;
    touch-action: manipulation;
    user-select: none;
    vertical-align: middle;
    white-space: nowrap;
    width: 35px;
}

.top-menu-icons li {
    display: inline-block;
    margin-top: 17px;
    position: relative;
}

.affix .top-menu-icons li {
    -moz-transition: all 250ms ease-out;
    -ms-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    -webkit-transition: all 250ms ease-out;
    margin-top: 10px;
    transition: all 250ms ease-out;
}

.affix .top-menu-icons .fa {
    position: relative;
    top: -2px;
}

.affix .top-menu-icons .fa-envelope-o {
    -moz-transition: all 250ms ease-out;
    -ms-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    -webkit-transition: all 250ms ease-out;
    font-size: 16px;
    top: -5px;
    transition: all 250ms ease-out;
}

.affix .circle-button {
    -moz-transition: all 250ms ease-out;
    -ms-transition: all 250ms ease-out;
    -o-transition: all 250ms ease-out;
    -webkit-transition: all 250ms ease-out;
    height: 30px;
    transition: all 250ms ease-out;
    width: 30px;
}

.top-menu-icons a:hover,
.top-menu-icons a:focus { color: white; }

.clientscore a { position: relative; }

.notransition {
    -moz-transition: none !important;
    -o-transition: none !important;
    -webkit-transition: none !important;
    transition: none !important;
}

.readmore-toggle { cursor: pointer; }

.navbar-brand > img {
    display: block;
    height: 100%;
    width: auto;
}

.navbar-brand {
    background-image: none !important;
    text-decoration: none;
}

.navbar-brand span {
    display: table-cell;
    vertical-align: middle;
}

.modal.in .modal-dialog {
    -moz-transform: translate(0, 50%);
    -ms-transform: translate(0, 50%);
    -o-transform: translate(0, 50%);
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%);
}

.pointer { cursor: pointer; }

.module .viewer-container ul.viewer-toolbar li::before { display: block; }

.carousel-image {
    height: 125px;
    text-align: center;
    white-space: nowrap;
    width: 100%;
}

.carousel-image img {
    max-height: 125px;
    max-width: 100%;
    vertical-align: middle;
}

.btn > i.fa { padding: 0 5px; }

#palette-color-container {
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    -o-justify-content: space-between;
    -webkit-flex-wrap: wrap;
    -webkit-justify-content: space-between;
    display: flex;
    flex-wrap: wrap;
    
    justify-content: space-between;
}

.palette-color {
    border: 5px whitesmoke solid;
    height: 80px;
    margin-bottom: 11px;
    padding: 0;
    width: 18%;
}

.picture-button-form-container {
    -ms-align-items: center;
    -o-align-items: center;
    -webkit-align-items: center;
    align-items: center;
    display: flex;
}

.picture-button-form-container.vertical { height: 173px; }

.selected-color {
    border: 5px whitesmoke solid;
    height: 167px;
    margin: 3px;
    padding: 0;
}

.owl-theme .owl-controls {
    left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
}

.owl-carousel .owl-wrapper-outer.autoHeight {
    -moz-transform: translateY(-35%);
    -ms-transform: translateY(-35%);
    -o-transform: translateY(-35%);
    -webkit-transform: translateY(-35%);
    transform: translateY(-35%);
}

ul.thumbnails.image_picker_selector li { margin: 0 8px 0 0; }

.viewer-title {
    color: whitesmoke !important;
    font-size: 20px !important;
}

.admin-functionalities a { text-decoration: none; }

.realizations-tile {
    /*min-height: 200px;*/
    cursor: pointer;
}

div.realizations-title {
    height: 38px;
    line-height: 16px;
    word-break: break-word;
}

.viewer-toolbar.viewer-hide { display: none !important; }


.clientscore.flag-small {
    font-size: 13px;
    height: 205px;
    line-height: 12px;
    width: 120px;
}

.clientscore.flag-small:before {
    background-position: center -85px;
    height: 170px;
    width: 120px;
}

.clientscore.flag-small .wrapper-score {
    height: 60px;
    line-height: 60px;
    width: 60px;
}

.clientscore.flag-small .wrapper-score .score { left: 7px; }

.clientscore.flag-small .wrapper-score .comma { left: 34px; }

.clientscore.flag-small .wrapper-score .upper { left: 37px; }

.btn-add {
    background-color: white;
    border-color: lightgray;
    color: black;
    text-decoration: none;
}

.btn-add:hover {
    background-color: whitesmoke;
    border-color: darkgray;
    color: black;
}

.btn-add:active {
    background-color: lightgray;
    border-color: darkgray;
    color: black;
}

.last-review-content { margin: 0; }

a.btn { text-decoration: none; }

ul.homelist { padding-left: 20px; }

.rotate-90 { transform: rotate(90deg); }

.rotate-180 { transform: rotate(180deg); }

.rotate-270 { transform: rotate(-90deg); }

.certificate-row .popover { width: 270px; }

.review-files-thumbnail > .review-files-shouldRemove {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.review-files-thumbnail.review-files-shouldRemove { background: gray; }

.review-files-container {
    height: 100%;
    overflow: hidden;
    width: 100%;
}

.review-files-img {
    display: block;
    float: left; /*Floats image to left of container - clipping right hand side*/
    float: right; /*Floats image to right of container - clipping left hand side*/
    margin: 0 auto;
    max-height: 130px;
    max-height: 150%;
    max-width: 150%;
    min-height: 100%;
    min-width: 100%;
}

.review-files-img.review-files-shouldRemove { filter: grayscale(90%) brightness(50%); }

.review-files-deletion-text {
    background-color: black;
    color: white;
    font-weight: 600;
    left: 11px;
    position: absolute;
    right: 11px;
    text-align: center;
    top: 30px;
    z-index: 1;
}

.review-files-delete {
    color: #ffffff;
    font-size: 27px;
    position: absolute;
    right: -20px;
    top: -18px;
    z-index: 1;
}

.thumbnail {
    border: 0 none;
    float: left;
}

.thumbnail img {
    display: block;
    object-fit: cover;
    z-index: 0;
}

.review-files-overlay { cursor: pointer; }

.review-files-icon { text-align: center; }

.review-files-extension-text {
    font-size: large;
    text-transform: uppercase;
    top: 18px;
}

.review-files-caption > p {
    text-align: center;
    word-break: break-all;
}

.review-files-warning {
    color: red;
    font-weight: 600;
}

.review-files-warning.review-files-shouldRemove { color: darkred; }

.spacer { margin-top: 26px }

.timer {
    float: left;
    position: relative;
}

.counter {
    font-size: 35px;
    line-height: 150px;
    position: absolute;
    text-align: center;
    width: 100%;
}


.counter_sec {
    line-height: 185px;
    position: absolute;
    text-align: center;
    width: 100%;
}


div#ApprovalButtonWrapper {
    margin: 0 auto;
    width: 254px;
}

#btnsApproval .btn {
    height: 60px;
    width: 100px;
}

#btnsApproval .btn:first-child { margin-right: 50px; }

#btnsApproval .btn.approval:hover {
    background-color: #00a645;
    border-color: #00a645;
}

#btnsApproval .btn.disapproval:hover {
    background-color: #d9534f;
    border-color: #d9534f;
}


.btn-dark-disable-CC, .btn-dark-disable {
    background-color: #595555;
    border-color: #595555;
    color: #fff;
}

.btn-dark-disable:active, .btn-dark-disable.active {
    background-color: #00943e;
    border-color: #00943e;
    color: #ffffff;
}

.btn-dark-disable:hover, .btn-dark-disable.middle-active {
    background-color: #00a645;
    border-color: #00a645;
    color: #ffffff;
}

#btnsApproval .btn span.glyphicon {
    left: -6px;
    top: 5px;
}

#btnsApproval .btn input { visibility: hidden; }

.btn-circle {
    border-radius: 15px;
    font-size: 12px;
    height: 30px;
    line-height: 1.428571429;
    padding: 6px 0;
    text-align: center;
    width: 30px;
}

.btn-circle.btn-lg {
    border-radius: 25px;
    font-size: 18px;
    height: 50px;
    line-height: 1.33;
    padding: 10px 16px;
    width: 50px;
}

.btn-circle.btn-xl {
    border-radius: 35px;
    font-size: 24px;
    height: 70px;
    line-height: 1.33;
    padding: 10px 16px;
    width: 70px;
}


.recommend-button > i {
    left: -2px;
    position: relative;
    top: 6px;
}

.disabled-button {
    background-color: gray;
    border-color: gray;
}


.disabled-button:hover {
    background-color: darkgray;
    border-color: darkgray;
}

.reaction > svg {
    height: 100%;
    width: 100%;
}

.reaction > svg > path { transition: all ease-in-out .4s; }

.reaction > svg > circle.face { transition: all ease-in-out .4s; }

.reaction.reaction-angry > svg > circle.face { fill: crimson; }

.reaction.reaction-unhappy > svg > circle.face { fill: orange; }

.reaction.reaction-neutral > svg > circle.face { fill: yellow; }

.reaction.reaction-happy > svg > circle.face { fill: yellowgreen; }

.reaction.reaction-joyful > svg > circle.face { fill: mediumseagreen; }

.progress-group,
.budget-group, .name-group {
    margin-bottom: 10px;
    width: 100%;
}

.progress-group .btn,
.budget-group .btn, .name-group .btn {
    margin-bottom: 20px;
    margin-right: 16px;
    margin-top: 20px;
    padding-left: 8px;
    padding-right: 8px;
}

.progress-group input[type=radio], .name-group input[type=radio] {
    clip: rect(0, 0, 0, 0);
    pointer-events: none;
    position: absolute;
}

i.smaller-2x-stack {
    font-size: 1.45em;
    line-height: 1.38em;
}

div.thumbnail i.smaller-2x-stack { color: #d9534f; }

.progress-group div[data-toggle="buttons"], .name-group div[data-toggle="buttons"], .budget-group div[data-toggle="buttons"] { display: inline-block; }

.progress-group .btn {
    margin-bottom: 5px;
    min-width: 211px;
}

/*.name-group .btn {
    width: 45%;
}*/

.budget-group > .btn { min-width: 110px; }

.videoButton {
    display: none;
    margin-right: 10px;
    padding: 5px 10px;
}

.videoButton span.glyphicon {
    font-size: 24px;
    line-height: 24px;
}

.score-slider > .slider {
    height: 2em;
    position: absolute;
    top: 15px;
    width: 95%;
}

.score-slider > .slider > .ui-slider-pip { top: 34px; }

.score-slider > .slider > .ui-slider-pip > .ui-slider-label {
    font-size: 1.2em;
    top: 8px;
}

.score-slider > .slider > .ui-slider-handle { height: 2.4em; }

.slider-wrapper { padding: 15px; }

#comment-editor {
    padding-left: 0;
    padding-right: 0;
}

#comment-editor textarea { max-width: 100% }

.project-review-whitebox {
    background-color: #ffffff;
    border-bottom: #dedede 3px solid;
    color: #333333;
    padding: 20px;
}

#project-description-wrapper {
    /*border: 1px solid gray;*/
    margin-left: 0px;
    margin-right: 0px;
}

#project-description-wrapper h3 {
    font-family: 'Raleway', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin-top: 0;
}

#project-description-wrapper p.description-content {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-weight: 400;
    word-wrap: break-word;
}

#project-description-wrapper div.edit-button button {
    border-radius: 4px;
    color: #ffffff;
    margin-top: -5px;
}

div#project-description-info {
    margin-left: 0px;
    margin-top: 50px;
}

#project-description-info-text {
    
    min-height: 1px;
    min-width: 1px;
}

div#project-description-info div { display: inline-block; }

#project-description-wrapper .project-description-info-icon {
    font-size: 18px;
    margin-right: 6px;
}

#project-description-wrapper *:not(button) { padding: 0; }

#project-description-wrapper div#project-description-descriptionButtons button { margin-top: 15px; }

#project-description-container .btn-link {
    color: black;
    text-decoration: none;
}

.RobotoText {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
}

#affiliate-container { padding-top: 10px; }

#project-sliders-container, #project-description-container { margin-bottom: 2em; }

#project-sliders-container > div { margin: 6px 0; }

#project-sliders-container .label-title { margin-top: 20px; }

footer.simple .copyright {
    margin-top: 40px;
    padding-bottom: 10px;
    padding-top: 10px;
}

footer.simple {
    margin-top: 40px;
    padding-top: 10px;
}

button#btnStartReview {
    -ms-border-radius: 3px;
    background-color: #00943e;
    border-radius: 3px;
    font-family: "proxima-nova", sans-serif;
    font-size: 28px;
    font-weight: 600;
    height: 70px;
    text-transform: none;
}

button#btnStartReview:hover { background-color: #00a645; }

input#reviewee { padding-left: 5px; }

div#budgetSlider.noUi-target {
    margin-bottom: 45px;
    margin-top: 30px;
}


div#craftsmanReviewScoreSliders div.noUi-target { margin-bottom: 65px; }

div#craftsmanReviewScoreSliders div.row:not(:first-of-type) { margin-top: 50px; }

textarea#ReviewContent {
    height: 120px;
    padding: 3px 7px;
    resize: none;
    width: 100%;
}

.noUi-value { color: #000; }

.ui.ordered.steps a { text-decoration: none; }

.budget-price-preview {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
    margin-left: 13px;
}

div.project-review-whitebox div.add-margin-top { margin-top: 20px; }

.stickyButton {
    bottom: 0;
    position: fixed;
    right: 10px;
}

@media (max-width: 767px) {
    .circular-timer-container { padding-top: 20px; }

    .project-description-info-data {
        margin-bottom: 10px;
        text-align: center;
    }

    .progress-group,
    .budget-group { text-align: center; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .circular-timer-container { padding-top: 40px; }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .circular-timer-container {
        padding-left: 15px;
        padding-top: 80px;
    }
}

@media (min-width: 1200px) {
    .circular-timer-container {
        padding-left: 25px;
        padding-top: 80px;
    }
}

@media (max-width: 1320px) {
    .progress-group { text-align: center; }
}

.project-review-whitebox .progress { height: 3px; }

#budgetSlider .noUi-tooltip { font-weight: bold; }

.bold { font-weight: bold; }

#btnSmallStartReviewContainer { z-index: 5; }

#project-descriptionContainer { z-index: 1; }

#fancybox-content, #fancybox-wrap { box-sizing: content-box; }

/* ----- Styling ALT over hovers ----- */

/* Wrap the image and alt text */

/* Will be added with js */

.alt-wrap {
    color: whitesmoke;
    display: block;
    position: relative;
}

/* The alt text itself */

/* Will be added with js */

.alt-wrap p.alt {
    background-color: rgba(0, 0, 0, 0.8);
    bottom: 0;
    font-size: 14px;
    left: 0;
    line-height: 22px;
    margin: 0;
    opacity: 0; /* hide initially */
    padding: 15px;
    position: absolute;
    right: 0;
    text-wrap: normal;
    transition: all 300ms ease;
    transition-delay: 300ms;
}

/* Hovering over the wrapper shows its alt p*/

.alt-wrap:hover > p.alt, .alt-wrap:active > p.alt {
    opacity: 1;
    transition-delay: 0s;
}