@import url('../../main.css');

section#watch 
{

    display         :   flex;
    justify-content : center;
    margin-bottom   :  100px;

}

div#watch_center 
{

    padding                    :                          25px;
    width                      :                        1200px;
    background-color           :           var(--s-background);
    border-top                 : 1px solid var(--q-background);
    border-bottom-left-radius  :                          10px;
    border-bottom-right-radius :                          10px;

}

div#watch_center_infos 
{

    display         :   flex;
    justify-content : center;
    align-items     : center;
    gap             :  100px;
    flex-wrap       :   wrap;

}

div#watch_center_infos_left_picture { position: relative; }

div#watch_center_infos_left_picture img 
{

    width  : 220px;
    height : 280px;

}

div#watch_center_infos_left_picture_absolute
{

    position         :             absolute;
    z-index          :                    1;
    top              :                  0px;
    left             :                  0px;
    width            :                220px;
    height           :                280px;
    background-color : rgba(2, 2, 2, 0.5);
    display          :                 flex;
    justify-content  :               center;
    align-items      :               center;

}

div#watch_center_infos_left_picture_absolute_center button 
{

    width            :              65px;
    height           :              65px;
    background-color : var(--main-color);
    border-radius    :             200px;
    display          :              flex;
    justify-content  :            center;
    align-items      :            center;
    opacity          :               0.9;

}

div#watch_center_infos_left_picture_absolute_center button i 
{

    display     :   flex;
    align-items : center;

}

div#watch_center_infos_left_picture_absolute_center button:hover { background-color: var(--dark-main-color); }

div#watch_center_infos_left_views { margin-top: 20px; }

div#watch_center_infos_left_views p 
{

    padding          :            8px 20px;
    width            :               220px;
    background-color : var(--f-background);
    display          :                flex;
    justify-content  :              center;
    align-items      :              center;
    gap              :                10px;
    font-size        :               8.7pt;
    opacity          :                 0.4;

}

div#watch_center_infos_left_views p i 
{

    display     :   flex;
    align-items : center;

}

div#watch_center_infos_left_cast 
{

    padding          :             5px 25px;
    max-height       :                200px;
    background-color : rgba(2, 2, 2, 0.3); 
    margin-top       :                 40px;

}

div.watch_center_infos_left_cast_person 
{

    width           :         280px;
    display         :          flex;
    justify-content : space-between;
    align-items     :        center;
    margin          :      20px 0px;

}

div.watch_center_infos_left_cast_person_photo { position: relative; }

div.watch_center_infos_left_cast_person_photo img 
{

    width         :  50px;
    height        :  50px;
    border-radius : 200px;

}

div.watch_center_infos_left_cast_person_photo_absolute 
{

    position         :             absolute;
    z-index          :                    1;
    top              :                  0px;
    left             :                  0px;
    width            :                 50px;
    height           :                 50px;
    background-color : rgba(2, 2, 2, 0.2);

}

div.watch_center_infos_left_cast_person_n p { text-align: end; }

div.watch_center_infos_left_cast_person_n p:first-child 
{

    font-size : 9pt;
    opacity   : 0.4;

}

div.watch_center_infos_left_cast_person_n p:nth-child(2) 
{

    font-size  : 8.7pt;
    opacity    :   0.3;
    margin-top :  10px;

}

div#watch_center_infos_main_labels 
{

    display         :   flex;
    justify-content : center;
    gap             :   20px;
    flex-wrap       :   wrap;

}

div#watch_center_infos_main_labels span 
{

    padding          :            5px 20px;
    background-color : var(--f-background);
    display          :                flex;
    align-items      :              center;
    gap              :                10px;
    font-size        :               8.7pt;
    opacity          :                 0.4;

}

div#watch_center_infos_main_labels span i 
{

    display     :   flex;
    align-items : center;

}

div#watch_center_infos_main_labels span font { color: var(--main-color); }

div#watch_center_infos_main_title { margin-top: 60px; }

div#watch_center_infos_main_title p:first-child 
{

    font-size : 11pt;
    opacity   :  0.5;

}

div#watch_center_infos_main_title p:nth-child(2) 
{

    display     :   flex;
    align-items : center;
    font-size   :   10pt;
    opacity     :    0.3;
    margin-top  :   10px;

}

div#watch_center_infos_main_title p:nth-child(2) i 
{

    display     :   flex;
    align-items : center;

}

div#watch_center_infos_main_overview
{

    padding          :            12px 18px;
    width            :                600px;
    background-color : rgba(2, 2, 2, 0.3);
    margin-top       :                 60px;

}

div#watch_center_infos_main_overview p 
{

    font-size  :     9pt;
    opacity    :     0.4;
    text-align : justify;

}

div#watch_center_infos_main_overview p button 
{ 
    
    background : none; 
    margin-top : 15px;

}

p#watch_center_infos_main_overview_full { display: none; }

div#watch_center_infos_main_categories 
{ 

    display         :   flex;
    justify-content : center;
    gap             :   30px;
    flex-wrap       :   wrap;
    margin-top      :   60px; 

}

div#watch_center_infos_main_categories a 
{

    padding          :            8px 15px;
    background-color : var(--f-background);
    font-size        :               8.7pt;
    opacity          :                 0.4;
    transition       :                0.4s;

}

div#watch_center_infos_main_categories a:hover { background-color: var(--q-background); }

div#servers_modal 
{

    position         :                fixed;
    z-index          :                 9999;
    top              :                  0px; 
    left             :                  0px;
    width            :                 100%;
    height           :                 100%;
    background-color : rgba(2, 2, 2, 0.7);
    display          :                 none;
    justify-content  :               center;
    align-items      :               center;

}

section#servers_modal_center 
{

    padding          :           20px 25px;
    width            :               500px;
    background-color : var(--s-background);

}

div#servers_modal_center_closing 
{

    display         : flex;
    justify-content :  end;

}

div#servers_modal_center_closing button 
{

    background : none;
    font-size  :  9pt;
    opacity    :  0.3;

}

div#servers_modal_center_box { margin-top: 10px; }

div#servers_modal_center_box_main_choose 
{

    display         :   flex;
    justify-content : center;

}

div.servers_modal_center_box_main_choose_center_server { margin: 30px 0px; }

div.servers_modal_center_box_main_choose_center_server_switch button 
{

    padding          :           12px 25px;
    width            :               280px;
    background-color : var(--f-background);
    border-radius    :                15px;
    display          :                flex;
    justify-content  :       space-between;
    align-items      :              center;
    font-size        :                 9pt;
    opacity          :                 0.4;

}

div.servers_modal_center_box_main_choose_center_server_switch button i 
{

    display     :   flex;
    align-items : center;

}

div.servers_modal_center_box_main_choose_center_server_switch button:hover { background-color: var(--q-background); }

div.servers_modal_center_box_main_choose_center_server_links { margin-top: 20px; }

div.servers_modal_center_box_main_choose_center_server_links a 
{

    display     :    flex;
    align-items :  center;
    gap         :    10px;
    font-size   :     9pt;
    opacity     :     0.3;
    margin      : 8px 0px;

}

div.servers_modal_center_box_main_choose_center_server_links a i 
{

    display     :   flex;
    align-items : center;

}

div.servers_modal_center_box_main_iframes_iframe 
{

    width           :   100%;
    max-height      :  300px;
    display         :   none;
    justify-content : center;
    margin-top      :   50px;

}

div.servers_modal_center_box_main_iframes_iframe::-webkit-scrollbar-track { background-color: var(--f-background); }

div.servers_modal_center_box_main_iframes_iframe::-webkit-scrollbar-thumb { background-color: var(--q-background); }

div.servers_modal_center_box_main_iframes_iframe iframe 
{

    display : block;
    width   :  100%;
    height  : 490px;

}

@media screen and (max-width: 1000px) 
{

    div#watch_center_infos_main_overview { width: 100%; }

}

@media screen and (max-width: 1650px) 
{

    div#watch_center 
    { 
        
        width                      : 100%; 
        border-bottom-left-radius  :  0px;
        border-bottom-right-radius :  0px;
    
    }

}

@media screen and (max-width: 650px) 
{

    section#servers_modal_center { width: 100%; }

}