/*@import url('style.css');*/
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}



/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */



* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

/*#canvas {
    border: 1px solid gray;
}*/

input,
select,
textarea {
    max-width: 280px;
}

.texture > img {
    height: 75px;
    width: 75px;
    cursor: pointer;
    padding: 5px;
}

.sidenav {
    height: 100%;
    position: fixed;
    z-index: 1;
    top: 10;
    left: 0;
    background-color: #7f7f7f;
    overflow-x: hidden;
    padding-top: 20px;
}

    .sidenav a {
        padding: 6px 8px 6px 16px;
        text-decoration: none;
        font-size: 15px;
        color: white;
        display: block;
    }

        .sidenav a:hover {
            color: #8ba0e2;
        }

a.activeMenuItem {
    background-color: #8ba0e2;
    font-weight: bold;
    color: white;
}

.padding-left-right {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #b3b6c9 !important;
}

.btn-neutral {
    color: black;
    background-color: #b3b6c9 !important;
}

    .btn-neutral:hover {
        color: black;
        background-color: #b3b6c9;
    }

.divCenter {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar-inverse {
    background-color: #7f7f7f;
    border-color: #080808;
}

.RequiredError {
    margin-bottom: 6px;
    background: #e8bce3;
    text-align: left;
    padding: 4px 7px;
    border-radius: 4px;
}

    .RequiredError p {
        margin: 0;
        padding: 0;
    }


.navbar-inverse .navbar-nav > li > a {
    color: #ffffff;
}

.login-panel {
    background: #f3f3f6;
    height: 100vh;
    position: fixed;
    right: 0;
}

@media only screen and (min-width:320px) and (max-width:767px) {
    .login-panel {
        background: #f3f3f6;
        height: auto !important;
        position: relative !important;
        right: 0;
    }

    .mobilView {
        display: none !important;
    }
}

.user-select-disabled {
    user-select: none !important;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
}

/*.ipad-portrait*/
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {

    /*#dummycanvas {
        height: 500px !important;
    }*/

    #facadeView {
        width: 250px !important;
    }

    .topnav a {
        font-size: 12px !important;
        padding: 10px 12px !important;
    }

    .rangeWidth {
        float: left;
        width: auto !important;
    }

    #buildingPermit {
        width: 175px !important;
    }

    #canvas .lower-canvas {
        height: 480px !important;
    }

    html {
        overflow-y: hidden !important;
    }
}
/*.ipad-landscape*/
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
    /*#dummycanvas {
        height: 350px !important;
    }*/

    #facadeView {
        padding-left: 15px !important;
    }

    .topnav a {
        font-size: 12px !important;
        padding: 10px 12px !important;
    }

    .rangeWidth {
        float: right !important;
    }

    html {
        overflow-y: hidden !important;
    }
}



/*Build Measurements Range*/
.rangeWidth {
    float: left;
    width: 50%;
}

input[type=range] {
    -webkit-appearance: none;
    margin: 10px 0;
    width: 100%;
}

    input[type=range]:focus {
        outline: none;
    }

    input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 10.8px;
        cursor: pointer;
        animate: 0.2s;
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        background: #a09da0;
        border-radius: 25px;
        border: 0px solid #000101;
    }

    input[type=range]::-webkit-slider-thumb {
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        border: 0px solid #000000;
        height: 18px;
        width: 39px;
        border-radius: 8px;
        background: #808080;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -3.6px;
    }

    input[type=range]:focus::-webkit-slider-runnable-track {
        background: #a09da0;
    }

    input[type=range]::-moz-range-track {
        width: 100%;
        height: 10.8px;
        cursor: pointer;
        animate: 0.2s;
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        background: #a09da0;
        border-radius: 25px;
        border: 0px solid #000101;
    }

    input[type=range]::-moz-range-thumb {
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        border: 0px solid #000000;
        height: 20px;
        width: 39px;
        border-radius: 8px;
        background: #808080;
        cursor: pointer;
    }

    input[type=range]::-ms-track {
        width: 100%;
        height: 12.8px;
        cursor: pointer;
        animate: 0.2s;
        background: transparent;
        border-color: transparent;
        border-width: 39px 0;
        color: transparent;
    }

    input[type=range]::-ms-fill-lower {
        background: #ac51b5;
        border: 0px solid #000101;
        border-radius: 50px;
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    }

    input[type=range]::-ms-fill-upper {
        background: #ac51b5;
        border: 0px solid #000101;
        border-radius: 50px;
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
    }

    input[type=range]::-ms-thumb {
        box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
        border: 0px solid #000000;
        height: 20px;
        width: 39px;
        border-radius: 7px;
        background: #65001c;
        cursor: pointer;
    }

    input[type=range]:focus::-ms-fill-lower {
        background: #ac51b5;
    }

    input[type=range]:focus::-ms-fill-upper {
        background: #ac51b5;
    }

/* End of Build Measurements Range*/
/*Firefox*/
@-moz-document url-prefix() {
    .object-bar {
        height: 30%;
        clear: both;
        position: initial !important;
        padding-top: 0px !important;
    }
}
/*Chrome & Safari (any version)*/



img, a {
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
    -webkit-user-drag: none;
}

.flag {
    height: 22px;
    width: 22px;
    /*margin-right: 4px;*/
    cursor: pointer;
}

.flag-uk {
    margin-right: 0px;
}

.radioDiv div {
    margin-right: 5px;
    float: left;
    display: flex;
}

.radio-margin {
    margin-top: 0px;
}

.radio-text {
    vertical-align: text-bottom;
    font-weight: 100;
}

.exterior-gallery-container img {
    /*width: 55px;*/
    /*height: 65px;*/
    padding: 5px;
}

.inner-gallery-container img {
    /*width: 55px;*/
    /*height: 65px;*/
    padding: 5px;
}

.patio-gallery-container img {
    /*width: 55px;*/
    /*height: 65px;*/
    padding: 5px;
}

.FlexContainer {
    display: flex;
    width: 50%;
    float: right;
    padding-top: 22px;
    overflow-x: auto;
}

.FlexContainer_2D {
    display: flex;
    padding-top: 5px;
    overflow-x: auto;
}

.selectList {
    height: 30px;
}


.ListTable {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

    .ListTable td, #customers th {
        border: 1px solid #ddd !important;
        padding: 8px;
    }

    .ListTable th {
        border: 1px solid #ddd !important;
    }

    .ListTable tr:nth-child(even) {
        background-color: #f2f2f2 !important;
    }

    .ListTable tr:hover {
        background-color: #574b8a !important;
        color: white;
    }

    .ListTable th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #574b8a !important;
        color: white;
    }

.button-container {
    float: left;
    width: -webkit-fill-available;
    padding-bottom: 5px;
}

    .button-container > div {
        float: left;
    }

        .button-container > div:not(:first-child) {
            float: right !important;
        }


.OrderTable {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

    .OrderTable td, #customers th {
        border: 1px solid #ddd !important;
        padding: 8px;
    }

    .OrderTable tr:nth-child(even) {
        background-color: #f2f2f2 !important;
    }

    .OrderTable tr:hover {
        background-color: #574b8a !important;
        color: white;
    }

    .OrderTable th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: #574b8a !important;
        color: white;
    }

.tablesorter-blue input.tablesorter-filter, .tablesorter-blue select.tablesorter-filter {
    padding: 2px !important;
    font-size: 12px;
    height: 22px;
}

.label-completed-date {
    padding-top: 5px !important;
    font-weight: 250 !important;
}

.completed-date-width {
    width: 100px !important;
}

input.input-validation-error {
    border: 2px solid red !important;
}

textarea.input-validation-error {
    border: 2px solid red !important;
}

select.input-validation-error {
    border: 2px solid red !important;
}

a.input-validation-error {
    border: 2px solid red !important;
}

.btn-default-color {
    color: white !important;
    background-color: #574b8a !important;
}

.bordered {
    border: 1px solid #CCCCCC;
    border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 1px #CCCCCC;
}

    .bordered th:first-child {
        border-radius: 6px 0 0 0;
        -moz-border-radius: 6px 0 0 0;
        -webkit-border-radius: 6px 0 0 0;
    }

    .bordered th:last-child {
        border-radius: 0 6px 0 0;
        -moz-border-radius: 0 6px 0 0;
        -webkit-border-radius: 0 6px 0 0;
    }

    .bordered td:first-child, .bordered th:first-child {
        border-left: medium none;
    }

/*body, html {
    background-color: whitesmoke !important;
}*/

.margintop {
    margin-top: 5px;
}

.amount {
    text-align: right;
}

.span-width {
    width: 35% !important;
}

#btnPowerReading {
    display: none;
}

.perspective {
    -webkit-perspective: 76em;
    perspective: 76em;
    -webkit-perspective-origin: 50% 50px;
    perspective-origin: 50% 50px;
    width: 494px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
}

.table-Border {
    border: 1px solid black;
    border-collapse: collapse;
}

.pagination li:hover {
    cursor: pointer;
}

.pager-nav {
    margin: 16px 0;
    float: right;
}

    .pager-nav span {
        display: inline-block;
        padding: 4px 8px;
        margin: 1px;
        cursor: pointer;
        font-size: 14px;
        background-color: #FFFFFF;
        border: 1px solid #e1e1e1;
        border-radius: 3px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
    }

        .pager-nav span:hover,
        .pager-nav .pg-selected {
            background-color: #574b8a;
            border: 1px solid #CCCCCC;
            color: white;
        }

.qty-warning-msg {
    /* color: #574b8a;*/
    color: #903d3d;
    font-weight: bolder;
    white-space: nowrap;
}

.heading-display {
    display: flex;
    align-items: center;
}

.logo-size {
    float: left;
    width: 280px;
    height: 90px;
}

.padding-right-200 {
    padding-right: 280px;
}

.display-inline {
    display: inline-flex;
    justify-content: space-between;
}

.width-135 {
    width: 135px !important;
}

.padding-top-20 {
    padding-top: 20px;
}


.overflow-x-hidden {
    overflow-x: hidden;
}

@media (max-width: 912px) {
    .table-overflow {
        /* max-width: 768px;*/
        overflow-x: overlay;
        overflow-y: visible
    }

    .displayInline {
        display: inline-flex;
        align-items: center;
    }

    .ToDatepadding {
        float: right;
        padding-left: 25px;
    }

    .listScroll {
        overflow-x: inherit;
        height: 885px;
        overflow-y: auto;
    }

    .Mobile-padding-bottom-20 {
        padding-bottom: 20px;
    }

    .mobdisplaygrid {
        display: inline-grid;
    }

    .mobMarginBottom15 {
        margin-bottom: 15px !important;
    }

    .mobMarginBottom0 {
        margin-bottom: 0px !important;
    }

    .mobPaddingTop0 {
        padding-top: 0px !important;
    }

    .mobDisplayFlex {
        display: flex;
        align-items: center;
    }

    .mobPadding-right15 {
        padding-right: 15px !important;
    }

    .mobOverflow {
        overflow: auto;
    }

    .mobMarginTop5px {
        margin-top: 5px;
    }

    .mobdivCenter {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mobMargin0 {
        margin: 0px !important;
    }

    .mobPadding0 {
        padding: 0px !important;
    }

    .margintop20 {
        margin-top: 0px;
    }

    .mobPaddingleft300 {
        padding-left: 300px !important;
    }

    .mobOverflowxAuto {
        overflow-x: auto;
    }
}

@media (min-width: 821px) and (max-width: 1030px) {
    .mobMarginTopAdjust {
        margin-top: 120px !important;
    }
}

@media (min-width: 1031px) and (max-width: 1309px) {
    .mobMarginTopAdjust {
        margin-top: 70px !important;
    }
}

.table-overflow {
    /* overflow-x: visible;
    overflow-y: visible*/
}

.displayInline {
}

.ToDatepadding {
}

.adjustHeight {
}

.listScroll {
}

.Mobile-padding-bottom-20 {
}

.mobdisplaygrid {
}

.mobMarginBottom15 {
}

.mobMarginBottom0 {
}

.mobPaddingTop0 {
}

.mobDisplayFlex {
}

.mobPadding-right15 {
}

.mobOverflow {
}

.mobMarginTopAdjust {
}

.mobMarginTop5px {
}

.mobdivCenter {
}

.mobMargin0 {
}

.mobPadding0 {
}

.margintop20 {
    margin-top: 20px;
}

.mobPaddingleft300 {
}

.mobOverflowxAuto {
}

@media (min-height: 1024px) {
    .adjustHeight {
        overflow-x: hidden;
        height: 885px;
    }
}

.vertical-align {
    vertical-align: middle !important;
}