:root {
 --white: #ffffff;
 --primary: #7ebe40;
 --dark-primary: #517c28;
 --secondary: #ff6258;
 --dark-secondary: #b6453d;
 --accent: #7ebe40;
 --text: #222222;
 --font: 'Poppins', sans-serif;
 --container-bg: #f1f1f1;
}
/* Layouts */
/* Animation Mixins */
@-webkit-keyframes dropdownAnimation {
 from {
     opacity: 0;
     -webkit-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
}
 to {
     opacity: 1;
     -webkit-transform: none;
     transform: none;
     -webkit-transform: translate3d(0, 0px, 0);
     transform: translate3d(0, 0px, 0);
}
}
@keyframes dropdownAnimation {
 from {
     opacity: 0;
     -webkit-transform: translate3d(0, -30px, 0);
     transform: translate3d(0, -30px, 0);
}
 to {
     opacity: 1;
     -webkit-transform: none;
     transform: none;
     -webkit-transform: translate3d(0, 0px, 0);
     transform: translate3d(0, 0px, 0);
}
}
.dropdownAnimation, .nav .nav-item.dropdown .navbar-dropdown, .navbar-nav .nav-item.dropdown .navbar-dropdown {
 -webkit-animation-name: dropdownAnimation;
 animation-name: dropdownAnimation;
 -webkit-animation-duration: 0.25s;
 animation-duration: 0.25s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}
@-webkit-keyframes fadeOut {
 from {
     opacity: 1;
}
 to {
     opacity: 0;
}
}
@keyframes fadeOut {
 from {
     opacity: 1;
}
 to {
     opacity: 0;
}
}
.fadeOut {
 -webkit-animation-name: fadeOut;
 animation-name: fadeOut;
}
.infinite-spin {
 -webkit-animation-name: spin;
 animation-name: spin;
 -webkit-animation-duration: 3s;
 animation-duration: 3s;
 -webkit-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
 -webkit-animation-timing-function: linear;
 animation-timing-function: linear;
}
@-webkit-keyframes spin {
 from {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
}
 to {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
}
}
@keyframes spin {
 from {
     -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
}
 to {
     -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
}
}
@-webkit-keyframes fadeInUp {
 from {
     opacity: 0;
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
}
 to {
     opacity: 1;
     -webkit-transform: none;
     transform: none;
}
}
@keyframes fadeInUp {
 from {
     opacity: 0;
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
}
 to {
     opacity: 1;
     -webkit-transform: none;
     transform: none;
}
}
.fadeInUp {
 -webkit-animation-name: fadeInUp;
 animation-name: fadeInUp;
}
@-webkit-keyframes menufadeInLeft {
 from {
     opacity: 0;
     -webkit-transform: translate3d(-20px, 0, 0);
     transform: translate3d(-20px, 0, 0);
}
 to {
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
}
}
@keyframes menufadeInLeft {
 from {
     opacity: 0;
     -webkit-transform: translate3d(-20px, 0, 0);
     transform: translate3d(-20px, 0, 0);
}
 to {
     opacity: 1;
     -webkit-transform: translate3d(0, 0, 0);
     transform: translate3d(0, 0, 0);
}
}
.menufadeInLeft {
 -webkit-animation-name: menufadeInLeft;
 animation-name: menufadeInLeft;
}


/* SCROLLBAR STYLING */
::-webkit-scrollbar {
 width: 1em;
 height: 1em;
}
::-webkit-scrollbar-track {
 background: #D9D9D9;
 border-radius: 100vw;
 margin-block: 0.5em;
}
::-webkit-scrollbar-thumb {
/* background: #4a7d16;
 */
 background: #FAFAFA;
 border-radius: 100vw;
 border: 0.20em solid #D9D9D9;
}
@supports (scrollbar-color: #FAFAFA #D9D9D9;) {
 * {
     scrollbar-color: #FAFAFA #D9D9D9;
     scrollbar-width: thin;
}
}


#section1 {
 margin: 40px auto 0;
}

h2.login-title {
 margin: 20px auto;
}

img.logo {
 max-width: 200px;
 margin: 0 auto;
}

.content-wrapper {
 padding: 20px 40px 50px 40px;
 overflow: hidden;
}

.card {
 box-shadow: 0 0 40px -23px rgba(0,0,255, 0.7);
}

 

/* Footer */
.footer,
.footer-landing {
 background: #dbdbdb;
 padding: 20px 1rem;

 border-top: 1px solid #cdd6dc;
 font-size: calc(0.875rem - 0.05rem);
 font-family: "poppins", sans-serif;
 text-align: right !important;
}
.footer a,
.footer-landing a {
 font-size: inherit;
}

@media (max-width: 991px) {
 .footer,
 .footer-landing {
     margin-left: 0;
     width: 100%;
}
}
.confirm_msg{
     background-color: var(--primary);
    border: 1px solid black;
    padding: 0px 0px 0px 5px;
    color: white;
}
 .input-group {
    position: relative;
    display: table;
    border-collapse: separate;
}

.input-group .form-control, .input-group-addon, .input-group-btn {
    display: table-cell;
}
.input-group .form-control {
    position: relative;
    z-index: 2;
    float: left;
    width: 100%;
    margin-bottom: 0;
}
.input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
    color: #555;
    text-align: center;
  
}
.input-group-addon, .input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
}
.form-control {
    border-radius: 3px;
    box-shadow: none;
}


.input-group .input-group-addon {
    border-radius: 0;
    background-color: #fff;
    border: 1px solid #ced4da;
}
.input-group-addon:last-child {
    border-left: 0;
}

#accent-keyboard {
   
    z-index: 9;
}

.fa-keyboard{font-size: 20px;}