/**
** Author: Lovely Ramos
** Note:
** This is a mobile first CSS style
 */
#alerts{
    width: 100%;
}
div#alertsBody {
    text-align: center;
    width: 100%;
    display: block;
}

#alertsBody h2 {
    color: #99B450;
    font-weight: normal;
    font-size: 3em;
    margin: 2em 0 0.5em;
}

p#marketingCopy {
    font-size: 1.4em;
    margin: auto;
    width: 87%;
}

#progressBar p {
    display: table-cell;
}

#progressBar p.active {
    color: #9FB85A;
}

#progressBar p.inactive {
    color: #C4C4C4;
}

div#progressBar span {
    position: absolute;
    display: block;
}

div#progressBar #first span {
    left: 94px;
}

div#progressBar #second span {
    left: 194px;
}

div#progressBar {
    margin: 4em auto;
    width: 500px;
}

.active line {
    stroke: #9FB85A;
    stroke-width: 4
}

.inactive line {
    stroke: #DDDDDD;
    stroke-width: 4
}

.inactive.done line {
    stroke: #9FB85A;
    stroke-width: 4
}

svg {
    margin-top: 1em;
}

label.control-label {
    text-align: left;
    font-weight: 600;
    font-size: 1.5em;
    margin-top: .5em;
}

#alerts button.button.alerts-right {
    background: #9FB85A;
    width: 100%;
    margin-top: 2em;
}
#alerts button.button.alerts-left {
    background: #707070;
    width: 100%;
    margin-bottom: 2em;
    color: #EBEBEB !important;
}

#alerts button.button.alerts-right.alone {
    margin: 2em 0 6em;
}
.a{
    fill: #a1b851;
}

small.help-block {
    background-color: #ffcdd2;
    color: #4d4d4d;
    display: block;
    font-size: 11px;
    padding: 0 4px;
    text-align: left;
}

small.help-block:before {
    background-color: #f44336;
    color: #fff;
    content: "\f12a";
    display: inline-block;
    font-family: FontAwesome;
    left: -4px;
    padding: 5px;
    position: relative;
    text-align: center;
    width: 12px;
}

div#alertsBody input {
    float: none;
}

div#alertsBody select {
    height: 32px;
    line-height: 1em;
    border: 1px solid #dad6cb;
    padding: 0 8px;
    color: #555;
    font-size: 13px;
    outline: 0;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    float: left;
}
ul.learning-stages {
    display: flex;
    flex-wrap: wrap;
}
.learning-stages li {
    width: 25%;
    height: 129px;
    list-style-type: none;
    border: 1px solid gray;
    border-radius: 12px;
    margin: .9em;
}
.learning-stages li svg{
    margin: .8em 1.4em 0;
    height: 80px;
    width: 54%;
}
ul.learning-stages li p {
    font-size: .6em;
    line-height: normal;
    color: #686868;
    margin: 0 10px;
}
div#alertsBody ul.learning-stages li input {
    display: block;
    position: absolute;
    margin: .7em .7em;
}
#alertsBody h3, #profileAlertsBody h3 {
    text-align: left;
}
ul#alertsList {
    margin: 0 0 2em 0;
}
ul#alertsList li, ul#alertsList div {
    background: #F0F0F0;
    list-style-type: none;
    margin: 0 0;
    text-align: left;
    border-bottom: 1px solid #E3E3E3;
}
ul#alertsList li input {
    display: inline-block;
    padding: 1em;
    margin: 10px;
}
ul#alertsList li ol li, ul#alertsList div ol li {
    padding-left: 1.5em;
    background: #FFF;
}
ul#alertsList li label, ul#alertsList div label {
    display: inline-block;
    font-size: .9em;
}
#alertsList i.fa.fa-caret-down,
#alertsList i.fa.fa-caret-right{
    font-size: 1.3em;
    margin: .3em .2em .5em .7em;
}
#areasOfInterest{
    margin: 2em 0;
}
/* iPads and Tablets*/
@media only screen and (min-width: 768px) {
    #alertsBody form {
        width: 60%;
        text-align: center;
        margin: 0 auto;
    }
    #alerts button.button.alerts-right {
        width: 150px;
        float:right;
        margin: 0 0 2em;
    }
    #alerts button.button.alerts-left {
        width: 150px;
        float:left;

    }
    ul.learning-stages li p {
        font-size: .7em;
    }
    .learning-stages li svg {
        width: 45%;
    }
}

/* Desktops and laptops */
@media only screen  and (min-width : 1200px) {
    div#alertsBody {
        width: 60%;
        margin: auto;
    }
}

.learning-stages svg .all {
    fill: none;
    stroke: #a2b950;
    stroke-miterlimit: 10;
    stroke-width: 6px;
}

div#profileAlertsBody {
    text-align: center;
    width: 100%;
    display: block;
}

#profileAlertsBody h2 {
    color: #99B450;
    font-weight: normal;
    font-size: 3em;
    margin: 2em 0 0.5em;
}

div#profileAlertsBody input {
    float: none;
}

div#profileAlertsBody select {
    height: 32px;
    line-height: 1em;
    border: 1px solid #dad6cb;
    padding: 0 8px;
    color: #555;
    font-size: 13px;
    outline: 0;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    float: left;
}

div#profileAlertsBody ul.learning-stages li input {
    display: block;
    position: absolute;
    margin: .7em .7em;
}

#content .alert-box {
    text-align: left;
}

.inactive.done line {
    stroke: #9FB85A;
}

p.alerts-intro-text {
    text-align: left;
    font-size: 13px;
    color: #9fb85a;
}

i.alerts-intro-icon {
    padding: 5px 0 5px 5px;
    font-size: 15px;
    color: #8fb32e;
}