/*
:root 
{
    --main_color: #6D0000; 
    --main_color_shade: #8a1313; 
    --main_color_shade2: #a70000;
    
    --new_color_shade: #dcfdce;
    
    --highlight_color: #fD6A02;
    --highlight_color2: #ffd000; 
    --highlight_color3: #fffbad;

    --main_color_shade6: #ffd2a1; 
    --foreground_color1: #0D0D0D; 
    --foreground_color4: #ffc587; 
 
    --color_shade1: #FFFFFF;
    --color_shade2: #FAFAFA;
    --color_shade3: rgb(239,239,239); 
    --color_shade4: #e3e5e3;
    --color_shade5: #c5c5c5;
    --color_shade6: #7E7E7E;
    --color_shade7: #616161;
    --color_shade8: #464646;
    --color_shade9: #1f1e1e;
    --color_shade10: #202020;

    --success_color_shade: #037001; 
    --success_color_shade2: #DCF8C6;
    --notify_success_color : #00ff4c; 

    --color1: #009879;
    --color2: #006598;
    --color3: #cf1b27;
    --color4: #f77e05;
    --color5: #0d4261;
    --color6: #f15710;

}
*/
.flyout_wrapper
{
    padding: 10px;
    position: fixed;
    right: -500px;
    bottom: 0px;
    transition: 1s ease-in-out;
    z-index: 80;
}

.flyout_wrapper a
{
    text-decoration: none;
}


.flyout_container
{
    background-color: var(--color_shade1);
    box-shadow: 0 0 5px var(--color_shade4);
    border-radius: 5px;
    width: 100%;
    max-width: 500px;
}

.flyout_head
{
    display: flex;
    padding: 10px;
    border-bottom: 1px solid var(--color_shade4);
}

.flyout_img
{
    width: 30px;
    height: 30px;
}

.flyout_img img
{
    width: 100%;
}

.flyout_close i
{
    color: var(--color_shade6);
    font-size: 12px;
}

.flyout_close
{
    flex: 1;
    text-align: right;
}


.flyout_body
{
    padding: 10px 20px;
    display: flex;
}


.flyout_body h2
{
    color: var(--color6);
    text-align: left !important;
    font-size: 25px;
    margin: 0;
}


.flyout_body_img
{
    flex: 2;
}


.flyout_body_column
{
    flex: 3;
    padding: 0 0 0 20px;
}

.flyout_body_column h4
{
    color: var(--color_shade9);
    text-align: left !important;
}



.flyout_body_column p
{
    color: var(--color_shade9);
    text-align: left !important;
}

.flyout_body_img img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flyout_footer
{
    padding: 10px;
}

.flyout_footer 
{
   display: flex;
   justify-content: flex-end;
   border-top: 1px solid var(--color_shade4);
}


.flyout_footer button
{
    padding: 8px 10px;
    border-radius: 5px;
    font-size: 14px;
    letter-spacing: 1.5px;
}



.flyout_footer button:first-child
{
    margin-right: 10px;
}

.ok_button
{
    background-color: var(--color6);
    color: var(--color_shade1);
    border: 1px solid var(--color6);
    border-bottom: 2px solid var(--color3);
    cursor: pointer;
}

.ok_button:active
{
    border: 2px solid var(--color3);
    
}

.cancel_button
{
    background-color: var(--color_shade1);
    border: 1px solid var(--color_shade4);
    color: var(--color_shade6);

}



@media only screen and (max-width: 458px)
{
    .flyout_body h2
    {
        font-size: 18px;
    }

    .flyout_body_column p
    {
        font-size: 14px;
    }

    .flyout_body h4
    {
        font-size: 14px;
    }
}