.sgs-gud {
    display: flex;
    flex-direction: column;

    color: #666;

    .search-jump {
        flex: 1;
        flex-direction: column;
                
        margin: 2rem 0;

        position: -web-sticky;
        position: sticky;
        top: 0;
        
        background:#eee;
        
        padding: 1rem;       

        .alphabet {
            display: grid;            
            grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr));
                        
            margin-bottom: 1rem;


            .letter {
                display: flex;
                flex: 1;
                flex-basis: 100%;
                justify-content: center;
                align-items: center;

                border: 1px solid #999;
                padding: 0.5rem;
                font-weight: bold;
            }

            .letter.enabled {
                background-color: #d5dce4;

		text-decoration: none;
		color: #666666;
		font-weight: 700;
		line-height: 32px;
            }

            .letter.enabled.top {                
                display: inline-flex;                
                background-color: #1c7eab;
                color: #fff;
            }

            .letter.disabled {
                background-color: #ccc;
                color: #333;
            }

            .letter.enabled:hover            
             {
                background:#002a5c;
                color: #fff;
                
                font-size: 140%;                
            }
        }

        .sgs-gud-search {            
            width: 100%;
            border: 1px solid #999;
	    padding: 8px;
        }
    }

    .letter-header {
        background:#002a5c;
        color: #fff;
        
        font-size:1.6rem !important;
        font-weight: bold !important;
        
        padding: 0.5rem 1.5rem;
        margin-bottom: 1rem;
    }

    
    .unit {        
        margin-bottom: 1.5rem;        
        
        .header { 
                        
            color: #002a5c;        

            margin-bottom: 1rem;
            
            > div, .submenu {                
                display: grid;                
                grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

                padding: 0 !important;
                margin: 0 !important;
            }

            .title {
                font-size: 1.4rem;
                font-weight: bold;
                grid-column: span 2;                
            }

            .links {
                display: flex;
                justify-content: flex-end;

                padding: 0 !important;
                margin: 0 !important;
            }

            
            .links, .submenu {
                

                padding-left: 1.5 rem;
                font-size: 0.9 rem;
                color: #666; 

                list-style: none !important;
                gap: 1rem;

                li {
                    list-style: none !important;                    
                }
            }

            .submenu li:not(:first-child) {
                padding-left: 1.5rem; 
            }
    
        }

        .category {
            margin-bottom: 1rem;

            .header {
                color: #666;
                font-size: 1rem;
                margin-bottom: 0;
                font-weight: 600;
            }
    
            .contacts {                
                list-style: none !important;                                           


                .contact {
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) ;
                    
                    font-size: 0.9rem;
		    color: #666666;
		    font-weight: normal !important;

		    margin-bottom: 0;

                    > dt {
                        text-wrap: balance;
			font-weight: normal !important;
                    }

                    > dd {
                        padding-left: 1.5rem;    
			margin-bottom: 0;
                    }                      
                }

            }
            
        }   
            

        .unit {            
            
            .title { 
                color: #1c7eab;
                font-size: 1.2rem;
            }

            .category {

                .header {
                    font-size: 1rem;
                    color: #666;
                }
            }
        }

    }

    .unit a {
	color: #666666 !important;
	text-decoration: none !important;
    }

    .unit a:hover {
        color: #002a5c !important;
        font-weight: bold;
    }
    
    .unit svg {
        display: inline-flex;
        margin-right: 0.25rem;
	height: 24px;
    }

    
}
