/* push footer to bottom */
main {
    min-height: 86.9vh;
}

.centered {
    position: fixed;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);
}

/********************* navbar *****************************/
nav.mynav {
    position: relative;
    /*line-height: 4;*/
    border-bottom-width: 1px;
    background-color: #fff;
    border-bottom-color: black;
    padding: 1em 0;
}

.navbar-brand img {
    /*max-width: 145px;*/
    width: 145px;
    height: 35px;
}

span.no-nav-link {
    display: block;
    padding: .5rem 1rem;
    text-decoration: none;
    color: #432818;
    text-transform: capitalize;
}

span.admin-name {
    color: #ef476f;
}

.view-active {
    color: navajowhite;
    border-bottom: 2px solid cornflowerblue;
    border-radius: 3px;
}

.navbar {
    padding: 0;
    margin: 0;
    line-height: 35px;
}

a.nav-link {
    color: black;
}

a.nav-link:hover {
    color: black;
    border-radius: 6px;
    background-image: linear-gradient(180deg, cornflowerblue 3%, white 3%);
}

/********************* navbar *****************************/

/********************************* image preview ************************/

.image-preview {
    width: 162px;
    min-width: 107px;
    background-color: #fff;
    display: none;
    font-weight: bold;
}

.image-preview-image {
    display: none;
    width: 159px;
    height: 100px;
}

/********************************* end image preview ************************/

/************************* prevent textarea resize ************************/
/*textarea {*/
/*    resize: none;*/
/*}*/

/************************* prevent textarea resize ************************/


/******************************** footer ************************************/
/*footer.myfooter {*/
/*    background-color: black;*/
/*    border-top-color: gray;*/
/*    border-top-style: solid;*/

/*}*/

/******************************** footer ************************************/


/*************************************** card list ***************************************/
.myCard:hover {
    transition: all .05s ease-out;
    box-shadow: rgba(14, 30, 37, 0.12) 0 2px 4px 0, rgba(14, 30, 37, 0.32) 0 2px 16px 0;
    border-radius: 10px;
    background-color: white;
    color: black;
}

/*************************************** card list ***************************************/

/*************************************** breadcrumb ***************************************/
.customBreadCrumb:hover {
    color: black;
    text-transform: uppercase;
    text-decoration: underline;
}

/*************************************** breadcrumb ***************************************/


/*************************************** specifies photo width & height for issues ********************************/
.issueImg {
    width: 100px;
    height: 50px;
}

/*************************************** specifies photo width & height for issues ********************************/


.notIssueImg {
    width: 120px;
    height: 65px;
}


/********************************************* background image *******************************************************/
#main-image {
    background-image: url("../img/background.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    /*height: 100vh;*/
}


/********************************* Glassmorphism for cards ********************/
.custom-mask {
    backdrop-filter: blur(6px);
    background-color: rgba(255, 255, 255, 0.55);
    border: 3px solid rgba(255, 255, 255, .1);
    border-radius: 10px;
    background-clip: padding-box;
    box-shadow: 10px 10px 10px rgba(46, 54, 68, 0.03);
    color: black;
}

/********************************* Glassmorphism for cards ********************/


/**************** make table borders darker *********************/
table {
    border-collapse: collapse;
    background: white;
}

tr {
    border: solid;
    border-width: 1px 0;
    font-size: medium;
}

td {
    color: black;
}

/*tr:first-child {*/
/*    border-top: none;*/
/*}*/

/*tr:last-child {*/
/*    border-bottom: none;*/
/*}*/

td:last-child {
    border-width: 1px;
}

/********************************* Color questions red and increase the font ********************************/
span.question-text {
    color: darkred;
    font-size: medium;
}

/********************************* Color questions red and increase the font ********************************/


/*************************************** answers to question span align ***************************************/
span.spanAlign {
    margin-left: 5px;
    font-size: medium;

}

/*************************************** answers to question span align ***************************************/

/*************************************** make all input labels red ***************************************/
.form-outline .form-control.active ~ .form-label {
    color: darkred;
    font-weight: bold;
    font-size: large;
}

/*************************************** make all input labels red ***************************************/


/************************************* increase font size of preview button ************************************/
.preview-button {
    font-size: 14px;
    font-weight: 600;
}

/************************************* increase font size of preview button ************************************/

/*********************** admin pages **************************/
.admin_link {
    color: black;
}

.admin_link:hover {
    background-color: cornflowerblue;
    background-image: linear-gradient(415deg, #b8c6db 0%, #f5f7fa 74%);
}

/*********************** admin pages **************************/

/**************** make table borders darker *********************/

/* Height for devices larger than 576px */
/*@media (min-width: 992px) {*/
/*    #main-image {*/
/*        margin-top: -58.59px;*/
/*    }*/
/*}*/