@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --link-normal: #1b6ec0;
    --link-hover: #4682B4;
    --link-active: #002854;
    --link-visited: purple;
}

/* CHANGES LINK COLORS FOR MAIN PANEL AND RIGHT COLUMN */

#mdgovMain a,
#mdgovMain a:visited,
#dnn_RightSidePane a,
#dnn_RightSidePane a:visited,
#dnn_PrimaryRightCol a,
#dnn_PrimaryRightCol a:visited {
    /* color: #820c1d */
    color: var(--link-normal);
}

#mdgovMain a:hover,
#dnn_RightSidePane a:hover,
#dnn_PrimaryRightCol a:hover {
    /* color: #820c1d; */
    color: var(--link-hover);
}

#mdgovMain a:active,
#dnn_RightSidePane a:active,
#dnn_PrimaryRightCol a:active {
    color: var(--link-active);
}

#mdgovMain.mdgov-main .Normal p a,
#mdgovMain.mdgov-main .Normal p a:visted,
#dnn_RightSidePane.mdgov-section .Normal p a,
#dnn_RightSidePane.mdgov-section .Normal p a:visted,
#dnn_PrimaryRightCol.mdgov-section .Normal p a,
#dnn_PrimaryRightCol.mdgov-section .Normal p a:visted {
    text-decoration: underline !important;
}

#mdgovMain.mdgov-main .Normal p a:hover,
#mdgovMain.mdgov-main .Normal p a:active,
#dnn_RightSidePane.mdgov-section .Normal p a:hover,
#dnn_RightSidePane.mdgov-section .Normal p a:active,
#dnn_PrimaryRightCol.mdgov-section .Normal p a:hover,
#dnn_PrimaryRightCol.mdgov-section .Normal p a:active {
    text-decoration: none !important;
}

#mdgovMain.mdgov-main .Normal p a:visited,
#dnn_RightSidePane.mdgov-section .Normal p a:visited,
#dnn_PrimaryRightCol.mdgov-section .Normal p a:visited {
    color: var(--link-visited);
}



/*----------------
* BUTTON STYLES
*
-----------------*/

/*
* BUTTON STYLE - SHOW/HIDE
*/

button,
input[type="button"] {
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
}

.showHide {
    background-color: var(--btn-normal);
    border: 0px;
    border-radius: 5px;
    color: white;
    outline: none;
    padding: .5rem .75rem;
    transition: 0.2s
}

.showHide:hover {
    background-color: var(--btn-hover);
    box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
    cursor: pointer;
    color: white;
}

.showHide:active {
    background-color: var(--dark-blue);
    color: white;
}

/*
* BUTTON STYLE - BASIC
*/

.btn-start {
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    display: inline-block;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    letter-spacing: 0.05rem;
    margin: 0 auto;
    max-width: 300px;
    transition: 0.2s;
}

.btn-start:hover {
    cursor: pointer;
    -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.btn-start:active {
    cursor: pointer;
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
}

.btn-start:focus {
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
}

.btn--block {
    display: block;
}

/*
* BUTTON COLORS - BLUE
*/
.btn-start--normal {
    background-color: var(--btn-normal);
    color: white;
}

.btn-start--normal:hover {
    background-color: var(--btn-hover);
}

.btn-start--normal:active {
    background-color: var(--dark-blue);
}

/*
* BUTTON COLORS - TEAL
*/

.btn-start--teal {
    background-color: #0a7e8c;
    color: white;
}

.btn-start--teal:hover {
    background-color: #0DABBD;
}

.btn-start--teal:active {
    background-color: #216870;
}

/*
* BUTTON COLORS - RED
*/

.btn-start--alert {
    background-color: #af002a;
    color: white;
}

.btn-start--alert:hover {
    background-color: #F00038;
}

.btn-start--alert:active {
    background-color: #70192D;
}

/*
* BUTTON COLORS - GRAY
*/
.btn-start--gray {
    background-color: #f2f2f2;
    color: #1e1e1e;
}

.btn-start--gray:hover {
    background-color: #F0F0F0;
}

.btn-start--gray:active {
    background-color: #BDBDBD;
}

/*
* BUTTON COLORS - BLACK
*/

.btn-start--black {
    background-color: #1e1e1e;
    color: white;
}

.btn-start--black:hover {
    background-color: #6E6E6E;
}

.btn-start--black:active {
    background-color: black;
}

/*
* BUTTON STYLE OUTLINE - BASIC
*/

.btn-outline {
    background-color: white;
    border: 3px solid black;
    border-radius: 1rem;
    cursor: pointer;
    display: inline-block;
    font-family: 'Montserrat', Arial, Helvetica, sans-serif;
    letter-spacing: 0.05rem;
    margin: 0 auto;
    height: 4rem;
    transition: 0.2s;
}

.btn-outline:hover {
    color: white;
    cursor: pointer;
    -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.btn-outline:active {
    cursor: pointer;
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
}

.btn-outline:focus {
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
}

/* BUTTON STYLE OUTLINE - BLUE */

.btn-outline--normal {
    border-color: var(--btn-normal);
    color: var(--btn-normal);
}

.btn-outline--normal:hover {
    background-color: var(--btn-normal);
    color: white;
}

.btn-outline--normal:active {
    background-color: var(--dark-blue);
}

/* BUTTON STYLE OUTLINE - TEAL */
.btn-outline--teal {
    border-color: #0a7e8c;
    color: #0a7e8c;
}

.btn-outline--teal:hover {
    background-color: #0a7e8c;
    color: white;
}

.btn-outline--teal:active {
    background-color: #216870;
}

/* BUTTON STYLE OUTLINE - RED */
.btn-outline--alert {
    border-color: #af002a;
    color: #af002a;
}

.btn-outline--alert:hover {
    background-color: #af002a;
    color: white;
}

.btn-outline--teal:active {
    background-color: #70192D;
}


/*----------------
* ALERT BOX STYLES
*
-----------------*/

.alert {
    min-height: 50px;
    /* Overrides Bootstrap's .alert min-height */
}

.alert-box {
    border-radius: 0.5rem;
    display: block;
    font-weight: bold;
    margin: 1rem 0;
    padding: 0.5rem;
}

.alert-box--basic {
    background-color: #fcf8e3;
}

.alert-box--warning {
    background-color: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
}

.alert-box--info {
    background-color: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

.alert-box--danger {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.alert-box--success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.alert-box--icon {
    display: flex;
    align-items: center
}

.alert-box--icon .fas {
    padding-right: 0.5rem;
}



/* ----------
* LINKS (Styled as Buttons)
*
---------- */
/* 
* LINK - DEFAULT BLUE
*/

#link-btn--normal {
    background-color: var(--btn-normal);
    border: none;
    border-radius: 1rem;
    color: white;
    cursor: pointer;
    display: block;
    letter-spacing: 0.05rem;
    margin: 0 auto;
    margin-bottom: 1rem;
    max-width: 250px;
    padding: 1rem 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: 0.2s;
}

#link-btn--normal:hover {
    background-color: var(--btn-hover);
    cursor: pointer;
    -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    text-decoration: none;
}

#link-btn--normal:active {
    background-color: var(--dark-blue);
    cursor: pointer;
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
    text-decoration: none;
}

#link-btn--normal:focus {
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
}

/*
* LINK - TEAL COLOR
*/

#link-btn--teal {
    background-color: #0a7e8c;
    border: none;
    border-radius: 1rem;
    color: white;
    cursor: pointer;
    display: block;
    letter-spacing: 0.05rem;
    margin: 0 auto;
    margin-bottom: 1rem;
    max-width: 250px;
    padding: 1rem 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: 0.2s;
}

#link-btn--teal:hover {
    background-color: #0DABBD;
    cursor: pointer;
    -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    text-decoration: none;
}

#link-btn--teal:active {
    background-color: #216870;
    cursor: pointer;
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
    text-decoration: none;
}

#link-btn--teal:focus {
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
}

/*
* LINK - RED COLOR
*/

#link-btn--alert {
    background-color: #af002a;
    border: none;
    border-radius: 1rem;
    color: white;
    cursor: pointer;
    display: block;
    letter-spacing: 0.05rem;
    margin: 0 auto;
    margin-bottom: 1rem;
    max-width: 250px;
    padding: 1rem 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: 0.2s;
}

#link-btn--alert:hover {
    background-color: #F00038;
    cursor: pointer;
    -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    text-decoration: none;
}

#link-btn--alert:active {
    background-color: #70192D;
    cursor: pointer;
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
    text-decoration: none;
}

#link-btn--alert:focus {
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
}

/*
* LINK - GRAY COLOR
*/

#link-btn--gray {
    background-color: #f2f2f2;
    border: none;
    border-radius: 1rem;
    color: #1e1e1e;
    cursor: pointer;
    display: block;
    letter-spacing: 0.05rem;
    margin: 0 auto;
    margin-bottom: 1rem;
    max-width: 250px;
    padding: 1rem 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: 0.2s;
}

#link-btn--gray:hover {
    background-color: #F0F0F0;
    cursor: pointer;
    -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    text-decoration: none;
}

#link-btn--gray:active {
    background-color: #BDBDBD;
    cursor: pointer;
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
    text-decoration: none;
}

#link-btn--gray:focus {
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
}

/*
* LINK - BLACK COLOR
*/

#link-btn--black {
    background-color: #1e1e1e;
    border: none;
    border-radius: 1rem;
    color: white;
    cursor: pointer;
    display: block;
    letter-spacing: 0.05rem;
    margin: 0 auto;
    margin-bottom: 1rem;
    max-width: 250px;
    padding: 1rem 0.5rem;
    text-align: center;
    text-decoration: none;
    transition: 0.2s;
}

#link-btn--black:hover {
    background-color: #6E6E6E;
    cursor: pointer;
    -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    text-decoration: none;
}

#link-btn--black:active {
    background-color: black;
    cursor: pointer;
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
    text-decoration: none;
}

#link-btn--black:focus {
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
}



/* ----------
* LINKS STYLED AS BUTTONS (OUTLINE VERSION)
---------- */

/*
* LINK BUTTON OUTLINE NORMAL
*/
#link-btn-outline--normal {
    background-color: white;
    border: 3px solid var(--btn-normal);
    border-radius: 1rem;
    color: var(--btn-normal) !important;
    cursor: pointer;
    display: block;
    letter-spacing: 0.05rem;
    margin: 0 auto;
    margin-bottom: 1rem;
    padding: 1rem 0.5rem;
    text-align: center;
    transition: 0.2s;
}

#link-btn-outline--normal:hover {
    background-color: var(--btn-normal);
    color: white !important;
    cursor: pointer;
    -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#link-btn-outline--normal:active {
    background-color: var(--dark-blue);
    cursor: pointer;
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
}

#link-btn-outline--normal:focus {
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
}

/*
* LINK BUTTON OUTLINE TEAL
*/
#link-btn-outline--teal {
    background-color: white;
    border: 3px solid #0a7e8c;
    border-radius: 1rem;
    color: #0a7e8c !important;
    cursor: pointer;
    display: block;
    letter-spacing: 0.05rem;
    margin: 0 auto;
    margin-bottom: 1rem;
    padding: 1rem 0.5rem;
    text-align: center;
    transition: 0.2s;
}

#link-btn-outline--teal:hover {
    background-color: #0a7e8c;
    color: white !important;
    cursor: pointer;
    -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#link-btn-outline--teal:active {
    background-color: #216870;
    cursor: pointer;
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
}

#link-btn-outline--teal:focus {
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
}

/*
* LINK BUTTON OUTLINE ALERT
*/
#link-btn-outline--alert {
    background-color: white;
    border: 3px solid #af002a;
    border-radius: 1rem;
    color: #af002a !important;
    cursor: pointer;
    display: block;
    letter-spacing: 0.05rem;
    margin: 0 auto;
    margin-bottom: 1rem;
    padding: 1rem 0.5rem;
    text-align: center;
    transition: 0.2s;
}

#link-btn-outline--alert:hover {
    background-color: #af002a;
    color: white !important;
    cursor: pointer;
    -webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.35);
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#link-btn-outline--alert:active {
    background-color: #70192D;
    cursor: pointer;
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
}

#link-btn-outline--alert:focus {
    outline: 2px solid #00CCCC;
    outline-offset: 1px;
}

/*----------------
* LANDING PAGE STYLES
*
-----------------*/


.miemss-topics {
    display: block;
    padding-top: 2rem;
    padding-bottom: 2rem;
}

@media screen and (min-width: 768px) {
    .miemss-topics {
        display: flex;
        flex-wrap: wrap;
        border-top: none;
        padding-top: 4.7rem;
        padding-bottom: 4.7rem;
    }
}

@media screen and (min-width: 992px) {
    .miemss-topics {
        border-top: 0.5px solid #f2f2f2;
    }
}

/*------------------------------*/

.miemss-topics-section {
    width: 100%;
    padding: 1rem;
    border-bottom: 0.5px solid #f2f2f2;
}

.miemss-topics-section:hover {
    background: rgba(0, 0, 0, 0.16);
    /* make this whatever you want */
}

.miemss-topics-section:last-of-type {
    border-bottom: none;
}

@media screen and (min-width: 768px) {
    .miemss-topics-section {
        width: 50%;
        border-bottom: none;
    }
}

@media screen and (min-width: 992px) {
    .miemss-topics-section {
        width: 33.33%;
    }
}

/*------------------------------*/

.miemss-topics-content {
    text-align: center;
}

.miemss-topics-content h2 {
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.3rem;
    margin-bottom: 0.75rem;
    color: #005282;
    text-align: center;
}

.miemss-topics-content p {
    font-size: 0.95rem;
    line-height: 1.25rem;
    margin-bottom: 0.5rem;
}

/*------------------------------*/

.miemss-topics-content img {
    display: none;
    border-radius: 50%;
}

@media screen and (min-width: 360px) {
    .miemss-topics-content img {
        display: inline-block;
        max-width: 50%;
        margin-bottom: 1rem;
        box-shadow: 0px 0px 19px 2px #005DAC;
    }
}

@media screen and (min-width: 540px) {
    .miemss-topics-content img {
        max-width: 50%;
    }
}

@media screen and (min-width: 768px) {
    .miemss-topics-content img {
        max-width: 75%;
    }
}