/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification 
for details on configuring this project to bundle and minify static web assets. */
@font-face {
    font-family: 'IRAN Sans Regular';
    font-style: normal;
    font-size: large;
    src: url('../lib/Bootstrap/fonts/IRAN Sans Regular.ttf') format('truetype');
}

:root {
    /*
        css variable work like global constants in c# that are defined in one place and used everywhere
        To use these variables,we use var(VARIABLENAME)
        background-color: var(--info-card-label-background-color);
    */
    --info-card-background-color: pink;
    --info-card-label-background-color: red;
}

body {
    direction: rtl;
    padding-top: 50px;
    padding-bottom: 20px;
    font-size: large;
    font-family: IRAN Sans Regular;
}

.form-wrapper {
    margin: 10px 10px 30px 10px;
    border: 1px solid silver;
    background-color: #f4f6f9;
    padding: 20px;
    border-radius: 4px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}


.table-row-wrapper {
    padding: 10px;
    box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.18);
    border-radius: 8px;
}

.table-row-space {
    border-collapse: separate;
    border-spacing: 0 15px;
}

.seperator {
    width: 2px;
    background-color: #e1e4e8;
    height: 25px;
    margin-right: 140px;
    border: 1px solid #e1e4e8;
    box-sizing: border-box;
}

.checked {
    color: orange;
}
/*Scroll to top*/
#scrollToTopButton {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: rgb(44, 135, 240); /* Set a background color */
    color: rgb(238, 238, 238); /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 10px; /* Some padding */
    font-size: 16.1px; /* Increase font size */
    font-family: Verdana, sans-serif;
}

    #scrollToTopButton:hover {
        background-color: #555; /* Add a dark-grey background on hover */
    }

/*Side-bar menu Css*/
.nav-main {
    display: flex;
    flex-direction: row;
}

.nav-sidebar {
    width: 75px;
    height: 950px;
    top: 0px;
    background: #343a40;
    text-align: center;
    color: white;
    position: fixed;
}

.nav-hamburgerItem {
    padding: 10px;
    left: 8.33%;
    right: 8.33%;
    top: 25%;
    bottom: 25%;
    cursor: pointer;
}

.nav-sidebar-items {
    margin-top: 70px;
}

    .nav-sidebar-items a {
        height: 60px;
        font-weight: 500;
        font-size: 13px;
        line-height: 15px;
        text-align: center;
        cursor: pointer;
    }

.nav-sidebar-item-selected {
    background-color: #003546;
}

.nav-sidebar-sub {
    width: 200px;
    height: 950px;
    background: #EBF1F9;
    padding-top: 20px;
    margin-right: 75px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.nav-sidebar-sub-submenu {
    width: 200px;
    height: 35px;
    padding-right: 15px;
    padding-left: 15px;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
}

.nav-sidebar-sub-submenu-items {
    width: 200px;
    height: 35px;
    padding-right: 20px;
}

.nav-sidebar-sub-submenu-items-text {
    height: 18px;
    font-style: normal;
    font-weight: normal;
    line-height: 18px;
    text-align: right;
}

/* main page card */
.info-card {
    width: 15rem;
    background-color: var(--info-card-background-color);
    border-radius: 8px;
}

.info-card-label {
    background-color: var(--info-card-label-background-color);
    border-radius: 10px;
    padding: 3px;
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.show-messaging-details {
    display: flex;
    flex-direction: row
}

.info-card-button {
    background-color: var(--info-card-label-background-color);
    border-radius: 10px;
    width: 100px;
    margin-top: 10px !important;
}
.class-sessions-details-header{
    background-color:purple;
}