.mobile-only 
{
    display: none;
}

body
{
    color: black;
}

#top-body
{
    width: 55%;
    margin-right: auto;
    margin-left: auto;
}

    .ltr #top-body #top-logo { float: right; }
    .rtl #top-body #top-logo { float: left; }
    
    .ltr #top-body #pc-menu { direction: ltr; }
    .rtl #top-body #pc-menu { direction: rtl;}

    .ltr #top-body #pc-menu a { margin-right: 0.8em; }
    .rtl #top-body #pc-menu a { margin-left: 0.8em; }

#top
{
    color: #ccc;
    background-color: #232f3e;
}

    #top a
    {
        color: #ddd;
    }

    #top a.selected
    {
        color: #fff;
        font-weight: 500;
    }

    #top a:hover
    {
        color: #fff !important;
    }

#container
{
    width: 50%;
    min-width: 650px;
    margin-right: auto;
    margin-left: auto;

    padding-right: 1.4em;
    padding-left: 1.4em;
}

#footer
{
    padding-top: 0.9em 1.4em;
}

#top
{
    padding-top: 0.9em;
    padding-bottom: 0.9em;
}

#container
{
    padding-top: 0.3em;
    padding-bottom: 9em;
    min-height: 76vh;
}

#inner
{
    width: 80%; 
    margin: 0 auto;
}

#main-menu
{
    margin: 2.5em 0 1.3em 0;
    padding: 0.8em 1em 0.6em 1em;
    border-radius: 5px;
    border: 1px solid #eee;
    background-color: white;
    background-color: #fafafa;
}

table
{
    width: 100%;
}

h1
{
    font-size: 1.8em;
}

#pc-menu a:focus
{
    outline: 2px dashed; /* I did not use border becuase if does not appear after I click the link once. */
}

input.date,
select.date
{
    width: calc(100% - 8em) !important;
    
}

input.time,
select.time
{
    width: 7em !important;
}


.video-vertical
{
    width: 55%;
    border: 10px solid #000; 
    border-radius: 20px;
    margin-bottom: 3em;
}

.video-horizontal
{
    width: 90%;
    border: 1px solid #000; 
    border-radius: 20px;
    margin-bottom: 3em;
}

button.small
{
    font-size: 0.8em;
}


input:focus + .slider:before /* Enlarges switch when on-focus */
{
    height: 22px;
    width: 22px;
    border: 2px dashed black;
}


p.small-img { text-align: center; }
p.small-img img { width: 30%; margin: 2em 0; }

    


/*
//
// Full width
//
*/
.full-width #container
{
    width: calc(100% - 2.8em);
}

.full-width #inner
{
    width: 96%; 
}


.wider #container
{
    width: calc(85% - 2.8em);
}

.wider #inner
{
    width: 81%; 
}


/*
//
// Change of screen size. 
//
*/
@media screen and (max-width: 900px)
{
    #top-body
    {
        width: 94%;
    }

        
    #top-body #top-logo { display: none; }    
}

@media screen and (max-width: 720px)
{
    #top,
    #container,
    #footer
    {
        width: unset;
        min-width: unset;
        border-right: unset;
        border-left: unset;
    }

    #top
    {
        position: unset; 
    }

    body #inner
    {
        width: unset; 
        margin: unset;
    }
}