/* Standard Process Color Pallette */
/* Primary: #00493c
   Secondary:
   Teriary:

   */

/* Fonts */
@font-face {
    font-family: 'Ubuntu-Bold';
    src: url(../Ubuntu-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'Ubuntu-Regular';
    src: url(../Ubuntu-Regular.ttf) format('truetype');
}

/* Globals */
body {
    background-color: #efebe8;
    color: #393536;
    font-family: Arial, sans-serif !important;
}

a {
    color: #00493c !important;
    text-decoration: underline;
}

h3 {
    font-weight: 700;
}

/* Overrides, remove when mark-up has been adjusted */
.login-logo {
    display: none;
}

.divider {
    display: none;
}

div.intro {
    display: none;
}

.helpLink {
    display: none;
}

/* Overided to MS styling */
.panel {
    margin-top: 2em;
    padding-top: 1.5em;
}

#api .buttons {
    clear: both;
    text-align: center;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Styling to elements on form */
.entry-item {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

input {
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #646161;
    padding: 0.5em;
    width: 100%;
}

    input:focus {
        background-color: #fff !important;
        border: 1px solid #646161 !important;
    }

    input:-internal-autofill-selected {
        background-color: #fff !important;
        border: 1px solid #646161;
    }

.create {
    text-align: center;
}

.create p a {
    display: block;
}

/* Button Styling */
button {
    background-color: #00493c;
    border: none;
    border-radius: 4px;
    color: #fff;
    padding: 1em;
    width:100%;
    text-align: center;
    margin-top: 2em;
    /* margin-bottom: 2em; */
}

    button:hover {
        filter: brightness(80%);
    }

    button:disabled {
        background-color: #646161;
    }

    button:disabled, button[disabled] {
        background-color: #646161;
    }

/* Styling for Sign-up */
#attributeList li {
    float: left;
    margin-bottom: 2em;
    margin-right: 2.5%;
    margin-left: 2.5%;
    width: 95%;
}

    #attributeList li:nth-child(1) {
        width: 95%;
    }

    #attributeList li:nth-child(6) {
        width: 95%;
    }

    #attributeList li.Password {
        float: left;
        margin-bottom: 2em;
        margin-right: 2.5%;
        margin-left: 2.5%;
        width: 95%;
    }
@media only screen and (min-width: 768px) {
    #attributeList li {
        float: left;
        margin-bottom: 2em;
        margin-right: 2.5%;
        margin-left: 2.5%;
        width: 45%;
    }
    #attributeList li.Password {
        float: left;
        margin-bottom: 2em;
        margin-right: 2.5%;
        margin-left: 2.5%;
        width: 45%;
    }
}

    li.CheckboxMultiSelect input {
        width: 18px;
    }

    label[for="savePhoneNumberEntered"] {
        margin-top: 1.75em;
    }

    label[for="savePhoneNumberEntered_True"] {
        display: none;
    }

    button#continue {
        float: left;
        padding: 1em 2em;
        width: 95%;
        margin-right: 2.5%;
        margin-left:2.5%;
        margin-bottom: 2.5%;
    }

    #cancel {
        float: left;
        padding: 1em 2em;
        width: 95%;
        margin-left: 2.5%;
        margin-right:2.5%;
    }

@media only screen and (min-width: 768px) {
    button#continue {
        margin-left:0;
        width:47.5%;
    }
    button#cancel {
        margin-right:0;
        width: 47.5%;
    }
}

    [aria-hidden="true"] {
        display: none;
    }

    [aria-hidden="false"] {
        display: block;
    }

    #api .entry [class*=col-] {
        -webkit-transition: all .5s ease-in-out, font-size 0s;
        transition: all .5s ease-in-out, font-size 0s
    }

    #api .entry {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-right: -15px;
        margin-left: -15px;
    }

    #api .entry-item, #api .buttons {
        position: relative;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 0;
    }

        #api .buttons.verify {
            padding: 0;
        }

        #api .entry-item label, #api label {
            font-weight: 500;
            font-size: 1.1rem;
        }

    #api #forgotPassword {
        display: inline-block;
        margin-bottom: 7px;
    }

    #api label[for=password] {
        margin-right: 7px;
    }

    #api #next {
        max-width: 75%;
    }

        #api #next:hover {
            cursor: pointer;
        }

    #api #cancel {
        color: #fff;
        background-color: #bd2130;
        border-color: #b21f2d;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        margin-top: 0;
        margin-bottom: 0;
    }

    #api #continue {
        margin-top: 0;
    }

    #api #cancel:hover {
        color: #fff;
        background-color: #c82333;
        border-color: #bd2130;
    }

    #api .TextBox:last-child {
        margin-bottom: 0;
    }

#api p[role=alert], #api .error p, #api .error.pageLevel[aria-hidden="false"] {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .25rem;
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

    #api .entry-item:not(:last-child) {
        margin-bottom: 1rem !important
    }

    #api #email_intro {
        display: none !important;
    }

    @keyframes spinner {
        0% {
            transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
        }
    }

    @-moz-keyframes spinner {
        0% {
            transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
        }
    }

    @-o-keyframes spinner {
        0% {
            transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
        }
    }

    @-webkit-keyframes spinner {
        0% {
            transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -o-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -o-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
        }
    }

    li.text-box {
        width: 50%;
    }

/* Styling for Reset Password */
#attributeVerification .attr {
    margin-bottom:12px;
    overflow:auto;
}

#attributeVerification label {
    font-weight: 500;
    font-size: 20px;
}