body
{
  background-color:#ffffff;
  margin:auto;
  font-family: sans-serif;
}

h1
{
   font-weight:400;
   font-size:26px;
}

h2
{
   font-weight:400;
   font-size:22px;
}

h3
{
   font-weight:400;
   font-size:18px;
}

.onoffswitch {
position:relative;
width:80px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
box-shadow: inset 10px 10px 5px 0px #cfcfcf;
border-radius: 10px;
}

.onoffswitch-checkbox {
display:none;
}

.onoffswitch-label {
display:block;
overflow:hidden;
cursor:pointer;
border:1px solid #DBD9D9;
width:80px;
}

.onoffswitch-inner {
width:200%;
margin-left:-100%;
-moz-transition:margin 0.3s ease-in 0s;
-webkit-transition:margin 0.3s ease-in 0s;
-o-transition:margin 0.3s ease-in 0s;
transition:margin 0.3s ease-in 0s;
}

.onoffswitch-inner > div {
float:left;
position:relative;
width:50%;
height:20px;
padding:0;
line-height:20px;
font-size:14px;
color:white;
font-family:Helvetica,Arial,sans-serif;
font-weight:bold;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.onoffswitch-inner .onoffswitch-active {
padding-left:15px;
background-color:#F9F9F9;
color:#FFFFFF;
}
.onoffswitch-inner .onoffswitch-inactive {
padding-right:15px;
background-color:#F9F9F9;
color:#FFFFFF;
text-align:right;
}
.onoffswitch-switch {
width:40px;
margin:0;
text-align:center;
border:0 solid #999999;
border-radius:0;
position:absolute;
top:0;
bottom:0;
}
.onoffswitch-active .onoffswitch-switch {
background:#BFD63B;
left:0;
}
.onoffswitch-inactive .onoffswitch-switch {
background:#000000;
right:0;
}
.onoffswitch-active .onoffswitch-switch:before {
content:"";
position:absolute;
top:0;
left:40px;
border-style:solid;
border-color:#BFD63B transparent transparent #BFD63B;
border-width:15px 10px;
}
.onoffswitch-inactive .onoffswitch-switch:before {
content:" ";
position:absolute;
top:0;
right:40px;
border-style:solid;
border-color:transparent #000000 #000000 transparent;
border-width:15px 10px;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left:0;
 }

/*
-----------------------------------------------------------------------------------------------------------------------------------
tabs
-----------------------------------------------------------------------------------------------------------------------------------
*/

.container-tabs
{
   max-width: 90vw;
   vertical-align:bottom;
}

.title-tab
{
   background: #f1f1f1;
   border-radius: .5em .5em 0 0;
   border:1px solid #f1f1f1;
   height: 2.5em;
   line-height: 2.5em;
   margin-right: .25em;
   padding: 0 1em;
   display:inline-block;
   color: #000000;
   font-weight:900;
   vertical-align:bottom;
}

.title-tab-unselected
{
   background: #f1f1f1;
   border-radius: .5em .5em 0 0;
   border:1px solid #f1f1f1;
   height: 2.5em;
   line-height: 2.5em;
   margin-right: .25em;
   padding: 0 1em;
   display:inline-block;
   color: #000000;
   font-weight:100;
   font-size:14px;
   vertical-align:bottom;
}

.content-tabs
{
   background: #f1f1f1;
   border-radius: 0 .5em .5em .5em;
   position: relative;
   width: 100%;
   padding:30px;
}


/*
-----------------------------------------------------------------------------------------------------------------------------------
check box
-----------------------------------------------------------------------------------------------------------------------------------
*/

.my-custom-input-label-box input[type="checkbox"] {
	display:none;
}

.my-custom-input-label-box input + label {
	display: inline-block;
	width: 30px;
	height: 26px;
	cursor: pointer;
	background-image: url(/images/checkbox-unchecked.png);
	font-size:10px;
}

.my-custom-input-label-box input[type="checkbox"]:checked + label {
	background-image: url(/images/checkbox-checked.png);
}

.my-custom-input-label-box input[type="checkbox"]:disabled + label {
	background-image: url(/images/checkbox-disabled.png);
}

.blokk-body
{
	background-color:#f6f7fb;
	margin:auto;
	font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
	color:#111827;
	line-height:1.35;
}

.blokk-topbar
{
	width:100%;
	background-color:#ffffff;
	border-bottom:1px solid #e5e7eb;
}

.blokk-topbar-inner
{
	max-width:1100px;
	margin:0 auto;
	padding:12px 16px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
}

.blokk-logo
{
	display:flex;
	align-items:center;
	gap:12px;
}

.blokk-logo img
{
	max-height:40px;
	width:auto;
}

.blokk-lang
{
	display:flex;
	gap:8px;
}

.blokk-lang a
{
	text-decoration:none;
	font-weight:700;
	font-size:13px;
	padding:8px 10px;
	border-radius:999px;
	border:1px solid #e5e7eb;
	color:#111827;
	background:#ffffff;
}

.blokk-lang a.is-active
{
	border-color:#111827;
}

.blokk-container
{
	max-width:1100px;
	margin:18px auto 40px auto;
	padding:0 16px;
}

.blokk-card
{
	background:#ffffff;
	border:1px solid #e5e7eb;
	border-radius:14px;
	box-shadow:0 10px 30px rgba(0,0,0,.06);
	padding:22px;
}

.blokk-card + .blokk-card
{
	margin-top:14px;
}

.blokk-accent-danger { border-left:6px solid #c62828; }
.blokk-accent-warning { border-left:6px solid #d44e1f; }
.blokk-accent-neutral { border-left:6px solid #6b7280; }

.blokk-link-card.blokk-accent-danger { border-right:6px solid #c62828; }
.blokk-link-card.blokk-accent-warning { border-right:6px solid #d44e1f; }
.blokk-link-card.blokk-accent-neutral { border-right:6px solid #6b7280; }

.blokk-title
{
	font-size:22px;
	font-weight:800;
	margin:0;
}

.blokk-subtitle
{
	margin-top:6px;
	color:#4b5563;
}

.blokk-badge
{
	display:inline-block;
	font-weight:800;
	font-size:12px;
	padding:6px 10px;
	border-radius:999px;
}

.blokk-badge-danger { background:#fee2e2; color:#991b1b; }
.blokk-badge-warning { background:#ffedd5; color:#9a3412; }
.blokk-badge-neutral { background:#e5e7eb; color:#374151; }

.blokk-linkbox
{
	border-radius:12px;
	padding:12px 14px;
	border:1px solid #e5e7eb;
	background:#f9fafb;
	overflow-wrap:anywhere;
	word-break:break-word;
}

.blokk-linkbox-warning
{
	border-color:#fed8b1;
	background:#ffedd5;
}

.blokk-linkbox-danger
{
	border-color:#ffcdd2;
	background:#ffcdd2;
	color:#c62828;
	font-weight:800;
}

.blokk-linkbox a
{
	text-decoration:none;
	font-weight:800;
}

.blokk-actions
{
	margin-top:14px;
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	justify-content:center;
}

.blokk-btn
{
	appearance:none;
	border-radius:10px;
	border:1px solid #e5e7eb;
	padding:10px 14px;
	font-weight:800;
	background:#ffffff;
	color:#111827;
	cursor:pointer;
	text-decoration:none;
	display:inline-block;
}

.blokk-btn-primary
{
	background:#1f2849;
	border-color:#1f2849;
	color:#ffffff;
}

.blokk-btn-danger-outline
{
	background:#ffffff;
	border-color:#c62828;
	color:#c62828;
}

.blokk-btn-warning-outline
{
	background:#ffffff;
	border-color:#d44e1f;
	color:#d44e1f;
}

.blokk-small
{
	font-size:13px;
	color:#6b7280;
}

.blokk-grid
{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:14px;
}

@media (max-width: 800px)
{
	.blokk-grid { grid-template-columns:1fr; }
}

.blokk-modal
{
	position:fixed;
	inset:0;
	background:rgba(17,24,39,.55);
	display:none;
	align-items:center;
	justify-content:center;
	padding:18px;
	z-index:9999;
}

.blokk-modal.is-open
{
	display:flex;
}

.blokk-modal-panel
{
	max-width:520px;
	width:100%;
	background:#ffffff;
	border-radius:14px;
	border:1px solid #e5e7eb;
	box-shadow:0 30px 70px rgba(0,0,0,.25);
	padding:18px;
}

.blokk-modal-title
{
	font-weight:900;
	font-size:18px;
}

.blokk-modal-actions
{
	display:flex;
	gap:10px;
	justify-content:flex-end;
	margin-top:14px;
}

.blokk-url-unselectable
{
	user-select:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	cursor:default;
	pointer-events:none;
}

.blokk-footer
{
	text-align:center;
	padding:20px;
	background-color:#f9fafb;
	border-top:1px solid #e5e7eb;
}

.blokk-footer-version
{
	color:#999999;
	font-size:12px;
}