/* このスタイルシートは阪大様の要望によりVimeo動画表示の画面だけに適用しています。 */
/* メディアクエリ：モバイルファースト */

#form1,#FormPanel
{
        width:100% !important;
        min-width:320px !important;
}
    #form1 #FormPanel
    {
        width:100% !important;
    }
    #form1 #FormPanel header #Image1
    {
        height:60px !important;
    }
    #form1 #FormPanel header #Image3
    {
        height:45px !important;
        margin-bottom:5px !important;
        margin-right:10px !important;
    }
    /*
    #form1 #FormPanel header
    {
        width:100% !important;
        height:auto !important;
        position:relative !important;
        top:auto !important;
    }
    #form1 #FormPanel header > div > div
    {
        width:auto !important;
        height:auto !important;
        display:inline !important;
        text-align:left !important;
        vertical-align:inherit !important;
    }
    #form1 #FormPanel header > div > div > div
    {
        margin-bottom:0 !important;
    }
    #form1 #FormPanel header > div > div > img
    {
        height:auto !important;
        width:100%;
    }
*/
    #form1 #FormPanel header
    {
        min-width:320px;
    }
#sample {
    width: 100%;
    padding-bottom: 40%;
    position: relative;
}
    #sample > iframe {
        width: 100% !important;
        height: 100% !important;
        position: absolute;
        top: 0;
        left: 0;
    }
    .container  
    {
        width:100% !important;
        min-width:320px;
    }
    #ContentPlaceHolder1_Vimeo_ShowMovieWebControl1_Panel_VIMEO > div
    {
        width:100% !important;
        margin:0 !important;
        padding:15px 5px 0;
    }

.main
{
    padding-bottom:170px !important;
}
#ContentPlaceHolder1_Vimeo_ShowMovieWebControl1_UpdatePanel1 table
{
    width:90% !important;
    margin:15px auto 0 !important;
}
#ContentPlaceHolder1_Vimeo_ShowMovieWebControl1_UpdatePanel2 table
{
    width:90% !important;
    margin:0px auto !important;
}
#HeaderImage_HosptalName{display:none;}

@media (min-width: 821px) 
{
    #form1,#FormPanel
    {
            width:auto !important;
            /*min-width:1200px !important;*/
    }
        #form1 #FormPanel
        {
            /*min-width:1200px !important;*/
            width:auto !important;
            position:relative;
        }
        #form1 #FormPanel header #Image1
        {
            height:100px !important;
        }
        #form1 #FormPanel header #Image3
        {
            height:57px !important;
            margin-bottom:25px !important;
            margin-right:10px !important;
        }
        /*
        #form1 #FormPanel header
        {
            width:100% !important;
            height:160px !important;
            position:absolute !important;
            top:0 !important;
        }
        #form1 #FormPanel header > div > div
        {
            width:300px !important;
            height:100% !important;
            display:table-cell !important;
            text-align:center !important;
            vertical-align:inherit !important;
        }
        #form1 #FormPanel header > div > div > div
        {
            margin-bottom:30px !important;
            text-align:right !important;
        }
        #form1 #FormPanel header > div > div > img
        {
            height:100px !important;
            vertical-align:bottom !important;
            width:auto !important;
        }

        #form1 #FormPanel header
        {
            min-width:1200px;
        }
*/
        #sample > iframe
        {
            width:100% !important;
        }
        .container  
        {
            width:100% !important;
            min-width:1200px !important;
            height:100% !important;
        }
        #ContentPlaceHolder1_Vimeo_ShowMovieWebControl1_Panel_VIMEO > div
        {
            width:100% !important;
            margin:0 !important;
            padding:15px 5px 0;
        }
        .sep
		{
		    width:1px;
		    height:60%;
		    border-right:2px solid #3B5D90;
		}

        
    .main
    {
        padding-bottom:150px !important;
        height:auto !important;
        
    
    }
    #ContentPlaceHolder1_Vimeo_ShowMovieWebControl1_UpdatePanel1 table
    {
        width:50% !important;
        margin:15px auto 0 !important;
    }
    #ContentPlaceHolder1_Vimeo_ShowMovieWebControl1_UpdatePanel2 table
    {
        width:50% !important;
        margin:0px auto !important;
    }
    #HeaderImage_HosptalName
    {
        display:inline;
    }
}

.frame {
    padding: 0.2rem 1rem 3rem;
    background: #fefefe;
    border-bottom: 1px solid #3B5D90;
}
.active-link {
    font-weight: bold;
    background: rgba(0,0,0,0.1);
}
#video_links {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: auto;
    border: 1px solid #3B5D90;
    height: 8.8rem;
    overflow-y: scroll;
}
    #video_links a {
        padding: 0.5rem;
        color: #0000D0;
        display: block;
        width: 95%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #video_links ul {
        color: #0000D0;
        display: block;
        width: 95%;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    #video_links li {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding:0.3rem;
    }
#div_auto_video_link, #switch_owner_user_loop, #switch_user_loop_back {
    font-size: 1rem;
}
.plain-text-link {
    color: initial !important;
    text-decoration: none;
    cursor: default;
}
.link-like-div {
    color: #0000D0; /* リンクの一般的な色 */
    text-decoration: underline; /* 下線をつける */
    cursor: pointer; /* カーソルをポインターに設定 */
}


/*スイッチ*/
#switch_owner, .switch_owner_user_loop, .switch_user_loop_back {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 90%;
    margin: 0 auto 1rem;
}
.switch_text {
    margin-left: 0.5rem;
}
.switch {
    position: relative;
    display: inline-block;
    width: 130px;
    height: 34px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 5s;
}
.slider_loop_back {
    background-color: #2196F3 !important;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        transition: 5s;
    }

input:checked + .slider {
    background-color: #2196F3;
}

    input:checked + .slider:before {
        transform: translateX(98px);
    }

.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }
.auto_video_link_switch_text, .user_loop_text, .user_loop_back_text {
    position: absolute;
    top: 4px;
    left: 40px;
    pointer-events: none;
}