/*
Theme Name: Öcsiker Kft.
Theme URI: https://ocsiker.hu/
Description: Az Öcsiker Kft. webáruház alapértelmezett sablonja
Author: Digitalform
Author URI: https://digitalform.hu
Version: 1.0
*/

*{
margin: 0;
border: 0;
padding: 0;
flex-wrap: wrap;
text-decoration: none;
}

*, 
*:after, 
*::before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

:root {
	--color-blue: #3183FF;
	--color-light-blue: #E9ECF4;
	--color-dark: #000000;
	--color-yellow: #ffbc59;
	--color-green: #36B44D;
	--color-green-a10: #36B44D1A;
	--color-red: #E3342F;
	--color-red-a10: #E3342F1A;
}

html, body { height: 100%; }
body { padding: 50px; font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 400; color: var(--color-body-text); line-height: 30px; background: var(--color-light-blue); overflow-x: hidden; }
body.rwd_menu__opened { overflow: hidden; }

img.alignleft, img.alignright, img.aligncenter, img.alignnone { max-width: 100%; height: auto; } 
img.alignleft { margin: 0 20px 20px 0; float: left; } 
img.alignright { margin: 0 0 20px 10px; float: right; } 

h1, h2, h3, h4, h5 { font-weight: normal; line-height: 100%; }

hr { margin: 30px 0; border-top: 3px solid var(--color-silver-line); clear: both; }

button, input { -webkit-appearance: none; -webkit-border-radius: 0; }
button, input, select, textarea { font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 400; outline: none; }
textarea { resize: vertical; }

input[type=checkbox], 
input[type=radio] { width: 20px; min-width: 20px; height: 20px; margin: -4px 4px 0 0 !important; padding: 0 !important; text-align: center !important; background-color: #FFFFFF; border: 1px solid #d8d8d8; clear: none; cursor: pointer; display: inline-block; line-height: 0; outline: 0; vertical-align: middle !important; position: relative; -webkit-appearance: none; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: .05s border-color ease-in-out; transition: .05s border-color ease-in-out; }
input[type=radio] { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }

input[type=radio]:checked:before, 
input[type=checkbox]:checked:before { top: 4px; right: 4px; bottom: 4px; left: 4px; text-align: center; background: var(--color-green); position: absolute; display: block; content: '' !important; }
input[type=radio]:checked:before { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; }


/*
---------------
	CLASSES
---------------
*/
.red, .required { color: var(--color-red); }
.inner { max-width: 1280px; margin: auto; position: relative; }
.inner_800 { max-width: 800px; }
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.uppercase { text-transform: uppercase; }
.vertical_middle { top: 50%; position: relative; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }
.hide { display: none !important; }
.sec-font { font-family: "IBM Plex Mono", monospace; }

/* Buttons */
.button { height: 50px; padding: 0 30px !important; font-family: 'Source Sans 3 Narrow', sans-serif; font-size: 18px; font-weight: 700; text-decoration: none !important; color: #FFFFFF !important; line-height: 20px; background-color: var(--color-blue); display: inline-flex; align-items: center; justify-content: center; position: relative; cursor: pointer; -webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; -o-transition: all 0.1s ease-out; transition: all 0.1s ease-out; border-radius: 5px; }
.button:hover { background-color: var(--color-dark) !important; }
.button:disabled { background: #ddd; cursor: not-allowed; }

.button.button-h40 { height: 40px; padding: 0 20px !important; font-size: 14px; }
.button.button-red { background-color: var(--color-red); }
.button.button-green { background-color: var(--color-green); }


/* Font */
.center { text-align: center; }

/* Animation */
.anim { -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; }


/*
--------------
	NOTICE
--------------
*/
.df-login-error { margin-bottom: 20px; padding: 10px; font-size: 14px; font-weight: 700; line-height: 20px; background: color-mix(in srgb, var(--color-red) 10%, #FFFFFF 90%); border: 1px solid var(--color-red); border-radius: 5px; }
.df-login-success { margin-bottom: 20px; padding: 10px; font-size: 14px; font-weight: 700; line-height: 20px; background: color-mix(in srgb, var(--color-green) 10%, #FFFFFF 90%); border: 1px solid var(--color-green); border-radius: 5px; }


/*
--------------
	HEADER
--------------
*/
#header { max-width: 600px; height: 100px; margin: auto; display: flex; align-items: center; justify-content: center; }
#header img { width: auto; height: 50px; display: block; }


/*
---------------
	CONTENT
---------------
*/
#content { max-width: 600px; margin: auto; padding: 100px; background: #FFFFFF; border-radius: 10px; }
#content.documents { max-width: none; padding: 50px; }
#content.small-padding { padding: 50px; }

#content p { margin-bottom: 20px; }

#content h2 { margin-bottom: 20px; font-size: clamp(28px, 3vw, 42px); line-height: 1.2; }
#content h3 { margin-bottom: 20px; font-size: clamp(22px, 2.5vw, 32px); line-height: 1.3; }

#content .action-buttons { margin-bottom: 20px; display: flex; gap: 20px; }

#content .document-search { width: 100%; margin-bottom: 20px; display: flex; gap: 10px; }
#content .document-search input { flex: 1; height: 50px; padding-left: 10px; background: var(--color-light-blue); border-radius: 5px; outline: 2px solid transparent; outline-offset: 2px; }
#content .document-search input:focus { outline-color: var(--color-blue); }
#content .document-search .actions-buttons { display: flex; gap: 10px; }

#content table { width: 100%; border-collapse: collapse; }
#content table thead tr th { font-size: 14px; font-weight: 700; text-align: left; border-bottom: 3px solid var(--color-light-blue); }

#content table tbody tr.is-completed { background: color-mix(in srgb, var(--color-green) 10%, #FFFFFF 90%); }
#content table tbody tr td { padding: 10px; font-size: 16px; line-height: 20px; border-bottom: 1px solid var(--color-light-blue); }
#content table tbody tr td.entry-thumbnail { width: 100px; }
#content table tbody tr td.entry-thumbnail img { width: 80px; height: auto; display: block; }
#content table tbody tr td.entry-main .entry-title { font-weight: 700; background: transparent; }
#content table tbody tr td.entry-main .entry-time { font-size: 13px; }
#content table tbody tr td.entry-action { width: 200px; text-align: center; }
#content table tbody tr td.entry-status { width: 150px; text-align: right; }

/* Pagination */
#content .df-pagination { margin-top: 40px; display: flex; justify-content: center; }
#content .df-pagination ul { display: flex; gap: 8px; list-style: none; }
#content .df-pagination a,
#content .df-pagination span { min-width: 42px; height: 42px; padding: 0 12px; text-decoration: none; color: #111111;  border: 1px solid #DDDDDD; display: flex; align-items: center; justify-content: center; border-radius: 5px; }
#content .df-pagination .current { color: #FFFFFF !important; background: #111111; border-color: #111111 !important; }
#content .df-pagination a:hover { background: #F3F3F3; }


/*
------------
	FORM
------------
*/
.form-row { margin-bottom: 20px; }
.form-row label { margin-bottom: 5px; font-size: 15px; font-weight: 700; line-height: 20px; display: block; }
.form-row .button { width: 100%; }

.form-row select, 
.form-row input[type=text], 
.form-row input[type=password] { width: 100%; height: 50px; padding-left: 10px; background: var(--color-light-blue); border-radius: 5px; outline: 2px solid transparent; outline-offset: 2px; }

.form-row select:focus, 
.form-row input[type=text]:focus, 
.form-row input[type=password]:focus { outline-color: var(--color-blue); }


/*
-----------
	RWD
-----------
*/
@media only screen and (max-width: 800px) { 
	
	/* DEFAULT */
	body { padding: 30px 20px; }
	
	/* CONTENT */
	#content { padding: 50px; }
	
	#content table.df-documents-table thead { display: none; }
	#content table.df-documents-table { display: block; }
	#content table.df-documents-table tbody { display: block; }
	#content table.df-documents-table tbody tr { margin-bottom: 20px; border: 2px solid var(--color-light-blue); display: flex; border-radius: 5px; }
	#content table.df-documents-table tbody tr.is-completed { border-color: var(--color-green); }
	#content table.df-documents-table tbody tr:last-child { margin-bottom: 0; }
	#content table.df-documents-table tbody tr td.entry-thumbnail { width: 100%; }
	#content table.df-documents-table tbody tr td.entry-main { width: 100%; }
	#content table.df-documents-table tbody tr td.entry-action { width: 50%; text-align: left; border-bottom: none; }
	#content table.df-documents-table tbody tr td.entry-status { width: 50%; text-align: right; border-bottom: none; }

	#content table.df-documents-table tbody tr td::before { font-size: 14px; font-weight: 700; text-transform: uppercase; color: var(--color-secondary) !important; display: block; content: attr(data-title) ": "; }
	#content table.df-documents-table tbody tr td.entry-main::before, 
	#content table.df-documents-table tbody tr td.entry-thumbnail::before, 
	#content table.df-documents-table tbody tr td.entry-action::before, 
	#content table.df-documents-table tbody tr td.entry-status::before { display: none; }
}

@media only screen and (max-width: 640px) { 
	
	/* CONTENT */
	#content { padding: 30px; }
	#content.small-padding { padding: 30px; }
	#content.documents { padding: 30px; }
	
	#content table.df-documents-table tbody tr td.title { width: 100%; }
	#content table.df-documents-table tbody tr td.date { width: 100%; text-align: left; }
	#content table.df-documents-table tbody tr td.entry-action { width: 100%; border-bottom: 1px solid var(--color-light-blue); }
	#content table.df-documents-table tbody tr td.entry-status { width: 100%; text-align: left; }
}