.ml-5 { margin-left: 5px !important }
.mr-5 { margin-right: 5px !important }
.mt-5 { margin-top: 5px !important }
.mb-5 { margin-bottom: 5px !important }
.ml-10 { margin-left: 10px !important }
.mr-10 { margin-right: 10px !important }
.mt-10 { margin-top: 10px !important }
.mb-10 { margin-bottom: 10px !important }
.ml-20 { margin-left: 20px !important }
.mr-20 { margin-right: 20px !important }
.mt-20 { margin-top: 20px !important }
.mb-20 { margin-bottom: 20px !important }
.font-25 { font-size: 25px !important }
input[type="number"] {
    -moz-appearance: textfield !important;
}
input[type="number"]:hover,
input[type="number"]:focus {
    -moz-appearance: number-input !important;
}
.clickable {cursor: pointer;}
.bold-text {font-weight: bold }
.capitalize-text {text-transform: capitalize }

/* **************************************************** */

:root {
    --orange-light: rgb(255,237,222);
    --orange: rgb(242,113,28);

    --green-light: rgb(252,255,245);
    --green: rgb(163,194,147);

    --yellow-light: rgb(255,250,243);
    --yellow: rgb(201,186,155);
}

.custom-container {
    padding: 0 2%;
}
.fullSchedule .MANAGER-row {
    background: var(--orange-light);
    box-shadow: inset 0 0 0 1px var(--orange);
}
.fullSchedule .SERVICE-row,
.fullSchedule .BILLING-row,
.fullSchedule .SUPERVISOR-row,
.fullSchedule .HOME-BASED-row {
    background: var(--green-light);
    box-shadow: inset 0 0 0 1px var(--green);
}
.singleSchedule {
    display: flex;
}
.singleSchedule > * {
    flex-shrink: 0;
    flex-grow: 1;
    flex-basis: 0;
    text-align: center;

    line-height: 40px;

    background: #ffffff;
    box-shadow: inset 0 0 0 1px #E3E4E5;
}
.gridless > * {
    box-shadow: none !important;
}
.scheduleHeader > * {
    font-weight: bold;
    background: #F9FAFB;
}
.scheduleHeader > *:first-child {
    border-radius: 5px 0 0 0;
}
.scheduleHeader > *:last-child {
    border-radius: 0 5px 0 0;
}

.shiftCount .ui.top.ribbon.label {
    padding-top: 5px;
    padding-bottom: 5px;
}
td , th {
    text-align: center !important;
}
.scheduleAction , .scheduleAction {
    text-align: end !important;
}
.extraActive {
    background: var(--orange-light);
    box-shadow: inset 0 0 0 1px var(--orange);
}
.extraOvernight {
    background: var(--green-light);
    box-shadow: inset 0 0 0 1px var(--green);
}
.clerksPerHour .activeCell {
    background: #00B5AD33;
    cursor: pointer;
}
.clerksPerHour .activeCell:hover {
    background: #00B5AD77;
    /*writing-mode: vertical-rl;*/
}

.singleShift {
    position: relative;
    line-height: 40px;
}

.shiftLabel {
    cursor: default;    
}

.shiftInputs {
    display: flex;
    font-size: 25px;
}
.shiftInputs input {
    width: 25%;
    border: 0;
}
.shiftInputs [name=extra] {
    width: 100%;
    text-align: center;
}
.shiftInputs [name=duration] {
    text-align: center;
    width: 50% !important;
}

.shiftInputsLabel {
    width: 100%;
    display: flex;
}
.shiftInputsLabel span {
    flex-shrink: 0;
    flex-grow: 1;
    flex-basis: 0;
    text-align: center;

    color: #888888;
}

.formButtons {
    display: flex;
    justify-content: space-around;
}
.centeraligned {
    margin-left: auto;
    margin-right: auto;
}

.scheduleManager [name=duration] , .scheduleManager [name=clerksAmount] {
    text-align: center;
}
.scheduleManager input {
    font-size: 25px !important;
    border: none !important;
    padding: 5px !important;
}
.table tbody tr:hover > .selectable {
    background: #E6E6E6;
}

.shiftConfigContainer .header {
    padding: 10px !important;
}
/*.ui.vertical.animated.button .visible.content {
    right: unset;
}*/
.shiftConfigContainerInputs {
    min-width: 220px;
}

.currentWeekButton {
    position: absolute;
    top: 25px;
    right: 25px;
    font-weight: 200 !important;
}