html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
nav ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}
del {
    text-decoration: line-through;
}
abbr[title], dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}
input, select {
    vertical-align: baseline/*middle*/}
ul li {
    list-style: none;
}

.ui.basic.segment {
  top: 70px !important;
}
#wrapper {
    width: 100%;
    margin: 0 0 -100px 0;
    min-height: 100%;
    height: auto !important;
    height: 100%}
.push {
    width: 100%;
    height: 100px;
}
.clear {
    clear: both;
}
.ui.label {
    font-weight: 400 !important;
}
body {
    min-width: inherit;
    font-family: "Source Sans Pro";
    color: rgb(77, 79, 83) !important;
    height: 100%}
.ui.menu, .ui.header, h1, h2, h3, h4, h5 {
    font-family: "Source Sans Pro"}
.ui.button {
    /*border-radius: 3px*/}
.flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    -webkit-flex-flow: row wrap;
}
.flex-nowrap {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  -webkit-flex-flow: nowrap;
}
.flex-schedule{
  align-items: flex-end;
  display: flex;
}
.schedule-previous{
  height: 17px;
  width: 17px;
  margin-bottom: 8px;
}
.schedule-previous-field {
  height: 27px;
  width: 17px;
}
.schedule-next {
  height: 17px;
  width: 17px;
  margin-bottom: 8px;
}
  #auto-schedule{
    background: #f89357;
    color: white;
    margin-left: 10px;

  }
#next-week{
  border: rgba(255,255,255,0);
}
#previous-week{
  border: rgba(255,255,255,0);
}

.ui.modal {
    border-radius: 0 !important;
}
.container {
    /* cursor: unset; */
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
}
.formularios.ui.form ul li {
    text-align: left !important;
    border: none !important;
    padding: 0;
    margin: 5px !important
}
#filial {
    text-align: left !important;
    border: none !important;
    padding: 0;
    margin: 20px 20px 5px 20px !important
}
.hidden {
    display: none;
}
.acenter {
    text-align: center !important;
}
#cargar label {
    margin: 10px 0;
}
#cargar .btn-primary {
    border: none;
    border-top: 1px solid #CECCCC;
    border-right: 1px solid #CECCCC;
    border-bottom: 1px solid #CECCCC;
}
#cargar .fileinput-upload-button {
    background: #4d4d4d;
}
#cargar .fa {
    margin-right: 10px;
}
.jFiler {
    margin-top: 20px;
}
.jFiler .jFiler-input-choose-btn {
    margin-top: 8px !important;
}
[data-tooltip]:before {
    z-index: 3 !important;
}
[data-tooltip]:after {
    z-index: 2 !important;
}
footer {
    width: 100%;
    height: 100px;
    background: rgb(77, 79, 83);
    color: #fff;
    text-align: center;
    padding:  90px 0;
}
body {
    background: #f1f2f2;
}
.button-orange, .button-green, .button-red, .button-blue, .button-magenta, .button-magenta-basic, .button-gray-basic {
    background: #ec6851 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    /*text-transform: uppercase !important;*/
    font-family: "Source Sans Pro";
    margin: 0 !important;
    border: 1px solid #ec6851 !important;
    color: #fff !important;
}
.button-orange i, .button-green i, .button-red i, .button-blue i, .button-magenta i, .button-magenta-basic i, .button-gray-basic i {
    font-size: 15px;
    font-weight: 600;
}
.button-green {
    background: #1aa979 !important;
    border: 1px solid #1aa979 !important;
}
.button-magenta, .btn-success {
    background: rgba(235, 43, 237, 1) !important;
    border: 1px solid rgba(235, 43, 237, 1) !important;
}
.button-blue {
    background: rgba(26, 168, 170, 0.1) !important;
    border: 1px solid rgba(26, 168, 170, 1)	!important;
    color: rgb(77, 79, 83) !important;
}

.button-red {
    background: #f54359 !important;
    border: 1px solid #f54359 !important;
}

.button-magenta-basic, .btn-default {
    background: transparent !important;
    border: 1px solid rgba(235, 43, 237, 1) !important;
    color: rgba(235, 43, 237, 1) !important;
}

.button-gray-basic {
    background: transparent !important;
    border: 1px solid rgba(77, 79, 83, 1) !important;
    box-shadow: none !important;
    color: rgba(77, 79, 83, 1) !important;
}

.ui.attached.button {
  box-shadow: none !important;
}

.ui.search .prompt {
    border-radius: 5px !important;
}

.daterangepicker .ranges {
  text-align: center !important;
}

.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {
  background: #4D4F53 !important;
  border: 1px solid #4D4F53 !important;
  color: #FFFFFF !important;
}

.daterangepicker .ranges li {
  font-size: 13px;
  background: #f5f5f5;
  border: 1px solid #f5f5f5;
  color: #4D4F53 !important;
  padding: 3px 12px;
  margin-bottom: 8px;
  border-radius: 5px;
  cursor: pointer;
}

.daterangepicker td.active, .daterangepicker td.active:hover {
  background-color: #EB2BED !important;
  border-color: #EB2BED !important;
  color: #fff;
}

hr {
    width: 6%;
    margin: 6px auto 20px auto;
    border-top: 2px solid rgb(77, 79, 83);
}
.ui.icon.header {
    color: rgb(77, 79, 83);
}
.ui.icon.header i {
    font-size: 40px !important;
}
.ui.icon.header .content span {
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 600;
}
.ui.icon.header .content .sub {
  text-transform: none;
  font-size: 15px;
  line-height: 19px;
  width: 80%;
  margin: 0 auto 15px;
  font-weight: 400;
  color: rgb(77, 79, 83);
}
.subtitle {
    font-size: 16px;
    font-weight: 600;
    margin: 40px 0 20px 0 !important;
    color: rgb(77, 79, 83) !important;
    text-transform: uppercase;
}
.card {
    background: #fff;
    border: 1px solid #e2e0e0;
    position: relative;
    padding: 0 15px 20px 15px;
    margin-bottom: 15px;
}
.card .subtitle {
    margin: 30px 0 10px 0 !important;
    text-align: center;
}
.card label {
    font-weight: normal;
}
.formularios.ui.form ul li label, #filial label {
    color: rgb(77, 79, 83);
    font-size: 12px;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
    display: block;
}
.formularios.ui.form div label {
    color: rgb(77, 79, 83);
    font-size: 12px;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}
.formularios.ui.form ul li i {
    font-size: inherit !important;
    font-weight: bold;
    color: #4D4F53;
    opacity: 1 !important;
}
.formularios.ui.form ul li .inputs, .formularios.ui.form .ui.selection.dropdown, #filial .ui.selection.dropdown,
.formularios.ui.form div .inputs, .formularios.ui.form div div .inputs {
    border: 1px solid rgb(77, 79, 83);
    font-family: "Source Sans Pro";
    border-radius: 3px;
    font-weight: 400;
    box-shadow: none !important;
    text-shadow: none !important;
}
.formularios.ui.form ul li .inputs:focus, .formularios.ui.form .ui.selection.dropdown:focus,
#filial .ui.selection.dropdown:focus, .ui.input input:focus {
    border: 1px solid rgb(77, 79, 83) !important;
}
.formularios.ui.form div textarea:focus {
    border: 1px solid rgb(77, 79, 83) !important;
}
.formularios.ui.form div textarea {
    color: rgba(0, 0, 0, 0.8) !important;
    font-size: 14px !important;
}
.formularios.ui.form .ui.selection.dropdown, #filial .ui.selection.dropdown {
    color: rgb(77, 79, 83) !important;
    text-shadow: none;
    font-size: 14px;
}
.formularios.ui.form .ui.selection.dropdown .ui.label, #filial .ui.selection.dropdown .ui.label {
    /*background: #f3f2f2 !important;*/
    padding: 5px 5px !important;
    margin: 4px !important;
}
.formularios.ui.form .ui.selection.dropdown .menu.transition.visible, #filial .ui.selection.dropdown .menu.transition.visible {
    box-shadow: none !important;
    border: 1px solid rgb(77, 79, 83);
}
.formularios.ui.form .ui.selection.dropdown .dropdown.icon {
    /*border-left: 1px solid rgb(77, 79, 83);*/
    /*line-height: 1em !important;*/
    /*right: 11px !important;*/
}
.formularios.ui.form ul .three.wide {
    width: 17.4% !important;
}
.formularios.ui.form .toggle.checkbox label:before, .formularios.ui.form .toggle.checkbox label:after {
    border: 1px solid #ccc !important;
}

.timepicki-input:focus {
    border-color: rgb(77, 79, 83) !important;
}

.passing {
  padding: 0.75em 0.4em !important;
}
.scheduling-component {
  padding-right: 50px !important;
}
.ui.toggle.checkbox input:checked ~ .box:before, .ui.toggle.checkbox input:checked ~ label:before, .ui.toggle.checkbox input:focus:checked ~ .box:before, .ui.toggle.checkbox input:focus:checked ~ label:before {
    background: #eb2bed !important;
}
.ui.steps.pasos {
    border: none;
    margin-top: 30px;
}
.ui.steps.pasos .step {
    font-size: 4.6px;
    text-align: center;
    border: none;
}
.ui.steps.pasos .step i {
    margin: 0;
}
.ui.steps.pasos .step:after {
    background: none !important;
    transform: none !important;
    right: -9px !important;
    border: 1px solid rgba(40, 40, 40, 0.3) !important;
    width: 17px !important;
    height: inherit !important;
}
.ui.steps.pasos .step.active {
    background: transparent;
}
.ui.steps.pasos .step.active i {
    color: #eb2bed;
    position: relative;
    z-index: 8;
}
.actions a {
    color: #ec6851;
    text-decoration: underline;
    display: block;
    text-transform: uppercase;
    margin-top: 10px;
    font-size: 14px;
}
.helps {
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(77, 79, 83, 0.3);
    color: #fff;
    display: block;
    padding: 6px 7px;
    cursor: pointer;
}
.helps i {
    margin: 0;
}
.tablas {
    border-radius: 0 !important;
}
.tablas thead th {
    background: rgba(77, 79, 83, 1) !important;
    color: rgb(255, 255, 255) !important;
    border-radius: 0 !important;
    text-transform: uppercase !important;
    font-size: 13px !important;
}
.tablas thead th i {
    float: right;
    cursor: pointer;
    margin-right: 0;
}
.tablas tbody .selectable, .tablas tbody .disabled, .tablas tbody .select-in {
    text-align: center;
}
.tablas tbody .selectable, .tablas tbody .select-in {
    cursor: pointer;
}
.tablas tbody .disabled i {
    color: rgb(77, 79, 83);
}
.tablas tbody .select-in input {
    border: none !important;
    text-align: center !important;
    color: #eb2bed;
    font-size: 16px !important;
    width: 100% !important;
    cursor: pointer;
}
.tablas tbody .ready, .tablas tbody .not-ready {
    font-size: 20px;
    text-align: center;
}
.tablas tbody .not-ready {
    color: #ef4945 !important;
}
.tablas tbody .no {
    background: #fff !important;
}
.tablas tbody .god, .tablas tbody .wrong {
    /*text-align: center !important;
    */background: #eb2bed !important;
    color: #fff !important;
    vertical-align: inherit;
}
.tablas tbody .god i, .tablas tbody .wrong i {
    float: none;
    cursor: pointer;
    font-size: 1.1em;
}
.tablas tbody .wrong {
    background: #ef4945 !important;
    position: relative;
}
.tablas tbody .wrong span {
    font-size: 20px;
}
.tablas tbody .wrong i {
    position: absolute;
    right: 8px;
    /*font-size: 1.5em*/}
.tablas tbody td {
    color: 000000;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    vertical-align: middle;
}
.tablas a {
    transition: background .3s ease, color .3s ease;
    display: block;
}
.tablas .no {
    color: #fff !important;
}
.tablas .si {
    background: #eb2bed;
    color: #fff !important;
}

.ui.table tr td, .ui.table tr th {
    border: 1px solid #D1D2D5 !important;
}
a i.fas {
  font-size: 1.5em !important;
  line-height: 1;
  vertical-align: middle;
  margin: 0 0.25rem 0 0;
  width: 1.2em;
}
.icon-disa, .icon-user {
    color: #efefef;
}
.icon-trash {
    cursor: pointer;
}
.jFiler-input-dragDrop {
    background: transparent !important;
}
.modal .header {
    /*border: none !important;
    */text-align: center;
    padding-bottom: 0 /*!important*/}
.modal .header .subtitle {
    margin: 0 !important;
}
.modal .actions {
    text-align: center !important;
}
.modal .actions .button {
    margin: 0 6px !important;
}
.ui.dimmer {
    background-color: rgba(0, 0, 0, 0.85) !important;
}
.sesion .menu {
    right: 0 !important;
    left: inherit !important;
    min-width: max-content !important;
}
.sesion .menu ul {
    margin-top: 20px;
}
.sesion .menu ul li label {
    line-height: 18px;
    color: #fff !important;
}
.sesion .menu ul li .inputs {
    background: transparent !important;
    box-shadow: none !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}
.sesion .menu ul li i.icon {
    color: #fff !important;
}
.sesion .menu .actions .checkbox {
    float: left;
    margin-left: 5px;
}
.sesion .menu .actions .checkbox label {
    text-transform: none;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
}
.sesion .menu .actions .checkbox label:before {
    background: transparent !important;
    border: 1px solid #fff !important;
    border-radius: 50px !important;
}
.sesion .menu .actions .ui.checkbox input:checked ~ .box:before, .sesion .menu .actions .ui.checkbox input:checked ~ label:before {
    border: none !important;
}
.sesion .menu .actions .ui.checkbox input:checked ~ .box:after, .sesion .menu .actions .ui.checkbox input:checked ~ label:after {
    color: #fff !important;
}
.sesion .menu .actions .forget {
    float: right;
    margin-right: 5px;
    line-height: 20px;
}
.sesion .menu .actions .forget button {
    background: transparent;
    color: #1aa979;
    border: none;
    padding: 0;
    font-weight: 400;
    font-size: 14px;
    text-decoration: underline;
}
.sesion .menu .actions .ini {
    text-align: right;
    margin-top: 15px;
}
.sesion .menu .item {
    display: none !important;
}
.banner {
    background: #000 !important;
    padding: 0 !important;
    position: relative;
}
.banner img {
    opacity: 0.5;
}
.banner .contenido {
    position: absolute;
    width: 100%;
    bottom: 60px;
}
.banner .contenido .header {
    color: #fff !important;
}
.banner .contenido .header span {
    font-size: 40px !important;
    font-weight: 400 !important;
}
.banner .contenido .header hr {
    border-top: 2px solid #fff !important;
}
.banner .contenido .header .sub {
    margin: 20px auto !important;
}
#ventajas ul {
    justify-content: center;
    padding-top: 60px;
}
#ventajas ul li {
    width: 30%;
    margin: 0 10px;
}
#ventajas ul li .header i, #ventajas ul li .header span {
    color: #eb2bed !important;
}
header {
    background: #f54359;
    width: 100%;
    min-height: 70px;
    transition: all 0.3s ease;
}
header .logo {
    float: left;
}
header .logo a {
    display: block;
    background: #f54359;
    width: 136px;
    height: 70px;
    padding: 12px;
}
header .logo a img {
    width: 90%;
    height: auto;
}
header .menutop {
    float: right;
}
header .menutop .ui.menu {
    background: transparent;
    border: none;
    transition: all 0.3s ease;
}
header .menutop .ui.item, header .menutop a {
    display: block;
    height: 70px;
    line-height: 70px;
    color: rgba(255, 255, 255, 1);
    text-transform: uppercase;
    padding: 0 15px;
    font-size: 14px;
    border-radius: 0 !important;
    border: none !important;
}
header .menutop .ui.item:hover, header .menutop a:hover {
    background: #fff !important;
    color: rgb(77, 79, 83) !important;
    border: none !important;
}
header .menutop .ui.item i, header .menutop a i {
    font-size: 20px;
    margin-right: 6px !important;
}
header .menutop .ui.menu .dropdown.item .menu {
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-bottom: 4px solid rgb(77, 79, 83);
}
header .menutop .ui.menu .dropdown.item .menu .item {
    text-transform: uppercase !important;
    color: rgb(77, 79, 83) !important;
}
header .menutop .ui.menu .active.item {
    color: rgba(255, 255, 255, 0.7);
}
header .login {
    float: right;
}
header .login .label:hover {
    background: rgb(77, 79, 83) !important;
    color: #fff !important;
}
header .login .opciones {
    background: rgb(77, 79, 83) !important;
    border-radius: 0 !important;
}
header .login .opciones .item {
    color: #fff !important;
}
header .login .ui.label {
    height: 70px;
    line-height: 50px;
    background: #424448;
    color: rgba(255, 255, 255, 1);
    border-radius: 0;
    font-weight: 300;
    padding: .5833em 1.5em;
    transition: all 0.3s ease;
    width: auto;

}
header .login .ui.label img {
    height: 3.1666em !important;
}
header .login .ui.label span {
    text-transform: uppercase;
    font-size: 14px;
}
header .login .ui.label i {
    font-size: 20px;
    position: relative;
    top: 2px;
    margin: 0 0 0 4px;
}
header .notif {
    float: right;
}
header .notif a {
    background: #ffffff;
    display: list-item;
    height: 70px;
    line-height: 70px;
    text-align: center;
    padding: 0 20px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}
header .notif a i {
    color: #f54359;
}
header .notif a .ui.floating.label {
    top: 10px;
    margin: 0 !important;
    left: inherit;
    right: 11px;
    border-radius: 50px;
    font-size: 13px;
    padding: 6px;
    background: #d93418 !important;
    border: none !important;
    min-width: 25px;
}
.sticky {
    position: fixed;
    z-index: 10;
    top: 0;
    min-height: 40px;
}
/*.sticky .logo {*/
/*    display: none;*/
/*}*/
/*.sticky .menutop .item span {*/
/*    display: none;*/
/*}*/
/*.sticky .menutop .ui.menu {*/
/*    min-height: 40px !important;*/
/*}*/
/*.sticky .menutop .ui.item, .sticky .menutop a {*/
/*    height: 40px;*/
/*    line-height: 40px;*/
/*}*/
/*.sticky .login .ui.spaced.image {*/
/*    display: none !important;*/
/*}*/
/*.sticky .login .ui.label {*/
/*    height: 40px;*/
/*    line-height: 20px;*/
/*}*/
/*.sticky .notif a {*/
/*    height: 40px;*/
/*    line-height: 40px;*/
/*}*/
#encabezado, #freeze {
    background: #fff;
    width: 100%;
    padding: 40px 0 20px 0;
    text-align: center;
    position: relative;
}

#encabezado .clock-on {
  /*width: 100%;*/
  /*height: 100vh;*/
  /*overflow: hidden;*/
}

#encabezado .sig {
    position: absolute;
    bottom: 10px;
    /*-16px;
    */left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    color: rgb(77, 79, 83);
    font-size: 25px;
    width: 30px;
    z-index: 9;
}
#encabezado i {
    /* position: relative; */
}
#encabezado img {
}
#encabezado .addI {
    position: absolute;
    z-index: 9;
    background: #ec6851;
    border-radius: 50px;
    width: 22px;
    height: 22px;
    text-align: center;
    cursor: pointer;
    right: 0;
    bottom: -18px;
}
#encabezado .addI i {
    margin: 4px 0 0 0;
    color: #fff;
    font-size: 14px !important;
}
#how {
    text-align: center;
}
#how ul {
    justify-content: center;
    box-shadow: none;
    border: none;
}
#how ul li.item {
    width: 30%;
    text-align: center;
    display: block;
    background: #fff;
    border-radius: 0 !important;
    border: 1px solid #e2e0e0;
    margin: 0 10px;
    color: rgb(77, 79, 83);
    padding: 30px 10px;
    cursor: pointer;
}
#how ul li.item i {
    font-size: 50px;
}
#how ul li.item label {
    display: block;
    text-transform: uppercase;
    margin-top: 15px;
    font-weight: 400;
}
#how ul li.active {
    background: #f54359;
    color: #fff;
}
#how .zona {
    margin-top: 10px;
}
#how .sel {
    margin-top: 15px;
    background: transparent;
    border: 2px solid #eb2bed;
    border-radius: 4px;
    height: 35px;
    line-height: 31px;
    padding: 0 15px;
    color: #eb2bed;
    font-weight: 600;
    font-size: 14px;
}
#how .sel i {
    margin-left: 6px;
}
.add {
    color: rgb(77, 79, 83);
    display: block;
    cursor: pointer;
}
.add:hover {
    color: rgb(77, 79, 83);
}
tfoot td {
    border-top: 1px solid rgba(34, 36, 38, 0.1) !important;
}
#timeP label, #crear-turno label {
    color: rgb(77, 79, 83) !important;
}
#timeP .timepicker_wrap, #crear-turno .timepicker_wrap {
    position: absolute;
    background: #fff;
    z-index: 10;
    padding: 8px;
    display: none;
    box-shadow: 2px 2px 5px 0 rgba(50, 50, 50, 0.35);
    top: 48px !important;
}
#timeP .timepicker_wrap .time, #timeP .timepicker_wrap .mins, #timeP .timepicker_wrap .meridian, #crear-turno .timepicker_wrap .time, #crear-turno .timepicker_wrap .mins, #crear-turno .timepicker_wrap .meridian {
    float: left;
    width: 28%;
    text-align: center !important;
}
#timeP .timepicker_wrap .time input, #timeP .timepicker_wrap .mins input, #timeP .timepicker_wrap .meridian input, #crear-turno .timepicker_wrap .time input, #crear-turno .timepicker_wrap .mins input, #crear-turno .timepicker_wrap .meridian input {
    padding-right: 0 !important;
}
#timeP .times, #crear-turno .times {
    justify-content: center;
}
#crear-turno .times li {
    width: 70%}
#e-registrados, #suc-creadas {
    text-align: center;
}
#e-registrados .acciones .bot, #suc-creadas .acciones .bot {
    margin: 0 5px;
}
#e-registrados .acciones a, #suc-creadas .acciones a {
    color: 000000;
    cursor: pointer;
}
#e-registrados .disa, #suc-creadas .disa {
    background: #e8e8e8;
}
#e-registrados .disa td, #suc-creadas .disa td {
    pointer-events: none;
    color: #bbb;
}
#e-registrados .disa td.acciones, #suc-creadas .disa td.acciones {
    pointer-events: visible;
}
#e-registrados .disa td.acciones .bot, #suc-creadas .disa td.acciones .bot {
    pointer-events: none !important;
}
#e-registrados .disa td.acciones .bot a, #suc-creadas .disa td.acciones .bot a {
    color: #bbb !important;
}
#e-registrados .toggle.checkbox label:before, #e-registrados .toggle.checkbox label:after, #suc-creadas .toggle.checkbox label:before, #suc-creadas .toggle.checkbox label:after {
    border: 1px solid #ccc !important;
}
#e-registrados .toggle.checkbox label:before, #suc-creadas .toggle.checkbox label:before {
    font-size: 11px;
    padding: 3px 10px 0 0;
    content: 'act';
    text-align: right;
}
#e-registrados .toggle.checkbox label:before, #suc-creadas .toggle.checkbox label:before {
    background: #eb2bed !important;
    color: #fff !important;
}
#e-registrados .ui.toggle.checkbox input:checked ~ .box:before, #e-registrados .ui.toggle.checkbox input:checked ~ label:before, #e-registrados .ui.toggle.checkbox input:focus:checked ~ .box:before, #e-registrados .ui.toggle.checkbox input:focus:checked ~ label:before, #suc-creadas .ui.toggle.checkbox input:checked ~ .box:before, #suc-creadas .ui.toggle.checkbox input:checked ~ label:before, #suc-creadas .ui.toggle.checkbox input:focus:checked ~ .box:before, #suc-creadas .ui.toggle.checkbox input:focus:checked ~ label:before {
    background: rgba(77, 79, 83, 0.5) !important;
}
#e-registrados .ui.toggle.checkbox input:checked ~ .box:before, #e-registrados .ui.toggle.checkbox input:checked ~ label:before, #e-registrados .ui.toggle.checkbox input:focus:checked ~ .box:before, #e-registrados .ui.toggle.checkbox input:focus:checked ~ label:before, #suc-creadas .ui.toggle.checkbox input:checked ~ .box:before, #suc-creadas .ui.toggle.checkbox input:checked ~ label:before, #suc-creadas .ui.toggle.checkbox input:focus:checked ~ .box:before, #suc-creadas .ui.toggle.checkbox input:focus:checked ~ label:before {
    padding: 3px 0 0 10px !important;
    content: "Des" !important;
    text-align: left !important;
}
#recognition-provider-checkbox input:checked ~ label:before {
    font-size: 11px !important;
    background: #1a252f !important;
    color: #fff !important;
    padding: 3px 0 0 10px !important;
    content: "AWS" !important;
    text-align: left !important;
}

#recognition-provider-checkbox label:before {
    font-size: 11px !important;
    background: #0d8ddc !important;
    color: #fff !important;
    padding: 3px 10px 0 0 !important;
    content: "AZ" !important;
    text-align: right !important;
}
#e-registrados .exp, #suc-creadas .exp {
    justify-content: center;
    margin-bottom: 20px;
}
#e-registrados .exp .xls, #suc-creadas .exp .xls {
    color: #96c948;
}
#e-registrados .exp .pdf, #suc-creadas .exp .pdf {
    color: #ec6851;
}
#e-registrados .tur, #suc-creadas .tur {
    margin-top: 10px;
    text-align: right;
}
#e-registrados .tur .default.text, #suc-creadas .tur .default.text {
    color: #eb2bed;
}
#e-registrados .tur .ui.selection.dropdown, #suc-creadas .tur .ui.selection.dropdown {
    padding: .22620476em 2.1em .22620476em .35714286em;
    min-height: 30px !important;
    line-height: 28px !important;
}
#e-registrados .tur .ui.selection.dropdown .dropdown.icon, #suc-creadas .tur .ui.selection.dropdown .dropdown.icon {
    border-left: 1px solid #ccc;
    line-height: 1em !important;
    right: 11px !important;
}
#editar-empleado {
    text-align: center;
}
#editar-empleado li {
    margin-bottom: 10px !important;
}
#editar-empleado .eleven {
    width: 70% !important;
}
#editar-empleado label {
    color: rgb(77, 79, 83);
}
#editar-disponibilidad table .header {
    padding: 0.92857em 0.78571em !important;
    border-left: 1px solid rgba(34, 36, 38, 0.1) !important;
}
#sucursal, #roles {
    text-align: center;
    margin-top: 40px;
}
#sucursal .Csucursal ul, #roles .Csucursal ul {
    justify-content: center;
    margin-bottom: 15px;
}
#editar-sucursal ul, #editar-roles ul {
    justify-content: center;
}
#programacion {
    text-align: center;
    margin-top: 0;
}
#programacion .Sprogram ul {
    justify-content: center;
    margin: 10px 0 10px 0;
}
#programacion .Sprogram .calendar .link {
    cursor: pointer;
}
#programacion .Sprogram .calendar .today {
    background: #efecec;
    color: #0f0f0f !important;
    font-weight: bold;
}
.ui.calendar td.link:hover {
    background: #eb2bed !important;
    color: #fff !important;
}
#week-schedule td.link:hover {
    background: none !important;
    color: black !important;
}
#week-schedule tr.active-range {
    background: #eb2bed !important;
    color: #fff !important;
}
#week-schedule tr.focus-range:hover {
  border: 2px solid #eb2bed !important;
}
#programacion #asig-per {
    border: none !important;
}
#programacion #asig-per .estados th:first-child {
    color: rgb(77, 79, 83) !important;
}
#programacion #asig-per .no-bor {
    border: none !important;
    padding: 0 !important;
}
#programacion #asig-per-int {
    margin-bottom: 10px;
}
#programacion .gp {
    margin-top: 15px;
}
#programacion .exp {
    justify-content: center;
    margin-bottom: 20px;
}
#programacion .exp .xls {
    color: #96c948;
}
#programacion .exp .pdf {
    color: #ec6851;
}
#programacion .enca {
    margin-top: 25px;
    display: block;
}
#resulP {
    margin-top: 15px;
}
#resulP .opciones .redips-drag #names {
    font-size: 12px;
    display: flex;
    padding: 0 1rem;
    gap: 0.3rem;
    align-items: flex-start;
    font-size: 0.8rem;
}
#resulP .opciones .redips-drag #names label {
    display: block;
    margin-right: 3px;
}
#resulP .opciones .redips-drag #names .info {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#resulP .opciones .redips-drag .pendientes {
    float: right;
    display: block;
}
#resulP .opciones .redips-drag .pendientes .header {
    padding: 0 10px;
    font-size: 13px;
}
#resulP .opciones .redips-drag .pendientes .addemp li {
    margin-bottom: 8px;
}
#resulP .opciones .redips-drag .pendientes .addemp li label {
    color: #eb2bed;
    font-size: 13px;
    font-weight: 600;
}
#resulP .opciones .redips-drag .pendientes .addemp li label:after {
    color: #eb2bed !important;
}
#resulP .opciones .redips-drag .pendientes .addemp li .ui.checkbox input:checked ~ .box:before, #resulP .opciones .redips-drag .pendientes .addemp li .ui.checkbox input:checked ~ label:before {
    border: none !important;
}
#resulP .opciones .redips-drag .pendientes .menu {
    border-radius: 0 !important;
}
#resulP .opciones .redips-drag .pendientes .menu .item {
    display: none;
}
#resulP .opciones .redips-drag .act {
    display: none !important;
}
#resulP .opciones .redips-drag i {
    display: block;
}
#resulP .opciones .redips-drag .down {
    margin-top: 7px;
}
#resulP .opciones .redips-drag .circular {
    display: block;
    background: #fff;
    box-shadow: none;
    font-family: "Source Sans Pro";
    font-size: 11px;
    font-weight: 700;
}
#resulP .shift-container {
    width: 100%;
    height: 6rem;
    max-width: 13.5rem;
    position: relative;
    padding: unset;
}

#resulP .redips-drag.monthly-view {
  max-width: 3.2rem;
}

.disabled-day {
  cursor: not-allowed !important;
  background-image: linear-gradient(
    135deg,
    #d6d6d6 3.85%,
    #ffffff 3.85%,
    #ffffff 50%,
    #d6d6d6 50%,
    #d6d6d6 53.85%,
    #ffffff 53.85%,
    #ffffff 100%
  );
  background-size: 13px 13px;
}
#resulP .redips-drag #names label, #names label {
    display: block;
    /* margin-right: 3px; */
    text-transform: none;
    cursor: move;
}
#resulP .redips-drag #names .info {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/*#resulP .redips-drag .act {
    display: block !important;
    float: right;
    margin-top: 2px;
}
*/#resulP .redips-drag .act a {
    color: 000000;
    cursor: pointer;
}
#resulP .redips-drag .act i {
    font-size: 8px;
}
#resulP .redips-drag .pendientes {
    display: none;
}
#resulP #agTu {
    cursor: pointer;
}
#resulP .nop {
    background: #fff !important;
    color: #fff;
}
#resulP .good {
    background: #eb2bed !important;
    color: #fff !important;
    text-align: center;
    vertical-align: middle;
}
#resulP .good i {
    float: none !important;
    cursor: default !important;
    font-size: 1.1em;
}
#resulP .two {
    width: 9.5% !important;
}
#resulP .wrong {
    background: #ef4945 !important;
}
#resulP .wrong .redips-drag {
    color: #fff !important;
    height: 4rem;
    display: flex;
    align-items: center;
}
#resulP .mas {
    text-align: center;
     cursor: pointer !important;
}
#resulP .mas a {
    font-size: 17px;
    color: #eb2bed;
}

#resulP td.one.wide{
  padding: unset;
  height: 0rem;
  position: relative;
}

.shift-convention {
  width:100px;
  height:30px;
  border:1px solid rgba(192, 192, 192, 1);
  border-radius: 3px;
  display: inline-block;
  margin: 5px;
  color: black;
}

.footfall-convention {
  width: 13px;
  height:13px;
  display: inline-block;
  margin-right: 5px;
}

.staff-count {
  background-color: #FFF7CF;
  border:1px solid rgba(192, 192, 192, 1);
  border-radius: 2px;
}

.open-shifts {
  background-color: #F54359;
  border:1px solid rgba(192, 192, 192, 1);
  border-radius: 2px;
}

.scheduled-shifts {
  background-color: #FFFFFF;
  border:1px solid rgba(192, 192, 192, 1);
  border-radius: 2px;
}

.actual-footfall {
  background-color: #60E6D0;
  border:1px solid rgba(192, 192, 192, 1);
  border-radius: 2px;
}

.forecasted-footfall {
  border-bottom: dashed 1px #000000;
}

.white-icon {
  color: #FFFFFF !important;
}

.magenta-icon {
  color: #EB2BED !important;
}

#names .shift-length{
  position: absolute;
  top: 4%;
  right: 4%;
  padding: 0.2rem;
}

.day-lock {
  position: absolute;
  top: 7%;
  left: 2%;
  z-index: 1;
  /* padding: 12%; */
}

#Cturnos {
    text-align: center;
    margin-top: 20px;
}
#Cturnos .times {
    margin: 20px 0;
}
#Cturnos .hor {
    width: 4.166%;
    font-size: 10px !important;
    padding: 0;
    border-right: 1px solid rgba(34, 36, 38, 0.1);
    height: 39px;
    line-height: 39px;
}
#Cturnos .hor:last-child {
    border: none;
}
#Cturnos .eleg {
    background: #eb2bed;
}
#Cturnos .three {
    vertical-align: middle;
}
#Cturnos .three i {
    float: right;
    cursor: pointer;
    font-weight: 400;
    font-size: 15px !important;
}
#Cturnos .three a {
    color: rgb(77, 79, 83);
}
#Cturnos .three a i {
    float: none !important;
}
#Cturnos .slideH {
    padding: 0 !important;
}
#Cturnos .edit-clock {
    cursor: pointer;
}
#Cturnos .exp {
    justify-content: center;
    margin-bottom: 20px;
}
#Cturnos .exp .xls {
    color: #96c948;
}
#Cturnos .exp .pdf {
    color: #ec6851;
}
#Cturnos #turnosT {
    margin-bottom: 0;
}
#Cturnos .crearT {
    margin-top: 0;
    border-top: none;
}
#Lturnos {
    text-align: center;
    margin-top: 20px;
}
#Lturnos .times {
    margin: 20px 0;
}
#Lturnos .hor {
    width: 4.166%;
    font-size: 10px !important;
    padding: 0;
    border-right: 1px solid rgba(34, 36, 38, 0.1);
    height: 39px;
    line-height: 39px;
}
#Lturnos .hor:last-child {
    border: none;
}
#Lturnos .eleg {
    background: #D1D2D5;
}
#Lturnos .three {
    vertical-align: middle;
}
#Lturnos .three i {
    float: right;
    cursor: pointer;
    font-weight: 400;
    font-size: 15px !important;
}
#Lturnos .three a {
    color: rgb(77, 79, 83);
}
#Lturnos .three a i {
    float: none !important;
}
#Lturnos .slideH {
    padding: 0 !important;
}
#Lturnos .edit-clock {
    cursor: pointer;
}
#Lturnos .exp {
    justify-content: center;
    margin-bottom: 20px;
}
#Lturnos .exp .xls {
    color: #96c948;
}
#Lturnos .exp .pdf {
    color: #ec6851;
}
#Lturnos #turnosT {
    margin-bottom: 0;
}
#Lturnos .crearT {
    margin-top: 0;
    border-top: none;
}
#editar-zon-turnos {
    max-width: 625px;
    margin: 0 auto 20px auto;
}
#editar-zon-turnos .dias {
    margin-top: 25px;
}
#editar-zon-turnos .dias label {
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
    color: rgb(77, 79, 83) !important;
}
#editar-zon-turnos .dias ul {
    justify-content: center;
}
#editar-zon-turnos .dias ul li {
    width: 10%;
    text-align: center;
    margin: 0 8px;
}
#editar-zon-turnos .dias ul li a {
    border: 1px solid rgba(34, 36, 38, 0.15);
    display: block;
    padding: 10px;
    cursor: pointer;
    color: #eb2bed;
}
#editar-zon-turnos .dias ul li .no {
    background: transparent;
}
#editar-zon-turnos .dias ul li .si {
    background: #eb2bed;
    color: #fff;
}
#editar-zon-turnos .inputs, #editar-zon-turnos .ui.selection.dropdown {
    border: 1px solid #eb2bed;
    font-family: "Source Sans Pro";
    border-radius: 3px;
    font-weight: 400;
    box-shadow: 0 0 1px 0 #eb2bed;
    text-shadow: none !important;
    margin-bottom: 10px;
}
#editar-zon-turnos .inputs:focus, #editar-zon-turnos .ui.selection.dropdown:focus {
    border: 1px solid #eb2bed !important;
}
#editar-zon-turnos .ui.selection.dropdown {
    color: rgb(77, 79, 83) !important;
    text-shadow: none;
    font-size: 14px;
}
#editar-zon-turnos .ui.selection.dropdown .ui.label {
    background: #f3f2f2 !important;
    padding: 10px 15px !important;
    margin: 4px !important;
}
#editar-zon-turnos .ui.selection.dropdown .ui.label i {
    font-size: inherit !important;
    color: #eb2bed !important;
}
#editar-zon-turnos .ui.selection.dropdown .menu.transition.visible {
    box-shadow: 0 0 1px 0 #eb2bed;
    border: 1px solid #eb2bed;
}
#editar-zon-turnos .ui.selection.dropdown .dropdown.icon {
    border-left: 1px solid #eb2bed;
    line-height: 1.45em !important;
    border-bottom: 1px solid #eb2bed;
    right: 9px !important;
}
#editar-zon-turnos .toggle.checkbox label {
    color: rgb(77, 79, 83);
    font-size: 12px;
    font-weight: 600 !important;
    margin-bottom: 6px !important;
}
#editar-zon-turnos .toggle.checkbox label:before, #editar-zon-turnos .toggle.checkbox label:after {
    border: 1px solid #ccc !important;
}
#editar-zon-turnos .zona {
    width: 100%}
#editar-zon-turnos .zona label {
    text-align: left;
}
#cuenta {
    text-align: center;
    margin-top: 40px;
}
#cuenta .opc {
    justify-content: center;
    border: none;
    margin-bottom: 30px;
}
#cuenta .opc .item {
    cursor: pointer;
}
#cuenta .opc .item.active, #smart-scheduling-options .opc .item.active {
    border-radius: 0 !important;
    border: 1px solid #D4D4D5;
    color: #f54359 !important;
}
#cuenta .opc label {
    text-transform: uppercase;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}
#cuenta .form ul, .form ul.site-selector {
    justify-content: center;
    margin-bottom: 15px;
}
#cuenta .crear {
    margin-top: 30px;
}

#smart-scheduling-options .opc {
  justify-content: center;
  border: none;
  text-align: center;
}

.opc .item {
  cursor: pointer;
}

#smart-scheduling-options .opc {
  justify-content: center;
  border: none;
}

#smart-scheduling-options .opc a {
  text-transform: uppercase !important;
  cursor: pointer !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.dashboard {
    margin-top: 40px;
}
.dashboard.first .izquierda {
    width: 49%;
    float: left;
}
.dashboard.second .izquierda  {
    width: 100%;
    float: left;
}
.dashboard.third .izquierda  {
    width: 100%;
    float: left;
}
.dashboard .izquierda #myChart {
    margin-top: 10px;
}
.dashboard.first .derecha {
    width: 49%;
    float: right;
}
.dashboard.second .derecha {
    width: 39%;
    float: right;
}
.dashboard .derecha p {
    margin: 20px 0;
}
.dashboard .card {
    padding: 20px;
    min-height: 550px;
}
.dashboard .card .action {
    text-align: center;
    margin-top: 20px;
}
.dashboard .card .action a {
    text-transform: uppercase;
    color: #eb2bed;
    text-decoration: underline;
    font-size: 14px;
}
.dashboard h2 {
    text-transform: uppercase;
    color: rgb(77, 79, 83);
    font-family: "Source Sans Pro";
    text-align: center;
    font-weight: 600;
    margin-bottom: 15px;
}
.dashboard .sobre.gst {
    background: rgba(77, 79, 83, 0.9);
}
.dashboard .sobre.cmpl {
    background: rgba(77, 79, 83, 0.9);
}
.dashboard .sobre.pfm {
    background: rgba(26, 168, 170, 0.9);
}
.dashboard .sobre {
    background: rgba(236, 73, 69, 0.9);
    color: #fff;
    height: 100px;
}
.dashboard .sobre li {
    text-align: center;
    width: 30%;
    line-height: 30px;
    height: 100px;
}
.dashboard .sobre.gst li:first-child {
    background: rgb(77, 79, 83);
}
.dashboard .sobre.cmpl li:first-child {
    background: rgb(77, 79, 83);
}
.dashboard .sobre.pfm li:first-child {
    background: rgb(26, 168, 170);
}
.dashboard .sobre li:first-child {
    width: 10%;
    background: rgb(236, 73, 69);
    line-height: 100px;
}
.dashboard .sobre li:first-child i {
    font-size: 20px;
    margin: 0;
}
.dashboard .sobre li label {
    display: block;
    text-transform: uppercase;
    margin-top: 15px;
}
.dashboard .sobre li span {
    font-size: 30px;
}
.dashboard .prog li {
    width: 90%;
    height: 300px;
}
.dashboard .prog li:first-child {
    width: 10%;
    background: #e2e0e0;
    text-align: center;
    line-height: 300px;
}
.dashboard .prog li:first-child i {
    font-size: 20px;
    margin: 0;
    color: rgb(77, 79, 83);
}
.dashboard .prog table {
    padding-left: 10px;
}
.dashboard .prog table th {
    text-transform: uppercase;
    font-size: 11px;
}
.dashboard .prog table td {
    font-size: 13px;
}
#data {
    margin-bottom: 30px;
}
#data ul {
    justify-content: center;
}
#data ul li {
    width: 23.9%;
    margin: 0 10px;
    text-align: center;
    color: #fff;
    padding: 20px 15px 20px 15px;
}
.usage-metrics {
  font-size: 60px !important;
  color: #767980;
}
.incentive-metrics {
  font-size: 40px !important;
  color: #767980;
}
.form ul {
  margin-bottom: 15px;
}

.label-info {
  background-color: #767980;
}
.label-info-magenta {
  background-color: #DE14E2;
}

@media (max-width: 1500px) {
    #data ul li {
    width: 23.8%}
}@media (max-width: 1400px) {
    #data ul li {
    width: 23.7%}
}@media (max-width: 1300px) {
    #data ul li {
    width: 23.6%}
}@media (max-width: 1200px) {
    #data ul li {
    width: 23.5%}
}#data ul li:first-child {
    margin-left: 0;
}
#data ul li:last-child {
    margin-right: 0;
}
#data ul li i {
    font-size: 30px;
}
#data ul li span {
    display: block;
    font-size: 60px;
    margin: 20px 0;
}
#data ul li label {
    text-transform: uppercase;
    font-weight: normal;
}
#data ul .one {
    background: #f54359;
}
#data ul .two {
    background: #4D4F53;
}
#data ul .three {
    background: #eb2bed;
}
#data ul .four {
  background: #ffffff;
  color: #f54359;
}

.kt-widget11 .table-responsive {
  overflow-y: hidden; }

.kt-widget11 .table thead > tr > td {
  padding: 0;
  vertical-align: top;
  border-top: 0;
  font-weight: 500;
  color: #74788d; }

.kt-widget11 .table tbody > tr {
  border-bottom: 1px dashed #ebedf2; }

.kt-widget11 .table tbody > tr > td {
border: 0;
padding-left: 0;
padding-right: 0.5rem;
padding-top: 20px;
vertical-align: top;
color: #595d6e; }
.kt-widget11 .table tbody > tr > td > label {
  right: 0;
  top: 0.5rem;
  vertical-align: top; }
.kt-widget11 .table tbody > tr > td .kt-widget11__chart {
  position: relative;
  margin-top: -0.6rem; }
.kt-widget11 .table tbody > tr > td:last-child {
  padding-right: 0; }
.kt-widget11 .table tbody > tr .kt-widget11__title {
font-size: 1.1rem;
font-weight: 500;
display: block;
color: #595d6e;
-webkit-transition: color .3s ease;
transition: color .3s ease; }
.kt-widget11 .table tbody > tr .kt-widget11__title:hover {
  color: #5d78ff;
  -webkit-transition: color .3s ease;
  transition: color .3s ease; }
.kt-widget11 .table tbody > tr .kt-widget11__title > span {
  color: #74788d; }
.kt-widget11 .table tbody > tr .kt-widget11__sub {
display: block;
font-size: 1rem; }
.kt-widget11 .table tbody > tr:last-child {
border: 0; }

#temperature {
    max-width: 100%;
    font-size: 16px !important;
}

#rekog-modal .toggle.checkbox label:before {
    font-size: 12px;
    padding: 3px 12px 0 0;
    content: 'NO';
    text-align: right;
    background: #eb2bed !important;
    color: #fff !important;
}

#rekog-modal .ui.toggle.checkbox input:checked ~ .box:before, #rekog-modal .ui.toggle.checkbox input:checked ~ label:before {
    font-size: 12px;
    padding: 3px 0 0 12px !important;
    content: "SI" !important;
    text-align: left !important;
    background: #ea3f3f !important;
}

#protocolo, #confirm {
  text-align: center !important;
  margin-top: 0px !important;
}

#saludo {
  margin: 10px 0 0 0 !important;
}

.home-calendar {
  margin-right: 3rem;
  display: flex;
  justify-content: flex-end;
}

.home-calendar-input{
  width: 130px !important;
  border-radius: 7px !important;
}

.home-calendar-icon{
  width: 1.9em !important;
}

.visible{
  visibility: visible !important;
}

.hidden {
  visibility: hidden !important;
}

.password-container{
  position: relative;
}

#toggle-password {
  user-select: none;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 300;
  padding: 0;
  /* Display at the top right of the container */
  position: absolute;
  top: 0.8rem;
  right: 0;
}

#settings-message {
  width: 50% !important;
  margin: auto !important;
}

.salmon-50 {
  background-color: #FEE6E8 !important;
  color: #767980 !important;
}

.salmon-100 {
  background-color: #FCCCD1 !important;
  color: #767980 !important;
}

.salmon-300 {
  background-color: #F8808C !important;
  color: #FFFFFF !important;
}

.salmon-500 {
  background-color: #F54359 !important;
  color: #FFFFFF !important;
}

.salmon-900 {
  background-color: #D20C20 !important;
  color: #FFFFFF !important;
}

.gray-50 {
  background-color: #E8E9EA !important;
  color: #767980 !important;
}

.gray-500 {
  background-color: #767980 !important;
  color: #FFFFFF !important;
}

.gray-900 {
  background-color: #393A3E !important;
  color: #FFFFFF !important;
}

.magenta-50 {
  background-color: #FCE5FD !important;
  color: #767980 !important;
}

.magenta-100 {
  background-color: #F27BF4 !important;
  color: #FFFFFF !important;
}

.magenta-500 {
  background-color: #DE14E2 !important;
  color: #FFFFFF !important;
}

.magenta-900 {
  background-color: #5F0861 !important;
  color: #FFFFFF !important;
}

.purple-100 {
  background-color: #C3A1FA !important;
  color: #FFFFFF !important;
}

.purple-500 {
  background-color: #8643F5 !important;
  color: #FFFFFF !important;
}

.purple-900 {
  background-color: #34195E !important;
  color: #FFFFFF !important;
}

.orange-100 {
  background-color: #F8A472 !important;
  color: #FFFFFF !important;
}

.orange-500 {
  background-color: #F58643 !important;
  color: #FFFFFF !important;
}

.orange-900 {
  background-color: #5E3419 !important;
  color: #FFFFFF !important;
}

.turquoise-100 {
  background-color: #B8F4EA !important;
  color: #767980 !important;
}

.turquoise-500 {
  background-color: #27DEBF !important;
  color: #FFFFFF !important;
}

.turquoise-900 {
  background-color: #0E584C !important;
  color: #FFFFFF !important;
}

.turquoise-900-font {
  color: #0E584C !important;
  font-weight: bold !important;
}

.yellow-100 {
  background-color: #FFF7CF !important;
  color: #767980 !important;
}

.yellow-300 {
  background-color: #FFEB86 !important;
  color: #767980 !important;
}

.yellow-500 {
  background-color: #FFDE3C !important;
  color: #767980 !important;
}

.clonk-red {
  color:  #F54359 !important;;
}

.clonk-yellow {
  color: #FFD816 !important;
}

.clonk-green {
  color: #1EC2A7 !important;
}

.ui.dropdown .menu>.item.schedule-view-item {
  font-size: 13px !important;
}
.ui.selection.dropdown .menu>.item.schedule-view-item {
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

a.inactive {
  pointer-events: none;
  cursor: default;
}

#employee-info .fields, #employee-info .field {
  justify-content: center !important;
  text-align: left !important;
}

#employee-info input {
  height: 38px !important;
  font-size: 14px !important;
}

.photo-size {
  width: 140px;
  height: 140px;
  border-radius: 5px;
  object-fit: cover;
}
.photo-icon-size {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  object-fit: cover;
}
#clock-in-comments {
  background-color: #B8F4EA;
  margin: 10px !important;
  padding: 15px !important;
  border: 1px #27DEBF none;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
}
#modal-notes {
  margin: 10px !important;
  padding: 15px !important;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
}
#shift-comments-box, #filial {
  justify-content: center;
  display: grid;
}
