/* ####################### */
/* GENERIC STYLESHEET      */
/* ####################### */

/* 

   Created by: Jon Doe for r0n.cc
   Copyright Notice: This document is copyleft;

*/

/* ####################### */
/* GENERIC SETTINGS        */
/* ####################### */

*
{
    padding:0 0 0 0;
    margin:0 0 0 0;
    box-sizing: border-box;
}

body, html
{
    font-family: Roboto, Arial, sans-serif;
/*    font-family: 'Cantarell', sans-serif;*/
	margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */
    min-width: 100%; /* Ensure body takes full width */
	max-width: 100%;
    box-sizing: border-box; /* Include padding and border in width calculations */
}

html
{
    min-height: 100%;
}

body
{
    min-height: 100vh;
}

a, a:active, a:focus 
{
   outline: none;
}

a
{
    text-decoration: none!important;
	color: inherit;
}

.Clearfix::after 
{
    content: "";
    clear: both;
    display: table;
}

.center
{
     text-align: center!important;
}

p, h1, h2, h3, h4, h5
{
    padding:10px;
}

h3
{
    font-size: initial;
}

.border
{
    border:1px solid #dfe1e5;
}

.tb_border
{
    border-top:1px solid #dfe1e5;
    border-bottom:1px solid #dfe1e5;
}

.b_border
{
    border-bottom:1px solid #dfe1e5;
}

.t_border
{
    border-top:1px solid #dfe1e5;
}

.min-height
{
    min-height:400px;
}

.Generic_Box
{
    list-style:none;
    display:block;
    height:auto;
}

.Generic_Box li
{
    display:block;
    height:auto;
}

.Generic_Spacer
{
    display:block;
    min-height:100px;
}

.Generic_Small_Spacer
{
    display:block;
    min-height:50px;
}

.Generic_Span_Wrap span
{
    display: block;
}

.t_padding
{
    padding-top: 10px;
}

.b_padding
{
    padding-bottom: 10px;
}

.tb_padding
{
    padding-top: 10px;
    padding-bottom: 10px;
}

.l_padding
{
    padding-left: 10px;
}

.r_padding
{
    padding-right: 10px;
}

.lr_padding
{
    padding-left: 10px;
    padding-right: 10px;
}

.padding
{
    padding: 10px;
}

.b_margin
{
    margin-bottom: 10px;
}

.t_margin
{
    margin-top: 10px;
}

.tb_margin
{
    margin-top: 10px;
    margin-bottom: 10px;
}

.Centered
{
	margin-left: auto;
	margin-right: auto;
}

.Title
{
    color: black;
    font-size: 13px;
    font-weight: 800;
    line-height: 27px;
}

.hoverable_item:hover
{
    background:#dfe1e5!important;
    cursor: pointer;
}

input[type=text]:focus, input[type=email]:focus, 
input[type=password]:focus, textarea:focus, .Upload-Thumbnail-Box:hover
{
    border: 2px solid #007BFF!important;
	outline: none!important;
	box-shadow: 0 0 5px rgba(40, 167, 69, 0.5)!important;
}

*::marker
{
    display: none;
}

/* ####################### */
/* LIST SETTINGS         */
/* ####################### */

.Generic_List
{
    list-style: disc; 
    list-style-position: inside; 
    padding-left:20px; 
    padding-top:5px;
}

/* ####################### */
/* BUTTON SETTINGS         */
/* ####################### */

.Generic_Button
{
    display:inline-block;
    padding:10px;
    text-decoration:none;
    background:#065fd4;
    color:white;
    font-weight:bold;
    text-align:center;
    border: 0;
    box-shadow: none;
    border-radius: 0px;
    float:right;
}

.Generic_Grey_Button
{
	display: inline-block; /* Inline block to fit content */
    background: rgba(0, 0, 0, 0.1); /* Button background color */
    border-color: transparent; 
    color: #0f0f0f; /* Text color */
    border: none; /* Remove default borders */
    /* border-radius: 50%; /* Makes the button circular */
    text-align: center; /* Centers text horizontally */
    /* line-height: 50px; /* Matches height to vertically center text */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s ease; /* Optional: Smooth color change on hover */
	padding: 0;
}

/* ####################### */
/* MAIN RACKS              */
/* ####################### */

.Rack_Header
{
    max-width:100%!important;
    min-width:200px;
    background:#ffffff;
    /*box-shadow: 0 5px 5px -6px #333;*/
    color:#5f4838;
}

.Rack_Body_Double, .Rack_Body_Single
{
    position:relative;
    margin:auto;
    right:0;
    left:0;
    min-height:100%;
    min-width:200px;
    display: flex;
    flex-direction: row;
}

.Rack_Body_Single
{
    width: 100%;
}

.Rack_Body_Double
{
    /*grid-template-columns: auto auto;*/
}

/* ####################### */
/* FORMATTING RACKS        */
/* ####################### */

.Rack_Format
{
    position: relative;
    min-height: 100%!important;
    min-width:200px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    list-style: none;
}

.Rack_Format li
{

}

/*--------------------------*/

.Header_Format
{
    min-width: 100%;
    position: fixed; 
    z-index:1;  
    top: 0;
    
}

/*--------------------------*/

.Body_Format
{
    padding-top: 55px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}

/* ####################### */
/* HEADER FORMATTING RACKS */
/* ####################### */

.Rack_Header_Format
{
    display:flex;
    flex-direction: row;
    list-style: none;
    min-height: 100%;
    padding: 10px;
}

@media only screen and (min-width: 0px) and (max-width: 768px)
{    
    .Logo
    {
/*        width: 40px;*/
        display: none;
    }

/*    .Logo_Small
    {
        display: block!important;
    }*/

    .Logo_Normal, .Rack_Header_Spacer
    {
        display: none;
    }
    
    .Rack_Header_Logo
    {
        display: none;
    }
    
    .Subscription_Button
    {
        font-size: 11px!important;
    }
    
    .Channel_Properties_Details_Member, .Channel_Properties_Details_Member_Subs
    {
        font-size: 13px!important;
    }
    
    .Channel_Properties_Details
    {
        grid-template-column: 55px auto 100px;
    }
    
    .Channel_Properties_Details li img
    {
        width: 55px;
        height: 55px;
    }
    
    .Channel_Properties_Details_Member, .Channel_Properties_Details_Member_Subs
    {
        font-size: 13px!important;
    }
    
    .Channel_Properties_Details
    {
        grid-template-column: 55px auto 100px!important;
    }
    
    .Channel_Properties_Details li img
    {
        width: 55px!important;
        height: 55px!important;
    }
}

.Rack_Header_Format li
{
    font-size:0;
}

/*--------------------------*/

.Rack_Header_Sidebar
{
    width: 36px;
    margin-right: 10px;
}

.Rack_Header_Sidebar img
{
    position: relative;
    display: block;
    padding-top: 11px;
    padding-bottom: 10px;
}

.Rack_Header_Logo
{
    width: 140px;
    height: 35px;
}

.Rack_Header_Search
{
    flex-grow: 1;
    flex-shrink: 1;
}

.Search_Format
{
    list-style: none;
	width: 600px;
	position: relative;
	margin: auto;
}

@media only screen and (min-width: 200px) and (max-width: 768px)
{
	.Search_Format_Width
	{
		width: 100%;
	}
	
	.Rack_Header_Search
	{
		padding-right: 10px;
	}
}

@media only screen and (min-width: 769px) and (max-width: 4000px) 
{
	.Search_Format_Width
	{
		width: 60%;
	}
}

.Search_Form
{
    display: grid;
    grid-template-columns: auto 36px;
}

.Search_Button
{
    height: 33px;
    width: 36px;
    padding: 2.5px;
    padding-left: 10px;
    padding-right: 10px;
    border:1px solid #dfe1e5;
    border-left: none;
    cursor: pointer;
}

.Search_Button img
{
    margin-top: 3px;
}

.Search_Box
{
    width: 100%;
    height: 33px;
    vertical-align: top;
    border:1px solid #dfe1e5;
    padding: 6.5px;
}

.Rack_Header_Preferences
{
	display: flex;
    align-items: center;
	gap: 10px; /* Adjust spacing between items */
    list-style: none;
    padding: 0;
    margin: 0;
} 

/* ####################### */
/* RACK SHELFS             */
/* ####################### */

.Rack_Shelf
{
    width: 100%;  
    list-style:none;
    padding:0 0 0 0;
    margin:0 0 0 0;
}

.Rack_Shelf li
{
    width: 100%;
    vertical-align: top;
    margin-bottom:10px;
}

/* ####################### */
/* SHELVES             */
/* ####################### */

.Single_Shelf
{
    width: 100%;
}

.Double_Shelf
{
    
}

/* ####################### */
/* RACK BORDERS            */
/* ####################### */

.Rack_Border
{
    box-shadow: 0 0 5px #333;
    padding:10px;
}

/* ####################### */
/* CONTENT WRAP SETTINGS   */
/* ####################### */

.Content_Wrap
{
    display:block;
    min-width:200px;
}

@media only screen and (min-width: 200px) and (max-width: 718px)
{    

}

/* ######################## */
/* ACCOUNT BUTTON           */
/* ######################## */

.Notification_Drop_Button, .Notification_Drop_Button label, .Account_Drop_Button, .Account_Drop_Button label
{
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
	background: transparent;
	cursor: pointer;
}

.Content_Create_Button
{
	width: 99px;
    height: 36px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Content_Create_Button:hover, .Notification_Drop_Button:hover
{
	background: rgba(0, 0, 0, 0.25);
}

.Content_Create_Button_Text
{
	margin-left: 5px;
}

.Account_Drop_Button, .Notification_Drop_Button, .Content_Create_Button
{
    border: none;
    cursor: pointer;
}

.Account_Drop_Button img, .Notification_Drop_Button img, .Content_Create_Button img
{
    display: block;
}

/* The container <div> - needed to position the dropdown content */
.Account_Drop_Down,
.Notification_Drop_Down 
{
    width: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.Content_Create_Drop_Down 
{
    width: 99px;
	height: 36px;
    display: flex;
    align-items: center;
}

/* Dropdown Content (Hidden by Default) */
.Account_Drop_Down_Content, .Notification_Drop_Down_Content 
{
    display: none;
    position: absolute;
    background-color: #ffffff;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    right: 0;
}

.Account_Drop_Down_Content
{
	right: 10px;
    top: 45px;
}

.Notification_Drop_Down_Content
{
	right: 50px;
    top: 45px;
}

/* Links inside the dropdown */
.Account_Drop_Down_Content a, .Notification_Drop_Down_Content a
{
    font-size: 13px;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.Account_Drop_Down_Content a:hover, .Notification_Drop_Down_Content a:hover
{
	background-color: #f1f1f1
}

/* Show the dropdown menu on hover */
.Account_Drop_Down:hover .Account_Drop_Down_Content, .Notification_Drop_Down:hover .Notification_Drop_Down_Content
{
    cursor: pointer; /* Display pointer on hover */
}

/* Hidden checkbox for toggle */
#Account_Menu_Toggle, #Notification_Menu_Toggle
{
    display: none;
}

/* Show the dropdown when the checkbox is checked */
#Account_Menu_Toggle:checked ~ .Account_Drop_Down_Content, #Notification_Menu_Toggle:checked ~ .Notification_Drop_Down_Content
{
    display: block;
}

/* Optional: Change the background color of the dropdown button when content is shown */
#Account_Menu_Toggle:checked + label, #Notification_Menu_Toggle:checked + label
{
    background-color: rgba(0, 0, 0, 0.1);
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.Account_Drop_Down:hover, .Notification_Drop_Down:hover 
{
}

/* ######################## */
/* SIGN IN BUTTON           */
/* ######################## */

.Sign_In_Button
{
    min-width: 100px;
    margin-right: 0px;
    margin-left: 10px;
    display: block;
    padding: 5px;
    text-align: center;
    /*line-height: 27px;*/
    text-decoration: none;
    color: #065fd4;
    font-size: 14px;
    font-weight: bold;
    background: white;
    border: solid thin #065fd4;
    display: grid;
    grid-template-columns: 21px auto;
}

.Sign_In_Button img
{
    width: 21px;
    height: 21px;
    display: block;
}

.Sign_In_Button span
{
    margin-left: 5px;
    padding-top: 2px;
}

/* ######################## */
/* SIDEBAR                  */
/* ######################## */

.Sidebar
{
    width: 190px;
    max-width: 190px!important;
    height: calc(100vh - 55px)!important;
    background: white;
    overflow-y:hidden;
    overflow-x:hidden;
    direction: ltr;
    position: fixed;
    z-index: 999;
}

.Sidebar:hover
{
    overflow-y:scroll;
}

.Sidebar_Ghost
{
    min-width: 190px;
    max-width: 190px!important;
    min-height: 100%!important;
    position: relative;
}

.Sidebar_Button
{
    position: fixed;
    top: 0;
    left: 0;
    margin-left: 10px;
    margin-top: 10px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
	background: transparent;
	cursor: pointer;
    z-index: 999;
}

.Sidebar_Button:hover
{
	background: rgba(0, 0, 0, 0.25);
}

.Sidebar_Button img
{
    z-index: 666;
    position: fixed;
}

input:checked ~ .Sidebar, input:checked ~ .Sidebar_Ghost
{
    display: none;
}

.Side_Bar:hover
{
    cursor: pointer;
}

.Sidebar_Content
{
	padding: 10px;
}

.No_Sidebar 
{
    margin-left: 0!important;
}

/*.Sidebar
{
    display:none;
    margin-top: 57px;
}

#toggle:checked ~ .Sidebar
{
    display: initial;
}

.visually-hidden 
{
    position: absolute;
    left: -100vw;    
}*/

@media only screen and (min-width: 200px) and (max-width: 768px)
{
	.Content_Create_Button
	{
		/*width: 75px!important;*/
	}
	
    .Sidebar_Ghost, .Sidebar
    {
        display: none!important;
    }
    
    .Content_Wrap
    {
        margin-left: 0px;
    }
}

.Sidebar_Links
{
    display: block;
    margin-bottom: 10px;
}

.Sidebar_Links li
{
    display: block!important;
}

.Sidebar_Links li:hover
{
    background-color: #f1f1f1;
}

.Sidebar_Links a
{
    display: block;
    padding: 5px;
    padding-left: 10px;
}

.Sidebar_Links span
{
    vertical-align: top;
    margin-left: 10px;
    line-height: 23px;
    color: #606060;
    font-size: 13px;
}

.Sidebar_Links_Heading
{
    display: block;
    color: #606060;
    font-size: 13px;
    font-weight: bold;
    padding: 10px;
    padding-left: 10px;
    margin-bottom: 10px;
}

.Sidebar_Links_Heading:hover
{
    background: white!important;
}

/* ######################## */
/* COUNTRY FLAG             */
/* ######################## */

.flag
{
    width:25px;
    height:17.183px;
}

.flag_format
{
    text-align: center!important;
}

/* ######################## */
/* LOGO                     */
/* ######################## */

.Logo
{
    display: block;
    height: 35px;
    width: 140px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.Logo_Small
{
    display: none;
}

.Logo_Normal{}

/* ######################## */
/* CONTACT INFO             */
/* ######################## */

.contact-format
{
    list-style: none;
    padding-top: 10px;
    float: left;
}

.contact-format li
{
    list-style: none;
    padding:0px!important;
}

.contact-format li span
{
    vertical-align: top;
}

.contact
{
    font-size: 12px;
    margin-left:15px;
}

/* ######################## */
/* ERROR PICTURES           */
/* ######################## */

.Error
{
    text-align:center;
    display:block;
}

.Error img
{
    width: 100%;
    max-width: 900px;
    height: auto; 
    max-height: 510px;
    
}

.Error_Link
{
    position:relative;
    margin:auto;
    left:0;
    right:0;
    display:block;
    text-align:center;
    margin-bottom: 10px;
}

/* ######################## */
/* GENERIC TEXT ERROR       */
/* ######################## */

.Error_Msg, .Warning_Msg, .Normal_Msg
{
    text-align: center;
    display: table; 
    width: auto;
    height: auto;
    color: white;
    padding: 10px;
    z-index: 666;
}

.Normal_Msg
{
    background:green;
}

.Warning_Msg
{
    background:orange;
    
}

.Error_Msg
{
    background:red;
}

.Error_Msg span, .Warning_Msg span, .Normal_Msg span
{
    display:block;
    padding:3px;
    font-size: 15px;
}

.Reg_Error
{
    margin-left: 10px;
    margin-right: 10px;
}

.Fixed_Msg
{
	position:fixed;
}

.Relative_Msg
{
	position:relative;
	width: 100%!important;
}

/* ######################## */
/* PAGINATION               */
/* ######################## */

.pagination
{
    display: block;
    list-style: none;
    margin-top:5px;
	text-align: right;
}

.pagination li
{
    display:inline-block;
    padding:2.5px;
    margin-bottom: 0px;
    width: auto!important;
}

.pagination li a
{
    display:inline-block;
    padding:10px;
    color:#000000;
    font-size: 12px;
/*    font-weight: bold;*/
}

/* ######################## */
/* TOOLTIP                  */
/* ######################## */

.Tooltip 
{
    position: relative;
    display: inline-block;
}

.Tooltip .Tooltip_Text 
{
    visibility: hidden;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    position: absolute;
    z-index: 1;
    width: 60px;
    bottom: 100%;
    left: 50%;
    margin-left: -30px; 
    margin-bottom: 5px;
}

.Tooltip:hover .Tooltip_Text 
{
    visibility: visible;
}

/* ######################## */
/* UPLOAD MODAL             */
/* ######################## */

/* Hide the checkbox */
.modal-toggle 
{
	display: none;
}

/* Style for the trigger button */
.open-modal 
{
	display: block;
	width: 35px;
	height: 35px;
	background-color: transparent;
	color: white;
	border: none;
	cursor: pointer;
	font-size: 16px;
}

/* Modal container */
.modal 
{
	/*display: none; /* Hidden by default */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
}

/* Modal content */
.modal-content 
{
	background-color: #fff;
	padding: 10px;
	border-radius: 8px;
	width: 50%;
	margin: 100px auto;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	text-align: left;
	position: relative;
}

/* Close button */
.close-modal 
{
	position: absolute;
	top: 10px;
	right: 15px;
	font-size: 24px;
	font-weight: bold;
	color: #aaa;
	cursor: pointer;
}

.close-modal:hover 
{
	color: red;
}

/* Show modal when checkbox is checked */
#modal-toggle:checked ~ .modal 
{
	display: block;
}

/* ######################## */
/* IMAGE RACK               */
/* ######################## */

/* Reset styles */
.Grid_Image_Gallery,
.Grid_Image_Gallery * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

/* Gallery container */
.Grid_Image_Gallery {
  display: flex; /* Use flexbox for row layout */
  flex-wrap: wrap; /* Allow wrapping to new rows */
  gap: 5px; /* Add space between items */
  padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
}

.Grid_Image_Gallery li:last-child 
{
  flex-grow: 10;
}

/* Image container */
.Image_Container {
  display: inline-block!important; /* Allow the container to shrink-wrap its content */
  padding: 0; /* No padding */
  margin: 0; /* No margin */
  width: auto!important; /* Ensure the container adjusts to the image size */
  flex-grow: 1; /* Allow the container to grow and fill available space */
  flex-shrink: 1; /* Allow the container to shrink if necessary */
  max-width: 100%; /* Prevent exceeding row width */
  margin-bottom: 0px!important;
}

/* Image styles */
.Image_Container img {
  display: block; /* Remove inline spacing issues */
  width: 100%; /* Ensure images fill container width */
  height: auto; /* Maintain aspect ratio */
  object-fit: cover; /* Ensure image covers its container */
}

@media only screen and (min-width: 200px) and (max-width: 768px) {
	.Image_Container img
	{
		height: 100px;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1000px) {
	.Image_Container img
	{
		height: 148px;
	}
}

@media only screen and (min-width: 1001px) and (max-width: 1200px) {
	.Image_Container img
	{
		height: 200px;
	}
}

@media only screen and (min-width: 1201px) and (max-width: 1440px) {
	.Image_Container img
	{
		height: 200px;
	}
}

@media only screen and (min-width: 1441px) and (max-width: 1920px) {
	.Image_Container img
	{
		height: 200px;
	}
}

@media only screen and (min-width: 1921px) and (max-width: 4000px) {
	.Image_Container img
	{
		height: 200px;
	}
}