*{margin: 0;   padding: 0;   box-sizing: border-box;   text-decoration: none !important;    font-family: vazir400;    font-size: 18px; direction: rtl;} 

@font-face {  font-family: vazir100;  src: url('../font/Vazirmatn-Thin.woff2') format('woff2');        font-weight: 100;  font-style: normal;  font-display: swap;  }
@font-face {  font-family: vazir200;  src: url('../font/Vazirmatn-ExtraLight.woff2') format('woff2');  font-weight: 200;  font-style: normal;  font-display: swap;  }
@font-face {  font-family: vazir300;  src: url('../font/Vazirmatn-Light.woff2') format('woff2');       font-weight: 300;  font-style: normal;  font-display: swap;  }
@font-face {  font-family: vazir400;  src: url('../font/Vazirmatn-Regular.woff2') format('woff2');     font-weight: 400;  font-style: normal;  font-display: swap;  }
@font-face {  font-family: vazir500;  src: url('../font/Vazirmatn-Medium.woff2') format('woff2');      font-weight: 500;  font-style: normal;  font-display: swap;  }
@font-face {  font-family: vazir600;  src: url('../font/Vazirmatn-SemiBold.woff2') format('woff2');    font-weight: 600;  font-style: normal;  font-display: swap;  }
@font-face {  font-family: vazir700;  src: url('../font/Vazirmatn-Bold.woff2') format('woff2');        font-weight: 700;  font-style: normal;  font-display: swap;  }
@font-face {  font-family: vazir800;  src: url('../font/Vazirmatn-ExtraBold.woff2') format('woff2');   font-weight: 800;  font-style: normal;  font-display: swap;  }
@font-face {  font-family: vazir900;  src: url('../font/Vazirmatn-Black.woff2') format('woff2');       font-weight: 900;  font-style: normal;  font-display: swap;  }

html{ 
    --header-and-footer-color:    #1b1b1b;
    --btn:                        #0077ff;
    --btn-shadow:                 #005cc5;
    --edit-btn:                   #ffc107;
    --edit-btn-shadow:            #d6aa25;
    --submit-btn:                 #16ca2e;
    --submit-btn-shadow:          #17a72b;
    --del-btn:                    #ff0000;   
    --del-btn-shadow:             #c20000;   
    --table-color:              #0099ffe5;
    --table-color-shadow:       #0099ff88;
    --btn-fill:                      #fff;
    --text-color:                 #ffffff;
    --border-radius:                    8px;
}


a:link, a:visited {color: rgb(200, 200, 200);transition: all 0.4s;}
a:hover, a:active {color: rgb(255, 255, 255);transition: all 0.4s;}
.en{direction: ltr;}
button{height: fit-content;width: fit-content;background-color: var(--btn-fill);border-radius: var(--border-radius);transition: all 0.3s;}
.align-item-center {display: flex; justify-content: center; align-items: center;}
.phonelink:link, .phonelink:visited {color: #1b1b1b;}
.phonelink:hover, .phonelink:active {color: var(--btn-shadow); text-shadow: var(--table-color-shadow) 0px 1px;}



/* header and nav and footer and container code */
    footer{width: fit-content;height: fit-content;padding: 15px;margin: 10px auto;border-radius: 15px;background-color:  var(--header-and-footer-color);color: var(--text-color);}
    nav {width: fit-content;height: fit-content;padding: 15px;margin: 10px auto;border-radius: 15px;background-color: var(--header-and-footer-color); display: flex; justify-content: center; align-items: center; text-align: center;color: var(--text-color);}
    .head{font-size: 30px;font-family: vazir900, sans-serif;padding: 0 0 0 30px;}
    .nav-link{padding-left: 20px;font: 20px;font-family: vazir600;}  



/* rooms and categopage code */
    .room {border-radius: 0 0 15px 15px;padding: 20px;box-shadow: 0 4px var(--border-radius) rgba(0, 0, 0, 0.1);width: 40rem;max-width: 80rem;
           margin: 0 auto 1%;display: flex;flex-direction: column;justify-content: center;align-items: center;}


    /* table */
    .row {display: flex; align-items: center; justify-content: space-evenly;}

     
        
    /* btn and input */
    .submit-btn, input[type="submit"] {background-color: var(--submit-btn);color: white;border: none;padding: 10px 15px;cursor: pointer;border-radius: var(--border-radius);transition: all 0.3s;}
    .submit-btn:hover, input[type="submit"]:hover {background-color: var(--submit-btn-shadow);transition: all 0.3s;}
    input[type="text"],input[type="password"] {width: calc(100% - 20px);padding: 10px;margin: 5px;border: 1px solid #ddd;border-radius: var(--border-radius);}


    /* black box on top */
    .black-box{background-color: var(--header-and-footer-color);color: white;height: 60px;border-radius: 15px 15px 0 0;
        display: flex;flex-direction: column;justify-content: center;align-items: center;width: 40rem;margin: 1% auto 0;}
    .black-box-text{font-family: vazir700;font-size: 25px;}


    /* add room btn and text box */
    .add-item {display: flex;justify-content: space-between;align-items: center;width: 25rem;}
    .add-item input[type="text"] {flex: 1;margin-left: 10px;}


    /* delete btn and edit btn and other btn*/
    .other-item{background-color: var(--btn);}
    .del-item{background-color: var(--del-btn);}
    .edit-item{background-color: var(--edit-btn);}
    .other-item:hover{background-color: var(--btn-shadow);}
    .del-item:hover{background-color: var(--del-btn-shadow);}
    .edit-item:hover{background-color: var(--edit-btn-shadow);}
    .other-item:link, .other-item:visited, .edit-item:link, .edit-item:visited, .del-item:link, .del-item:visited{color: rgb(255, 255, 255)}
    .del-item, .edit-item, .other-item{display: inline-flex;align-items: center;justify-content: center; color: var(--btn-fill);padding: 10px; cursor: pointer;border-radius: var(--border-radius);transition: all 0.3s;margin-left: 2px;border: 0;}




/* teacher page */
    .tech {border-radius: 0 0 15px 15px;box-shadow: 0 4px var(--border-radius) rgba(0, 0, 0, 0.1);width:80%;margin: 0 auto 1%;padding: 5px;}
    .tech-head table {width: 92%;border-collapse: collapse;border-radius: 10px;overflow: hidden;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);margin: 2%;}
    .tech-head th, .tech-head td {padding: 8px;text-align: center;transition: all 0.3s;}
    .tech-head th {background-color: var(--btn-shadow);color: white;text-transform: uppercase;letter-spacing: 1px;}
    .tech-head tr:nth-child(even) {background-color: #f4f9ff;}
    .tech-head tr{transition: all 0.3s;}
    .tech-head tr:hover {background-color: #e3efff;transition: all 0.3s;}

    .result , .result tr:hover{background-color: #9ec9ff;}

    input[type="checkbox"] {width: 25px;height: 25px;-webkit-appearance: none;-moz-appearance: none;appearance: none;border: 2px solid var(--btn-shadow);border-radius: 5px;outline: none;cursor: pointer;background-color: white;display: inline-flex;align-items: center;justify-content: center;transition: background-color 0.2s, border-color 0.2s;position: relative;}
    input[type="checkbox"]:checked {background-color: var(--btn);border: 2px solid var(--btn-shadow);}
    input[type="checkbox"]:checked::before {content: '✔';font-size: 18px;color: white;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
            
    .add-tech {display: grid;gap: 15px;max-width: 600px;margin: 15px auto;padding: 20px;border: 1px solid #ddd;border-radius: 10px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);background-color: #fff;}
    .form-row {display: flex;justify-content: space-between;}
    .form-row input[type="text"] {width: 48%;}
    .add-tech input[type="text"],.add-tech input[type="submit"] {padding: 10px;font-size: 18px;}
    .add-tech input[type="text"] {width: 100%;}
    .checkbox-group {display: flex;flex-wrap: wrap;gap: 10px; justify-content: center; align-items: center;}

    select{width: 95%;padding: 10px;margin: 5px;border: 1px solid #ddd;border-radius: var(--border-radius);text-align: center;}
    option{text-align: center;}
    
    .tech-head th, .tech-head td {padding: 2px;padding-top: 10px;padding-bottom: 10px;text-align: center;border-left: 1px solid #dfe0ff;border-right: 1px solid #d3d7ff;border-top: none;border-bottom: none; }
    .tech-head th:first-child, .tech-head td:first-child {border-left: none;}
    .tech-head th:last-child, .tech-head td:last-child {border-right: none; }
    

/* terms page */
    .rooms{margin: 2% auto 2%;display: flex;flex-direction: column;justify-content: center;align-items: center;}
    input[type="date"] {width: 45%;padding: 10px;margin: 5px;border: 1px solid #ddd;border-radius: var(--border-radius);}
    input[type="number"] {width: 50%;padding: 10px;margin: 5px;border: 1px solid #ddd;border-radius: var(--border-radius);}


    .crs-input{width: 45%;padding: 10px;border: 1px solid #ddd;border-radius: var(--border-radius);margin: 2% auto 2%;display: flex;flex-direction: column;justify-content: center;align-items: center;}


/* scrollbar style */
    /* width */
    ::-webkit-scrollbar {width: 10px;}
    /* Track */
    ::-webkit-scrollbar-track {box-shadow: inset 0 0 15px lightblue;}
    /* Handle */
    ::-webkit-scrollbar-thumb {background: #0077ff; border-radius: 5px;}
    ::-webkit-scrollbar-thumb:hover {background: #0088ff; }


    .time-box{display: flex;justify-content: center;align-items: center;}
    .select-term{display: flex;justify-content: center;align-items: center;}
    .select-term select{width: 40%;height: 50px;}

      
    /* @media screen and (max-width: 768px) {.container {padding: 0 10px;}.tech-head table {display: block;width: 100%;}.tech-head thead tr {display: flex;flex-wrap: wrap;}.tech-head thead th {display: none;}.tech-head tbody tr {display: flex;flex-direction: column;}.tech-head tbody td {display: block;text-align: right;}.form-row {flex-direction: column;}.form-row input[type="text"] {width: 100%;margin-bottom: 10px;}.checkbox-group {flex-direction: column;}.checkbox-group input[type="checkbox"] {margin-right: 0;margin-bottom: 10px;}#crs {width: 100%;}#exampleList option {white-space: normal;}}
    @media screen and (max-width: 480px) {body {font-size: 15px;}.black-box-text {font-size: 20px;}.tech-head th,.tech-head td {padding: 5px;}.form-row input[type="text"] {font-size: 16px;}.submit-btn {font-size: 16px;}} */


    @media (max-width: 600px) {body {font-size: 14px;}header {flex-direction: column;text-align: center;}.container {padding: 10px;}.grid-item {width: 100%;margin-bottom: 15px;}}
    @media (min-width: 601px) and (max-width: 768px) {body {font-size: 16px;}.grid-container {grid-template-columns: repeat(2, 1fr);gap: 15px;}}
    @media (min-width: 769px) and (max-width: 1024px) {body {font-size: 18px;}.grid-container {grid-template-columns: repeat(3, 1fr);gap: 20px;}}
    @media (min-width: 1025px) {body {font-size: 20px;}.grid-container {grid-template-columns: repeat(4, 1fr);gap: 25px;}}

    @media screen and (max-width: 320px)  {body {font-size: 14px;}.head {font-size: 20px;padding: 0;}nav, footer {width: 100%;padding: 8px;margin: 0 auto;}.room {width: 100%;padding: 8px;}.black-box {width: 100%;}.add-item {width: 100%;flex-direction: column;}.add-item input[type="text"] {margin-left: 0;margin-bottom: 8px;}.tech {width: 100%;}.tech-head table {width: 100%;}}
    @media screen and (max-width: 480px)  {body {font-size: 15px;}.head {font-size: 22px;padding: 0;}nav, footer {width: 100%;padding: 10px;margin: 0 auto;}.room {width: 100%;padding: 10px;}.black-box {width: 100%;}.add-item {width: 100%;flex-direction: column;}.add-item input[type="text"] {margin-left: 0;margin-bottom: 10px;}.tech {width: 100%;}.tech-head table {width: 100%;}}
    @media screen and (max-width: 600px)  {body {font-size: 16px;}.head {font-size: 24px;padding: 0;}nav, footer {width: 100%;padding: 12px;margin: 0 auto;}.room {width: 100%;padding: 12px;}.black-box {width: 100%;}.add-item {width: 100%;flex-direction: column;}.add-item input[type="text"] {margin-left: 0;margin-bottom: 12px;}.tech {width: 100%;}.tech-head table {width: 100%;}}
    @media screen and (max-width: 768px)  {body {font-size: 17px;}.head {font-size: 26px;padding: 0 8px;}nav, footer {width: 100%;padding: 14px;margin: 0 auto;}.room {width: 90%;padding: 14px;}.black-box {width: 90%;}.add-item {width: 90%;}.tech {width: 100%;}.tech-head table {width: 100%;}}
    @media screen and (max-width: 1024px) {body {font-size: 18px;}.head {font-size: 28px;padding: 0 10px;}nav, footer {width: 100%;padding: 16px;margin: 0 auto;}.room {width: 80%;padding: 16px;}.black-box {width: 80%;}.add-item {width: 80%;}.tech {width: 100%;}.tech-head table {width: 100%;}}
    @media screen and (min-width: 1025px) {body {font-size: 18px;}.head {font-size: 30px;}nav, footer {width: fit-content;padding: 15px;margin: 10px auto;}.room {width: 40rem;max-width: 80rem;}.black-box {width: 40rem;}.add-item {width: 25rem;}.tech {width: 80%;}.tech-head table {width: 92%;}}


    .search {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        
        .search button {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          color: white;
          padding: 10px;
          cursor: pointer;
          border-radius: 8px 0 0 8px;
          transition: all 0.3s;
          border: 0;
          background-color: var(--btn-shadow);
          width: 50px;
          height: 50px;
        }
        
        .search input {
          width: 250px; /* Adjust this value as needed */
          border-radius: 0 8px 8px 0;
          margin-left: 0;
          padding: 10px;
          border: 1px solid #ccc;
        }


.new-chideman{display: grid;gap: 15px;max-width: 35%;margin: 15px auto;padding: 20px;border: 1px solid #ddd;border-radius: 10px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);background-color: #fff;margin-top: 0;}
.new-chideman button{width: 100%;}
.input-size{width:50px;}
.new-chideman input[type="text"]{width: calc(100% - 10px);}
.new-chideman select{width: calc(100% - 10px);}