body {
    background-color: #A1A1A1;
}
.navbar {
    background-color: white;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
    height:100px;
}

.navbar-brand {
    font-weight: 600;
  
    font-size: x-large;
    
    width: 100%;
}
.btn-warning {
   background-color: #fbad17;
}
    .btn-warning:hover {
        background-color: #fcc04d;
    }
.btn-dark {
    background-color: #074757;
}
form {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.q-groups > label{
    font-weight: 600;
}
.q-groups > .form-check {
    margin-right: 1%;
}
.q-groups {
    padding-top: 5%;
    margin-left: 1%;
    scroll-snap-align: center;
}

.form-bod {
    min-width: 70%;
    overflow-y: auto;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;
    padding-bottom: 20%;
   
}

.blurred {
    filter: blur(15px);
    -webkit-filter: blur(15px);
}


.checkmark-container {
    width: 30px;
    height: 30px;
    margin: 20px auto;
}

.checkmark {
    width: 100%;
    height: 100%;
    display: block;
    stroke-width: 2;
    stroke: #4bb71b;
}

.checkmark-circle {
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-width: 2;
    stroke: #4bb71b;
    fill: none;
}

.checkmark-check {
    transform-origin: 50% 50%;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
}
.checkmark-check-animate {
    animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}
.checkmark-circle-animate {
    animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

@keyframes stroke {
    100% {
        stroke-dashoffset: 0;
    }
}

.submission-msg {
    display: flex;
    flex-direction: row; 
    align-items: center;
    justify-content: center;
    gap: 15px; 
}

.end {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    
}
@media screen and (min-width: 768px) {
   modal,
    .form-bod,
    .progress {
        margin-left: auto;
        margin-right: auto;
        width: 70% !important;
    }
}
.progress {
    margin-left: auto;
    margin-right: auto;
    border-radius: 1px;
    background: #f8d329;
   
}

.progress-bar {
    background: #43b6dd ;
}
.form-check{
    margin-right:15px;
  
}
.form-check-input:checked {
    background-color: #43b6dd; 
    border-color: #43b6dd; 
}

.cap {
    margin-left: 17%;
}

@media screen and (min-width: 1000px) {
    .cap {
        margin-left: 30%;
    }
}

@media screen and (max-width: 385px) {
    .cap {
        margin-left: -10%;
    }
}