html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}


.body-container {
    margin-top: 60px;
    padding-bottom: 40px;
}


.welcome-page li {
    list-style: none;
    padding: 4px;
}

.logged-out-page iframe {
    display: none;
    width: 0;
    height: 0;
}

.grants-page .card {
    margin-top: 20px;
    border-bottom: 1px solid lightgray;
}

    .grants-page .card .card-title {
        font-size: 120%;
        font-weight: bold;
    }

        .grants-page .card .card-title img {
            width: 100px;
            height: 100px;
        }

    .grants-page .card label {
        font-weight: bold;
    }



.nafathLoginFooter {
    margin-top: 10px;
    border-top: 1.5px solid #eee;
  /*  display: flex;
    justify-content: space-between;*/
    padding: 10px;
}
   
.random-code-place {
   

   /* height: 20px;*/
   
}

.randomPinColor {
   background-color: #4B9B2E !important;
}


.badgeCircle {
    border-radius: 50% !important;
    padding: 10px;
     
}

.base-timer {
    position: relative;
    width: 60px;
    height:60px;
}

.base-timer__svg {
    transform: scaleX(-1);
}

.base-timer__circle {
    fill: none;
    stroke: none;
}

.base-timer__path-elapsed {
    stroke-width: 7px;
    stroke: grey;
}

.base-timer__path-remaining {
    stroke-width: 7px;
    stroke-linecap: round;
    transform: rotate(90deg);
    transform-origin: center;
    transition: 1s linear all;
    fill-rule: nonzero;
    stroke: currentColor;
}

    .base-timer__path-remaining.green {
        color: rgb(65, 184, 131);
    }

    .base-timer__path-remaining.orange {
        color: orange;
    }

    .base-timer__path-remaining.red {
        color: red;
    }

.base-timer__label {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}



@media (max-width: 570px) {
    .TimerPlace {
        position: fixed !important;
        top: 550px !important;
        left: 360px !important;
        padding: 1px;
        border: 1px solid #eee;
        border-radius: 5px;
        width: 65px !important;
        height: 65px !important;
        background-color: #eee;
        box-shadow: 0 1px 0 0 #e8efed, 0 2px 20px 0 rgb(50 69 66 / 7%);
    }
}




@media (min-width: 900px) {
    .TimerPlace {
        position: fixed !important;
        top: 600px !important;
        left: 1150px !important;
        padding: 1px;
        border: 1px solid #eee;
        border-radius: 5px;
        width: 65px !important;
        height: 65px !important;
        background-color: #eee;
        box-shadow: 0 1px 0 0 #e8efed, 0 2px 20px 0 rgb(50 69 66 / 7%);
    }
}