@font-face {
    font-family: kalameh;
    font-weight: 700;
    src: url("../components/kalameh/KalamehWeb_Black.9d833aba.ttf") format("truetype");
}

@font-face {
    font-family: dana;
    font-weight: 400;
    src: url("../components/dana/dana-regular.ff38c3e5.woff2");
}

body {
    font-family: "dana";
}

form {
    background-color: #EBECF1;
    border: 1px solid #206A5D;
    border-radius: 5px;
    padding: 18px;
    margin: 24px;
}

h2 {
    font-family: "kalameh";
    font-size: 24px;
    color: #206A5D;
    margin: 12px;
}

.timer {
    font-size: 18px;
    font-weight: 700;
    float: left;
    margin: 12px;
    direction: ltr;
}

.input-form {
    margin: 12px;
}

.form-control {
    margin-top: 6px;
    border: 1px solid #fff;
    border-radius: 5px;
}

.form-control:focus {
    box-shadow: none;
    border: 1px solid #206A5D;
}

.form-select {
    margin-top: 6px;
    border: 1px solid #fff;
    border-radius: 5px;
}

.form-select:focus {
    box-shadow: none;
    border: 1px solid #206A5D;
}

.form-check {
    margin: 12px;
}

.sign-up-button {
    margin: 12px;
}

.sign-up-button .btn {
    font-size: 16px;
    width: 100%;
    background-color: #206A5D;
    color: #fff;
    padding: 6px 12px;
    border-radius: 5px;
}

.sign-up-button .btn:focus {
    box-shadow: none;
}

.username-message {
    display: none;
    float: left;
}

.password-message {
    display: none;
    float: left;
}

.btn-mode {
    font-size: 18px;
    background-color: #206A5D;
    color: #fff;
    padding: 6px 12px 4px;
    margin: 24px;
    border-radius: 5px;
    float: left;
    width: 70px;
}

.btn-mode:focus {
    color: #fff;
    box-shadow: none;
}

#captcha {
    font-size: 18px;
    font-weight: 700;
    margin-top: 6px;
    margin-bottom: 0;
    padding: 6px 12px;
    text-align: center;
    background-color: #A7D7C5;
    background-image: url(../img/download.png);
    color: #206A5D;
    border-radius: 5px;
}

.list-group {
    background-color: #EBECF1;
    border: 1px solid #206A5D;
    border-radius: 5px;
    padding-right: 0;
    margin: 24px;
    display: none;
}

.list-group-item {
    background-color: #EBECF1;
    border: none;
}

.login {
    margin: 12px;
}

.login a {
    text-decoration: none;
}

.dark-mode form {
    background-color: #06113C;
    border: 3px solid #06113C;
}

.dark-mode body {
    background-color: #393E46;
}

.dark-mode .timer {
    color: #EEEEEE;
}

.dark-mode h2 {
    color: #FF8C32;
}

.dark-mode label {
    color: #EEEEEE;
}

.dark-mode .login {
    color: #EEEEEE;
}

.dark-mode .btn-mode {
    background-color: #06113C;
    border: 1px solid #06113C;
    color: #EEEEEE;
}

.dark-mode .list-group {
    background-color: #06113C;
    border: 1px solid #06113C;
}

.dark-mode .list-group-item {
    background-color: #06113C;
    color: #EEEEEE;
}

.dark-mode .sign-up-button .btn {
    background-color: #FF8C32;
    color: #EEEEEE;
}

.dark-mode #captcha {
    background-color: #f8a86a;
    color: #FF8C32;
}

.dark-mode .form-control:focus {
    border: 1px solid #FF8C32;
}

.dark-mode .form-select:focus {
    border: 1px solid #FF8C32;
}

.dark-mode .username-message {
    color: #EEEEEE;
}

.dark-mode .password-message {
    color: #EEEEEE;
}

.user-age {
    background-color: #EBECF1;
    border: 1px solid #206A5D;
    border-radius: 5px;
    padding: 18px;
    margin: 24px;
    display: none;
}

.user-age-block {
    display: block;
}

.user-age input {
    margin: 8px;
}

.user-age .row {
    text-align: center;
}

.user-age h2 {
    padding-right: 12px;
}

.user-age .btn {
    font-size: 16px;
    background-color: #206A5D;
    color: #fff;
    padding: 4px 12px;
    margin-top: 12px;
    border-radius: 5px;
    width: 120px;
}

.user-age .btn:focus {
    box-shadow: none;
}


.user-age label {
    float: right;
    margin-right: 12px;
}

.dark-mode .user-age {
    background-color: #06113C;
    border: 3px solid #06113C;
    border-radius: 5px;
    padding: 18px;
    margin: 24px;
}

.dark-mode .user-age .btn {
    background-color: #FF8C32;
    color: #EEEEEE;
}

.user-counter {
    direction: ltr;
}

.user-counter input {
    text-align: right;
}

.user-counter span {
    background-color: #fff;
    margin-top: 6px;
    border-right: 2px solid #EBECF1;
    width: 40px;
    border-left: none;
    border-top: none;
    border-bottom: none;
}

.modal-content {
    margin: 34px;
    padding: 24px;
    width: 95%;
    border-radius: 5px;
    border: 1px solid #206A5D;
    background-color: #EBECF1
}

.dark-mode .modal-content {
    background-color: #06113C;
    border: 3px solid #06113C;
}

.modal-content p {
    font-size: 14px;
    text-align: justify;
    direction: ltr;
    margin-top: 12px;
}

.dark-mode .modal-content p {
    color: #EEEEEE;
}

.modal-content i {
    color: #206A5D;
    position: absolute;
    left: 20px;
    top: 10px;
    font-size: 24px;
}

.dark-mode .modal-content i {
    color: #FF8C32;
}