/* common css rules */
body {
    background-color: #d3d3d3 !important;
    visibility: hidden; /*loader fix*/
}
body.info{
    background-color: #ffffff !important;
}
.reveal_middle-of-screen {
    position: fixed !important;
    top: 50% !important;
    transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
}
.col_7 {
    width: 14.285714286% !important;
}
.col_6 {
    width: 16.666666667% !important;
}
.col_5 {
    width: 20% !important;
}
.col_4 {
    width: 25% !important;
}
.col_3 {
    width: 33.33% !important;
}

.col_2 {
    width: 50% !important;
}
.col_1 {
    width: 100% !important;
}

.no-border {
    border: none !important;
    border-radius: 0 !important;
}
.no-shadow {
    webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
/* only for smart-devices, used in both doorstylemenu and fitinmenu */
.optimizedHeight {
    font-size: 2.2vmin !important;
}
.optimizedHeight > img {
    height: 2.2vmin !important;
}
.internorm_button_color {
    background-color: #cb2028 !important;
}
.internorm_button_color:hover {
    background-color: #f1202a !important;
}
#info_back{
    margin-left:10% !important;
    position:absolute;
    top:0.9vh;
    line-height: 25px;
    width: 35px;
    text-align: center;
    z-index: 10;
}

#info_back_img{
    height: 25px;
    margin:auto;
}

/* orientation based rules */
@media (orientation: landscape) {
    .doordesigner_side-elements-width {
        width: 10% !important;
        display: flex;
    }

    #info_back{
        margin-left:10% !important;
    }

    .doordesigner_middle-elements-width {
        width: 90% !important;
    }
    .doordesigner_rest-elements-width {
        width: 90% !important;
    }
    #house_image {
        margin-left: 10%;
        width: 80%;
    }
    #cancel_background, #upload_first, #unique_door_message {
        max-width: 30% !important;
        width: 20% !important;
    }

    /* only for smart devices */
    .doordesigner_side-elements-width.smart-device {
        width: 15% !important;
    }

    #info_back.smart-device{
        margin-left:15% !important;
    }
    .doordesigner_middle-elements-width.smart-device {
        width: 70% !important;
    }
    .doordesigner_rest-elements-width.smart-device {
        width: 85% !important;
    }
    #house_image.smart-device {
        margin-left: 15%;
        width: 70%;
        background-size: initial;
        background-position: right bottom;
    }
    .single_sample_image {
        width: 100%;
        height: 150px;
    }
}
@media (orientation: portrait) {
    .doordesigner_side-elements-width {
        width: 20% !important;
        display: flex;
    }

    #info_back{
        margin-left:20% !important;
    }
    .doordesigner_middle-elements-width {
        width: 60% !important;
    }
    .doordesigner_rest-elements-width {
        width: 80% !important;
    }
    #house_image {
        margin-left: 20%;
        width: 60%;
    }
    #cancel_background, #upload_first {
        max-width: 50% !important;
        width: 40% !important;
    }
    .single_sample_image {
        height: 150px;
    }

    #partners-logo-wrapper{
        width: 20vw !important;
    }
}

#left_over {
    background-color: rgb(227, 227, 227);
    position: absolute;
    left: 0;
    height: 90%;
    top: 40px;
    z-index: -1;
}
#right_over {
    background-color: rgb(227, 227, 227);
    position: absolute;
    right: 0;
    height: 90%;
    top: 40px;
    z-index: -1;
}



/*sample upload*/
#no_file {
    /*color: rgb(128, 128, 128);*/

}
#no_file.photo_error {
    color: #cb2028 !important;
}
.close-reveal-modal {

}
#upload-title {
    height:35px;
    line-height: 35px;
    background-color: #cb2028;
    color: #ffffff;
    cursor: pointer;
    font-weight: bold;
}
#upload-content {
    height: auto;
    background: white;
}
.sample_image_wrapper {
    height: 30%;
    width:20%;
    float: left;
    text-align: center;
}
.single_sample_image_basic {
    background-position: center center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    cursor: pointer;
}

/* red dot award */


.door-img-wrapper > .red-dot-awarded-wrapper,
#door_image_wrapper > .red-dot-awarded-wrapper {
    display: none; /* hidden by default */
}

.door-img-wrapper.awarded > .red-dot-awarded-wrapper,
#door_image_wrapper.awarded > .red-dot-awarded-wrapper {
    display: block; /* when awarded visible */
}

.door-img-wrapper.awarded > .red-dot-awarded-wrapper,
#door_image_wrapper.awarded > .red-dot-awarded-wrapper {
    width: 125px;
    display: flex;
    align-items: end;
}

#red-dot-awarded {
    display: flex;
    align-items: end;
    height: 100%;
}

#red-dot-awarded > img {
    margin-bottom: calc((400px - 330px) / 2);
}

@media (min-width: 641px) and (max-width: 1081px) and (orientation: portrait) {
    #door_image_wrapper.awarded {
        flex-direction: column;
        height: 430px !important;
    }

    #red-dot-awarded > img {
        margin-bottom: 0px;
    }
}

.for-red-dot >  {

}