* {
	--background: #F7F7F7;
	--white: #FFFFFF;
	--black: #000000;
	--logisz-amber: #FFBF00;
}

[x-cloak] { display: none !important; }
[x-on\:click] { cursor: pointer; }

body {overflow-y: scroll;}

html, body { height: 100%; line-height: 24px; min-height: 100%; margin: 0; padding: 0; background-color: var(--background); font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 300; font-display: optional;}

h1 {padding-bottom: 12px; line-height: 54px; font-size: 48px; font-weight: 900; text-transform: uppercase;}

p.button, button.button {height: 24px; line-height: 24px; display: inline-block; vertical-align: top;}


p.button.back a span, 
button.button.back, 
button[type=submit].back {padding: 10px 18px 10px 38px; background-color: transparent; border: 2px solid var(--black);}

p.button.back a span::after, 
button.button.back::after, 
button[type=submit].back::after {top: 13px; left: 20px; right: unset; width: 10px; height: 18px; display: inline-block; background-position: -96px -48px; content: ""; position: absolute; transition: all linear 125ms; opacity: 1;}

p.button.back a span::before, 
button.button.back::before, 
button[type=submit].back::before {top: 13px; right: -20px; left: unset; width: 10px; height: 18px; display: inline-block; background-position: -96px -48px; content: ""; position: absolute; transition: all linear 125ms; opacity: 0;}

p.button.back:hover a span::after, 
button.button.back:hover::after, 
button[type=submit].back:hover::after {left: -20px; right: unset; opacity: 0;}

p.button.back:hover a span::before, 
button.button.back:hover::before, 
button[type=submit].back:hover::before {right: 20px; left: unset; opacity: 1;}

p.button.back:hover a span, 
button.button.back:hover, 
button[type=submit].back:hover {padding: 10px 38px 10px 18px;}

#logisz-version { border-bottom: dotted black 1px; }

code { background: #0000000a; padding: 0 6px; border-radius: 3px; font-size: 14px; }

.text-center { text-align: center; }
.line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.page { }
.page.domain,
.page.revision { max-width: 800px; margin-left: auto; margin-right: auto; }

.page.dashboard { }
.page.dashboard .version-info { display: flex; justify-content: space-between; }
.page.dashboard .version-info .drafts { display: inline-block; opacity: .5; }
.page.dashboard .version-info .actual-version { font-weight: bold; }

.page.domain .api-keys { padding: 16px; margin-top: 32px; }
.page.domain .api-keys > h2 {  }
.page.domain .api-keys .api-key { margin: 6px 0; display: flex;  }
.page.domain .api-keys .api-key span { flex: 1; }

.page.domain .help { padding: 16px; margin-top: 16px; }
.page.domain .help .step { margin-bottom: 16px; }

/* Table Styling */
table { width: 100%; border-radius: 12px; background: #fff; overflow: hidden; }
table thead tr { background: #FFBF00; }
table tbody tr:nth-child(2n+1) { background: unset; }
table tbody tr { background: #00000008; }
table tr th,
table tr td { padding: 12px 20px; }

.blade-editor-wrapper .blade-editor {  }
.blade-editor-wrapper .blade-editor.small .blade { width: 300px; }
.blade-editor-wrapper .blade-editor.medium .blade { width: 500px; }
.blade-editor-wrapper .blade-editor.big .blade { width: 60%; }
.blade-editor-wrapper .blade-editor .blade { height: 100%; overflow-y: scroll; width: 40vw; top: 50%; transition: all .3s; position: fixed; right: 0; z-index: 2; background: var(--background); width: 40%; max-width: 100%; transform: translate(100%, -50%); }
.blade-editor-wrapper .blade-editor .blade .blade-head { font-weight: bold; font-size: 20px; padding: 16px; width: 100%; background: #fff; }
.blade-editor-wrapper .blade-editor .blade .blade-body { padding: 16px; width: 100%; }
.blade-editor-wrapper .blade-editor .backdrop { transition: all .2s; opacity: 0; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: #000; }
.blade-editor-wrapper .blade-editor.expand .blade { transform: translate(0%, -50%); }
.blade-editor-wrapper .blade-editor.expand .backdrop { opacity: .5; }
.blade-editor-wrapper .blade-editor .blade .scroll-section { max-height: 500px; overflow-y: auto; padding-bottom: 24px; }
.blade-editor-wrapper .blade-editor .blade .scroll-section .checkbox-list .form-group { padding-bottom: unset; }

.ckeditor {  }
.ckeditor.big .ck-editor__editable_inline {height: 400px;}

.paging { width: 100%; display: flex; justify-content: space-between; }
.paging > span { display: inline-block; padding: 0 8px; display: flex; justify-content: center; flex-direction: column; }
.paging .pager {  }
.paging .pager ul { gap: 1px; display: flex; list-style: none; margin: 0; padding: 0; }
.paging .pager ul li { user-select: none; transition: background .3s; cursor: pointer; margin: 0; padding: 0; background: #fff; line-height: 36px; text-align: center; width: 36px; height: 36px; display: inline-block }
.paging .pager ul li:hover:not(.locked), 
.paging .pager ul li.active { background: var(--logisz-amber); }
.paging .pager ul li.locked {  }
.paging .pager ul li:first-child { border-radius: 5px 0 0 5px; }
.paging .pager ul li:last-child { border-radius: 0 5px 5px 0; }

.action-bar { margin-bottom: 24px; gap: 12px; display:flex; justify-content: space-between;}
.action-bar p.button, .action-bar button.button {margin: 0;}
.action-bar input[type=text] {border: 2px solid var(--black); /*background-color: var(--background);*/ border-radius: 9999px; text-indent: 20px;}
.action-bar.rigth { justify-content: end; }
.action-bar.left { justify-content: start; }
.action-bar.bottom { margin-bottom: 0; margin-top: 24px; }

.version-history {background-color: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);margin: auto;}
.version-history .version {display: flex;align-items: flex-start;position: relative;}
.version-history .version:not(:last-of-type)::before {content: '';position: absolute;left: 26px;top: 36px;height: 60px;width: 2px;background-color: #00000024;}
.version-history .version:last-child::before {display: none;}
.version-history .version:not(:last-child) {margin-bottom: 48px;}
.version-history .version .version-details { flex: 1; }
.version-history .version .version-number-wrap { min-width: 100px; }
.version-history .version .version-number-wrap .version-number { text-align: center; display: inline-block; background-color: var(--logisz-amber);font-weight: 500; padding: 6px 12px;border-radius: 20px;margin-right: 10px;font-size: 0.9em;min-width: 52px;}
.version-history .version .version-details p {padding: 0;}
.version-history .version .author {color: #888;font-size: 0.9em;}

.version-history .draft-versions { margin-bottom: 36px; }
.version-history .draft-versions .version::before {display: none;}
.version-history .version.actual .version-number-wrap .version-number {  }

.tags { display:flex; gap: 6px; flex-wrap: wrap; }
.tags .tag { padding: 0 6px; font-size: 12px; border: solid var(--logisz-amber) 1px; border-radius: 5px; color: var(--logisz-amber); white-space: nowrap; }
.tags .tag > span/*:not([x-text])*/ { color: var(--logisz-amber); }
.tags .tag.solid {background-color: var(--logisz-amber); color: var(--black);}
.tags .tag.solid > span/*:not([x-text])*/ { color: var(--black); }
.tags .tag:hover {  }
.tags .tag > span.red { color: #c32323; font-weight: bold; }
.tags .tag > span.green { color: #37dd2e; font-weight: bold; }

/*.version-revision {background-color: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);margin: auto;}*/
.version-revision .revision { border-bottom: solid #00000017 1px; margin-bottom: 16px; padding-bottom: 12px; }
.version-revision .revision:last-of-type { border: none; margin: 0; }
.version-revision .revision .display { display: flex; }
.version-revision .revision .display .title { font-weight: bold; }
.version-revision .revision .revision-type { margin-right: 16px; min-width: 78px; display: flex; align-items: center; }
.version-revision .revision .revision-type > span { border: solid #cbcbcb87 1px; padding: 3px 8px; border-radius: 5px; display: inline-block; }
.version-revision .revision.bug .revision-type > span { background: #ff00003b; border: solid #ff000087 1px; }
.version-revision .revision.new .revision-type > span { background: #00ff083b; border: solid #27ff0087 1px; }

.list-actions { display: flex; gap: 6px; justify-content: end; }
.list-actions.left { display: flex; gap: 6px; justify-content: start; }
.list-actions a.icon {width: 32px; height: 32px; border: 2px solid var(--black); border-radius: 9999px; align-items: center; justify-content: center; display: flex; content: ""; transition: background-color linear 125ms;}
.list-actions a.icon:hover {background-color: var(--black);}
.list-actions a.icon.view {}
.list-actions a.icon.view::after {width: 16px; height: 13px; background-image: url(../images/sprite.svg); background-repeat: no-repeat; background-size: 186px 66px; background-color: transparent; background-position: -138px -48px; border: 0; content: ""; display: inline-block; cursor: pointer;}
.list-actions a.icon.view:hover::after {background-position: -106px -48px; }
.form {height: 100%;}
.form .form-group {padding-bottom: 24px;}
.form .form-group:last-of-type {padding-bottom: 0;}
/*.form .row .sf_colsIn .form-group {padding-bottom: 24px;}*/
.form .form-group label {margin: 0; padding: 0; font-size: 12px; text-transform: uppercase; display: block;}
.form .form-group input[type=text], .form-group input[type=email] {width: 100%; margin: 0; padding: 0; line-height: 32px; height: 32px; background-color: transparent; border: 0; border-bottom: 1px solid #000000; font-weight: 300; outline: none;}
.form .form-group input[type=text].input-validation-error, .form-group input[type=email].input-validation-error {background: -moz-linear-gradient(top, rgba(255,0,0,0) 0%, rgba(255,0,0,0.1) 100%); background: -webkit-linear-gradient(top, rgba(255,0,0,0) 0%,rgba(255,0,0,0.1) 100%); background: linear-gradient(to bottom, rgba(255,0,0,0) 0%,rgba(255,0,0,0.1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ff0000', endColorstr='#1aff0000',GradientType=0 );}
.form .form-group strong {margin: 0; padding: 0; font-size: 12px; font-weight: normal; text-transform: uppercase; display: block;}
.form .form-group textarea {width: 100%; height: 100px; line-height: 32px; margin: 0; padding: 0; background-color: transparent; border: 0; border-bottom: 1px solid #000000; font-weight: 300; outline: none;}
.form .form-group textarea.input-validation-error {background-image: -moz-linear-gradient(top, transparent, rgba(255,0,0,0.1) 31px, #000000 0px); background-image: -webkit-linear-gradient(top, transparent, rgba(255,0,0,0.1) 31px, #000000 0);}
.form .form-group input[type=checkbox] + label {font-size: inherit; text-transform: none; display: inline-block;}
.form .form-group button {margin-bottom: 0;}
.form .sfContentBlock em {font-size: 12px; font-style: italic;}

/**/

main {width: 100%; min-height: calc(100% - 48px); max-width: 2560px; margin: 0 auto; background-color: #FFFFFF;}

section {}
section.section {position: relative; overflow: hidden;}
section.section::before {-webkit-mask-image: url(/Images/circle.svg); -webkit-mask-size: 8192px 8192px; -webkit-mask-position: bottom center; -webkit-mask-repeat: no-repeat; mask-image: url(/Images/circle.svg); mask-size: 8192px 8192px; mask-position: bottom center; mask-repeat: no-repeat; display: block; content: ""; pointer-events: none;}

section.section.section-black {}
section.section.section-black .placeholder {top: -16px; max-height: 215px; display: flex; flex-direction: row; align-items: center; position: relative;}
section.section.section-black .placeholder .logo {top: 0; left: -37px; position: relative; z-index: 1;}
section.section.section-black .placeholder .logo img {height: 240px;}
section.section.section-black .placeholder .content {position: relative; z-index: 1;}
section.section.section-black .placeholder .content h1 {line-height: 36px; font-size: 36px;}

section.section.section-black.to-white {background-color: var(--white);}
section.section.section-black.to-white .inner-wrapper {box-sizing: border-box; position: relative;}
section.section.section-black.to-white .inner-wrapper.radial {margin-bottom: 0 !important; background: rgb(0, 46, 49); background: -moz-radial-gradient(center, ellipse cover, rgba(0, 46, 49, 1) 0%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 75%); background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 46, 49, 1) 0%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 75%); background: radial-gradient(ellipse at center, rgba(0, 46, 49, 1) 0%, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 1) 75%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002e31', endColorstr='#000000',GradientType=1 ); position: relative;}
section.section.section-black.to-white .inner-wrapper.radial::after {top: 0; right: 0; bottom: -1px; left: 0; background-image: url(/images/clipping-circle.svg); background-position: bottom center; background-size: 8192px 8192px; background-repeat: no-repeat; content: ""; display: block; position: absolute; z-index: 0;}

section.section.section-white {}
section.section.section-white .inner-wrapper {padding: 80px 0 104px 0;}

section.section.section-white.to-grey {background-color: #F7F7F7;}
section.section.section-white.to-grey::before {background-color: var(--white);}

section.section.section-grey.to-white .inner-wrapper {padding: 60px 0 84px 0;}

footer {background-color: var(--white); font-size: 12px; text-align: center;}

/**/