/*
تعریف متغیرهایی که در تمام قسمتها بکار میروند
میتوان مثلا با رنگها کل تم را عوض کرد
*/


/*تم قهوه ای 

:root {
    --darker-color: rgb(26, 14, 4);
    --dark-color: rgb(41, 23, 8);
    --mid-color: rgb(51, 27, 6);
    --light-color: rgb(223, 190, 106);
    --lighter-color: rgb(247, 228, 179);
    --formHeight: 100px;
}
*/

/*تم خاکستری 

:root {
    --darker-color: rgb(20, 20, 20);
    --dark-color: rgb(35, 35, 35);
    --mid-color: rgb(60, 60, 60);
    --light-color: rgb(160, 160, 160);
    --lighter-color: rgb(228, 228, 228);
    --formHeight: 100px;
    --headerHeight: 80px;
}
*/


/*تم آبی*/
:root {
    --darker-color: rgb(0, 48, 96);
    --dark-color: rgb(0, 82, 163);
    --mid-color: rgb(51, 153, 255);
    --light-color: rgb(153, 204, 255);
    --lighter-color: rgb(240, 248, 255);
    --text-color: rgb(2, 24, 44);
    --formHeight: 100px;
    --headerHeight: 80px;
}




/*تم سبز

:root {
    --darker-color: rgb(20, 54, 36);
    --dark-color: rgb(34, 102, 68);
    --mid-color: rgb(72, 163, 120);
    --light-color: rgb(144, 238, 144);
    --lighter-color: rgb(245, 255, 250);
    --formHeight: 100px;
    --headerHeight: 70px;
}*/

/*تم قرمز 
:root {
    --darker-color: rgb(54, 0, 0);
    --dark-color: rgb(102, 0, 0);
    --mid-color: rgb(153, 27, 27);
    --light-color: rgb(204, 85, 85);
    --lighter-color: rgb(250, 235, 235);
    --formHeight: 100px;
    --headerHeight: 70px;
}
*/

.logo {
    position: absolute;
    top: 5px;
    right: 5px;
    height: calc(var(--headerHeight) - 10px);
    background-color: transparent;
}


.logooutIcon {
    position: absolute;
    top: 5px;
    left: 5px;
    height: calc(var(--headerHeight) /2);
    background-color: transparent;    
}