.show {
    display: block;
}

.hide {
    display: none !important;
}

.signupbtn {
    background: lightgreen !important;
}

.signoutbtn {
    background: coral !important;
}

.removebtn {
    height: 35px;
    width: 30px;
}

.addbtn {
    background: lightblue !important;
}

.blink {
    animation: fade 3000ms infinite;
    -webkit-animation: fade 3000ms infinite;
}

.not-displayed {
    display: none;
}


.success {
    color: green !important;
}

.danger {
    color: red !important;
}

.warning {
    color: orange !important;
}



form {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}
    form.no-border {
        padding-bottom: 5px;
        border:none !important;
    }

#zip-code-input {
    font-size: 25px;
}

#get-weather-btn {
    font-size: 22px;
}

#title {
    font-size: 16px;
}

#summary {
    font-size: 35px;
}

    #summary img {
        float: right;
    }

#error-msg {
    text-align: center;
    margin-top: 50%;
    font-weight: bold;
}

/*------------signature pad------------------------*/
.hero-page {
    max-width: 920px;
    margin: 0 auto;
    text-align: justify;
    position: relative !important;
}
.wrapper {
    
    position: relative;
    width: 400px;
    height: 200px;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}


.wrapper-hero {
    text-align: center;
    /*max-width: 800px;
    right: 0px;
    bottom: 0;
    left: 0;
    top: 0;
    position: absolute;*/
    overflow: visible;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

img {
    position: absolute;
    left: 0;
    /*top: 0;*/
}

    img.logo {
        position: static;
        left: unset;
    }

.signature-pad {
    position: absolute;
    left: 0;
    top: 0;
    width: 400px;
    height: 200px;
}


/* Full-width inputs */
input[type=text], input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Add a hover effect for buttons */
button:hover {
    opacity: 0.8;
}


/* Add padding to containers */
.container {
    padding: 16px;
}

.document-body {
    margin: 15px;
}

.page-body {
    margin: 15px;
}

.custom-btn {
    bottom: 5px;
    position: relative;
    right: 5px;
    z-index: 100;
    height: 20px;
}

div.page-center {
    margin: 0px auto;
    left: 0px !important;
    top: 0px !important;
    right: 0px !important;
    bottom: 0px !important;
    overflow: auto !important;
    position: -ms-device-fixed !important;
    max-width: 800px;
}


.contest {
    border: 3px solid black;
    border-radius: 15px;
    margin-bottom: 15px;
}

@media screen and (orientation: portrait) and (min-width: 10em) and (max-width: 20em) {
    .logo-main, .logo {
        position: static;
        max-width: 180px;
    }

    .ui-title {
        padding-top: 50px !important;
        width: 100%;
        margin: 0 0% !important;
    }
}

@media screen and (orientation: portrait) and (min-width: 20em) and (max-width: 27em) {
    .logo-main, .logo {
        position: static;
        max-width: 200px;
    }

    .ui-title {
        padding-top: 50px !important;
        width: 100%;
        margin: 0 0% !important;
    }
}

@media screen and (orientation: portrait) and (min-width: 28em) and (max-width: 29em) {
    .logo-main, .logo {
        position: static;
        max-width: 240px;
        max-height: 300px
    }

    .ui-title {
        padding-top: 50px !important;
        width: 100%;
        margin: 0 0% !important;
    }
}

@media screen and (orientation: portrait) and (min-width: 30em) and (max-width: 34em) {
    .logo-main, .logo {
        position: static;
        max-width: 300px;
        max-height: 300px
    }

    .ui-title {
        padding-top: 50px !important;
        width: 100%;
        margin: 0 0% !important;
    }
}

@media screen and (orientation: portrait) and (min-width: 35em) and (max-width: 45em) {
    .logo-main, .logo {
        position: static;
        max-width: 420px;
        max-height: 300px
    }

    .ui-title {
        margin: 0 16% !important;
    }
}

@media screen and (orientation: portrait) and (min-width: 40em) {
    .logo-main, .logo {
        position: static;
        max-width: 600px;
        max-height: 300px
    }
}

@media screen and (orientation: portrait) and (min-width: 45em) {
    .logo-main, .logo {
        position: static;
        max-width: 640px;
        max-height: 300px
    }
}
.gold{
    color:goldenrod;
}
label > span {
    pointer-events: none;
}

    label > span > a {
        pointer-events: all;
    }

#ajaxBusy {
    display: none;
    text-align: center;
    background: #e8e8e8 url(images/ajax-loader.gif) no-repeat center center;
    border: 1px solid #000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    margin: auto;
    width: 260px;
    height: 100px;
    font-size: xx-large;
    background-color: pink;
    text-align: center;
}