@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: #e3f2fd;
}

* {
  font-family: Arial, Helvetica, sans-serif;
}

#app-wrapper {
  overflow: hidden;
  position: relative;
}

.app-padding-10 {
  padding: 10px;
}

#app-title {
  text-align: right;
}

nav label {
  padding-right: 10px;
}

nav .unitsBox {
  margin-right: 10px;
}

/*-- set border box on all elements inside the grid*/
.grid-container * {box-sizing: border-box;}


input{
	padding: 0px;
	border: 1px solid gray;
}
	.unitsBox{ /*A special input that displays units*/
		text-align: center;
		width: 20px;
		border: 1px solid gray;
		border-left: 0px;
		float: left;
  }

/*#wallThicknessInput, #gridSizeInput, #unitsConversionFactorInput {
	width: 50px;
	float: left;
	border-right: 0px;
}*/

	#wallThicknesshUnitsInput, #gridSizeUnitsInput{
		float: left;
	}

.unitsInput {
	float: left;
	border-right: 0px;
}

#unitsForm {
  clear: both;
  width: 100%;
}

#optionsWindow {
	height: unset;
	width: unset;
}

#app-disabled-box {
  z-index: 90;
  background: rgb(0,0,0,.5);
  width: 100vw;
  height: 100vh;
  top: 0%;
  left: 0%;
  position: absolute;
  visibility: visible;
}

.app-dialog {
  z-index: 90;
  background: white;
  width: 400px;
  top: 25%;
  left: 40%;
  position: absolute;
  padding: 10px;
}

.app-dialog h3 {
  text-align: center;
}

#app-dialog-productrecommendations {
    top: 0%;
    left: 50%;
    width: 100vw;
    max-width: 900px;
    margin-left: -25vw;
    overflow: visible;
}

#app-dialog-productrecommendations div {
  padding: 3px;
}

#app-pr-system-properties-table {
  margin-right: 25px;
}

.app-float-right {
  float: right;
}

.app-float-left {
  float: left;
}

#app-wallparts-palette-window, #app-furniture-palette-window {
  top: 120px;
  left: 30px;
}

.app-table-heading {
  background: rgb(75, 84, 95);
  color: white;
  text-align: center;
}

#app-dialog-productrecommendations table {
  border-collapse: collapse;
}

#app-dialog-productrecommendations table,  #app-dialog-productrecommendations table th, #app-dialog-productrecommendations table td {
  border: 1px solid black;
  padding: 5px;
  margin:auto;
}

#app-amp-warning {
  font-weight: 700;
  color: red;
}

.app-directions {
    text-align: left;
    font-size: 15px;
    padding: 10px;
}




input[type="checkbox"], input[type="radio"] {
    position: absolute;
    right: 9000px;
}

    /*Check box*/
    input[type="checkbox"] + .label-text:before {
        content: "\f096";
        font-family: "FontAwesome";
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        width: 1em;
        display: inline-block;
        margin-right: 5px;
    }

    input[type="checkbox"]:checked + .label-text:before {
        content: "\f14a";
        color: #00a8d5;
        animation: effect 250ms ease-in;
    }

    input[type="checkbox"]:disabled + .label-text {
        color: #aaa;
    }

        input[type="checkbox"]:disabled + .label-text:before {
            content: "\f0c8";
            color: #ccc;
        }

    /*Radio box*/

    input[type="radio"] + .label-text:before {
        content: "\f10c";
        font-family: "FontAwesome";
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        width: 1em;
        display: inline-block;
        margin-right: 5px;
    }

    input[type="radio"]:checked + .label-text:before {
        content: "\f192";
        color: #00a8d5;
        animation: effect 250ms ease-in;
    }

    input[type="radio"]:disabled + .label-text {
        color: #aaa;
    }

        input[type="radio"]:disabled + .label-text:before {
            content: "\f111";
            color: #ccc;
        }

/*Radio Toggle*/

.toggle input[type="radio"] + .label-text:before {
    content: "\f204";
    font-family: "FontAwesome";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    width: 1em;
    display: inline-block;
    margin-right: 10px;
}

.toggle input[type="radio"]:checked + .label-text:before {
    content: "\f205";
    color: #16a085;
    animation: effect 250ms ease-in;
}

.toggle input[type="radio"]:disabled + .label-text {
    color: #aaa;
}

    .toggle input[type="radio"]:disabled + .label-text:before {
        content: "\f204";
        color: #ccc;
    }


@keyframes effect {
    0% {
        transform: scale(0);
    }

    25% {
        transform: scale(1.3);
    }

    75% {
        transform: scale(1.4);
    }

    100% {
        transform: scale(1);
    }
}

label {
    margin-bottom: 0px;
}

h3 {
    color: #00a8d5;
    font-size: 20px;
    font-weight: bold;
}
h4 {
    font-size: 15px;
    font-weight:bold;
    color:#666;
    margin: 0px;
}

.footer {
    position: absolute;
    width: 100%;
    height: 48px; /* Set the fixed height of the footer here */
    background-color: #f5f5f5;
    padding: 10px 15px 0px 15px;
    z-index:1000;
}

.gsfFeedback {
    border-color: #d78a6d;
    opacity: 80%;
    margin-bottom: 9px;
}