html {
    font-family: Century Gothic, sans-serif;
    font-weight: 400;
    font-style: normal;
    background: linear-gradient(to right, #00ac41, white);
    image-rendering: all;
}
body {
    background: transparent !important;
}
p {
    font-family: Century Gothic, sans-serif;
    text-align: left;
}
.o-hidden {
    border-radius: 20px;
    transition: 0.5s all ease-in-out !important;
}
.o-hidden:hover {
    transform: scale(1.02);
    transition-property: transform;
    transition-duration: 0.5s;
    text-decoration: none;
}
.modal-header-dtf {
    float: left;
}
.modal-header .close {
    padding: 0px;
    margin: 0px;
    color: #0f0a3f !important;
    transition: 0.5s all ease-in-out !important;
}
.close:hover {
    color: #93c01f;
    transform: scale(1.1);
    transition-property: transform;
    transition-duration: 0.5s;
    text-decoration: underline white;
    font-family: Century Gothic, sans-serif;
}
.modal-title {
    font-family: Century Gothic, sans-serif;
    font-weight: bold;
}
.hidden {
    display: none;
}
/*
We set the element we are applying our loading mask to relative  
*/

.loading-mask {
    position: relative;
}
/*
Because we set .loading-mask relative, we can span our ::before  
element over the whole parent element  
*/

.loading-mask::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.25);
    z-index: 100;
}
/*
Spin animation for .loading-mask::after  
*/

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}
/*
The loading throbber is a single spinning element with three  
visible borders and a border-radius of 50%.  
Instead of a border we could also use a font-icon or any  
image using the content attribute.  
*/

.loading-mask::after {
    content: "";
    position: absolute;
    border-width: 11px;
    border-style: solid;
    border-color: transparent rgb(92, 221, 125) rgb(255, 255, 255);
    border-radius: 50%;
    width: 24px;
    height: 24px;
    top: calc(50% - 12px);
    left: calc(50% - 12px);
    animation: 2s linear 0s normal none infinite running spin;
    filter: drop-shadow(0 0 2 rgba(0, 0, 0, 0.33));
}
.center_button {
    text-align: center;
}
.width_50 {
    max-width: 50%;
}
.width_60 {
    max-width: 60%;
}
.width_70 {
    max-width: 70%;
}
.width_80 {
    max-width: 80%;
}
.width_90 {
    max-width: 90%;
}
.two_colums {
    float: left;
    width: 48.9999%;
    padding: 5px;
}
.only_show {
    background-color: #f5f5f5;
}
.only_show2 {
    background-color: transparent;
    border: 0px;
    width: 50%;
    padding: 0px;
}
.buscador {
    float: left;
    list-style: none;
    margin-top: -3px;
    padding: 0;
    width: 190px;
    position: absolute;
    display: none;
    background-color: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.2), 0 4px 4px 0 rgba(0, 0, 0, 0.19) !important;
    z-index: 1000;
}
.buscador li {
    padding: 4px;
    border-bottom: 1px solid #f5f5f5;
}
.buscador li:hover {
    background-color: aliceblue;
    cursor: pointer;
}
.back-gris {
    background-color: #ccc;
}
.edit_parametro {
    cursor: pointer;
    color: rgb(236, 236, 236);
}
.edit_parametro:hover {
    color: black;
}
.bottom_line {
    border-bottom: 1px solid #ccc;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
.talbefac {
    margin-top: 15px;
}
.width10 {
    width: 12%;
}
.width5 {
    width: 8%;
}
.width3 {
    width: 3%;
}
.paddingextra {
    padding: 10px;
}
.overflow-fac {
    overflow-y: scroll;
    max-height: 85px;
}
.eliminarFila {
    cursor: pointer;
    color: red;
}
.addRow {
    color: green;
    cursor: pointer;
}
.newborder {
    border: 2px dotted rgb(155, 34, 34);
}
.bg_MORA {
    background-color: #f39494;
    color: #fff;
}
.greenbg {
    background-color: #f39494;
}
.no_modules {
    padding-left: .5rem;
    padding-right: .5rem;
}
.card_no_modules {
    margin-right: .7rem;
}
.panel_principal {
    margin-bottom: 15px !important;
}
.nuevo_modulo {
    margin: .3rem !important;
}
.head-create-module {
    margin-bottom: 1rem;
}
/* #Validation
================================================== */

.help-block.with-errors {
    top: auto;
    position: inherit;
    width: 100%;
    left: 0;
    z-index: 2;
    height: 1px;
    font-size: 13px;
    color: #db695d;
    font-weight: 400;
    letter-spacing: 1px;
}
.help-block.with-errors.textarea-error {
    top: auto;
    position: inherit;
}
.form-control:active, .form-control:focus {
    background-color: rgba(112, 198, 166, 0.164);
}
.active {
    background-color: white;
}
.errorInput {
    border: 1px solid #ca2828;
}
.form-control {
    font-size: 17px !important;
    border-radius: 20px;
}
.new-card-list {
    list-style: none;
    margin: 0 -15px;
}
.new-card.track:not(.variable-height) {
    margin-bottom: 40px;
}
@media screen and (min-width: 1260px) {
    .new-card {
        float: left;
        width: 30%;
    }
}
@media screen and (min-width: 680px) {
    .new-card {
        margin-bottom: 30px;
    }
}
.new-card {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: block;
    position: relative;
    /*padding: 0 15px;*/
    margin: 0 15px;
    transition: transform 50ms 0s ease;
    -webkit-animation: card-fade-up 0.5s ease;
    -moz-animation: card-fade-up 0.5s ease;
    animation: card-fade-up 0.5s ease;
}
.card-box:not(.has-topic-background-color) {
    background: #fff;
    box-shadow: -10px 10px 10px 2px #8080809e;
    margin-left: 30px;
}
.card-box.card-link {
    font-weight: normal;
    text-decoration: none;
}
a.card-box {
    cursor: pointer;
}
.card-box {
    position: relative;
    box-shadow: 0 2px 0 rgb(0 0 0 / 6%);
    border-radius: 5px 5px 4px 4px;
    display: block;
    min-height: 220px;
    padding: 88px 30px 30px;
    transition: 0.5s all ease-in-out;
    text-decoration: underline white;
}
.card-box:hover {
    transform: scale(1.1);
    transition-property: transform;
    transition-duration: 0.5s;
    text-decoration: underline white;
}
.topic-front-end .card-progress {
    background-color: #3659a2;
}
.card-progress {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    border-radius: 4px 4px 0 0;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    justify-items: center;
    height: 58px;
    line-height: 58px;
    padding: 0 30px;
    background-color: #55616c;
    transition: background-color 300ms 0s ease;
}
.card-type {
    display: block;
    margin: 0 0 7px;
    line-height: 12px;
    font-size: 14px;
    color: #576366;
}
.card-title {
    font-family: Century Gothic, sans-serif;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: normal;
    margin: 0 0 20px;
    color: #4b5658;
    white-space: nowrap;
    text-decoration: underline white;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 700;
}
.webkit .card:not(.variable-height) .card-description, .webkit .card:not(.variable-height) .card-description-markdown {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.card:not(.variable-height) .card-description, .card:not(.variable-height) .card-description-markdown {
    max-height: 40px;
}
.card-description, .card-description-markdown {
    position: relative;
    z-index: 0;
    font-size: 14px;
    font-family: Century Gothic, sans-serif;
    overflow: hidden;
    margin: 0;
    color: #6a787c;
    font-weight: 400;
    text-decoration: underline white;
}
.card-actions {
    pointer-events: none;
    list-style: none;
    display: block;
    position: absolute;
    left: 45px;
    right: 45px;
    bottom: 30px;
    z-index: 1;
}
.card-action.resume, .card-action.secondary-action {
    float: left;
}
.card-action {
    position: relative;
    float: left;
    pointer-events: auto;
}
.card-action.secondary {
    float: right;
    margin: 0 0 0 10px;
    height: 36px;
    line-height: 36px;
}
.card-action {
    position: relative;
    float: left;
    pointer-events: auto;
}
.topic-front-end .card-action.secondary-action .button.primary {
    border-color: #cccccc;
}
.topic-front-end .card-action.secondary-action .button.primary {
    background-color: #3659a2;
}
.card-action.secondary-action .button.primary {
    border-width: 0 0 2px;
    line-height: 34px;
}
.card-action.secondary-action .button {
    height: 36px;
    padding: 0 22px;
    line-height: 32px;
}
.button.primary:not(.has-topic-color), .button-primary:not(.has-topic-color) {
    color: #fff;
}
.button.primary, .button-primary {
    background-color: #35A961;
    border: solid 2px #35A961;
}
.button-primary:hover {
    transform: scale(1.01);
    transition-property: transform;
    transition-duration: 0.1s;
}
.topic-front-end .button {
    border-color: #3659a2;
    color: #3659a2;
}
.button:last-child {
    margin-right: 0;
}
.button:not(.has-topic-color) {
    color: #35A961;
}
.button {
    font-size: 14px;
    height: 40px;
    line-height: 36px;
    padding: 0 15px;
}
.button {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, width 0.3s ease, opacity 0.3s ease;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    font-family: Century Gothic, CenturyGothic, AppleGothic, sans-serif;
    font-weight: 500;
    position: relative;
    margin: 0 10px 0 0;
    outline: none;
    text-align: center;
    text-decoration: none !important;
    vertical-align: baseline;
    white-space: nowrap;
    background-color: transparent;
    border: solid 2px #35A961;
}
.white {
    background-color: #ffffff;
}
.box-right {
    padding-top: 1rem;
}
.logo_empresa {
    margin-left: 1.8%;
    width: 100px;
    transition: 0.5s all ease-in-out !important;
    transform-style: preserve-3d;
}
.logo_empresa:hover {
    transform: scale(1.1);
    transition-property: transform;
    transition-duration: 0.5s;
    text-decoration: underline white;
    -webkit-animation: tiembla 2s infinite;
}
@keyframes tiembla {
    0% {
        -webkit-transform: rotateZ(-5deg);
    }
    50% {
        -webkit-transform: rotateZ( 0deg) scale(.8);
    }
    100% {
        -webkit-transform: rotateZ( -5deg);
    }
}
.box-left {
    padding: 2rem;
}
.head_module {
    padding: .5rem;
    opacity: 1;
}
.title_action {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-family: Century Gothic, sans-serif;
    font-size: 25px;
    font-weight: bold;
    text-align: center;
}
.box {
    padding: 1rem;
}
.opendModalSMS {
    position: fixed;
    bottom: 0px;
    left: 1%;
    border-radius: 10px 10px 0px 0px;
    font-size: 20px;
}
#chatUsers {
    max-width: 500px;
    max-height: 500px;
    position: fixed;
    bottom: 10px;
    overflow: auto;
}
.tab-custom-pan {
    /* border: 1px solid #dee2e6;*/
    padding: 1rem .7rem .7rem .7rem;
    margin-bottom: 2rem;
    border-radius: 0px 0px 0.3rem 0.3rem;
}
#ex1 {
    margin-bottom: 0px !important;
}
.box-field {
    color: white;
    background-color: #429b3e;
    border-radius: 5px;
    /* padding: 0.5rem;
    margin-bottom: 20px !important;
    margin-right: 5.3px !important;*/
    min-height: 105px;
}
.text-empropaz {
    color: #040937 !important;
    font-family: Century Gothic, sans-serif;
}
.text-hijos {
    color: #0f0a3f !important;
    font-family: Century Gothic, sans-serif;
    font-size: 20px;
    margin-top: 28px;
    min-height: 105px;
    text-align: center;
}
.box-dark {
    background-color: white;
    /* box-shadow: -5px 5px 10px 0.2px #8080809e;
    transition: 0.1s all ease-in-out;*/
    color: #0f0a3f;
    font-weight: bold;
}
/*.box-dark:hover {
    transform: scale(1.01);
    transition-property: transform;
    transition-duration: 0.1s;
}*/

.box-clear {
    background-color: white !important;
    color: #93c01f;
    /*box-shadow: -5px 5px 10px 2px #8080809e;*/
    /* transition: 0.1s all ease-in-out;*/
    font-weight: bold
}
/*.box-clear:hover {
    transform: scale(1.01);
    transition-property: transform;
    transition-duration: 0.1s;
}*/

.col-sm-4 {
    width: 32.9% !important;
    max-width: 32.9% !important;
}
.col-sm-6 {
    width: 49.5% !important;
    max-width: 49.5% !important;
}
.saveModuleData {
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: 400px;
    width: 500px;
}
.btnEnviar {
    margin-left: 32%;
    font-family: Century Gothic, sans-serif;
    background-color: #0f0a3f;
    color: white;
    font-size: 17px;
    font-weight: bold;
    border-radius: 10px;
    border-color: #0f0a3f;
    box-shadow: 5px 3px 5px 2px gray;
    text-align: center;
    transition: 0.5s all ease-in-out;
}
.btnEnviar:hover {
    transform: scale(1.1);
    transition-property: transform;
    transition-duration: 0.5s;
}
.bSalir {
    background-color: #0f0a3f;
    text-align: center;
    color: white;
    font-size: 15px;
    font-family: Century Gothic, sans-serif;
    border-radius: 10px;
    height: 50%;
    width: 8%;
    box-shadow: 5px 3px 5px 2px #8080809e;
    transition: 0.5s all ease-in-out;
    text-decoration: underline transparent;
}
.bSalir:hover {
    color: white;
    transform: scale(1.1);
    transition-property: transform;
    transition-duration: 0.5s;
    text-decoration: underline transparent;
}
.label_check {
    min-height: 40px;
    min-width: 800px;
    font-family: Century Gothic, sans-serif;
    white-space: pre-wrap;
}
.pretty {
    white-space: pre-line !important;
}
/*.pretty .state label:before {
    border-color: #3f484e;
    top: calc((0% - (100% - 1.5em)) - 8%);
}
.pretty .state label:after {
    top: calc((0% - (100% - 1.5em)) - 8%);
}
*/

label {
    font-family: Century Gothic, sans-serif;
}
h4 {
    font-family: Century Gothic, sans-serif;
    color: #00ac41;
}
span {
    font-family: Century Gothic, sans-serif;
}
.button {
    border-radius: 20px;
    transition: 0.5s all ease-in-out;
}
.button:hover {
    transform: scale(1.18);
    transition-property: transform;
    transition-duration: 0.5s;
}
.btn-primary {
    background-color: #93c01f !important;
    border-color: #93c01f !important;
    transition: 0.5s all ease-in-out !important;
}
.btn-primary:hover {
    transform: scale(1.1);
    transition-property: transform;
    transition-duration: 0.5s;
    text-decoration: underline white;
}
.btn-default {
    background-color: #0f0a3f !important;
    color: white !important;
    transition: 0.5s all ease-in-out !important;
    box-shadow: 5px 5px 5px gray;
}
.btn-default:hover {
    transform: scale(1.1);
    transition-property: transform;
    transition-duration: 0.5s;
    text-decoration: underline white;
}
.searchbox {
    width: 200px;
    float: left;
    transition: 0.5s all ease-in-out !important;
}
.searchbox:hover {
    transform: scale(1.1);
    transition-property: transform;
    transition-duration: 0.5s;
    text-decoration: underline white;
}
.btn-warning {
    background-color: #93c01f !important;
    color: white !important;
    border-color: #93c01f !important;
    box-shadow: 5px 5px 5px gray;
    transition: 0.5s all ease-in-out !important;
}
.btn-warning:hover {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: black !important;
    transform: scale(1.1);
    transition-property: transform;
    transition-duration: 0.5s;
    text-decoration: underline white;
}
.img-subtitle {
    width: 0;
    margin-left: 90%;
}
.img-profile {
    transition: 0.5s all ease-in-out !important;
}
.img-profile:hover {
    /*transform: scale(1.1);
    transition-property: transform;
    transition-duration: 0.5s;
    text-decoration: underline white;*/
    -webkit-animation: tiembla 2s infinite;
}
@keyframes tiembla {
    0% {
        -webkit-transform: rotateZ(-5deg);
    }
    50% {
        -webkit-transform: rotateZ( 0deg) scale(.8);
    }
    100% {
        -webkit-transform: rotateZ( -5deg);
    }
}
.logocentral {
    height: 100%;
    margin-left: 18%;
    margin-bottom: 1%;
    transition: 0.5s all ease-in-out !important;
    margin-top: 1%;
}
.logocentral:hover {
    transform: scale(1.1);
    transition-property: transform;
    transition-duration: 0.5s;
    text-decoration: underline white;
}
/*.rotated {
    animation-name: rotation;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
        transform: translate(0, 35px);
    }
    25% {
        transform: rotate(0deg);
        transform: translate(35px, 0);
    }
    50% {
        transform: rotate(0deg);
        transform: translate(0, -35px);
    }
    75% {
        transform: rotate(0deg);
        transform: translate(-35px, 0);
    }
    100% {
        transform: rotate(360deg);
        transform: translate(0, 35px);
    }
}*/

.logologin {
    width: 10%;
}
/*.rotate {
    animation-name: rotation1;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes rotation1 {
    0% {
        transform: rotate(0deg);
        transform: translate(-200, 0px);
    }
    25% {
        transform: rotate(0deg);
        transform: translate(950px, 0);
    }
    50% {
        transform: rotate(0deg);
        transform: translate(950px, 600px);
    }
    75% {
        transform: rotate(0deg);
        transform: translate(-200px, 600px);
    }
    100% {
        transform: rotate(360deg);
        transform: translate(-200, 0px);
    }
}*/

.btn-success {
    background-color: #0f0a3f !important;
    color: white !important;
    transition: 0.5s all ease-in-out !important;
    box-shadow: 5px 5px 5px gray;
}
.btn-success:hover {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: black !important;
    transform: scale(1.1);
    transition-property: transform;
    transition-duration: 0.5s;
    text-decoration: underline white;
}
.btn-danger {
    background-color: #dc3545 !important;
    color: white !important;
    transition: 0.5s all ease-in-out !important;
    box-shadow: 5px 5px 5px gray;
}
.btn-danger:hover {
    background-color: darkred !important;
    border-color: darkred !important;
    transform: scale(1.1);
    transition-property: transform;
    transition-duration: 0.5s;
    text-decoration: underline white;
}
a {
    font-family: Century Gothic, sans-serif;
}
.btn-ingresar {
    background-color: #0f0a3f;
    font-weight: bold;
    color: white;
    transition: 0.5s all ease-in-out !important;
}
.btn-ingresar:hover {
    background-color: #93c01f;
    font-weight: bold;
    color: white;
    transform: scale(1.1);
    transition-property: transform;
    transition-duration: 0.5s;
    text-decoration: none;
    font-family: Century Gothic, sans-serif;
}
.btn-secondary {
    background-color: red !important;
    border-color: red !important;
    transition: 0.5s all ease-in-out;
}
.btn-secondary:hover {
    background-color: darkred !important;
    border-color: darkred !important;
    color: white;
    transform: scale(1.1);
    transition-property: transform;
    transition-duration: 0.5s;
}
th {
    font-family: Century Gothic, sans-serif;
    color: #0f0a3f;
}
td {
    font-family: Century Gothic, sans-serif;
}
.upload-data {
    border: 0px;
    background-color: transparent;
    font-size: 2rem;
}
.donwload-data {
    border: 0px;
    background-color: transparent;
    font-size: 2rem;
}
.upload-data>i {
    color: #00ac41;
}
.donwload-data>i {
    color: #323e8b;
}
.servidor {
    background-color: transparent;
    height: 50px;
    padding-right: 0;
    height: 120%
}
.tutorial {
    background-color: darkred;
    margin-left: 50%;
}
.help_tutorial {
    align-items: flex-end;
    display: block;
    margin: 7rem;
    margin-left: 28%;
}
.paragraph {
    display: block;
    font-size: 20px;
    color: black;
    position: absolute;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    margin: 20px;
}
.tutorialtitle {
    text-align: center;
    display: flex;
    font-size: 50px !important;
    font-family: Century Gothic, sans-serif;
    color: #00ac41;
    font-weight: bold;
}
.icon {
    color: #93c01f;
}
#formRecuperacion{
    margin-top: 1rem;
}

.text-aviso{
    color: red !important;
    font-family: Century Gothic, sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: larger;
    margin: 2%;
}
.topic-front-end .card-progress {
}
.navbar-expand{
    background-color: #000000 !important;
}
.is-required:after {
  content: '* (Obligatorio)';
  margin-left: 3px;
  color: red;
  font-weight: bold;
  font-size: 9px;
}
.text-subtitle{
    color: #00ac41 !important;
    font-family: Century Gothic, sans-serif;
    font-size: large;
}
.text-mision{
    color: #000000 !important;
    font-family: Century Gothic, sans-serif;
    font-size: large;
}
.rowDuplicated{
    background-color: #efcaca;
}
.errorDuplicated{
    display: inline-block;
}
.color_red{
    color:red !important;
    padding-left: .5rem;
    padding-right: .5rem;
} 
.title_action h4{
    color: #0f0a3f !important;
}
.head_module{
    background-color: #0f0a3f !important;
}