:root {
    --primary: #607D8B;
    --dark-primary: #455A64;
    --light-primary: #CFD8DC;
    --accent: #FFC107;
    --divdier: #BDBDBD;
    --primary-text: #212121;
    --secondary-text: #757575;
}

a {
    text-decoration: none;
}

font-tahoma {
    font-family: tahoma !important;
}


* {
    font-family: "vazir-regular", tahoma;
}

.cursor-pointer {
    cursor: pointer;
}

/* COLOR SETTINGS */
.bg-primary {
    background-color: #607D8B !important;
}

.bg-dark-primary {
    background-color: #455A64;
}

.bg-light-primary {
    background-color: #CFD8DC;
}

.bg-accent-color {
    background-color: #FFC107;
}

.text-color {
    color: #FFFFFF;
}

.divider-color {
    color: #BDBDBD
}

.primary-text {
    color: #212121 !important;
}


.secondary-text {
    color: #757575;
}
.accent-color {
    color: var(--accent) !important;
}


/* START TYPE SCALE */
body, p {

    font-size: 1rem;
}

h1 {
    font-size: 2.986rem;
}

h2 {
    font-size: 2.488rem;
}

h3 {
    font-size: 2.074rem;
}

h4 {
    font-size: 1.728rem;
}

h5 {
    font-size: 1.44rem;
}

h6 {
    font-size: 1.2rem;
}

small {
    font-size: 0.833rem;
}

/* END TYPE SCALE */

/* START BS OVERRIDE */

.form-control {
    border-radius: 0;
    border-top: 0;
    border-right: 0;
    border-left: 0;
}

.nav-link {
    display: flex;
    gap: 3px;
    color: var(--light-primary) !important;
    transition-delay: 100ms;
    border-bottom: solid 2px var(--dark-primary);
}

.nav-link:hover {
    color: white !important;
    border-bottom: solid;
}

.nav-link svg {
    width: 20px;
}

.nav-link span {
    white-space: nowrap;
}


/* END BS OVERRIDE*/


.navigation-item {
    cursor: pointer;
}

.navigation-item svg:hover {
    background-color: var(--primary);
    padding: 4px;
    border-radius: 25px;
}

.navigation-item svg {
    width: 25px;
    margin-bottom: 5px;
}

.navigation-item small {
    font-size: 0.6rem;
    color: #455A64;
}

.workshop-item {
    padding: 1.3rem;
    border-radius: 1rem;
    min-width: 100%;
    margin-top: 1rem;
    /*border:solid 1px var(--dark-primary);*/
    transition-duration: 100ms;
    box-shadow: 0 0 8px var(--divdier);
}

.workshop-item:hover {
    box-shadow: 0 0 3px var(--divdier);
    border-radius: 0.5rem;
}

.workshop-item a, .workshop-item button {
    display: flex;
    gap: 0.7rem;
    justify-content: center;
    background-color: var(--accent);
    width: 100%;
    color: black;
    padding: 1rem 0.75rem;
    box-shadow: 0 0 8px var(--divdier);
}


.workshop-item a[disabled] , .workshop-item button:disabled{
    background-color: var(--light-primary);
}

.workshop-item a svg, .workshop-item button svg{
    width: 1.5rem;
}

.workshop-item a:not[disabled]:hover {
    background-color: var(--primary);
    color: var(--accent);
}

.page-title {
    text-shadow: 1px 1px 1px var(--primary);
    font-weight: bold;
    border-bottom: solid 2px lightgray;
    padding-bottom: 10px;
    width: fit-content;
    margin: 0.5rem auto;
    color: var(--primary);
    text-align: center;
}

.section-title {
    text-shadow: 1px 1px 1px var(--primary);
    font-weight: bold;
    color: var(--primary);
}

.default-btn {
    display: flex;
    gap: 0.7rem;
    justify-content: center;
    background-color: var(--accent);
    width: 100%;
    color: black;
    padding: 1rem 0.75rem;
    box-shadow: 0 0 8px var(--divdier);
}

#MvcViewer * {
    font-family: 'vazir-regular' !important;
}


@media (min-width: 768px) {
    .navigation-item {
        width: 100px;
        border-radius: 25px;
        /*box-shadow: 4px -2px 5px -5px black;*/
    }

    .navigation-item svg {
        width: 40px;
    }

    .navigation-item small {
        font-size: 0.7rem;
    }

    .workshop-item {
        min-width: 290px;
    }


}