@font-face {
    font-family: "NotoSans";
    src: url("/fonts/NotoSans-VariableFont_wdth,wght.ttf") format('truetype');
}

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 */
input,
select,
textarea {
    max-width: 280px;
}

/* StepOne Styles */

/* Double-sized Checkboxes */
.bigCheckBox {
    -ms-transform: scale(1.4); /* IE */
    -moz-transform: scale(1.4); /* FF */
    -webkit-transform: scale(1.4); /* Safari and Chrome */
    -o-transform: scale(1.4); /* Opera */
    transform: scale(1.4);
    padding: 10px 20px 10px;
    display: inline;
    cursor: pointer;
}

.padding20 {
    display: inline-block;
    margin: 20px 20px;
}

.img-lifestyle {
    height: 300px;
    margin-top: 25px;
    padding: 0px;
}

.img-final {
    height: 250px;
    margin-top: 25px;
}

.pop:hover {
    border-color: linen;
    border-width: 5px;
    border-style: outset;
}

/* StepTwo Styles */

.cropOption {
    cursor: pointer;
}

.crop-p {
    margin: 21px 0px 2px;
}

.crop-grav {
    width: 130px;
    border: 1px solid black;
    cursor: pointer;
    display: inline-block;
    padding: 6px;
    margin: 0px 0px 5px;
}

.crop-grav:hover {
    background: lightslategray;
}

/* StepThree Styles */

.overlay-img {
    /*cursor: pointer;*/
    border: 1px solid black;
    height: 250px;
    margin-top: 25px;
}

/* StepFour Styles */

.palette {
    cursor: pointer;
    margin: 20px 20px;
    background-color: blue;
    display: inline-block;
}

/* GetEmail Styles */

.prev-overlay {
    position: absolute;
    top: 0px;
}


/* Global Styles */

body {
    margin: 30px;
}
.normal-body-color {
    color: #333333;
}
.jumbotron h1, .jumbotron h2, .jumbotron p, label, dt, dd {
    color: white;
}

.img-gen-container {
    background: rgb(192, 192, 192);
    border-radius: 6px;
    margin-bottom: 20px;
}

.jumbotron-color {
    background: dodgerblue;
}

#final-conf {
    background: forestgreen;
}

.form-padding {
    padding: 10px 15px;
}

.sub-section {
    background: steelblue;
    border-radius: 6px;
    margin: 10px;
}

.img-border {
    border-color: linen;
    border-width: 5px;
    border-style: inset;
}


/* Progress Bar Styles */

#myBar_img { /* 1/7 */
    width: 14%;
    min-height: inherit;
    background: green;
    animation: loading_img .5s linear;
}
@keyframes loading_img {
    0% {width: 0%;}
    100% {width: 14%;}
}

#myBar_crop { /* 2/7 */
    width: 29%;
    min-height: inherit;
    background: green;
    animation: loading_crop .5s linear;
}
@keyframes loading_crop {
    0% {width: 14%;}
    100% {width: 29%;}
}

#myBar_overlay { /* 3/7 */
    width: 43%;
    min-height: inherit;
    background: green;
    animation: loading_overlay .5s linear;
}
@keyframes loading_overlay {
    0% {width: 29%;}
    100% {width: 43%;}
}

#myBar_palette { /* 4/7 */
    width: 57%;
    min-height: inherit;
    background: green;
    animation: loading_palette .5s linear;
}
@keyframes loading_palette {
    0% {width: 43%;}
    100% {width: 57%;}
}

#myBar_naming { /* 5/7 */
    width: 71%;
    min-height: inherit;
    background: green;
    animation: loading_naming .5s linear;
}
@keyframes loading_naming {
    0% {width: 57%;}
    100% {width: 71%;}
}

#myBar_email { /* 6/7 */
    width: 86%;
    min-height: inherit;
    background: green;
    animation: loading_email .5s linear;
}
@keyframes loading_email {
    0% {width: 71%;}
    100% {width: 86%;}
}

#myBar_end { /* 7/7 */
    width: 100%;
    min-height: inherit;
    background: green;
    animation: loading_end .5s linear;
}
@keyframes loading_end {
    0% {width: 86%;}
    100% {width: 100%;}
}