html, body { width: 100%; height: 100%; }
body { background: #212528; }

.ui.table thead tr:first-child, .trumbowyg-button-pane { position: sticky !important; top: 0; z-index: 9; }

/*Notifications*/
.notificationMessage { animation-duration: .3s; animation-name: notificationSlideIn; position: fixed; transition: all .3s; top: 0; width: 340px; left: calc(50% - 170px); background: #fff; box-shadow: 0 0 50px 0 rgba(0,0,0,.1); display: block; z-index: 99; padding: 30px 50px 30px 30px; border-radius: 0 0 20px 20px; font-size: 1.2rem; border-top: 4px solid #2185d0; }
.notificationMessage:after { content: '×'; display: block; position: absolute; top: 10px; right: 10px; color: rgba(0,0,0,.2); width: 20px; height: 20px; text-align: center; line-height: 19px; font-weight: 700; font-size: 26px; cursor: pointer; }
.notificationMessage.hidden { opacity: 0; top: -50px !important; }
.notificationMessage.error { border-top: 4px solid #db2828; color: #db2828; }
@keyframes notificationSlideIn {from { top: -50px; } to { top: 0; }}

/*Main ctrs*/
#mainCtr { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(200px, 1fr) 7fr; }

#mainCtr > #mainContent { padding: clamp(1rem, 1vw, 2rem); display: flex; }
#mainCtr > #mainContent > .ctr { width: 100%; }
#mainCtr > #mainContent.sidebar > .ctr:nth-child(1) { width: 50%; border-radius: 25px 0 0 25px; }
#mainCtr > #mainContent.sidebar > .ctr:nth-child(2) { width: 50%; background: #f3f4f5; border-radius: 0 25px 25px 0; }
#mainCtr > #mainContent.sidebar.terbar > .ctr:nth-child(1) { width: 30%; border-radius: 25px 0 0 25px; }
#mainCtr > #mainContent.sidebar.terbar > .ctr:nth-child(2) { width: 40%; background: #f3f4f5; border-radius: 0 0 0 0; }
#mainCtr > #mainContent.sidebar.terbar > .ctr:nth-child(3) { width: 40%; background: #fff; border-radius: 0 25px 25px 0; }
#mainCtr > #mainContent > .ctr { background: #fff; border-radius: 25px; padding: clamp(2rem, 2.5vw, 4rem); }

#mainCtr > #mainSidebar { padding: clamp(2rem, 2vw, 4rem) clamp(1rem, 1vw, 2rem) clamp(2rem, 2vw, 4rem) clamp(2rem, 2vw, 4rem); display: flex; }
#mainCtr > #mainSidebar > .ctr { width: 100%; }
#mainCtr > #mainSidebar > .ctr { display: flex; flex-direction: column; justify-content: space-between; }
#mainCtr > #mainSidebar > .ctr > .top { position: sticky; top: clamp(2rem, 2vw, 4rem); }
#mainCtr > #mainSidebar > .ctr > .bottom { position: sticky; bottom: clamp(2rem, 2vw, 4rem); }
#mainCtr > #mainSidebar > .ctr > .bottom h4 { color: #fff; }
#mainCtr > #mainSidebar > .ctr > .top .button { margin-top: .5rem; }
#mainCtr > #mainSidebar > .ctr > .bottom .button + .button { margin-top: .5rem; }
#mainCtr > #mainSidebar > .ctr .ui.divider { margin: 1rem 0 !important; }

/*Login page*/
body.loginPage #mainCtr > #mainContent > .ctr { display: flex; align-items: center; justify-content: center; }
#loginContainer { min-width: 500px; }

/*Main styles*/
.mainTitle { font-weight: 300; font-size: 2.5rem; margin-bottom: 2rem; }
.mainTitle strong { font-weight: 400; }

.linkInTable { color: inherit; text-decoration: underline dotted; }
tr.light { opacity: .4; } tr.light:hover { opacity: 1; }

/* SemanticUi Rewrite -----------------------------------------------------------------------------*/

.ui.container { max-width: 1400px !important; }
.ui.segment { box-shadow: none !important; }

form .ui.red.pointing.prompt.label { width: 100% !important; }
form .ui.red.pointing.prompt.label:before { left: 10% !important; }
form .ui.red.pointing.prompt.label ul { margin: 0; padding: 0 0 0 1em; }

/*.ui.divider:not(.vertical):not(.horizontal):not(.hidden) { border-top: 2px solid rgba(0,0,0,.05) !important; }*/
.ui.divider { margin: 2rem 0 !important; }

[type="number"] { text-align: right !important; -webkit-appearance: textfield !important; -moz-appearance: textfield !important; appearance: textfield !important; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.ui.styled.accordion .accordion > .content, .ui.styled.accordion > .content { /*padding: 2em !important;*/ border-top: 1px dashed rgba(34,36,38,.15) !important; }

.ui.button { border-radius: 25px !important; }

.ui.selection.dropdown { min-width: auto !important; }

.ui.table thead th a { color: inherit !important; }

/* Repeaters -----------------------------------------------------------------------------*/

.repeater-rows { list-style: none; }

.sortTools { position: absolute; left: -32px; top: 0px; }
.sortTools .btnTool { display: block; margin-bottom: 7px; border-radius: 20px; padding: 3px; font-size: 100%; cursor: pointer; }
.sortTools .btnTool:hover { color: #000; }