/*login page*/

.mrq {
    font-weight: bold;
    background-color: brown;
    margin: 0;
    font-size: 1.5rem;
    color: #fff;
}


/*#photos-adi {
     Prevent vertical gaps 
    line-height: 0;

    -webkit-column-count: 5;
    -webkit-column-gap:   0px;
    -moz-column-count:    5;
    -moz-column-gap:      0px;
    column-count:         5;
    column-gap:           0px;  
}*/


/*#photos-adi img {
     Just in case there are inline attributes 
    width: 100% !important;
    height: auto !important;
    border: 1px solid aqua;
}*/

#photos-adi img {
    height: 60px;
    width: auto;
}

@media (max-width: 1200px) {
    #photos {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}

@media (max-width: 1000px) {
    #photos {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}

@media (max-width: 800px) {
    #photos {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}

@media (max-width: 400px) {
    #photos {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}


/*end login page*/


/*
 *Registration form
 */

.dob {
    display: inline;
    width: auto;
}

.btn-upload {
    margin-top: 5px;
}

.form-control-file+.progress {
    margin-top: 5px;
}


/*
 *Registration form : end
 */


/* header */

.header {
    background: rgba(255, 215, 71, 1);
    background: -moz-linear-gradient(left, rgba(255, 215, 71, 1) 0%, rgba(255, 215, 71, 1) 41%, rgba(226, 240, 238, 1) 55%, rgba(106, 212, 143, 1) 74%, rgba(255, 255, 255, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255, 215, 71, 1)), color-stop(41%, rgba(255, 215, 71, 1)), color-stop(55%, rgba(226, 240, 238, 1)), color-stop(74%, rgba(106, 212, 143, 1)), color-stop(100%, rgba(255, 255, 255, 1)));
    background: -webkit-linear-gradient(left, rgba(255, 215, 71, 1) 0%, rgba(255, 215, 71, 1) 41%, rgba(226, 240, 238, 1) 55%, rgba(106, 212, 143, 1) 74%, rgba(255, 255, 255, 1) 100%);
    background: -o-linear-gradient(left, rgba(255, 215, 71, 1) 0%, rgba(255, 215, 71, 1) 41%, rgba(226, 240, 238, 1) 55%, rgba(106, 212, 143, 1) 74%, rgba(255, 255, 255, 1) 100%);
    background: -ms-linear-gradient(left, rgba(255, 215, 71, 1) 0%, rgba(255, 215, 71, 1) 41%, rgba(226, 240, 238, 1) 55%, rgba(106, 212, 143, 1) 74%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to right, rgba(255, 215, 71, 1) 0%, rgba(255, 215, 71, 1) 41%, rgba(226, 240, 238, 1) 55%, rgba(106, 212, 143, 1) 74%, rgba(255, 255, 255, 1) 100%);
}

.hr {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.hr-item {
    font-weight: bold;
}

.hr-item img {
    max-height: 100px;
}


/* header end  */


/*footer*/

footer {
    background-color: darkgreen;
    padding: 5px;
    margin-top: 5px;
    font-size: 1.2rem;
}

footer .copyright {
    color: #a9ffa9;
}

footer .powercompany {
    color: pink;
}


/*end: footer*/


/*dashboard*/

.dash-box-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    margin-bottom: 10px;
    margin-top: 10px;
}

.dashbox-bg1 {
    background-color: slategrey;
}

.dashbox-bg2 {
    background-color: cornflowerblue;
}

.item-img {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    padding: 5px;
    align-self: center;
}

.item-text {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 2;
    grid-row-end: 2;
    justify-self: center;
    color: palegoldenrod;
}

.item-text p {
    font-size: 1.2rem;
}

.item-text a {
    color: white;
    font-size: 1rem;
}

.item-counter {
    grid-column-start: 2;
    grid-row-end: 2;
    font-size: 4rem;
    justify-self: right;
    padding: 5px;
}


/*end: dashboard*/

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    /* Margin bottom by footer height */
}

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}