:root {
    --color-title: #000000;
    --color-main: #1A1A1A;
    --color-border: #B8D210;
    --color-background: #E6E6E8;
    --color-background-2: #CBCBD0;
    --color-header-text: #CEE21F;
    --color-header-background: #7767BE;
    --color-special: #5A49A9;
}

.font-regular {
    font-family: main-font-regular, TimesNewRoman, sans-serif;
}

.font-bold {
    font-family: main-font-bold, TimesNewRoman, sans-serif;
}

head,
body {
    width: 100vw;
    position: relative;
    overflow-x: hidden;
}

body {
    font-family: main-font-regular, TimesNewRoman, sans-serif;
    /* background: var(--color-background); */
}

input,
button,
submit {
    border: none;
}

a,
a:hover {
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer;
}

input[type="text"],
input[type="email"],
input[type="password"],
select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.7rem;
}

select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: left .75rem center;
    background-size: 16px 12px;
}

li {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.text-color-title {
    color: var(--color-title)
}

.text-color-subtitle {
    color: var(--color-header-background)
}

.text-color-main {
    color: var(--color-main)
}

.text-color-header {
    color: var(--color-header-text)
}

.text-color-special {
    color: var(--color-special)
}

.border-color-main {
    border-color: var(--color-border);
    border-style: solid;
}

.border-color-special {
    border-color: var(--color-special);
    border-style: solid;
}

.bg-color-main {
    background-color: var(--color-background)
}

.bg-color-header {
    background-color: var(--color-header-background)
}

.bg-color-special {
    background-color: var(--color-special)
}

.bg-color-gradient {
    background: var(--color-background);
    background: -webkit-linear-gradient(to right, var(--color-background), var(--color-background-2));
    background: linear-gradient(to right, var(--color-background), var(--color-background-2));
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-pre {
    white-space: pre-wrap;
}

.dir-rtl {
    direction: rtl;
}

.dir-ltr {
    direction: ltr;
}

.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

.pointer {
    cursor: pointer;
}

.background-center {
    width: 30%;
    height: 100px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}

.navbar-toggler-icon {
    width: 2rem;
    height: 2rem;
}

.list-image {
    list-style-type: disc;
    list-style-image: url("data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' height='10' width='10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%233C8EFF' /%3E%3C/svg%3E ");
}

.navbar-brand img {
    max-height: 5rem;
}

.errorlist {
    color: red;
    font-weight: bold;
}

.captcha {
    margin-bottom: 0.5rem;
}

/* End of Django Template Styles */

#home-main-img {
    width: 700px;
}

.modal-body p {
    margin: 0;
}

.modal-body p label {
    margin: 1rem 0 0.5rem 0;
}

@media (max-width: 991.98px) {
    /* lg */
}




@media (max-width: 767.98px) {
    /* md */
}




@media (max-width: 575.98px) {
    /* sm */
}