/*
 * Droid Arabic Kufi (Arabic) http://www.google.com/webfonts/earlyaccess
 */
@font-face {
  font-family: "Droid Arabic Kufi";
  font-style: normal;
  font-weight: 400;
  src:  url(/static/survey/fonts/DroidKufi-Regular.ttf)
    format("truetype");
}

@font-face {
  font-family: "Droid Arabic Kufi";
  font-style: normal;
  font-weight: 700;
  src: url(/static/survey/fonts/DroidKufi-Bold.ttf)
    format("truetype");
}

@font-face {
  font-family: bukra;
  src: url(/static/survey/fonts/bukralight.ttf?456579cade68bfe1896ebf7087db072c);
  font-weight: 200;
}

@font-face {
  font-family: bukra;
  src: url(/static/survey/fonts/bukraregular.ttf?e050d364fd222620de26f7ad06aa5b64);
  font-weight: 300;
}

@font-face {
  font-family: bukra;
  src: url(/static/survey/fonts/bukrabold.ttf?a1c38193bcbeec87253eada26c3c6dc8);
  font-weight: 600;
}

* {
  font-family: bukra, Courier, monospace !important;
}

html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    margin: 0 0 100px;
    background: #f8f9fa;  
} 

footer .footer {
    background-color: #6d8a4e;
  color: #fff;
  text-align: right;
    position: absolute; 
    left: 0; 
    bottom: 0; 
    height: 100px; 
    width: 100%;

} 

footer  {

    padding-top: 20px;
}



.header { background: linear-gradient(135deg, #6d8a4e, #5a6f3e); color: white; padding: 2rem; border-radius: 15px; }
.modal-header {background-color: #6d8a4e; color: white;}
.card { border: none; border-radius: 15px; transition: transform 0.3s, box-shadow 0.3s; margin-bottom: 1.5rem; }
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.btn-primary { background-color: #6d8a4e; border-color: #6d8a4e; transition: background-color 0.3s; }
.btn-primary:hover { background-color: #5a6f3e; }
.btn-outline-primary {
    color: #6d8a4e;
    border-color: #6d8a4e;
}
.btn-outline-primary:hover  {
    color: #fff;
    border-color: #68834b;
    background-color: #68834b;
}

.section-title { color: #6d8a4e; position: relative; }
.section-title::after { content: ''; width: 50px; height: 3px; background: #6d8a4e; position: absolute; bottom: -5px; right: 0; }
.form-label { font-weight: bold; }
.form-control, .form-select { border-radius: 10px; }
.text-danger { color: #dc3545 !important; }
.required-icon { margin-right: 5px; }
.alert-icon { font-size: 1.5rem; margin-left: 10px; }
.form-check-label { margin-right: 10px; }
.form-check-input { margin-left: 5px; }

.card { border: none; border-radius: 15px; transition: transform 0.3s, box-shadow 0.3s; margin-bottom: 1.5rem; }
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); }
.option-container { display: flex; align-items: center; padding: 10px; border-radius: 8px; transition: background-color 0.2s; }
.option-container:hover { background-color: #e9ecef; cursor: pointer; }
.option-container input:checked + label .option-text::before { content: '\F26B'; font-family: 'Bootstrap Icons'; color: #6d8a4e; margin-left: 10px; }
.form-check-input { margin-left: 10px; }
.form-check-label { flex-grow: 1; padding: 5px; }
.option-text { margin: 0; }
.form-control, .form-select { border-radius: 10px; }
.text-danger { color: #dc3545 !important; }
.required-icon { margin-right: 5px; }

  .progress-step {
            display: flex;
            justify-content: space-between;
            position: relative;
            margin-bottom: 2rem;
        }
        .progress-step .step {
            text-align: center;
            width: 33.33%;
            position: relative;
            z-index: 1;
        }
        .progress-step .step .circle {
            width: 40px;
            height: 40px;
            background-color: #28a745;
            color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 0.5rem;
            font-size: 1.2rem;
            box-shadow: 0 0 0 5px #f4f9f4;
        }
        .progress-step .step.inactive .circle {
            background-color: #6c757d;
        }
        .progress-step .step .label {
            font-size: 0.9rem;
            font-weight: 500;
        }
        .progress-step::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 16.66%;
            width: 66.66%;
            height: 5px;
            background-color: #6c757d;
            z-index: 0;
        }
        .progress-step .active ~ .step .circle {
            background-color: #6c757d;
        }
        .progress-step .active ~ .step::before {
            background-color: #6c757d;
        }
        @media (max-width: 576px) {
            .progress-step .step .label {
                font-size: 0.8rem;
            }
            .progress-step .step .circle {
                width: 30px;
                height: 30px;
                font-size: 1rem;
            }
            .container {
                padding: 1rem;
            }
        }

.todo-list li:hover { background-color: #f8f9fa; }