/*
* Fix para cambiar el color del place holder de los selects
*/
.md-no-underline span  {
    color: rgb(255, 255, 255);  
  }

#loginCard {
    width:30%; 
    bottom: 0; 
    top: 0; 
    right:0; 
    position: absolute; 
    background:#005CB2;
}

#loginFieldsContainer {
    height: 100%; 
    overflow-y: auto
}

@media only screen and (max-width: 600px) {

    #loginCard{
        width: 90%;
        height: 100%; 
        bottom: 0; 
        top: 0; 
        right:0; 
        position: relative; 
        background:#005CB2;
    }
}

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

@-webkit-keyframes loading {
    0% {
        -ms-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@-moz-keyframes loading {
    0% {
        -ms-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@-o-keyframes loading {
    0% {
        -ms-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
@keyframes loading {
    0% {
        -ms-transform: rotate(0);
        -webkit-transform: rotate(0);
        transform: rotate(0)
    }
    100% {
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-family: inherit;
    vertical-align: baseline;
    /*user-select: all;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;*/
    text-shadow: none !important;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent
}
header,
footer,
section,
nav,
article {
    display: block
}
body {
    -webkit-touch-callout: none;
    -webkit-text-size-adjust: none;
    /*-webkit-user-select: none;*/
    font-size: 1em;
    font-family: Helvetica, Arial, sans-serif;
    color: #424242
}
body p {
    font-size: 0.9em
}
body li,
body ol,
body ul {
    list-style: none
}
html {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
html *,
html *:before,
html *:after {
    box-sizing: inherit
}
input:focus,
textarea:focus {
    outline: none;
    box-shadow: none
}
.floatL {
    float: left
}
.floatR {
    float: right
}
.floatContainer {
    overflow: hidden
}
.ico {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 25px;
    height: 25px
}
.ico.ico-close span {
    display: block;
    width: 80%;
    background: white;
    height: 3px;
    position: absolute;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em
}
.ico.ico-close span:last-child {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg)
}
.ico.ico-checkbox {
    background: url(../img/icons/ico-checkbox-off.png) no-repeat center center;
    background-size: 100%
}
.ico.ico-prev {
    background: url(../img/icons/ico-prev.png) no-repeat center center;
    background-size: 100%
}
.ico.ico-next {
    background: url(../img/icons/ico-next.png) no-repeat center center;
    background-size: 100%
}
.ico.ico-plus {
    background: url(../img/icons/ico-plus.png) no-repeat center center;
    background-size: 100%
}
.ico.ico-minus {
    background: url(../img/icons/ico-minus.png) no-repeat center center;
    background-size: 100%
}
.ico.ico-list {
    background: url(../img/icons/ico-list-off.png) no-repeat center center;
    background-size: 100%
}
.ico.ico-list.active {
    background: url(../img/icons/ico-list-on.png) no-repeat center center;
    background-size: 100%
}
.ico.ico-agenda {
    background: url(../img/icons/ico-agenda-off.png) no-repeat center center;
    background-size: 100%
}
.ico.ico-agenda.active {
    background: url(../img/icons/ico-agenda-on.png) no-repeat center center;
    background-size: 100%
}
.ico.ico-menu {
    background: url(../img/icons/ico-menu.png) no-repeat center center;
    background-size: 100%
}
.ico.ico-menu.ico-back {
    background: url(../img/icons/ico-arrow-left.png) no-repeat center center;
    background-size: 100%
}
.btn {
    display: inline-block;
    padding: 0.4em 1em;
    font-size: 1.3em;
    text-align: center;
    border: none;
    cursor: pointer;
    margin: 1em 0;
    transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -webkit-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    -moz-transition: all 400ms ease;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em
}
.btn .ico {
    margin-right: 1em
}
.btn.square {
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0
}
.btn.btn-white {
    background: white;
    color: #005CB2
}
.btn.btn-green {
    color: white;
    background: #18de5e
}
.btn.btn-green:hover,
.btn.btn-green:active {
    background: #005CB2
}
.btn.btn-blue {
    color: white;
    background: #005CB2
}
.btn.btn-blue:hover,
.btn.btn-blue:active {
    background: #18de5e
}
.btn.btn-border-green {
    color: #18de5e;
    border: 1px solid #18de5e;
    background: white
}
.btn.btn-border-green:hover,
.btn.btn-border-green:active {
    color: white;
    background: #18de5e
}
.btn.btn-border-green.disabled,
.btn.btn-border-green.disabled:hover,
.btn.btn-border-green.disabled:active {
    border-color: #ccc;
    color: #ccc;
    background: white
}
.btn.btn-border-blue {
    color: #005CB2;
    border: 1px solid #005CB2;
    background: white;
}
.btn.btn-border-blue:hover,
.btn.btn-border-blue:active {
    color: white;
    background: #005CB2
}

.btn.btn-border-blue-inventory-enter {
    color: #005CB2;
    border: 1px solid #005CB2;
    background: white;
    width: 250px; 
    height: 200px; 
    background-image: url(../img/icons/icon-enter.svg); 
    background-size: 240px 190px;
}
.btn.btn-border-blue-inventory-enter:hover,
.btn.btn-border-blue-inventory-enter:active {
    color: white;
    background: #005CB2;
    width: 260px; 
    height: 210px; 
    background-image: url(../img/icons/icon-enter-hover.svg); 
    background-size: 250px 200px;
}

.btn.btn-border-green-inventory-exit {
    color: #18de5e;
    border: 1px solid #18de5e;
    background: white;
    width: 250px; 
    height: 200px; 
    background-image: url(../img/icons/icon-exit.svg); 
    background-size: 240px 190px;
}
.btn.btn-border-green-inventory-exit:hover,
.btn.btn-border-green-inventory-exit:active {
    color: white;
    background: #18de5e;
    width: 260px; 
    height: 210px; 
    background-image: url(../img/icons/icon-exit-hover.svg); 
    background-size: 250px 200px;
}

entrance-mode {
    color: #005CB2;
}

exit-mode {
    color: #18de5e;
}

.btn.btn-border-red {
    color: #ff0030;
    border: 1px solid #ff0030;
    background: white
}
.btn.btn-border-red:hover,
.btn.btn-border-red:active {
    color: white;
    background: #ff0030
}

.btn-rema-action {
    border-radius: 13px;
    color: rgb(66, 66, 66);
    border: 1px solid rgb(66, 66, 66);
    background: white;
    height: 26px;
    font-size: 11px; 
    bottom: 5px; 
    position: relative;
}
.btn-rema-action:hover,
.btn-rema-action:active {
    color: white;
    background: rgb(66, 66, 66);
}

.btn-rema-disabled {
    border-radius: 13px;
    color: rgb(189, 189, 189);
    border: 1px solid rgb(189, 189, 189);
    background: white;
    height: 26px;
    font-size: 11px; 
    bottom: 5px; 
    position: relative;
}


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

.btn.btn-border-gray {
    color: gray;
    border: 1px solid gray;
    background: white
}
.btn.btn-border-gray:hover,
.btn.btn-border-gray:active {
    color: white;
    background: gray
}

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

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

.btn.btn-border-magent {
    color: magenta;
    border: 1px solid magenta;
    background: white
}
.btn.btn-border-magent:hover,
.btn.btn-border-magent:active {
    color: white;
    background: magenta
}

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

textarea:focus, input:focus, button:focus{
    outline: none;
}

.btn.btn-border-yellow {
    color: #cfa004;
    border: 1px solid #cfa004;
    background: white
}
.btn.btn-border-yellow:hover,
.btn.btn-border-yellow:active {
    color: white;
    background: #cfa004
}

.btn.btn-border-magentus {
    color: #b104cf;
    border: 1px solid #b104cf;
    background: white
}
.btn.btn-border-magentus:hover,
.btn.btn-border-magentus:active {
    color: white;
    background: #b104cf
}


a {
    text-decoration: underline
}
.select-style {
    display: block;
    position: relative;
    margin: 1em 0;
    border-bottom: 1px solid white
}
.select-style select {
    color: white;
    font-size: 1.2em;
    padding: 5px 8px;
    width: 110%;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none
}
.select-style select:focus {
    outline: none;
    
    box-shadow: 0 0 3pt 2pt rgb(255, 255, 255);    
    
}
.select-style:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    top: 1em;
    right: 0.5em;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid white
}
.modal {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.6)
}
.modal .modal-inner {
    background: white;
    width: 30%;
    top: 20%;
    left: 50%;
    margin: 0 0 0 -15%;
    padding: 1em;
    text-align: center;
    position: absolute;
    border-radius: 1em;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em
}
.modal .modal-inner .modal-navigation {
    margin-bottom: 1em
}
.modal .modal-inner .modal-navigation ul {
    border: 1px solid #18de5e;
    overflow: hidden;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em
}
.modal .modal-inner .modal-navigation ul li {
    cursor: pointer;
    display: block;
    width: 50%;
    padding: 1em;
    font-size: 0.9em;
    color: #18de5e
}
.modal .modal-inner .modal-navigation ul li:hover,
.modal .modal-inner .modal-navigation ul li.active {
    background: #18de5e;
    color: white
}
.modal .modal-inner .modal-navigation-surgery {
    margin-bottom: 1em
}
.modal .modal-inner .modal-navigation-surgery ul {
    border: 1px solid #005CB2;
    overflow: hidden;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em
}
.modal .modal-inner .modal-navigation-surgery ul li {
    cursor: pointer;
    display: block;
    width: 33.3%;
    padding: 1em;
    font-size: 0.9em;
    color: #005CB2
}
.modal .modal-inner .modal-navigation-surgery ul li:hover,
.modal .modal-inner .modal-navigation-surgery ul li.active {
    background: #005CB2;
    color: white
}
.modal .modal-inner .close-modal {
    position: absolute;
    right: 1em;
    cursor: pointer
}
.modal .modal-inner h4 {
    color: #005CB2;
    font-weight: bold;
    text-align: left;
    margin: 0 0 3em;
    text-transform: uppercase
}
.modal .modal-inner p {
    font-size: 0.9em;
    margin: 0 0 1.5em
}
.modal .modal-inner p span {
    font-weight: bold;
    color: #005CB2
}
.modal .modal-inner textarea,
.modal .modal-inner input {
    display: block;
    padding: 0.5em;
    width: 90%;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    margin: 1em auto
}
.modal .modal-inner input {
    width: 20%;
    text-align: center
}
.modal .modal-inner .btn {
    min-width: 150px;
    margin: 0.5em
}
.modal .modal-inner ul li {
    border-bottom: 1px solid #efefef
}
.modal .modal-inner ul li:last-child {
    border: none
}
.modal .modal-inner ul li input,
.modal .modal-inner ul li span {
    display: inline-block
}
.modal .modal-inner ul li span {
    margin: 0 1em;
    font-weight: bold
}
.modal .modal-inner ul.modal-calendar-list.expertise {
    display: none
}
.modal .modal-inner ul.modal-calendar-list li {
    overflow: hidden;
    font-size: 0.9em;
    padding: 1em
}
.modal .modal-inner ul.modal-calendar-list li h5 {
    float: left;
    width: 20%;
    color: #005CB2;
    font-weight: bold
}
.modal .modal-inner ul.modal-calendar-list li div {
    width: 80%;
    float: right;
    text-align: left;
    position: relative;
    overflow: hidden
}
.modal .modal-inner ul.modal-calendar-list li div p {
    margin: 0 0 0.3em
}
.modal .modal-inner ul.modal-calendar-list li div p span {
    font-weight: normal;
    color: #ccc
}
.modal .modal-inner ul.modal-calendar-list li div p a {
    font-weight: bold;
    color: #18de5e;
    cursor: pointer
}
.modal .modal-inner ul.modal-calendar-list li div p+span,
.modal .modal-inner ul.modal-calendar-list li div p+span+span {
    display: block;
    font-weight: normal;
    color: #ccc;
    margin: 0 0 0.3em
}
.login {
    height: 100vh;
    background: url(../img/bg.png) no-repeat center center;
    background-size: cover
}
.login form {

    position : absolute;
    overflow : auto;
    top : 0px;
    bottom : 0px;
    border-top : 0px solid;
    border-bottom : 0px solid;

    color: white;
    background: #005CB2;
    
    
    
    right: 0;
    min-width: 30%;
    padding: 2em
}
.login form .logo {
    height: 100px;
    background: url(../img/alveo_powered_logo.svg) no-repeat left center;
    background-size: auto 100%;
    margin: 3em 0
}
.login form h3 {
    font-size: 1.4em;
    margin-bottom: 3em
}
.login form input {
    color: white;
    display: block;
    background: none;
    border: none;
    margin: 2em 0;
    font-size: 1.2em;
    padding: 0.3em;
    min-width: 80%;
    border-bottom: 1px solid white
}
.login form input:focus,
.login form input:active {
    outline: none;
    box-shadow: none
}
.login form input::-webkit-input-placeholder {
    color: white
}
.login form input::-moz-placeholder {
    color: white
}
.login form input:-ms-input-placeholder {
    color: white
}
.login form input:-moz-placeholder {
    color: white
}
.login form .btn {
    min-width: 40%;
    margin-right: 1em
}
.login form .btn+a {
    color: white
}
.login form .select-style {
    width: 80%
}
#header {
    position: fixed;
    z-index: 900;
    left: 0;
    right: 0;
    top: 0;
    padding: 0.5em 0;
    background: #005CB2;
    transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -moz-transition: all 500ms ease
}
#header .ico {
    margin: 0 1em 0
}
#header p {
    display: inline-block;
    vertical-align: middle;
    color: white;
    margin: 0;
    font-size: 0.8em
}
#header .btn {
    top: 0;
    right: 0;
    position: absolute;
    margin: 0
}
#header .btn.btn-green:hover,
#header .btn.btn-green:active {
    background: #18de5e
}
#header.navigation-open {
    left: 25%
}
.sub-header {
    margin: 0 0 2em;
    padding-top: 1em
}
.sub-header p {
    padding: 1em
}
.sub-header p span {
    font-size: 1em;
    color: #005CB2
}
.sub-header ul li {
    font-size: 0.9em;
    float: left;
    padding: 0 0.5em;
    margin: 0 0.5em;
    border-right: 1px solid #005CB2
}
.sub-header ul li span {
    color: #005CB2
}
.sub-header ul li:last-child {
    border: none
}
.sub-header ul li .btn {
    margin: -0.5em 0 0
}
.sub-header ul li .select-style {
    margin: 0 2em 0 0;
    border-bottom: 1px solid #005CB2
}
.sub-header ul li .select-style select {
    color: #005CB2;
    font-weight: bold;
    font-size: 0.9em;
    padding: 0
}
.sub-header ul li .select-style:after {
    top: 8px;
    right: -1.5em;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #005CB2
}
#navigation {
    position: fixed;
    z-index: 1;
    left: -100%;
    top: 0;
    bottom: 0;
    width: 25%;
    padding: 1em;
    background: #616161;
    overflow-y: scroll;
    transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -moz-transition: all 500ms ease
}
#navigation .ico-close {
    display: none;
    cursor: pointer
}
#navigation .logo {
    height: 70px;
    background: url(../img/alveo_powered_logo.svg) no-repeat center center;
    background-size: auto 100%;
    margin: 0 0 2em
}
#navigation .main-navigation>li {
    border-bottom: 1px solid #424242
}
#navigation .main-navigation>li a {
    cursor: pointer;
    display: block;
    padding: 0.7em 0.5em;
    padding-left: 3em;
    color: white;
    text-decoration: none
}
#navigation .main-navigation>li a:hover,
#navigation .main-navigation>li a:active,
#navigation .main-navigation>li a.active {
    color: #18de5e
}
#navigation .main-navigation>li a:hover.ico-user,
#navigation .main-navigation>li a:active.ico-user,
#navigation .main-navigation>li a.active.ico-user {
    background: url(../img/icons/ico-user-on.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a:hover.ico-agenda,
#navigation .main-navigation>li a:active.ico-agenda,
#navigation .main-navigation>li a.active.ico-agenda {
    background: url(../img/icons/ico-calendar-on.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a:hover.ico-agenda-execution,
#navigation .main-navigation>li a:active.ico-agenda-execution,
#navigation .main-navigation>li a.active.ico-agenda-execution {
    background: url(../img/icons/ico-date-on.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a:hover.ico-hospital,
#navigation .main-navigation>li a:active.ico-hospital,
#navigation .main-navigation>li a.active.ico-hospital {
    background: url(../img/icons/ico-hospital-on.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a:hover.ico-medicine,
#navigation .main-navigation>li a:active.ico-medicine,
#navigation .main-navigation>li a.active.ico-medicine {
    background: url(../img/icons/ico-medicine-on.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a:hover.ico-doctor,
#navigation .main-navigation>li a:active.ico-doctor,
#navigation .main-navigation>li a.active.ico-doctor {
    background: url(../img/icons/ico-doctor-on.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a:hover.ico-seller,
#navigation .main-navigation>li a:active.ico-seller,
#navigation .main-navigation>li a.active.ico-seller {
    background: url(../img/icons/ico-seller-on.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a:hover.ico-payment,
#navigation .main-navigation>li a:active.ico-payment,
#navigation .main-navigation>li a.active.ico-payment {
    background: url(../img/icons/ico-payment-on.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a:hover.ico-warehouse,
#navigation .main-navigation>li a:active.ico-warehouse,
#navigation .main-navigation>li a.active.ico-warehouse {
    background: url(../img/icons/ico-warehouse-on.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a:hover.ico-catalogue,
#navigation .main-navigation>li a:active.ico-catalogue,
#navigation .main-navigation>li a.active.ico-catalogue {
    background: url(../img/icons/ico-catalogue-on.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a:hover.ico-config,
#navigation .main-navigation>li a:active.ico-config,
#navigation .main-navigation>li a.active.ico-config {
    background: url(../img/icons/ico-config-on.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a:hover.ico-report,
#navigation .main-navigation>li a:active.ico-report,
#navigation .main-navigation>li a.active.ico-report {
    background: url(../img/icons/ico-edit-on.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a:hover.ico-package,
#navigation .main-navigation>li a:active.ico-package,
#navigation .main-navigation>li a.active.ico-package {
    background: url(../img/icons/ico-package-on.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a.ico-user {
    background: url(../img/icons/ico-user-off.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a.ico-agenda {
    background: url(../img/icons/ico-calendar-off.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a.ico-agenda-execution {
    background: url(../img/icons/ico-date-off.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a.ico-hospital {
    background: url(../img/icons/ico-hospital-off.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a.ico-medicine {
    background: url(../img/icons/ico-medicine-off.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a.ico-doctor {
    background: url(../img/icons/ico-doctor-off.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a.ico-seller {
    background: url(../img/icons/ico-seller-off.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a.ico-payment {
    background: url(../img/icons/ico-payment-off.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a.ico-warehouse {
    background: url(../img/icons/ico-warehouse-off.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a.ico-catalogue {
    background: url(../img/icons/ico-catalogue-off.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a.ico-config {
    background: url(../img/icons/ico-config-off.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a.ico-report {
    background: url(../img/icons/ico-edit-off.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation>li a.ico-package {
    background: url(../img/icons/ico-package-off.png) no-repeat 0.5em center;
    background-size: 20px
}
#navigation .main-navigation .second-level-navigation {
    display: none
}
#navigation.navigation-open {
    left: 0
}
#content {
    margin: 50px 0 0 0;


    position : absolute;
    overflow : auto;
    top : 0px;
    bottom : 0px;
    right : 10px;
    left : 10px;
    border-top : 0px solid;
    border-bottom : 0px solid;

    transition: all 500ms ease;
    -ms-transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    -o-transition: all 500ms ease;
    -moz-transition: all 500ms ease
}
#content.navigation-open {
    margin-left: 25%
}
#content .wrapper {
    padding: 1em
}
#content .wrapper .title {
    padding: 0px;
    margin-bottom: 3px;
    border-bottom: 0px solid #efefef
}
#content .wrapper .title h1 {
    color: #005CB2;
    font-size: 1.6em
}
#content .wrapper .title .btn {
    margin: 0;
    margin-left: 1em
}
#content .wrapper .subtitle {
    color: #005CB2;
    font-size: 1.2em;
    margin: 1em 0
}
#content .wrapper .subtitle+table {
    width: 90%
}
#content .wrapper .detail-navigation {
    width: 90%;
    border: 1px solid #005CB2;
    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em
}
#content .wrapper .detail-navigation li {
    float: left;
    width: 33.3%
}
#content .wrapper .detail-navigation li:last-child a {
    border: none
}
#content .wrapper .detail-navigation li a {
    font-size: 0.8em;
    text-align: center;
    color: #005CB2;
    display: block;
    border-right: 1px solid #005CB2;
    padding: 1em;
    text-decoration: none;
    transition: all 400ms ease;
    -ms-transition: all 400ms ease;
    -webkit-transition: all 400ms ease;
    -o-transition: all 400ms ease;
    -moz-transition: all 400ms ease
}
#content .wrapper .detail-navigation li a:hover,
#content .wrapper .detail-navigation li a:active,
#content .wrapper .detail-navigation li a.active {
    background: #005CB2;
    color: white
}
#content .wrapper .detail-navigation li a.saved {
    background: url(../img/icons/ico-thick.png) no-repeat 96% center, #fff;
    background-size: 10px
}
#content .wrapper .detail-navigation li a.saved:hover {
    background: #005CB2
}
#content .wrapper .detail-navigation.agenda-menu li {
    width: 20%
}
#content .wrapper .detail-navigation.medical-menu li {
    width: 25%
}
#content .wrapper .detail-navigation.two-menu li {
    width: 50%
}
#content .wrapper .input-search {
    display: block;
    position: relative;
    padding: 1em 1em 1em 3em;
    background: url(../img/icons/ico-search.png) no-repeat 0.5em center;
    background-size: 25px
}
#content .wrapper .input-search input {
    width: 80%;
    border: none;
    font-size: 1em
}
#content .wrapper .switch-icons {
    text-align: right
}
#content .wrapper .switch-icons .ico {
    cursor: pointer;
    margin: 0 1em
}
#content .wrapper .table-info {
    width: 100%;
    border-collapse: collapse
}

#content .wrapper .table-info thead th {
    position: sticky;
    top: 0;
    background-color: rgb(86, 86, 86) !important;
    z-index: 1;
}

#content .wrapper .table-info.hidden-comments p {
    display: none;
    margin: 60px 0 0 -15px;
    padding: 1em;
    font-size: 1em;
    background: white;
    max-width: 200px;
    border: 1px solid #ccc;
    position: absolute;
    -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    border-radius: 0.3em;
    -webkit-border-radius: 0.3em;
    -moz-border-radius: 0.3em
}
#content .wrapper .table-info.hidden-comments p:before {
    content: "";
    display: block;
    position: absolute;
    top: -5px;
    left: 50%;
    margin-left: -5px;
    width: 10px;
    height: 10px;
    background: white;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg)
}
#content .wrapper .table-info.medium {
    width: 90%;
    margin: 1em 0
}
#content .wrapper .table-info.medium tr td:first-child {
    width: 60%;
    font-weight: bold
}
#content .wrapper .table-info.medium tr td:nth-child(2),
#content .wrapper .table-info.medium tr td:last-child {
    width: 20%;
    text-align: right
}
#content .wrapper .table-info thead tr {
    background: #616161
}

#content .wrapper .table-info thead tr th {
    text-align: left;
    font-size: 0.8em;
    color: white;
    vertical-align: middle;
    padding: 1em
}

#content .wrapper .table-info tbody tr:nth-child(odd) {
    background: #efefef
}
#content .wrapper .table-info tbody tr td {
    padding: 1.5em 1em;
    vertical-align: middle;
    font-size: 0.8em
}
/* CUSTOM MODAL TABLE START */
.custom-dialog-content .custom-table {
    border-collapse: collapse
}

.custom-dialog-content .custom-table thead tr{
    background: #616161
  }
  
.custom-dialog-content .custom-table  thead tr th{
    text-align: left;
    font-size: 0.8em;
    color: white;
    vertical-align: middle;
    padding: 1em 3em
  }
.custom-dialog-content .custom-table tbody tr:nth-child(odd) {
    background: #efefef
} 
.custom-dialog-content .custom-table  tbody tr td {
    padding: .5em 3em;
    vertical-align: middle;
    font-size: 0.8em
}
/* CUSTOM MODAL TABLE START */
#content .wrapper .table-info tbody tr td a {
    color: #005CB2;
    text-decoration: underline
}
#content .wrapper .table-info tbody tr td input {
    padding: 1em;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em
}
#content .wrapper .table-info.detail {
    margin: 2em 0;
    width: 90%
}
#content .wrapper .table-info.detail tbody tr {
    background: white;
    border-bottom: 1px solid #efefef
}
#content .wrapper .table-info.detail tbody tr td:last-child {
    text-align: right;
    color: #005CB2
}
#content .wrapper .table-info.detail+.comment {
    width: 90%;
    padding: 1em;
    border: 1px solid #efefef;
    border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em
}
#content .wrapper .table-info.detail+.comment h5 {
    color: #005CB2;
    margin-bottom: 1em
}
#content .wrapper .table-info.detail+.comment p {
    font-size: 0.8em
}
#content .wrapper .form .module {
    margin: 1em 0;
    padding: 1em;
    border-bottom: 1px dashed #ccc
}
#content .wrapper .form .module:last-child {
    border: none
}
#content .wrapper .form .module h3 {
    color: #616161;
    font-size: 1.2em;
    margin-bottom: 1em
}
#content .wrapper .form .module .btn {
    margin: 0 1em 0 0
}
#content .wrapper .form .module .info-collide {
    width: 90%;
    padding: 1em;
    border: 1px solid #18de5e;
    background: url(../img/icons/ico-arrow-up-gray.png) no-repeat 98% 1em, #fff;
    background-size: 25px;
    border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em
}
#content .wrapper .form .module .info-collide h3 {
    cursor: pointer
}
#content .wrapper .form .module .info-collide .row {
    width: 100%
}
#content .wrapper .form .module .info-collide.closed {
    background: url(../img/icons/ico-arrow-down.png) no-repeat 98% 1em, #18de5e;
    background-size: 25px
}
#content .wrapper .form .module .info-collide.closed h3 {
    display: none;
    margin: 0;
    color: white
}
#content .wrapper .form .module .info-collide.closed h3:first-child {
    display: block
}
#content .wrapper .form .module .info-collide.closed .table-info,
#content .wrapper .form .module .info-collide.closed .module,
#content .wrapper .form .module .info-collide.closed .row {
    display: none
}
#content .wrapper .form .module .module {
    border-top: 1px dashed #ccc;
    border-bottom: none;
    padding: 1em 0
}
#content .wrapper .form .module .row {
    width: 90%;
    margin-bottom: 1em
}
#content .wrapper .form .module .row:after {
    content: "";
    display: block;
    clear: both
}
#content .wrapper .form .module .row.btn-cols .label {
    width: 90%
}
#content .wrapper .form .module .row.btn-cols .btn {
    width: 25%;
    float: right;
    margin: 0.7em 0 0
}
#content .wrapper .form .module .row.photo-cols .label {
    width: 85%
}
#content .wrapper .form .module .row.photo-cols .label:first-child {
    cursor: pointer;
    text-align: center;
    width: 11%;
    margin-right: 4%;
    padding: 1.1em 1em
}
#content .wrapper .form .module .row.photo-cols .label input[type="file"] {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1
}
#content .wrapper .form .module .row.two-cols .label {
    width: 48%
}
#content .wrapper .form .module .row.two-cols .label:first-child {
    margin-right: 4%
}
#content .wrapper .form .module .row.two-cols.deletable-row .label {
    width: 38%
}
#content .wrapper .form .module .row.two-cols.deletable-row .btn-border-green {
    float: right;
    margin: 0.7em 0 0
}
#content .wrapper .form .module .row.three-cols .label {
    width: 32%;
    margin-right: 2%
}
#content .wrapper .form .module .row.three-cols .label:last-child {
    margin-right: 0
}
#content .wrapper .form .module .row.three-cols.first-bigger .label {
    width: 20%
}
#content .wrapper .form .module .row.three-cols.first-bigger .label:first-child {
    width: 56%
}
.label {
    float: left;
    width: 100%;
    position: relative;
    padding: 1em;
    background: white;
    border: 1px solid #ccc;
    display: block;
    border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em
}
.label p {
    color: #005CB2;
    margin: 0 0 0.5em 0
}
.label label {
    position: relative;
    margin-right: 1.5em
}
.label label span {
    margin-left: 0.5em
}
.label input,
.label textarea {
    border: none;
    width: 100%;
    font-size: 1em;
    background: none
}
.label input[type="radio"],
.label textarea[type="radio"] {
    width: auto
}
.label input[type="radio"]:checked+.ico-checkbox,
.label textarea[type="radio"]:checked+.ico-checkbox {
    background: url(../img/icons/ico-checkbox-on.png) no-repeat center center;
    background-size: 100%
}
.label input[type="radio"]+.ico-checkbox,
.label textarea[type="radio"]+.ico-checkbox {
    position: absolute;
    left: 0;
    top: -4px
}
.label.blue {
    border-color: #005CB2
}
.label.blue span {
    color: #ccc
}
.label.blue.pointer {
    cursor: pointer
}
.label.select {
    background: url(../img/icons/ico-select.png) no-repeat 98% center;
    background-size: 20px
}
.label.select.active .dropdown {
    display: block
}
.label.select .dropdown {
    display: none;
    position: absolute;
    z-index: 10;
    top: 73px;
    left: 0;
    width: 100%;
    background: white;
    padding: 1em;
    border: 1px solid #ccc;
    border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    -moz-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4)
}
.label.select .dropdown li {
    background: white;
    cursor: pointer;
    padding: 1em;
    font-size: 0.8em;
    border-bottom: 1px solid #efefef
}
.label.select .dropdown li:last-child {
    border: none
}
.label.select .dropdown li:hover {
    color: #005CB2
}
.label.select.minimal {
    cursor: pointer;
    padding: 00;
    margin-right: 1em;
    border: none;
    color: #005CB2;
    background: url(../img/icons/ico-arrow-down-blue.png) no-repeat 98% center;
    background-size: 7px;
    border-bottom: 1px solid #005CB2;
    font-weight: bold;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0
}
.tab {
    width: 90%;
    margin: 1em 0
}
.tab ul li {
    float: left;
    font-size: 0.9em;
    cursor: pointer;
    width: 50%;
    background: #efefef;
    text-align: center;
    padding: 1em;
    border-bottom: 1px solid #005CB2;
    border-radius: 0.4em 0.4em 0 0;
    -webkit-border-radius: 0.4em 0.4em 0 0;
    -moz-border-radius: 0.4em 0.4em 0 0
}
.tab ul li.active {
    background: white;
    border: 1px solid #005CB2;
    border-bottom: none;
    color: #005CB2
}
.tab-last {
    width: 90%;
    display: none
}
.tab-last li {
    position: relative;
    padding: 1em;
    overflow: hidden;
    border-bottom: 1px solid #ccc
}
.tab-last li:nth-child(even) {
    background: #efefef
}
.tab-last li:last-child {
    border: none
}
.tab-last li h4 {
    color: #005CB2;
    font-weight: bold;
    margin: 1em 0
}
.tab-last li p {
    float: left;
    width: 50%;
    font-weight: bold;
    color: #616161;
    padding: 1em
}
.tab-last li p span {
    font-weight: normal
}
.tab-last li.charges p {
    width: 40%
}
.tab-last li.charges .btn {
    margin: 0;
    max-width: 16%;
    font-size: 1em;
    position: absolute;
    right: 2%;
    top: 4em
}
#agendaCalendar {
    display: none
}
.list-view li {
    position: relative
}
.list-view li.divider {
    padding: 1em;
    color: white;
    background: #616161
}
.list-view li.static {
    padding: 0 0 0 5em;
    border-bottom: 1px solid #ccc
}
.list-view li.static .date-day {
    position: absolute;
    left: 10px;
    top: 0;
    font-size: 3em;
    color: #005CB2
}
.list-view li.static ul li {
    border-bottom: 1px solid #ccc
}
.list-view li.static ul li:last-child {
    border: none
}
.list-view li.static ul li h4 {
    margin: 1em;
    width: 25%;
    color: #424242;
    font-size: 0.9em
}
.list-view li.static ul li h4 span {
    font-size: 0.9em;
    display: block;
    color: #ccc
}
.list-view li.static ul li h4.date-patient {
    text-align: right
}
.list-view li.static ul li h4.date-patient span {
    color: #005CB2;
    font-size: 1em;
    font-weight: bold
}
.list-view li.static ul li .btn {
    font-size: 1em;
    margin: 1em
}
.list-view.surgery li.static ul li div {
    margin: 1em;
    width: 25%;
    color: #424242;
    font-size: 1.1em
}
.list-view.surgery li.static ul li div h5 {
    margin-bottom: 1em
}
.list-view.surgery li.static ul li div h5 span {
    display: block;
    font-size: 0.9em;
    color: #ccc
}
.list-view.surgery li.static ul li h4.date-patient {
    text-align: left;
    color: #005CB2
}
.list-view.surgery li.static ul li h4.date-patient span {
    color: #ccc;
    font-weight: normal
}
.checkout li {
    width: 30%;
    margin: 0.5em 0 0.5em 60%;
    overflow: hidden
}
.checkout li p {
    font-size: 1.1em;
    float: left;
    width: 50%
}
.checkout li p:last-child {
    text-align: right
}
.checkout li:last-child p:last-child {
    color: #005CB2;
    font-weight: bold
}
.calendar {
    width: 100%;
    border-collapse: collapse
}
.calendar caption {
    color: #005CB2;
    font-size: 1.2em;
    padding: 0.5em;
    text-align: left
}
.calendar caption .ico {
    margin-right: 1em
}
.calendar thead tr th {
    background: #005CB2;
    color: white;
    padding: 0.5em 1em
}
.calendar tbody tr {
    border-bottom: 1px solid #ccc
}
.calendar tbody tr td {
    background: white;
    height: 100px;
    padding: 0.5em;
    color: #005CB2;
    font-size: 1.1em;
    cursor: pointer
}
.calendar tbody tr td:hover {
    background: rgba(0, 0, 0, 0.02)
}
.calendar tbody tr td.empty {
    cursor: default;
    background: #efefef
}
.calendar tbody tr td.today {
    background: #18de5e;
    color: white
}
.calendar tbody tr td.today span {
    background: white
}
.calendar tbody tr td span {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 5px;
    background: #18de5e;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%
}
@media only screen and (max-width: 1024px) {
    #content .wrapper .detail-navigation,
    #content .wrapper .table-info.medium,
    #content .wrapper .table-info.detail,
    #content .wrapper .form .module .row,
    #content .wrapper .form .module .info-collide,
    #content .wrapper .tab,
    #content .wrapper .tab-last {
        width: 100%
    }
    .btn {
        padding: 0.5em 1em;
        font-size: 1em
    }
    #header .btn {
        min-height: 41px
    }
}
@media only screen and (max-width: 800px) {
    #navigation.navigation-open {
        right: 0;
        width: auto
    }
    #navigation.navigation-open .ico-close {
        display: block
    }
}
@media only screen and (max-width: 600px) {
    #navigation.navigation-open {
        right: 0;
        width: auto
    }
    #navigation.navigation-open .ico-close {
        display: block;
        opacity: 0;
    }
    #header p {
        display: none
    }
    .sub-header ul li {
        float: none;
        margin: 1em 0;
        border: none
    }
    .sub-header ul li .btn {
        display: block;
        width: 100%;
        margin: 0
    }
    #content .wrapper .title * {
        text-align: center;
        margin: 0.5em 0 !important;
        display: block;
        width: 100%
    }
    #content .wrapper .title *:after {
        content: "";
        display: block;
        clear: both
    }
    #content .wrapper .detail-navigation li,
    #content .wrapper .detail-navigation.agenda-menu li,
    #content .wrapper .agenda-menu.medical-menu li,
    #content .wrapper .agenda-menu.two-menu li {
        float: none;
        width: 100%
    }
    #content .wrapper .detail-navigation li a,
    #content .wrapper .detail-navigation.agenda-menu li a,
    #content .wrapper .agenda-menu.medical-menu li a,
    #content .wrapper .agenda-menu.two-menu li a {
        border: none;
        border-bottom: 1px solid #005CB2
    }
    #content .wrapper .detail-navigation li:last-child a,
    #content .wrapper .detail-navigation.agenda-menu li:last-child a,
    #content .wrapper .agenda-menu.medical-menu li:last-child a,
    #content .wrapper .agenda-menu.two-menu li:last-child a {
        border: none
    }
    #content .wrapper .form .module .row.two-cols,
    #content .wrapper .form .module .row.three-cols,
    #content .wrapper .form .module .row.photo-cols {
        margin: 0
    }
    #content .wrapper .form .module .row.two-cols .label,
    #content .wrapper .form .module .row.three-cols .label,
    #content .wrapper .form .module .row.photo-cols .label {
        width: 100%;
        margin: 0.5em 0
    }
    #content .wrapper .form .module .row.two-cols .label:first-child,
    #content .wrapper .form .module .row.three-cols .label:first-child,
    #content .wrapper .form .module .row.photo-cols .label:first-child {
        width: 100%
    }
}

.md-button.white-text {
    color: white !important;
}

.md-button.blue-text {
    color: #005CB2 !important;
}

/* Pagination */

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
  }
  
  .pagination > li {
    display: inline;
  }
  
  .pagination > li > a,
  .pagination > li > span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.428571429;
    text-decoration: none;
    background-color: #ffffff;
    border: 1px solid #dddddd;
  }
  
  .pagination > li:first-child > a,
  .pagination > li:first-child > span {
    margin-left: 0;
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
  }
  
  .pagination > li:last-child > a,
  .pagination > li:last-child > span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
  
  .pagination > li > a:hover,
  .pagination > li > span:hover,
  .pagination > li > a:focus,
  .pagination > li > span:focus {
    background-color: #eeeeee;
  }
  
  .pagination > .active > a,
  .pagination > .active > span,
  .pagination > .active > a:hover,
  .pagination > .active > span:hover,
  .pagination > .active > a:focus,
  .pagination > .active > span:focus {
    z-index: 2;
    color: #ffffff;
    cursor: default;
    background-color: #428bca;
    border-color: #428bca;
  }
  
  .pagination > .disabled > span,
  .pagination > .disabled > span:hover,
  .pagination > .disabled > span:focus,
  .pagination > .disabled > a,
  .pagination > .disabled > a:hover,
  .pagination > .disabled > a:focus {
    color: #999999;
    cursor: not-allowed;
    background-color: #ffffff;
    border-color: #dddddd;
  }
  
  .pagination-lg > li > a,
  .pagination-lg > li > span {
    padding: 10px 16px;
    font-size: 18px;
  }
  
  .pagination-lg > li:first-child > a,
  .pagination-lg > li:first-child > span {
    border-bottom-left-radius: 6px;
    border-top-left-radius: 6px;
  }
  
  .pagination-lg > li:last-child > a,
  .pagination-lg > li:last-child > span {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
  }
  
  .pagination-sm > li > a,
  .pagination-sm > li > span {
    padding: 5px 10px;
    font-size: 12px;
  }
  
  .pagination-sm > li:first-child > a,
  .pagination-sm > li:first-child > span {
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
  }
  
  .pagination-sm > li:last-child > a,
  .pagination-sm > li:last-child > span {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
  }

  .tache-text {text-decoration:line-through;}

/* READED STYLE */

.checkedSale {
    background-image: url("images/row-readed-background.png") !important;
}

.uncheckedSale {
    border-style: none;
}


  /*
  Copyright 2018 Google Inc. All Rights Reserved.
  Use of this source code is governed by an MIT-style license that
  can be found in the LICENSE file at http://angular.io/license
  */

  /* POPUP NOTIFICATIONS ALERTS */

    .notificationContainer 
    {
        background-color: #fff;
        border: 1px solid rgba(100, 100, 100, .4);
        /*-webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, .25);*/
        overflow: auto;
        position: absolute;
        top: 30px;
        margin-left: -170px;
        width: 400px;
        z-index: -1;
        display: block;         
        right:-0%;
        top  :50px;

        -webkit-transition:all linear 0.5s;
        transition:all linear 0.5s;
        
    }

    .blueBack {
        background:rgba(219, 119, 5, 0.463) !important;
    }
   
    #notificationAll
    {
        font-weight: bold;
        padding: 8px;
        font-size: 13px;
        background-color: #ffffff;
        position: fixed;
        z-index: 1000;
        width: 384px;
        border-bottom: 1px solid #dddddd;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        border-radius: 5px;
        overflow:scroll;
        max-height:200px;

        -webkit-user-select: none;
        -moz-user-select: none;
        -khtml-user-select: none;
        -ms-user-select:none;
        /*overflow-y:scroll;
        max-height: 200px;
        overflow:scroll;
        height:200px;

        overflow-y:scroll; 
        overflow:auto;
        height:100px;*/
    }

    #notificationAll tr:nth-child(odd) {
        background-color:#ffffff;
    }
    #notificationAll tr:nth-child(even) {
        background-color:#b3b3b3;
    }

    #notificationsBody
    {
        padding: 33px 0px 0px 0px !important;
        min-height:300px;
        
    }
    #notificationFooter
    {
        background-color: #e9eaed;
        text-align: center;
        font-weight: bold;
        padding: 8px;
        font-size: 12px;
        border-top: 1px solid #dddddd;
    }

    /*.notificationContainer.ng-show- {
        transition:all ease-in 0.25s;
        height: 0px;
    }*/
    
    .notificationContainer.ng-hide {
        opacity:0;
    }

  /*END POPUP NOTIFICATIONS ALERTS */


  .error-ampa-word { 
    color: red; 
  } 

  .success-ampa-word { 
    color:forestgreen; 
  } 

/******** REMA GRID STYLE *********/


.remagrid {
    font: normal 12px/150% Arial, Helvetica, sans-serif;
    background: #fff;
    overflow: hidden;
    border: 1px solid #006699;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border-collapse: collapse;
    text-align: left;
    width: 100%;
}


.remagrid tfoot li a {
    text-decoration: none;
    display: inline-block;
    padding: 2px 8px;
    margin: 1px;
    color: #FFFFFF;
    border: 1px solid #006699;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#006699', endColorstr='#00557F');
    background-color: #006699;
}

.remagrid table tfoot ul.active,
.remagrid table tfoot ul a:hover {
    text-decoration: none;
    border-color: #00557F;
    color: #FFFFFF;
    background: none;
    background-color: #006699;
}

.stickyop {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0;
    z-index: 99999999;
  }

.remagrid thead tr {
    background: #616161;
}
.remagrid thead tr th {
    text-align: left;
    font-size: 0.8em;
    color: white;
    vertical-align: middle;
    padding: 1em
}
.remagrid tbody tr:nth-child(odd) {
    background: #efefef
}
.remagrid tbody tr td {
    padding: 0.5em 0.5em;
    vertical-align: middle;
    font-size: 0.8em
}
.remagrid tbody tr td a {
    color: #005CB2;
    text-decoration: underline
}
.remagrid tbody tr td input {
    padding: 1em;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em
}
.remagrid.detail {
    margin: 0.5em 0;
    width: 90%
}
.remagrid.detail tbody tr {
    background: white;
    border-bottom: 1px solid #efefef
}
.remagrid.detail tbody tr td:last-child {
    text-align: right;
    color: #005CB2
}
.remagrid.detail+.comment {
    width: 90%;
    padding: 1em;
    border: 1px solid #efefef;
    border-radius: 0.4em;
    -webkit-border-radius: 0.4em;
    -moz-border-radius: 0.4em
}
.remagrid.detail+.comment h5 {
    color: #005CB2;
    margin-bottom: 1em
}
.remagrid.detail+.comment p {
    font-size: 0.8em
}

.remagridselected {
    background-color: rgb(85, 212, 94) !important;
    color: rgb(240, 240, 240) !important;
    font-weight: bold;
}

.remagridupdated {
    background-color: rgb(79, 153, 213) !important;
    font-weight: bold;
}

.remagridnormal {
    background-color: rgba(255, 255, 255, 0) !important;
    font-weight: normal;
}

:root {
    --stripe-size: 100px;
    --color1: rgb(38,91,172);
    --color2: white;
    --duration: 2s;
}

.stripe {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  .stripe_inner {
    position: absolute;
    display: flex;
    padding-left: 150px;
    justify-content: left;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 8rem;
    text-align: center;
    font-family: "Anton", sans-serif;
    color: rgba(255, 255, 255, 0);
    background: repeating-linear-gradient(45deg, var(--color1) 25%, var(--color1) 50%, var(--color2) 50%, var(--color2) 75%);
    background-size: var(--stripe-size) var(--stripe-size);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-animation: stripeBackgroundPosition var(--duration) linear infinite;
            animation: stripeBackgroundPosition var(--duration) linear infinite;
  }
  .stripe::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% + var(--stripe-size));
    height: 100%;
    background: repeating-linear-gradient(45deg, var(--color2) 25%, var(--color2) 50%, var(--color1) 50%, var(--color1) 75%);
    background-size: var(--stripe-size) var(--stripe-size);
    -webkit-animation: stripeTransform var(--duration) linear infinite;
            animation: stripeTransform var(--duration) linear infinite;
  }
  .stripe::after {
    content: "";
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(27, 39, 53, 0) 0%, #090a0f 100%);
  }
  
  @-webkit-keyframes stripeTransform {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(var(--stripe-size) * -1));
    }
  }
  
  @keyframes stripeTransform {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(calc(var(--stripe-size) * -1));
    }
  }
  @-webkit-keyframes stripeBackgroundPosition {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: calc(var(--stripe-size) * -1) 0;
    }
  }
  @keyframes stripeBackgroundPosition {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: calc(var(--stripe-size) * -1) 0;
    }
  }

  #lottie {
    width: auto;
    height: 100%;
    margin: 0 auto;
    left: -12rem;
    position: relative;
}

.backgroundColorDay {
  width:100%; 
  height:100%; 
  /* background-color: rgb(228, 161, 65); */
  background-color: rgb(119, 209, 236);
}


.imageBackgroundColorDay {
    width: 100%; 
    height: 100%; 
    background: url(../img/staticBackground.svg) no-repeat center center; 
    background-size: cover;
}

.backgroundColorAfternoon {
  width:100%; 
  height:100%; 
  background-color: rgb(228, 161, 65);
}


.imageBackgroundColorAfternoon {
    width: 100%; 
    height: 100%; 
    background: url(../img/staticBackgroundAfternoon.svg) no-repeat center center; 
    background-size: cover;
}

.backgroundColorNight {
  width:100%; 
  height:100%; 
  background-color: rgb(40, 39, 98);
}


.imageBackgroundColorNight {
    width: 100%; 
    height: 100%; 
    background: url(../img/staticBackgroundNight.svg) no-repeat center center; 
    background-size: cover;
}

.horizontal-list-container {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    gap: 10px; /* Adjust space between items */
}

.list-item {
    flex: 0 0 auto;
    width: 300px; /* Adjust width as needed */
}


input[type=file]::file-selector-button {
    margin-right: 5px;
    border: none;
    background: #4a67a5;
    padding: 5px 5px;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    transition: background .2s ease-in-out;
}

input[type=file]::file-selector-button:hover {
    background: #0d45a5;
}

.altern-centeno-item {
    color:white; 
    background-color: rgba(255, 72, 0, 0.877); 
    border-radius: 10px; 
    padding: 5px; 
    position: relative; 
    margin-bottom: 5px;
}

.alter-zaragoza-item {
    color:white; 
    background-color: rgb(0, 115, 255); 
    border-radius: 10px; 
    padding: 5px; 
    position: relative; 
    margin-bottom: 5px;
}

.alter-planta-item {
    color:black; 
    background-color: rgb(205, 205, 205); 
    border-radius: 10px; 
    padding: 5px; 
    position: relative; 
    margin-bottom: 5px;
}

.plain-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: transparent;
    border: none;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    padding: 0;
    margin: 0;
    width: auto;
    cursor: default;
  }
  
  .plain-select::-ms-expand {
    display: none;
  }
  
  .plain-select:focus {
    outline: none;
  }

.pending-card-kanban {
    background-color: rgb(249, 235, 170);
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 10px;
}

.medium-card-kanban {
    background-color: rgb(255, 210, 183);
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 10px;
}

.medium-high-card-kanban {
    background-color: rgb(179, 228, 255);
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 10px;
}
.high-card-kanban {
    background-color: rgb(191, 255, 180);
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    padding: 10px;
}

.button-edit-kanban {
    background-color:rgb(36, 220, 79);
    color: white;
    border-radius: 5px;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin-top: 10px;
}

.button-detail-kanban {
    background-color:rgb(46, 162, 235);
    color: white;
    border-radius: 5px;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin-top: 10px;
}

.button-percentage-kanban {
    background-color:rgb(228, 163, 33);
    color: white;
    border-radius: 5px;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin-top: 10px;
}

.button-lost-kanban {
    background-color:rgb(228, 33, 33);
    color: white;
    border-radius: 5px;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    margin-top: 10px;
}