/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 24-nov-2015, 15:21:03
    Author     : Nico
*/



/* -----------
 * COMMON CSS
 * ----------- */

body{position: relative;}

*{font-family: Lato;}

input[type=text]{

}

input[type=text][disabled]{
    color: #a0a0a0;
}

.btn-black{
    background-color: #000;
    color: white;
}
.btn-black:hover{
    background-color: #555;
    color: white;
}

.padded-content{
    padding-left: 60px;
    padding-right: 60px;
}

.form-label{
    margin: 10px 0;
    font-size: 16px;
    font-weight: 400;
    color: #0698B1;
    text-transform: uppercase;
}

.input-agrup label{
    display: block;
    font-size: 16px;
    font-weight: 400;
}

/* -----------
 * POPUP
 * ----------- */

.popup{
    width: 100%;
    min-height: 100vh;
    background: rgba(13, 28, 40, 0.81);
    position: absolute;
    top: 0;
    z-index: 100;
    left: 0;
    padding-bottom: 200px;
    overflow: hidden;
    bottom: 0;
}
.popup-bg{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: scroll;
    padding: 50px 0;
}
.popup-container{width: 630px;margin: 0 auto;margin-top: 40px;position: relative;}
.popup-header{background: #0698B1;padding: 30px;position: relative;}
.popup-content{
    /* overflow: hidden; */
    padding: 60px;
    background: white;
}
.popup-title{
    color: white;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
    float: left;
    margin: 0;
}
.popup-title-prescription{
    font-size: 31px;
    font-weight: 300;
    text-transform: none;
}
.popup-title.popup-title-big{
    font-size: 32px;
    font-weight: 300;
}
.popup-subtitle{
    color: white;
    margin: 0;
    text-transform: uppercase;
    font-weight: 400;
}
.popup-actions{
    float: right;
}

.popup-footer{
    background: #EFF4F2;
    text-align: center;
    padding: 25px;
    position: relative;
}
.popup-footer-prescription{
    padding: 25px 50px;
}
.popup-monumento{
    position: fixed;
    overflow-y: visible;
    overflow-x: hidden;
}

.popup-opened{
    overflow: hidden;
}

@media(max-width: 500px){

    .popup-bg{
        padding: 18px 10px;
    }

    .popup-container{
        width: 100%;
        margin-top: 20px;
    }

    .popup-header{
        padding: 15px 15px;
    }
    .popup-title{
        margin-top: 7px;
        font-size: 13px;
    }

    .popup-content{
        padding: 20px 25px;
    }

    .popup-footer{
        padding: 20px 15px;

    }
    .popup-footer input[type=submit]{
        font-size: 12px;
    }
}

/* -----------
 *  PAGINATION
 * ----------- */

.pagination{
    list-style: none;
    padding: 0;
    text-align: center;
    margin: 80px 0 90px;
    display: block;
}
.pagination li{
    display: inline-block;
    margin: 0 10px;
}
.pagination li a{
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 3px;
    color: #000;
    font-weight: bold;
    cursor: pointer;
}
.pagination li a:hover{
    background: #ececec;
    border-color: #dcdcdc;
}
.pagination li.active a{
    background: #eee;
    border-color: #cac6c6;
}

/* -----------
 *  AJAXING
 * ----------- */
.ajaxing{
    position: absolute;
    width: 100%;
    /* height: 100%; */
    z-index: 100;
    background: rgba(238,238,238,0.5);
    text-align: center;
    top: 0;
    left: 0;
    bottom: 0;
}

.ajaxing span {
    display: block;
    width: 32px;
    height: 32px;
    background: url(../img/loader.png) no-repeat;
    -webkit-animation: rotating 1s linear infinite;
    -moz-animation: rotating 1s linear infinite;
    -ms-animation: rotating 1s linear infinite;
    -o-animation: rotating 1s linear infinite;
    animation: rotating 1s linear infinite;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}


/* -----------
 * HELPERS
 * ----------- */

.text-center{text-align: center;}
.text-right{text-align: right;}


/* -----------
 * INPUTS
 * ----------- */

input[type=text],textarea,select,input[type=email],input[type=number]{
    border: 1px solid #B8B9B5;
    font-size: 16px;
    padding: 10px;
    max-width: 100%;
    /* min-width: 100%; */
    border-radius: 2px;
}

.input-agrup{width: 100%;margin-bottom: 20px;/* overflow: hidden; */clear: both;position: relative;}
.input-agrup-no-margin{margin-bottom: 0;}
.input-full{width: 100%}

.input-half{width: 50%;float: left;position: relative;}

.input-agrup .input-half:first-child {
    width: 46%;
    margin-right: 18px;
}

.radio-button{
    cursor: pointer;
    line-height: 22px;
    font-size: 16px;
    font-weight: 400;
    margin-right: 20px;
    position: relative;
}
.radio-button input{
    display: block;
    opacity: 0;
    position: absolute;
    z-index: 0;
}
.radio-button-control{
    width: 23px;
    height: 23px;
    border: 1px solid #929393;
    border-radius: 23px;
    display: inline-block;
    position: relative;
    float: left;
    margin-right: 10px;
}
.radio-button-control span{width: 13px;height: 13px;border-radius: 12px;background: #929393;position: absolute;top: 4px;left: 4px;display: none;}
.radio-button input:checked + .radio-button-control span{display: inline-block}
.radio-button input:focus + span{background: blue;}




input[type=submit]{
    color: white;
    background: #6CC722;
    font-size: 14px;
    font-weight: bold;
    border: none;
    text-transform: uppercase;
    padding: 15px 90px;
}

input.ng-touched.ng-invalid,textarea.ng-touched.ng-invalid{border-color: red !important;}

input[type=submit]:disabled{
    opacity: 0.6;
}

@media(max-width: 500px){
    .input-agrup{
        margin-bottom: 10px;
    }
    .input-agrup label{font-size: 13px;}

    input[type=text], textarea, select, input[type=email], input[type=number]{
        font-size: 13px;
        padding: 7px;
    }

    .input-agrup .input-half:first-child{
    margin-right: 8px;
}

}

/* -----------
 *  STYLED RADIO
 * ----------- */

.label-radio{
    position: relative;
    margin-right: 10px;
    line-height: 23px;
    cursor: pointer;
    display: inline-block;
}



.label-radio span{
    width: 23px;
    height: 23px;
    display: inline-block;
    border-radius: 23px;
    border: 1px solid #929393;
    position: relative;
    float: left;
    margin-right: 5px;
}
.label-radio span i{background: white; width: 11px; height: 11px;display: inline-block;position: absolute;border-radius: 11px;top: 5px;left: 5px;}
.label-radio input[type=radio]{
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.label-radio input[type=radio]:checked + span{/* background: red; */}
.label-radio input[type=radio]:checked + span i{background: #929393;}

.label-radio input:focus + span{
    border: 1px solid #269abc;

}
.label-radio input:focus + span i{
    background: #DDE2E2;
}

/* -----------
 * STYLED CHECKBOX
 * ----------- */
.label-checkbox{
    position: relative;
    margin-right: 10px;
    line-height: 23px;
    cursor: pointer;
    display: inline-block;
}



.label-checkbox span{
    width: 23px;
    height: 23px;
    display: inline-block;
    border-radius: 2px;
    border: 1px solid #929393;
    position: relative;
    float: left;
    margin-right: 5px;
}
.label-checkbox span i{background: white;width: 11px;height: 11px;display: inline-block;position: absolute;border-radius: 0;top: 5px;left: 5px;}
.label-checkbox input[type=checkbox]{
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.label-checkbox input[type=checkbox]:checked + span{/* background: red; */}
.label-checkbox input[type=checkbox]:checked + span i{background: #929393;}



.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Old versions of Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* -----------
 * SPINNER
 * ----------- */



.loading-spinner {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 100;
    /* background: rgba(238, 238, 238, 0.5); */
    text-align: center;
    top: 0;
    left: 0;
    padding: 24% 0px;
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.loading-spinner img {
    -webkit-animation: rotating 1s linear infinite;
    -moz-animation: rotating 1s linear infinite;
    -ms-animation: rotating 1s linear infinite;
    -o-animation: rotating 1s linear infinite;
    animation: rotating 1s linear infinite;
}
/* ------------
 * NOTIFICATION
 * ------------ */

aside.notifications {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 300px;
    z-index: 30004;
}
aside.notifications .notification {
    position: relative;
    border-radius: 2px;
    padding: 14px 25px 14px 12px;
    margin: 0 0px 10px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
    font-size: 1.1em;
    line-height: 1.1em;
    overflow: hidden;
}
aside.notifications .notification-close {
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 14px;
    border: 0;
    background: 0;
    padding: 7px;
    margin: 0;
}
aside.notifications .notification.info {
    background-color: rgba(2, 125, 248, 0.8);
    color: #062c52;
}
aside.notifications .notification.default {
    background-color: rgba(255, 255, 255, 0.8);
    color: #333;
}
aside.notifications .notification.success {
    background-color: rgba(108, 179, 102, 0.8);
    color: #2d5326;
}
aside.notifications .notification.error {
    background-color: rgba(194, 64, 64, 0.8);
    color: #491010;
}


/* -----------
 *  BUTTONS
 * ----------- */

.btn-cancel{
    background: rgba(0,0,0,0.3);
    color: white;
    font-size: 13px;
    border-radius: 4px;
}
.btn-cancel:hover{
    background: rgba(68, 66, 66, 0.3);
    color: white;
}
/* -----------
 * PRESCRIPTION FORM
 * ----------- */


.popup-header.popup-header-prescription{
    padding: 20px 55px;
    background: #079FB9;
    position: relative;
}
.popup-header-1{
    padding: 12px 55px;
}

.popup-header-1 .btn-cancel{
    margin-top: 7px;
}
.btn-suspend{
    background: #929393;
    color: #FFF;
    display: inline-block;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    border-radius: 0;
    padding: 14px 50px;
    float: left;
}
.btn-suspend:hover{
    color: white;
    background: #B1B1B1;
}

.btn-prescribe{
    display: inline-block;
    width:100%;
    font-size: 14px;
    font-weight: bold;
    border-radius: 0;
    padding: 14px 50px;
    background: #6cc722;
    color: white;
    border-radius: 0;
    text-transform: uppercase;
    display: inline-block;
}
.btn-prescribe:hover{
    color: white;
    background: #7DEA25;
}

.editing-prescription .btn-prescribe{
    /* width: 100%; */
}

.prescription-unreaded-comments{
    position: absolute;
    background: #FF5F2E;
    padding: 9px 9px 3px;
    border-radius: 100%;
    left: -19px;
    bottom: -22px;
    z-index: 1;
    width: 42px;
    height: 42px;
    cursor: pointer;
}
.prescription-unreaded-comments svg{
    fill: white;
    width: 22px;
    height: 22px;
}
.unreaded-comments{
    position: absolute;
    top: -7px;
    right: -8px;
    width: 25px;
    height: 25px;
    background: red;
    color: white;
    border-radius: 100%;
    text-align: center;
    padding-top: 2px;
    font-family: Arial;
    font-size: 14px;
    box-shadow: 0px 0px 2px #9c9999;
}


.prescription-doctor{
    margin: 0;
    font-size: 12px;
    font-weight: bold;
    color: white;
    text-transform: uppercase;
}

.prescription-patient{
    margin: 0;
    font-weight: 300;
    font-size: 32px;
    color: white;
}
.popup-content.popup-content-prescription{
    padding-top: 0;
    padding-bottom: 40px;
}

.prescription-component{
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}

.prescription-component .col-md-3{
    padding-left: 0;
}
.prescription-component .col-md-6{
    padding-right: 0;
}

.prescription-component label{ color: #929393;font-size: 16px;font-weight: 400;margin-top: 6px;}

.prescription-component input[type=number]{
    padding: 8px 10px;
}
.prescription-component label.component-name{}
.prescription-component label.component-unit{
    margin-right: 15px;
}

.prescription-date-bags{
    border-top: 1px solid #eff4f2;
    margin: 0 -55px;
    padding: 0 40px;
    padding-top: 10px;
    clear: both;
    margin-top: 0px;
    padding-top: 30px;
}


.prescription-protections h3 , .prescription-date h3{
    text-transform: uppercase;
    color: #0698B1;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}


.popup-content-prescription .prescription-date{
}
.popup-content-prescription .prescription-date input[type=text]{
    background-image: url(../../shared/img/calendar.png);
    background-repeat: no-repeat;
    background-position: 90% 50%;
    height: 40px;
}

.popup-content-prescription .bags-quantity{
}

.popup-content-prescription .bags-quantity h3{
    text-transform: uppercase;
    color: #0698B1;
    font-size: 16px;
    font-weight: 400;
    margin: 0;
}

.prescription-date-bags h3{margin: 0px 0  15px!important;}
.popup-content-prescription .bags-quantity input{
    width: 60px;
    height: 42px;
}

.prescription-protection-label{
    color: #929393;
    font-size: 15px;
    margin-right: 20px;
    font-weight: 400;
}


/* -----------
 *  PRESCRIPTION COMMENTS
 * ----------- */

.prescription-comments{
    margin-top: 15px;
}
.prescription-comments .foldable-content{
    background: white;
    padding: 20px 55px 40px;
    position: relative;
}
.prescription-comment-refresh{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 20px;
    right: 50px;
    cursor: pointer;
    background: white;
    overflow: hidden;
    z-index: 1;
    transition: all 300ms linear;
}
.prescription-comment-refresh:hover{
    transform: rotate(90deg);
}
.prescription-comment-refresh svg{
    fill: #A9A6A6;
    cursor: pointer;
    transition: all 300ms linear;
}
.prescription-comment-refresh:hover svg{
    fill: #222222;
}
.prescription-comment-list{
    padding: 0;
    margin: 0;
    list-style: none;
    margin-bottom: 30px;
}

.prescription-comment{
    margin-bottom: 20px;
    position: relative;
}
.prescription-comment h4{
    position: relative;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: #ff5f2e;
}
.prescription-comment h4 svg{
    position: absolute;
    top: 7px;
    left: -20px;
    fill:#DE5F34;
}
.prescription-comment h4 span{}
.prescription-comment p{
    margin: 0;
    color: #3f3f3f;
    font-size: 16px;
}

.prescription-comment-readed{
    position: absolute;
    bottom: 0;
    right: 0;
}
.prescription-comment-readed svg{
    width: 18px;
    height: 18px;
}

.fromAdmin.prescription-comment h4{color: #0698b1;}
.fromAdmin.prescription-comment svg{fill: #0698b1;}

#form-new-comment{}
#form-new-comment textarea{width: 100%;}
#form-new-comment button{background: #0698b1;color: white;border-radius: 0;margin-top: 10px;}

.prescription-new-comment{}
.prescription-new-comment a{
    color: black;
    text-decoration: underline;
    margin: 18px 0;
    display: inline-block;
    vertical-align: top;
    float: right;
    cursor: pointer;
}


/* -----------
 * ANIMATIONS ANGULAR
 * ----------- */

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

.transition{
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

/*
.ng-enter {
    -webkit-transition: .5s;
    transition: .5s;  
    opacity: 0;
}

.ng-enter-active {
    opacity: 1;
}

.ng-leave{
    -webkit-transition: .2s;
    transition: .2s;  
    opacity: 1;
}
.ng-leave-active{
    opacity: 0;
}
*/

.area-menu .ng-enter{
    -webkit-transition: .2s;
    transform: translateY(60px);
}
.area-menu .ng-enter-active{
    transform: translateY(0px);
}
.area-menu .ng-leave{
    -webkit-transition: .2s;
    transform: translateY(0px);
}
.area-menu .ng-leave-active{
    transform: translateY(60px);
}


.patient-list .ng-enter, .item-list .ng-enter{
    -webkit-transition: .230s;
    transition: .230s;
    opacity: 0.5;
    visibility: visible;
}
.patient-list .ng-enter-active , .item-list .ng-enter-active{
    opacity: 1;
}



.popup.ng-hide-add         { animation:0.5s fadeOut ease; }


.popup.ng-hide-remove      { animation:0.2s fadeIn ease; }

.foldable-content.ng-hide-remove{animation:0.2s fadeIn ease;}
.foldable-content.ng-hide-add{animation:0.1s fadeOut ease;}


@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeOut {
    from {opacity: 1;}
    to {opacity: 0;}
}

/* -----------
 * FOLDABLE
 * ----------- */

.foldable{
    margin: 0 -60px;
    border-top: 2px solid #0698B1;
}
.foldable-content{
    padding: 20px 55px;
}
.foldable-title{
    padding: 11px 55px;
    background: #EFF4F2;
    cursor: pointer;
}
.foldable-title:hover{
    background: #E2E2E2;
}
.foldable-title h2{
    color: #0698B1;
    font-size: 16px;
    font-weight: 400;
    text-transform: uppercase;
    margin: 0;
    display: inline-block;
}
.foldable-icon{
    float: right;
    font-size: 20px;
    display: block;
    width: 40px;
    cursor: pointer;
}

.foldable-icon.active:after {
    content: '\25B2';
}
.foldable-icon:after {
    content: '\25BC';
    margin-left: 10px;
}


/* -----------
 *  CHAT
 * ----------- */
.notification-item {
    background: #eff4f2;
    clear: both;
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 3px;
}

.notification-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.notification-title {
    float: left;
    color: #3e5860;
    font-size: 15px;
    margin-top: 8px;
}
.notification-item button {
    float: right;
}
#conversation-messages{
    list-style: none;
    margin: 0;
    padding: 0;
}

.conversation-message{
    padding: 10px 0;
}
.conversation-message h4{
    margin: 0;
}
.conversation-message p{
    margin: 0;
}
.conversation-message.admin-message h4{
    color: #06987e;
}

#new-conversation{
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
}
#new-conversation h3{}
#new-conversation textarea{
    width: 100%;
    margin-bottom: 5px;
}
#new-conversation input{
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;

}
#new-conversation button{}

#new-message{
    border-top: 2px solid #eee;
    margin-top: 30px;
    padding-top: 30px;
    margin-bottom: 150px;
}
#new-message textarea{
    width: 100%;
    margin-bottom: 10px;
}

#conversation-screen{}
#conversation-screen .go-back{
    cursor: pointer;
}


.conversation-item{}
.conversation-item .conversation-doctor{
    font-weight: 600;
    margin-right: 20px;
}
.conversation-item .conversation-subject{
    text-decoration: underline;
}
.conversation-item .conversation-date{
    float: right;
    margin-right: 30px;
}

/* -----------
 * FONTS
 * ----------- */

@font-face {
    font-family: 'lativsa-Icons';
    src:url('../fonts/lativsa-Icons.eot?76c2ew');
    src:url('../fonts/lativsa-Icons.eot?76c2ew#iefix') format('embedded-opentype'),
        url('../fonts/lativsa-Icons.ttf?76c2ew') format('truetype'),
        url('../fonts/lativsa-Icons.woff?76c2ew') format('woff'),
        url('../fonts/lativsa-Icons.svg?76c2ew#lativsa-Icons') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="lativ-"], [class*=" lativ-"] {
    font-family: 'lativsa-Icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.lativ-search:before {
    content: "\e800";
}
.lativ-calendar:before {
    content: "\e801";
}
.lativ-logo:before {
    content: "\e802";
}
.lativ-message:before {
    content: "\e803";
}
.lativ-patient:before {
    content: "\e804";
}
.lativ-patient-edit:before {
    content: "\e804";
}
.lativ-patient-no-prescribe:before {
    content: "\e804";
}

/* -----------
 *  INPUT LABEL ANIMATION
 * ----------- */

.input-label-container{position: relative;}

.input-label-container input , .input-label-container textarea{width: 100%;}

.input-label-container span{position: absolute;left: 10px; top: 0;color: #9E9E9E;font-size: 12px;transition: 0.1s all ease-in-out;}

.input-label-container.label-hidden span{top: 11px;font-size: 16px;left: 10px;visibility: hidden;}


/*
SELECT LINDO
 */

select.nice , .ac-select-wrapper {
    background-image:
            linear-gradient(45deg, transparent 50%, gray 50%),
            linear-gradient(135deg, gray 50%, transparent 50%),
            linear-gradient(to right, #ccc, #ccc);
    background-position:
            calc(100% - 20px) calc(1em + 2px),
            calc(100% - 15px) calc(1em + 2px),
            calc(100% - 2.5em) 0.5em;
    background-size:
            5px 5px,
            5px 5px,
            1px 1.5em;
    background-repeat: no-repeat;
}

.ac-select-wrapper:focus {
    background-image:
            linear-gradient(45deg, green 50%, transparent 50%),
            linear-gradient(135deg, transparent 50%, green 50%),
            linear-gradient(to right, #ccc, #ccc);
    background-position:
            calc(100% - 15px) 1em,
            calc(100% - 20px) 1em,
            calc(100% - 2.5em) 0.5em;
    background-size:
            5px 5px,
            5px 5px,
            1px 1.5em;
    background-repeat: no-repeat;
    border-color: green;
    outline: 0;
}


select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}


/* -----------
 *  A SELECT
 * ----------- */

.ac-select-wrapper {
    position: relative;
    display: inline-block;
}

.ac-select-wrapper, .ac-select-wrapper input, .ac-select-wrapper select {
    /*font-family: Arial;*/
    font-size: 16px;
    background-color: white;
    border:none;
    width: 100%;
    outline: none;
}

.ac-select-main {
    vertical-align: middle;
    padding-left: 2px;
    margin-right: -2px;
    height: 43px;
    border: 1px solid #B8B9B5;
    font-size: 16px;
    padding: 10px;
    max-width: 100%;
    /* min-width: 100%; */
    border-radius: 2px;
    width: 100%;
}
/*
.ac-select-main-closed {

    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

.ac-select-main-open {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
*/
.ac-select-table {
    padding-left: 2px;
    border-collapse: collapse;
    border-spacing: 0px;
    width: 100%;
    /*min-width: 150px;*/
}

.ac-select-display {
    padding-left: 3px;
    vertical-align: middle;
}

.ac-select-table td {
    white-space: nowrap;
    padding: 0px !important;
}

.ac-select-widener td {
    visibility: hidden;
    padding: 0px;
}

td.ac-select-longest {
    padding-right:4px;
}

td.ac-select-image {
    background-repeat: no-repeat;
    height: 21px;
    width: 19px !important;
    cursor: pointer;
    vertical-align: bottom;
    margin-bottom: 0px;
    border-left: solid 1px #e8e8e8;
    display: none;
}

div.ac-select-popup {
    top: 1px;
    border-left: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
    z-index: 5000;
    background-color: white;
    padding-top: 2px;
    width: 100%;
    margin-bottom: 0px;
}

div.ac-select-list {
    overflow: auto;
    overflow-x: hidden;
    margin-bottom: 1px;
    border-top: 1px solid #d0d0d0;
}

div.ac-select-no-items {
    padding-left: 3px;
    padding-bottom: 3px;
}

.ac-select-text-wrapper {
    padding: 0px;
    padding-left: 7px;
}

.ac-select-text {
    padding-left: 2px;
    width: 100%;
    margin-left: -4px;
    margin-right: -6px;
    border-width: 0px !important;
}


.ac-select-search-wrapper {
    padding: 0 6px;
    padding-bottom: 2px;
    margin-left: -2px;
    padding-left: 6px;
}

.ac-select-search-wrapper table {
    width: 100%;
}

.ac-select-search {
    padding-left: 2px;
    width: 100%;
    margin-left: -3px;
}

td.ac-select-add {
    cursor: pointer;
    width: 20px;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
}

.ac-select-add div {
    border: 1px solid transparent;
    margin: 4px;
    width: 16px;
    line-height: 16px;
}

.ac-select-add div:hover {
    border: 1px solid #d0d0d0;
    /*background-color: #f0f0f0;*/
}

.ac-select-disabled {
    color: #c0c0c0;
    cursor: pointer;
}

.ac-select-highlight {
    background-color: #d0d0d0;
}

.ac-select-popup ul {
    cursor: pointer;
    padding: 3px 0px 3px 0px;
    margin: 0;
    text-align: left;
    list-style: none;
    width: 100%;
}

.ac-select-popup li {
    padding-left: 3px;
    margin-right: 3px;
    margin-left: 3px;
    white-space: nowrap;
    font-size: 14px;
    margin-bottom: 5px;
}

.ac-select-popup li:hover {
    background-color: #f0f0f0;
}

.ac-select-load-more {
    color: #808080;
    width: 97%;
    margin: 3px 6px 3px 6px;
    line-height: 18px;
    border-top: 1px solid #d0d0d0;
}

.ac-select-loading {
    padding-left: 6px;
    color: #808080;
}

.ac-select-load-more span {
    cursor: pointer;
    padding-left: 12px;
}

.ac-select-filter-options {
    font-family: Arial, sans-serif;
    padding: 2px 4px 0px 4px;
    font-size: 10px;
    color: #666;
    border-top: solid 1px #d0d0d0;
}


@media(max-width: 500px){
    .ac-select-main{
        font-size: 13px;
        height: 35px;
    }
    .ac-select-popup li{
        font-size: 12px;
        margin-bottom: 2px;
    }
}


/* SEARCH FORMS */

.form-search{
    margin-bottom: 20px;
}
.form-search input{
    border-color: #d1d1d1;
    height: 40px;
    font-size: 14px;
    color: #7a7a7a;
    background-image: url(../../shared/img/search.png);
    background-repeat: no-repeat;
    background-position: 12px 50%;
    padding-left: 35px;
    width: 100%;
}

.form-search select.select-header{
    font-size: 14px;
    color: #7a7a7a;
    border: 1px solid #d1d1d1;
    padding: 10px 10px;
    margin-top: 0;
    height: 40px;
}
select option:disabled {
    color: #d8d8d8;
}
.form-search-view-filter{
    display: none;
    text-align: right;
    text-decoration: underline;
    margin-bottom: 10px;
}

@media(max-width: 500px){
    .form-search input{margin-bottom: 10px;font-size: 12px;height: 35px;}

    .form-search .col-md-4, .form-search .col-md-3{display: none}
    .form-search.enabled .col-md-4, .form-search.enabled .col-md-3{display: block}

    .form-search-view-filter{
        display: block;
    }
}

.form-search .label-checkbox{
    font-weight: 400;
    margin-top: 8px;
    font-size: 14px;
    color: #585555;
}

/* -----------
 *  MOBILE HEADER
 * ----------- */

#clear-logo-mobile,#hamburguer{
    display: none;
}

@media(max-width: 500px){
    #clear-logo-mobile,#hamburguer{
        display: block;
    }
}

#clear-logo-mobile{}

#hamburguer{
    float: right;
    vertical-align: top;
    /* border: 1px solid #caca; */
    /* padding: 8px; */
    margin: -3px 4px 2px 0px;
    transition: all .3s ease-in-out;
}


.hamburger {
    padding: 20px 15px 10px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible;
    }
.hamburger:hover {
    opacity: 0.7; }
.hamburger.is-active:hover {
    opacity: 0.7; }
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
    background-color: #fff;
    }

.hamburger-box {
    width: 40px;
    height: 24px;
    display: inline-block;
    position: relative; }

.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 35px;
    height: 3px;
    background-color: #e6e6e6;
    border-radius: 1px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
    }
.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
.hamburger-inner::before {
    top: -10px; }
.hamburger-inner::after {
    bottom: -10px; }

/*
   * Spring
   */
.hamburger--spring .hamburger-inner {
    top: 2px;
    transition: background-color 0s 0.13s linear; }
.hamburger--spring .hamburger-inner::before {
    top: 10px;
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring .hamburger-inner::after {
    top: 20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring.is-active .hamburger-inner {
    transition-delay: 0.22s;
    background-color: transparent !important; }
.hamburger--spring.is-active .hamburger-inner::before {
    top: 0;
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--spring.is-active .hamburger-inner::after {
    top: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 10px, 0) rotate(-45deg); }

/*
   * Spring Reverse
   */
.hamburger--spring-r .hamburger-inner {
    top: auto;
    bottom: 0;
    transition-duration: 0.13s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring-r .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0s linear; }
.hamburger--spring-r .hamburger-inner::before {
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring-r.is-active .hamburger-inner {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
    transition-delay: 0.22s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
.hamburger--spring-r.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0s 0.22s linear; }
.hamburger--spring-r.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(90deg);
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1); }


/*
 TABLAS
 */

.table{
    width: 100%;
    margin-top: 30px;
    color: #212529;
}
.table td, .table th {
    padding: 12px;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
    text-align: left;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    max-width: 117px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-hover tbody tr:hover {
    color: #212529;
    background-color: rgba(0,0,0,.075);
}
.table tfoot td{border-top: 3px solid #dee2e6;}

.client-cell{
    border-left: 1px solid #dee2e6;
}

.close {
    position: absolute;
    right: 22px;
    top: 0;
    width: 32px;
    height: 32px;
    opacity: 0.3;
    cursor: pointer;
}
.close:hover {
    opacity: 1;
}
.close:before, .close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 20px;
    width: 2px;
    background-color: #333;
}
.close:before {
    transform: rotate(45deg);
}
.close:after {
    transform: rotate(-45deg);
}
.close:hover:before, .close:hover:after{
    background-color: red;
}

/* print prescription*/

 @media screen{
     .printable-prescription{display: none;}

 }
@media print{
    .printable-prescription{display: block;}
    .hide-printable{display: none}

    .popup-container .foldable-content.ng-hide{
        display: block !important;
    }
    .popup-header.popup-header-1,.popup-footer.popup-footer-prescription,.foldable-icon {display: none;}
    .popup-content.popup-content-prescription input[type=text], .popup-content.popup-content-prescription input[type=number] {
        font-size: 14px;
        padding: 12px 2px 2px 7px;
        background: white;
    }
    .prescription-component {
        padding: 2px 0;
    }
    .foldable-content {
        padding: 0px 55px;
    }
    .prescription-patient{
        font-size: 22px;
        color: black;
        font-weight: 500;
    }
    .popup-header.popup-header-prescription {
        padding: 10px 55px;
    }
    .foldable-title {
        padding: 6px 55px;
    }
    .prescription-comments{display: none;}

    .popup-content-prescription .prescription-date input[type=text]{
        height: 34px;
        padding-top: 0!important;
    }
    .prescription-date-bags{
        padding: 10px 35px 0;
    }
    .input-agrup{
        margin-bottom: 5px;
    }
    .prescription-list,.logo-header{display: none}
    .popup{background: white;}
}

#test-mode{
    background: #ff9708;
    width: 100%;
    text-align: center;
}