/***
    The basic structure of a site is as follows :
        - header
        - footer    footer with the author ...
        - menu      main ways in which the site articulates itself (features)
        - pane      area where there are miscellaneous links or text
*/





body {
    font-size:16px;
    font-family: sans-serif;
    font-weight:lighter;
}

.bold {font-weight:bold}

.main {height:98vh; display:grid; 
    grid-template-rows:100px 50px auto 32px;
    grid-template-columns: 65% auto; gap:4px; padding:4px; margin-left:2%; margin-right:2%}
.main .header {display:grid; grid-template-columns: 80px auto; gap:4px;}
.main .header .title { font-size:32px;font-weight:bold}
.main .header img { width:80px; height: 80px;}
.main .pane {border-left:1px solid #CAD5E0}
.main .index {height:100%; line-height:1.5; padding:8px}
.footer {
    border-top:1px solid #CAD5E0;
    text-align:center;
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:4px;
    padding:8px;
    font-size:12px;
    color:black;
    align-items: center;
    align-content: center;
    text-transform: capitalize;
    /* background-color: rgba(255,255,255,0.8); */
    
    grid-column: 1 /span 2;
}

.large-text {font-size: 24px; font-weight: bold;}

.active {
    padding:4px;
    cursor:pointer;
    border:2px solid transparent ;
}
.active .fa-chevron-right { color:transparent}
.active:hover {
    border-bottom-color: #4682b4;
}
.active:hover .fa-chevron-right{
    color : #4682B4;
}
.highlight {
    cursor:pointer;
    border:4px solid transparent;
    padding:4px;
}
.highlight:hover {
    border-color:#4682B4 ;
}
.button-1 {
    background-color:#d3d3d3;
    color:#4682b4;
    font-weight:bold;
    cursor:pointer;
    padding:15px;
}
.button-1:hover {
    color:#FFFFFF;
    background-color:#4682b4;
}

.dialog-title {
    background-color:#FF6500;color:#FFFFFF;
    text-transform:capitalize; font-weight:bold; align-items:center;display:grid; grid-template-columns:auto 32px;
}
.dialog-button {
    display:grid;
    grid-template-columns: auto 115px;
    gap:4px;
}