.view.ng-enter, .user.ng-enter {
    -moz-animation-name: enter;
    -o-animation-name: enter;
    -webkit-animation-name: enter;
    -ms-animation-name: enter;
    animation-name: enter;
    -moz-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    -ms-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -moz-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

.modal.fade.custom-modal .modal-dialog {
    -moz-animation-name: enter;
    -o-animation-name: enter;
    -webkit-animation-name: enter;
    -ms-animation-name: enter;
    animation-name: enter;
    -moz-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    -ms-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -moz-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

    .modal.fade.custom-modal .modal-dialog * {
        -moz-animation-name: appear;
        -o-animation-name: appear;
        -webkit-animation-name: appear;
        -ms-animation-name: appear;
        animation-name: appear;
        -moz-animation-duration: 0.5s;
        -o-animation-duration: 0.5s;
        -webkit-animation-duration: 0.5s;
        -ms-animation-duration: 0.5s;
        animation-duration: 0.5s;
        -moz-animation-timing-function: ease-in-out;
        -o-animation-timing-function: ease-in-out;
        -webkit-animation-timing-function: ease-in-out;
        -ms-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

.multiselect-container, .multiselect-container *, .select * {
    -moz-animation-name: appear;
    -o-animation-name: appear;
    -webkit-animation-name: appear;
    -ms-animation-name: appear;
    animation-name: appear;
    -moz-animation-duration: 0.2s !important;
    -o-animation-duration: 0.2s !important;
    -webkit-animation-duration: 0.2s !important;
    -ms-animation-duration: 0.2s !important;
    animation-duration: 0.2s !important;
    -moz-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

.fade.custom-modal.in-remove .modal-dialog {
    -moz-animation-name: disappear;
    -o-animation-name: disappear;
    -webkit-animation-name: disappear;
    -ms-animation-name: disappear;
    animation-name: disappear;
    -moz-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    -ms-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -moz-animation-timing-function: ease-in-out;
    -o-animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    -ms-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

table.sectionTable {
    -moz-animation-duration: 0.0s;
    -o-animation-duration: 0.0s;
    -webkit-animation-duration: 0.0s;
    -ms-animation-duration: 0.0s;
    animation-duration: 0.0s;
}

.modal.fade.custom-modal .modal-dialog {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
}

@-moz-keyframes appear {
    from {
        -moz-transform: translateX(10px);
        -ms-transform: translateX(10px);
        -o-transform: translateX(10px);
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
        opacity: 0;
    }

    to {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes appear {
    from {
        -moz-transform: translateX(10px);
        -ms-transform: translateX(10px);
        -o-transform: translateX(10px);
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
        opacity: 0;
    }

    to {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes appear {
    from {
        -moz-transform: translateX(10px);
        -ms-transform: translateX(10px);
        -o-transform: translateX(10px);
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
        opacity: 0;
    }

    to {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes disappear {
    from {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }

    to {
        -moz-transform: translateX(10px);
        -ms-transform: translateX(10px);
        -o-transform: translateX(10px);
        -webkit-transform: translateX(10px);
        transform: translateX(10px);
        opacity: 0;
    }
}


@-moz-keyframes enter {
    from {
        -moz-transform: translateX(20px);
        -ms-transform: translateX(20px);
        -o-transform: translateX(20px);
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
        opacity: 0;
    }

    to {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes enter {
    from {
        -moz-transform: translateX(20px);
        -ms-transform: translateX(20px);
        -o-transform: translateX(20px);
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
        opacity: 0;
    }

    to {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes enter {
    from {
        -moz-transform: translateX(20px);
        -ms-transform: translateX(20px);
        -o-transform: translateX(20px);
        -webkit-transform: translateX(20px);
        transform: translateX(20px);
        opacity: 0;
    }

    to {
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
}

@-webkit-keyframes leave {
    to {
        -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
        -o-transform: scaleY(0);
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
    }
}

@-moz-keyframes leave {
    to {
        -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
        -o-transform: scaleY(0);
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
    }
}

@keyframes leave {
    to {
        -moz-transform: scaleY(0);
        -ms-transform: scaleY(0);
        -o-transform: scaleY(0);
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
    }
}

.pagination > .active > a, .pagination > .active > a:focus, .pagination > .active > a:hover, .pagination > .active > span, .pagination > .active > span:focus, .pagination > .active > span:hover {
    background-color: #c00;
    border: #c00;
}

.pagination > li > a, .pagination > li > span {
    color: #808080;
}

.sort-asc, .sort-desc {
    background-color: #d8d8d8 !important;
}

.ng-table th.sortable .sort-indicator:after, .ng-table th.sortable .sort-indicator:before {
    display: none;
}

.ng-table th.sortable.sort-desc .sort-indicator:after, .ng-table th.sortable.sort-desc .sort-indicator:before {
    display: block !important;
}

.ng-table th.sortable.sort-asc .sort-indicator:after, .ng-table th.sortable.sort-asc .sort-indicator:before {
    display: block !important;
}

.validate:invalid {
    border: 1px solid #c00 !important;
    box-shadow: #c00 0 0 10px;
}

/*************************************************LOADING*********************************************************/
#loadAjax {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 199;
}

.loading {
    position: relative;
    width: 24px;
    height: 24px;
}

    .loading .wBall {
        position: absolute;
        width: 24px;
        height: 24px;
        opacity: 0;
        -moz-transform: rotate(225deg);
        -moz-animation: orbit 4.4s infinite;
        -webkit-transform: rotate(225deg);
        -webkit-animation: orbit 4.4s infinite;
        -ms-transform: rotate(225deg);
        -ms-animation: orbit 4.4s infinite;
        -o-transform: rotate(225deg);
        -o-animation: orbit 4.4s infinite;
        transform: rotate(225deg);
        animation: orbit 4.4s infinite;
    }

        .loading .wBall .wInnerBall {
            position: absolute;
            width: 3px;
            height: 3px;
            background: #8a1a1c;
            left: 0px;
            top: 0px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            -ms-border-radius: 6px;
            -o-border-radius: 6px;
            border-radius: 6px;
        }

    .loading #wBall_1 {
        -moz-animation-delay: 0.96s;
        -webkit-animation-delay: 0.96s;
        -ms-animation-delay: 0.96s;
        -o-animation-delay: 0.96s;
        animation-delay: 0.96s;
    }

    .loading #wBall_2 {
        -moz-animation-delay: 0.19s;
        -webkit-animation-delay: 0.19s;
        -ms-animation-delay: 0.19s;
        -o-animation-delay: 0.19s;
        animation-delay: 0.19s;
    }

    .loading #wBall_3 {
        -moz-animation-delay: 0.38s;
        -webkit-animation-delay: 0.38s;
        -ms-animation-delay: 0.38s;
        -o-animation-delay: 0.38s;
        animation-delay: 0.38s;
    }

    .loading #wBall_4 {
        -moz-animation-delay: 0.58s;
        -webkit-animation-delay: 0.58s;
        -ms-animation-delay: 0.58s;
        -o-animation-delay: 0.58s;
        animation-delay: 0.58s;
    }

    .loading #wBall_5 {
        -moz-animation-delay: 0.77s;
        -webkit-animation-delay: 0.77s;
        -ms-animation-delay: 0.77s;
        -o-animation-delay: 0.77s;
        animation-delay: 0.77s;
    }

@-moz-keyframes orbit {
    0% {
        opacity: 1;
        z-index: 99;
        -moz-transform: rotate(180deg);
        -moz-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -moz-transform: rotate(300deg);
        -moz-animation-timing-function: linear;
        -moz-origin: 0%;
    }

    30% {
        opacity: 1;
        -moz-transform: rotate(410deg);
        -moz-animation-timing-function: ease-in-out;
        -moz-origin: 7%;
    }

    39% {
        opacity: 1;
        -moz-transform: rotate(645deg);
        -moz-animation-timing-function: linear;
        -moz-origin: 30%;
    }

    70% {
        opacity: 1;
        -moz-transform: rotate(770deg);
        -moz-animation-timing-function: ease-out;
        -moz-origin: 39%;
    }

    75% {
        opacity: 1;
        -moz-transform: rotate(900deg);
        -moz-animation-timing-function: ease-out;
        -moz-origin: 70%;
    }

    76% {
        opacity: 0;
        -moz-transform: rotate(900deg);
    }

    100% {
        opacity: 0;
        -moz-transform: rotate(900deg);
    }
}

@-webkit-keyframes orbit {
    0% {
        opacity: 1;
        z-index: 99;
        -webkit-transform: rotate(180deg);
        -webkit-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -webkit-transform: rotate(300deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin: 0%;
    }

    30% {
        opacity: 1;
        -webkit-transform: rotate(410deg);
        -webkit-animation-timing-function: ease-in-out;
        -webkit-origin: 7%;
    }

    39% {
        opacity: 1;
        -webkit-transform: rotate(645deg);
        -webkit-animation-timing-function: linear;
        -webkit-origin: 30%;
    }

    70% {
        opacity: 1;
        -webkit-transform: rotate(770deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin: 39%;
    }

    75% {
        opacity: 1;
        -webkit-transform: rotate(900deg);
        -webkit-animation-timing-function: ease-out;
        -webkit-origin: 70%;
    }

    76% {
        opacity: 0;
        -webkit-transform: rotate(900deg);
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(900deg);
    }
}

@-ms-keyframes orbit {
    0% {
        opacity: 1;
        z-index: 99;
        -ms-transform: rotate(180deg);
        -ms-animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        -ms-transform: rotate(300deg);
        -ms-animation-timing-function: linear;
        -ms-origin: 0%;
    }

    30% {
        opacity: 1;
        -ms-transform: rotate(410deg);
        -ms-animation-timing-function: ease-in-out;
        -ms-origin: 7%;
    }

    39% {
        opacity: 1;
        -ms-transform: rotate(645deg);
        -ms-animation-timing-function: linear;
        -ms-origin: 30%;
    }

    70% {
        opacity: 1;
        -ms-transform: rotate(770deg);
        -ms-animation-timing-function: ease-out;
        -ms-origin: 39%;
    }

    75% {
        opacity: 1;
        -ms-transform: rotate(900deg);
        -ms-animation-timing-function: ease-out;
        -ms-origin: 70%;
    }

    76% {
        opacity: 0;
        -ms-transform: rotate(900deg);
    }

    100% {
        opacity: 0;
        -ms-transform: rotate(900deg);
    }
}

@keyframes orbit {
    0% {
        opacity: 1;
        z-index: 99;
        transform: rotate(180deg);
        animation-timing-function: ease-out;
    }

    7% {
        opacity: 1;
        transform: rotate(300deg);
        animation-timing-function: linear;
        origin: 0%;
    }

    30% {
        opacity: 1;
        transform: rotate(410deg);
        animation-timing-function: ease-in-out;
        origin: 7%;
    }

    39% {
        opacity: 1;
        transform: rotate(645deg);
        animation-timing-function: linear;
        origin: 30%;
    }

    70% {
        opacity: 1;
        transform: rotate(770deg);
        animation-timing-function: ease-out;
        origin: 39%;
    }

    75% {
        opacity: 1;
        transform: rotate(900deg);
        animation-timing-function: ease-out;
        origin: 70%;
    }

    76% {
        opacity: 0;
        transform: rotate(900deg);
    }

    100% {
        opacity: 0;
        transform: rotate(900deg);
    }
}

.spinner {
    display: none;
}

.loader {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900000;
}
/*.us-spinnerLoader {
background-color:transparent !important;
}*/
/*****************************************************************************************************************/

.modal-content {
    border-radius: 0 !important;
}

.table-select {
    width: 100% !important;
}

    .table-select tr td {
        /*border-bottom: 1px solid #c3c3c3;*/
        padding: 5px;
        cursor: pointer;
    }

    .table-select tr:hover {
        background-color: #e2e2e2;
    }

    .table-select tr:active {
        background-color: #c3c3c3;
    }




/******************************************************************************************************************/
/* this CSS is not part of the widget, it is here just as an example of the demo page styling.... Don't copy this one, roll your own. One
 * of the key things about the widget is that it allows you to do your own styling!
 */

#editor {
    max-height: 250px;
    height: 250px;
    background-color: white;
    border-collapse: separate;
    border: 1px solid rgb(204, 204, 204);
    padding: 4px;
    box-sizing: content-box;
    -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
    box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px;
    overflow: scroll;
    outline: none;
}

#voiceBtn {
    width: 20px;
    color: transparent;
    background-color: transparent;
    transform: scale(2.0, 2.0);
    -webkit-transform: scale(2.0, 2.0);
    -moz-transform: scale(2.0, 2.0);
    border: transparent;
    cursor: pointer;
    box-shadow: none;
    -webkit-box-shadow: none;
}

div[data-role="editor-toolbar"] {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.dropdown-menu a {
    cursor: pointer;
}

ul.dropdown-menu {
    padding: 0 !important;
}

.dropdown-menu li {
    list-style: none;
}

.ta-editor {
    width: 100%;
    padding: 20px;
    border: 1px solid #c3c3c3;
    margin-top: 10px;
}

.btn {
    border-radius: 0 !important;
}


    .btn.btn-default {
        background-color: #f7f7f7;
    }

    .btn.btn-danger {
        background-color: #D91E05;
    }


    .btn.btn-default:hover {
        background-color: #dcdcdc;
    }

    .btn.btn-danger:hover {
        background-color: #c30000;
    }

.sectionTable tr.active td {
    background-color: #e1e1e1 !important;
}

.editor ol {
    list-style: lower-alpha !important;
}

.editor button[name=html], .editor button[name=insertImage], .editor button[name=insertLink], .editor button[name=insertVideo] {
    display: none;
}

* {
    border-radius: 0 !important;
}

.input-buton {
    cursor: pointer;
}

    .input-buton:hover {
    }

a {
    color: #c00;
}

    a:hover {
        color: #c00;
    }

h4 {
    color: #494949;
    padding-top: 5px;
}

legend {
    margin-bottom: 0;
}

.sc-close {
    position: absolute;
    right: 20px;
    font-size: 20px !important;
    cursor: pointer;
    z-index: 999999;
}

    .sc-close:hover {
        color: #3d3d3d;
    }

.mp-btn {
    font-size: 18px !important;
    padding: 5px;
    cursor: pointer;
    border-radius: 50% !important;
}

    .mp-btn:hover {
        font-size: 18px;
        background-color: #c3c3c3;
        border-radius: 50% !important;
    }

    .mp-btn:active {
        font-size: 18px;
        padding: 5px;
        background-color: #b4b4b4;
        color: #1f1f1f;
        border-radius: 50% !important;
    }

/*big-button {
  transition: all .1s linear;
}
big-button:active {
  -moz-transform-origin: left 50%;
    -ms-transform-origin: left 50%;
    transform-origin: left 50%;
    -webkit-transform-origin: left 50%;
    -webkit-transform: perspective(5px) rotateY(0.1deg);
    -ms-transform: perspective(5px) rotateY(0.1deg);
    -moz-transform: perspective(5px) rotateY(0.1deg);
    transform: perspective(5px) rotateY(0.1deg);
}*/


.faws-search:before {
    font-family: FontAwesome !important;
    content: "\f002" !important;
    position: relative;
}

.faws-plus:before {
    font-family: FontAwesome !important;
    content: "\f055" !important;
    position: relative;
}

.faws-file-text:before {
    font-family: FontAwesome !important;
    content: "\f15c" !important;
    position: relative;
}

.faws-user-secret:before {
    font-family: FontAwesome !important;
    content: "\f21b" !important;
    position: relative;
}

.faws-cog:before {
    font-family: FontAwesome !important;
    content: "\f013" !important;
    position: relative;
}

.faws-heartbeat:before {
    font-family: FontAwesome !important;
    content: "\f21e" !important;
    position: relative;
}

.faws-dollly:before {
    font-family: FontAwesome !important;
    content: '\f187' !important;
    position: relative;
}

.faws-dollar:before {
    font-family: FontAwesome !important;
    content: '\f0d6' !important;
    position: relative;
}

.faws-bell:before {
    font-family: FontAwesome !important;
    content: "\f0f3" !important;
    position: relative;
}


.faws-history:before {
    font-family: FontAwesome !important;
    content: "\f1da" !important;
    position: relative;
}

.incircle {
    cursor: pointer;
    font-size: 20px !important;
    border: 2px solid #555 !important;
    width: 35px !important;
    height: 35px !important;
    border-radius: 50% !important;
    text-align: center !important;
    line-height: 35px !important;
    vertical-align: middle !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.content-home-area {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

    .content-home-area:hover {
        box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
    }


/************Custom ui datepicker************/
.custom-calendar > button {
    background-color: transparent !important;
    border: none !important;
    border-radius: 50% !important;
    min-width: 0 !important;
    width: 32px !Important;
    height: 32px !important;
}

    .custom-calendar > button:hover {
        color: #fff !important;
        background-color: #c00 !important;
    }

        .custom-calendar > button:hover span {
            color: #fff !important;
        }

    .custom-calendar > button.active {
        color: #3b3b3b !important;
        background-color: #b1b1b1 !important;
    }

        .custom-calendar > button.active span {
            color: #3b3b3b !important;
            font-weight: bold;
        }

    .custom-calendar > button.current {
        background-color: #eaeaea !important;
    }

        .custom-calendar > button.current span {
            color: #3b3b3b !important;
        }

p.custom-calendar thead, p.custom-calendar thead button {
    color: #fff !important;
    background-color: #c00 !important;
    border: none !important;
}

    p.custom-calendar thead button:hover {
        color: #fff !important;
        background-color: #b00 !important;
        border: none !important;
    }

.custom-calendar .month {
    width: 100% !important;
    border-radius: 0 !important;
}
.custom-calendar .month > .text-info {
    color: #232323;
    font-weight:800;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.user-status-b {
    background-color: #f26a68;
    color: white;
    padding: 5px;
}

.user-status-a {
    background-color: #81dbb2;
    color: white;
    padding: 5px;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}

.btn-info.active, .btn-info:active, .open>.dropdown-toggle.btn-info {
    color: #f22105;
}

.panel-title {
font-weight: bold;
}

/*.btn-swal {
border: 2px solid rgb(154, 154, 154) !important;
min-width:100px;

}
.btn-swal:focus  {
border: 2px solid rgb(154, 154, 154) !important;

}*/

.selectRow {
    border-left: 3px solid #d91e05 !important;
    background-color: #a9a9a9;
    color: white;
}

.table-hover > tbody > tr:hover {
    cursor: pointer !important;
}