.card-stage {
     background: #fff;
     border-radius: 2px;
     display: inline-block;
     height: 300px;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
     position: relative;
     margin: 6px;
     text-align: center;
     background: whitesmoke;
 }

 .card-stage:hover {
     box-shadow: 0 5px 10px rgba(0,0,0,0.25), 0 3px 4px rgba(0,0,0,0.22);
     cursor: pointer;
 }

 .card-discipline {
     border-radius: 2px;
     display: inline-flex;
     height: 142.5px;
     margin: 10px;
     position: relative;
     width: 142.5px;
 }

.card-offering {
    border-radius: 2px;
    display: inline-block;
    vertical-align: top;
    width: 245px;
    height: 345px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    margin: 6px;
    padding: 10px;
    background: whitesmoke;
}

.offeringBtn, .offeringBtn:hover {
    padding-left: 15px;
    padding-right: 15px;
    align-content: center;
    height: 40px;
    border-radius: 20px !important;
    font-weight: 700;
    width: 165px;
    margin: 0 auto;
}


 .stage-title {
     font-size: 14.19px;
     font-weight: 700;
     color: #000000;
     margin-top: 10px;
 }

 .stage-explanation {
     font-size: 12.5px;
     color: #000000;
     margin-top: 5px;
 }

@media screen and (min-width: 768px) {
    #stageOptions {
        justify-content: center;
        display: flex;
    }
}

@media screen and (min-width: 768px) {
    #stageOptions {
        justify-content: center;
        display: flex;
    }

    #disciplineOptions {
        justify-content: center;
        display: flex;
        flex-flow: row wrap;
        width: 90%;
        margin: 0 auto;
    }

    #selection {
        display: contents;
        text-align: center;
        position: relative;
        top: 4px;
        float: left;
    }
}

@media screen and (min-width: 768px) {
    #stageOptions {
        justify-content: center;
        display: flex;
    }

    #disciplineOptions {
        justify-content: center;
        display: flex;
        flex-flow: row wrap;
        width: 90%;
        margin: 0 auto;
    }

    #selection {
        display: contents;
        text-align: center;
        position: relative;
        top: 4px;
        float: left;
    }
}

@media screen and (max-width: 767px) {
    #stageOptions {
        flex-flow: column;
        margin: 0 auto;
    }

    #disciplineOptions {
        flex-flow: column;
        margin: 0 auto;
    }

    #selection {
        display: inline-block;
        text-align: center;
        position: relative;
        top: 4px;
        margin-left: auto;
    }
}

 .catalogHeaderLabel {
     font-size: 12pt;
     font-weight: bold;
     color: black;
 }

.margin-5 {
    margin: 5px !important;
}

 @media only screen and (max-width: 499px) {
     .stage-icon {
         display: none;
     }
     .divstage-name {
         height: 80px;
         width: 100%;
     }

     .discipline-icon {
         display: none;
     }

     .disciplineTitle {
         margin-left: 0 !important;
     }
 }

 @media only screen and (max-width: 521px) {
     .card-discipline {
         width: 100%;
         height: 100%;
         margin: 5px auto;
     }
    
     .disciplineBtn img {
         float: left !important;
         max-width: 75px !important;
     }

     .divstage-name {
         height: 100px;
         width: 100%;
     }

     .stage-title {
         width: 100%;
         margin-top: 0px;
         position: relative;
         top: 50%;
         -webkit-transform: translateY(-50%);
         -ms-transform: translateY(-50%);
         transform: translateY(-50%);
     }
     .stage-title p {
         display: table-cell;
         vertical-align: middle;
     }

     .disciplineTitle {
         margin-left: -20px;
     }

     .card-stage {margin: 6px 0;}
 }

 .stage-icon {
     padding: 30%;
 }

 .catalogOptionsDropdown {
     width: 110%;
 }

 .ddlCatalogOptionSpecialty {
     width: 120%;
 }

 .divCatalogOptionStage {
     padding-left: 0;
 }

 @media only screen and (max-width: 767px) {
     .card-stage {
         height: 100px;
     }
     .stage-icon {
         padding: 0;
         height: auto;
         width: 100px;
         padding: 24px;
     }

     .divstage-name {
         height: 100px;
     }

    .stage-title {
        width: 100%;
        position: relative;
        top: 45%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }
     .stage-title p {
         display: table-cell;
         vertical-align: middle;
         margin-top: 0px;
     }
    
     .catalogOptionsDropdown {
         width: 100%;
     }

     .divCatalogOptionStage {
         padding-left: 15px;
     }
 }


 @media screen and (min-width: 645px) and (max-width: 806px) {
     .disciplineWith4Options {
         padding: 0 80px 0 80px;
     }

     .disciplineWith3Options {
         padding: 0 10px 0 10px;
     }
 }


 .selector .divform {
     width: 100%;
     border-radius: 5px;
     background-color: #fff;
     padding: 50px;
     float: left;
 }

 .divform {
     width: 100%;
     border-radius: 5px;
     background-color: #fff;
     padding: 50px;
     margin-top: 0px;
     float: left;
     text-align: center;
 }

 .divform p.or {
     margin: 50px 0;
     text-align: center;
     position: relative;
     z-index: 2;
 }


 .btn-catalog {
     height: 33px;
     cursor: default;
     margin: 0 2px 0 2px;
     width: 98%;
 }


 .btn-catalog:disabled {
     border-color: lightgrey;
 }

 .disciplineSelection button {
     border-radius: 2px;
     padding: 6px 1px 6px 1px;
     width: inherit;
     height: inherit;
     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
     transition: all cubic-bezier(.25,.8,.25,1);
 }



 .disciplineSelection button:hover {
     box-shadow: 0 7px 14px rgba(0,0,0,0.25), 0 5px 5px rgba(0,0,0,0.22);
 }


 .disciplineSelection img {
     margin: 4px 0 4px 0;
 }

 .catalogStep {
     margin: 0;
     padding: 0;
 }

 .disciplineTitle {
     text-align: center;
     width: initial;
     vertical-align: middle;
     line-height: 21px;
     display: inline-block;
     overflow: auto;
 }

 disciplineBtn {
     text-align: center;
 }

 .disciplineBtn img{
     max-width: 100px;
     height: auto;
     align-self: center;
     float: none;
 }

.offeringTitle {
    color: #0180B7;
}

.offeringBtn, .offeringBtn:hover {
    padding: 5px 20px;
    border-radius: 20px !important;
}

.catalogStepHeader h3 {
    margin: 7px 0 7px 0 !important;
}

 .progressBar {
     min-width: 100px;
 }

 .progressBar .node {
     height: 10px;
     padding: 0;
     margin: 0 2% 0 2%;
     width: 10px;
     display: inline-block;
     border-radius: 50%;
     opacity: 0.6;
 }

 .progressBar .inactiveNode {
     background-color: #999999;
 }

 .resetButton {
     margin: 0;
     padding: 5px 6px 3px 6px;
     border-radius: 50%;
     border: none !important;
 }

 .multiCreditLink {
     margin: 0 !important;
 }