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

#notification { position: fixed; z-index: 999; top: 30px; left: 50%; width: 400px; font-size: 1.2rem; padding-right: 52px; margin-left: -200px; opacity: 1; transition: all .3s; }
#notification.hidden { top: 10px; opacity: 0; }
#notification .button:first-child { position: absolute; top: 10px; right: 10px; }

.ui.table thead tr:first-child { position: sticky !important; top: 0; z-index: 9; }
.ui.basic.table thead tr { background: #eaf9f8; }
.darkSegment .ui.basic.table thead tr { background: #daf2f1; }

.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 #00a19a; }
.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: -90px !important; }
.notificationMessage.error { border-top: 4px solid #db2828; color: #db2828; }
@keyframes notificationSlideIn {from { top: -50px; } to { top: 0; }}

/*.trumbowyg-fixed-top { position: sticky !important; }*/

hr { border: 0; border-top: 2px solid rgba(0,0,0,.05) !important; margin: 1.5rem 0 !important; padding: 0; }

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

/* Structure ------------------------------------------------------------------------------*/

h1, h2, h3, h4, h4, h6, .ui.header { color: #00a19a; }

#navColumn, #contentColumn { position: absolute; top: 0; padding: 20px; }
#navColumn { width: 240px; left: 0; padding-right: 0; height: 100%; position: fixed; }
#contentColumn { width: calc(100% - 240px); right: 0; display: flex; min-height: 100%; }

#navWrapper, #contentWrapper { min-height: 100%; }

#navWrapper { display: flex; flex-direction: column; justify-content: space-between; }
#navWrapper #navigation { padding: 30px; width: 100%; }
#navWrapper #loggedUser { width: 100%; background: #eaf9f8; padding: 20px; border-radius: 30px; }
#navWrapper #loggedUser .userName { color: #00b5ad; font-size: 1.2rem; }
#navWrapper #loggedUser .userName .icon { font-size: 2rem; position: relative; top: 4px; }
#navWrapper #loggedUser .userCoordination { color: rgba(0,0,0,.6); margin: -20px 0 10px 40px; }

#contentWrapper { width: 100%; /*overflow: hidden;*/ }
#contentWrapper > .ctr { padding: 40px; background: #eaf9f8; border-radius: 30px; min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; }

#contentWrapper > .ctr > footer > .menu { margin-bottom: 0; }
#contentWrapper > .ctr > footer > .menu > .header.item { color: #00b5ad; }

body.loginPage #contentColumn { height: 100%; }
body.loginPage #contentWrapper { height: 100%; width: 100%; }
body.loginPage #contentWrapper > .ctr { height: 100%; }
body.loginPage #contentWrapper > .ctr > div { height: 100%; display: flex; justify-content: center; align-items: center; }
body.loginPage #contentWrapper #loginContainer { max-width: 500px; }

.darkSegment { border: 0 !important; background: #daf2f1 !important; box-shadow: none !important; border-radius: 20px !important; padding: 35px !important; }

#sidebarWrapper { overflow: hidden; width: 260px; background: #bdecea; border-radius: 0 30px 30px 0; position: relative; }
#sidebarWrapper > .ctr { padding: 40px 30px; width: 260px; }

.sidebarButton { position: fixed; top: 40px; right: 265px; }
.sidebarButton.closed { right: 25px; }

body.sidebar #contentWrapper { width: calc(100% - 260px); border-radius: 30px 0 0 30px; background: #bdecea; }

body.sidebarClosed #contentWrapper { width: calc(100% - 20px); }
#sidebarWrapper.closed { width: 20px; }

.customSegment { background: #00a19a17; border-radius: 30px; padding: 40px; }

#sidebarWrapper .list .customSidebar.item { background: #fff; border-radius: 20px; padding: 20px !important; color: #999; }

#sidebarWrapper .list .customSidebar.item + .customSidebar.item { margin-top: 15px; }
#sidebarWrapper .list .customSidebar.item .header { color: #00a19a !important; font-size: 1.3rem; margin-top: 8px !important; }

#sidebarWrapper .ui.fluid.button + .ui.fluid.button { margin-top: 5px; }

.labeledInput { position: relative; }
.labeledInput .corner.label { transform: scale(.7); transform-origin: top right; position: absolute; bottom: -10px; top: auto; right: 1px; }
.labeledInput input { padding-right: 34px !important; }

/*.headerSegment { background-repeat: no-repeat !important; background-position: right 30px bottom 0px !important; padding: 55px 35px !important; margin-bottom: 2rem !important; }*/
.headerSegment { background-size: 250px !important; background-repeat: no-repeat !important; background-position: right 0px bottom 10px !important; padding: 55px 35px !important; margin-bottom: 2rem !important; }

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

#navWrapper #navigation .ui.vertical.menu { width: auto !important; }
#navWrapper #navigation .ui.vertical.menu .item > i.icon { float: none !important; margin: 0 !important; margin-right: 10px !important; }
#navWrapper #navigation .ui.vertical.text.menu .item { margin: .25em 0 !important; }
#navWrapper #navigation .ui.divider { margin: .8rem 0 !important; }

.ui.basic.segment { border-radius: inherit !important; }

.ui.button { border-radius: 100px !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: 1.5rem 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.form .required.field > .checkbox::after, .ui.form .required.field > label::after, .ui.form .required.fields.grouped > label::after, .ui.form .required.fields:not(.grouped) > .field > .checkbox::after, .ui.form .required.fields:not(.grouped) > .field > label::after { margin: 0 0 0 .2em !important; font-size: 100% !important; }

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

#sidebarWrapper .ui.message, .gridSegment { border: 0 !important; box-shadow: 0 0 30px 0 rgba(0,0,0,.05) !important; border-radius: 20px !important; padding: 25px !important; color: #00a19a; }

#sidebarWrapper .ui.message .header { margin-bottom: 7px; }

.gridSegment p { color: #999; }
.gridSegment p, .gridSegment h3 { margin: 0; }
.gridSegment .mainIcon { background: #bdecea; font-size: 20px; padding: 0 10px; min-width: 45px; height: 45px; line-height: 45px; text-align: center; border-radius: 10px; float: left; margin-right: 15px; }

.gridSegment .mainIcon.prevu { background: #bdecea; color: #00a19a; }
.gridSegment .mainIcon.programme { background: #00a19a; color: #fff; }
.gridSegment .mainIcon.lance { background: #00a19a; color: #fff; }
.gridSegment .mainIcon.termine { background: #767676; color: #fff; }
.gridSegment .mainIcon.annule { background: #db2828; color: #fff; }

thead th a { color: rgba(0,0,0,.87); }

/* Filter Dropdown ------------------------------------------------------------------------*/

.dropdown-filter-dropdown { position:relative; display:inline-block; }

.dropdown-filter-icon { margin-left: 8px; position: relative; top: 4px; border: 1px solid black; border-radius: 20px; height: 20px; width: 20px; display: inline-block; line-height: 20px; text-align: center; }
.dropdown-filter-icon:hover { cursor: pointer; background: #fff; }
.dropdown-filter-icon i { display: none; }
.dropdown-filter-icon:after { content:  "›"; display: block; position: absolute; top: 0; left: 0; left: 8px; font-size: 20px; transform: rotate(90deg); }

.checkbox-container { max-height: 400px; overflow-y: scroll; }

.dropdown-filter-content { display: none; position: absolute; background-color: #fff; min-width: 240px; box-shadow: 0 0 30px 0 rgba(0,0,0,0.1); z-index: 1; padding: 20px; border-radius: 20px; }
.dropdown-filter-content div + div { margin-top: 5px; }

.dropdown-filter-content div.dropdown-filter-search { margin-bottom:10px; margin-top:10px; }
.dropdown-filter-content div.dropdown-filter-search input { width: 100%; padding: 0 10px; border-radius: 20px; border: 1px solid #ddd; height: 30px; line-height: 30px; }

.dropdown-filter-content div.dropdown-filter-sort { border-radius: 20px; text-align: left; cursor: pointer; background-color: rgba(0, 0, 0, .1); }
.dropdown-filter-content div.dropdown-filter-sort:hover { background-color: rgba(0, 0, 0, .2); }
.dropdown-filter-content div.dropdown-filter-sort span { padding: 0 10px; height: 30px; line-height: 30px; color:#000; }

/* Datepicker -----------------------------------------------------------------------------*/

.ui-datepicker { background: #fff; z-index: 1001 !important; padding: 20px; border: 1px solid #e6e6e6; display: none; border-radius: 5px; /*margin-top: 5px;*/ }
.ui-datepicker table { margin: 0; border-collapse: collapse; }
.ui-datepicker-header { padding-bottom: 10px; font-size: 80%; }
.ui-datepicker-title { text-align: center; }
.ui-datepicker-prev, .ui-datepicker-next { cursor: pointer; border: 1px solid rgba(0,0,0,.1); color: #333; display: block; width: 25px; height: 25px; line-height: 20px; border-radius: 25px; text-align: center; font-size: 20px; display: block; text-decoration: none; }
.ui-datepicker-prev:hover, .ui-datepicker-next:hover { background: rgba(0,0,0,.1); color: #333; }
.ui-datepicker-prev { float: left; }
.ui-datepicker-next { float: right; }
.ui-datepicker tbody td { padding: 2px; }
.ui-datepicker tbody td.ui-datepicker-today a { background: rgba(0,0,0,.15); }
.ui-datepicker tbody td a, .ui-datepicker tbody td .ui-state-default { color: #333; display: block; width: 25px; height: 25px; line-height: 25px; border-radius: 25px; background: rgba(0,0,0,.05); text-align: center; font-size: 12px; display: block; text-decoration: none; }
.ui-datepicker tbody td a { cursor: pointer; }
.ui-datepicker tbody td a:hover { color: #fff; background: #00a19a; }
.ui-datepicker tbody td.ui-datepicker-current-day a { color: #fff; background: #00a19a; }
.ui-datepicker tbody td span.ui-state-default { text-align: center; display: block; opacity: .5; }
.ui-datepicker tbody td.ui-datepicker-today .ui-state-default { font-weight: bold; }
.ui-datepicker-title select { height: 25px; line-height: 25px; font-size: 12px; border: 1px solid rgba(0,0,0,.1); color: #333; padding: 0px 4px; }

/* Timepicker -----------------------------------------------------------------------------*/

.ui-timepicker.ui-widget { background: #fff; padding: 20px; border: 1px solid #e6e6e6; display: none; border-radius: 5px; margin-top: 5px; }
.ui-timepicker.ui-widget:after { position: absolute; z-index: 2; content: ''; top: -9px; left: 20px; border: medium none; background: #fff; width: 1.14285714em; height: 1.14285714em; border-style: solid; border-color: rgba(34,36,38,.15); border-width: 0 1px 1px 0; transform: rotate(225deg); }
.ui-timepicker table { border-collapse: collapse; }
.ui-timepicker .ui-timepicker-hour-cell, .ui-timepicker .ui-timepicker-minute-cell { border: 0; padding: 2px; }
.ui-timepicker .ui-timepicker-hour-cell a, .ui-timepicker .ui-timepicker-minute-cell a { color: #333; display: block; cursor: pointer; width: 25px; height: 25px; line-height: 25px; border-radius: 25px; background: rgba(0,0,0,.05); text-align: center; font-size: 12px; }
.ui-timepicker .ui-state-disabled, .ui-timepicker .ui-state-disabled { color: #999; display: block; cursor: pointer; width: 25px; height: 25px; line-height: 25px; border-radius: 25px; text-align: center; font-size: 12px; }
.ui-timepicker .ui-timepicker-hour-cell a:hover, .ui-timepicker .ui-timepicker-minute-cell a:hover { background: rgba(0,0,0,.1); transition: all .1s; }
.ui-timepicker .ui-widget-header { padding-bottom: 3px; font-size: .8rem; }
.ui-timepicker .ui-timepicker-hours, .ui-timepicker .ui-timepicker-minutes { padding: 0; }
.ui-timepicker .ui-timepicker-hours { padding-right: 15px; }
.ui-timepicker .ui-timepicker-hour-cell a.ui-state-active, .ui-timepicker .ui-timepicker-minute-cell a.ui-state-active { background: #00a19a; color: #fff; }

/* Responsive -----------------------------------------------------------------------------*/


/*- than Tablet*/
@media (max-width: 767px)
{
	.hideOnTabletAndLess { display: none !important; }

	.ui[class*="very padded"].segment { padding: 4vw; }
}

/*Tablet and +*/
@media (min-width: 768px)
{
	.showOnTabletAndPlus { display: none !important; }
}

/*- than Small Monitor*/
@media (max-width: 991px)
{
	.rightButton { display: block !important; margin-top: 1em !important; }
}

/*Small Monitor and +*/
@media (min-width: 992px)
{
	.rightButton { float: right; position: relative; top: -9px; }
}

/*Large Monitor and +*/
@media (min-width: 1200px)
{
}

/*Large Monitor and +*/
@media (min-width: 1601px)
{
	.mobile { display: none !important; }
	.computer { display: block !important; }
	#navWrapper #navigation .ui.fluid.image { max-width: 80% !important; margin: 0 auto !important; }
}
@media (max-width: 1600px)
{
	#navWrapper #navigation { padding: 20px 0 !important; }
	#navColumn { width: 80px !important; }
	#contentColumn { width: calc(100% - 65px) !important; }

	#navWrapper #navigation .ui.vertical.menu { text-align: center; }
	#navWrapper #navigation .ui.vertical.menu .item > i.icon { margin: 0 !important; font-size: 20px; }
	#navWrapper #loggedUser { padding: 7px !important; }

	#navColumn, #contentColumn { padding: 15px !important;  }
	#contentWrapper > .ctr { padding: 30px !important; }

	.mobile { display: block !important; }
	.computer { display: none !important; }
}