/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/*@import "./fullcalendar.css";*/

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

@-webkit-viewport {
    zoom: 1.0;
    width: device-width;
}

@-moz-viewport {
    zoom: 1.0;
    width: device-width;
}

@-ms-viewport {
    zoom: 1.0;
    width: device-width;
}

@-o-viewport {
    zoom: 1.0;
    width: device-width;
}

@viewport {
    zoom: 1.0;
    width: device-width;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

a {
    color: #6f83d8;
    text-decoration: none
}

    a:hover,
    a:focus {
        color: #4e5f96;
        text-decoration: none !important;
    }

    a.btn:hover {
        border-bottom: none;
    }

* :focus {
    outline: 0 none;
    -moz-outline: 0 none;
    outline: thin transparent;
}

a:active,
a:focus {
    border: none;
    outline: none;
}

input::-moz-focus-inner {
    border: 0;
}


.hover-01:hover {
    color: #4e5f96 !important;
    text-decoration: none !important;
}

button {
    margin: 0;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    background: none;
    border: none;
    border-radius: none;
    box-shadow: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    cursor: pointer;
}

.btn:focus,
.btn:active {
    outline: none;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Color Palette, scrollbars
   ========================================================================== */

.dark-primary-color {
    background: #0288D1;
}

.default-primary-color {
    background: #03A9F4;
}

.light-primary-color {
    background: #B3E5FC;
}

.text-primary-color {
    color: #FFFFFF;
}

.accent-color {
    background: #607D8B;
}

.accent-color2 {
    color: rgb(68, 92, 104);
}

.primary-text-color {
    color: #212121;
}

.secondary-text-color {
    color: #727272;
}

.divider-color {
    border-color: #B6B6B6;
}

::-webkit-scrollbar {
    width: 6px;
    padding: 2px;
}

::-webkit-scrollbar-track {
    border-radius: 3px;
    background: #e5e5e5;
}

::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #999999;
}

.disable-hover,
.disable-hover * {
    pointer-events: none !important;
}

@-moz-document url-prefix() {
    input[type="checkbox"] {
        -moz-appearance: none;
        display: block;
        width: 18px;
        height: 18px;
        border: 2px solid #666666;
        border-radius: 2px;
        transition: 240ms;
    }

    input[type="radio"] {
        -moz-appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid #666666;
    }
}

/* ==========================================================================
   Project Manager's custom styles
   ========================================================================== */

html {
    font-size: 62.5%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

html,
body {
    height: 100%;
}

body {
    background: #f1f1f1;
    color: #212121;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    -webkit-transition: background 1s linear;
    transition: background 1s linear;
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s;
}

.touch body {
    text-rendering: optimizeLegibility;
}

body.mm-menu-open {
    overflow: hidden;
}

.panel-heading-primary {
    background: #03A9F4 !important;
}

.panel-heading-success {
    background: #4CAF50 !important;
}

.panel-heading-danger {
    background: #cb171e !important;
}

h3.panel-title {
    color: #FFFFFF;
}

.modal-content {
    z-index: 4000 !important;
}

.modal-icon {
    font-size: 24px;
    color: dodgerblue;
}

body.modal-open {
    overflow: hidden;
}

body.sidebar-open {
    overflow: hidden;
}

.noscriptmsg {
    text-align: center;
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 15%;
}

.log-on .noscriptmsg h1 {
    line-height: normal;
}

.no-js .preloader-wrapper {
    display: none;
}

.wf-loading h1,
.wf-loading h2,
.wf-loading h3,
.wf-loading h4,
.wf-loading h5,
.wf-loading p,
.wf-loading .navbar-brand {
    visibility: hidden;
}

.wf-inactive {
    opacity: 0;
    transition: opacity 0.1s ease-in;
}

    .wf-active h1,
    .wf-inactive h1,
    .wf-active h2,
    .wf-inactive h2,
    .wf-active h3,
    .wf-inactive h3,
    .wf-active h4,
    .wf-inactive h4,
    .wf-active h5,
    .wf-inactive h5,
    .wf-active p,
    .wf-inactive p,
    .wf-active .navbar-brand,
    .wf-inactive .navbar-brand {
        visibility: visible;
    }

.wf-active {
    opacity: 1;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
    color: #212121;
}

textarea,
textarea.form-control,
input.form-control,
input[type=text],
input[type=password],
input[type=email],
input[type=number],
[type=text].form-control,
[type=password].form-control,
[type=email].form-control,
[type=tel].form-control,
[contenteditable].form-control,
select,
select.form-control {
    color: #212121;
    font-size: 15px;
    border-bottom: 1px solid #ddd;
}

.form-textarea {
    padding-top: 2px;
}

textarea,
textarea.form-control {
    height: 50px;
    max-height: 180px;
    padding-top: 5px;
    resize: none;
    /*  -webkit-transition: height .3s ease;
    -moz-transition: height .3s ease;
    transition: height .3s ease;*/
}

    textarea:focus,
    textarea.form-control:focus {
        overflow: auto;
        /* height: 180px;*/
    }

/*=========================================
    BOTONES BOTONES
===========================================*/

.btn-danger {
    background-image: -webkit-radial-gradient(circle, #f44336 80%, #cb171e 81%);
    background-image: -o-radial-gradient(circle, #f44336 80%, #cb171e 81%);
    background-image: radial-gradient(circle, #f44336 80%, #cb171e 81%);
}

.btn-primary {
    background: #3f4dc6;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary.focus,
    .btn-primary:active {
        background: #293787;
        outline: none !important;
    }


    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary.focus,
    .btn-primary:active,
    .btn-primary.active,
    .open > .dropdown-toggle.btn-primary {
        color: #ffffff;
        background-color: #293787;
        border-color: rgba(0, 0, 0, 0);
    }

.panel {
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.progress {
    border-radius: 5px;
}

.wrapper {
    min-height: 100vh;
    padding-left: 70px;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    /*
  display:block;
  width:100%;
  min-height: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 0;
  z-index: 5;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);

    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);

  -webkit-transition: transform 0.3s;
          transition: transform 0.3s;
  will-change: transform;*/
}

/* Change the white to any color ;) */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.icon-round {
    display: inline-block;
    width: 35px;
    height: 35px;
    padding: 0;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 35px;
    border-radius: 50%;
}

.float-none {
    float: none !important;
}

.form-control.input-fondo::placeholder {
    color: #d4d4d4;
    opacity: 0.8;
}

.icon-input-holder {
    position: absolute;
    right: 0px;
    top: 0px;
    opacity: 0.7;
}

.icon-input-holder2 {
    position: absolute;
    right: 10px;
    top: 7px;
    opacity: 0.5;
}
/* ==========================================================================
 FONDOS FONDOS
   ========================================================================== */

.bg-01 {
    background: #a9aeb7 !important;
}

.bg-02 {
    background: #3f4dc6;
}

.bg-03 {
    background: #6aac96;
}

.bg-04 {
    background: #7e8b99 !important;
}

.bg-05 {
    background: #e4e254 !important;
}

.bg-06 {
    background: #eff0f3 !important;
}

.bg-07 {
    background: #dd6a43 !important;
}

.bg-08 {
    background: #33BBDE;
}

.bg-09 {
    background: #000000;
}

.bk-white {
    background: #fff !important;
}

.bg-success {
    background-color: #1bc5bd !important;
}

.bg-proy {
    background-color: #dedc1c !important;
}

.bg-light-grey {
    color: #000000;
    background-color: #f1f3ff;
    border-color: transparent;
}

.bg-light-primary {
    color: #3445e5;
    background-color: #f1f3ff;
    border-color: transparent;
}

.bg-light-danger {
    color: #f64e60;
    background-color: #ffe2e5;
    border-color: transparent;
}

/* ==========================================================================
  ALTOS ANCHOS
   ========================================================================== */

.min-h-40vh {
    min-height: 40vh;
}

.min-h-100 {
    min-height: 100px;
}

.min-h-270 {
    min-height: 270px;
}

.min-h-240 {
    min-height: 240;
}

.min-h-225 {
    min-height: 225px;
}

.min-h-800 {
    min-height: 800px;
}

.min-h-295 {
    min-height: 295px;
}

.min-h-255 {
    min-height: 255px;
}

.min-h-265 {
    min-height: 295px;
}

.min-h-445 {
    min-height: 445px;
}

.min-h-460 {
    min-height: 460px;
}

.min-h-375 {
    min-height: 375px;
}

.min-h-320 {
    min-height: 320px;
}

.min-h-365 {
    min-height: 365px;
}

.min-h-450 {
    min-height: 450px;
}

.min-h-460 {
    min-height: 460px;
}

.min-h-465 {
    min-height: 465px;
}

.min-h-658 {
    min-height: 658px;
}

.min-h-680 {
    min-height: 680px;
}

.min-h-695 {
    min-height: 695px;
}

.min-h-860 {
    min-height: 860px;
}

.min-h-710 {
    min-height: 710px;
}

.min-h-790 {
    min-height: 790px;
}


.min-h80vh {
    min-height: 80vh;
}

.max-h-310 {
    max-height: 310px !important;
}

.h-310 {
    height: 310px !important;
}

.h-205 {
    height: 205px !important;
}

.h-600 {
    height: 600px !important;
}

.h-60 {
    height: 60px !important;
}

.w-100pr {
    width: 100% !important;
}

.w-100px {
    width: 100px !important;
}

.w-150px {
    width: 150px !important;
}

.w-350px {
    width: 350px !important;
}

.w-450px {
    width: 450px !important;
}

.w-200px {
    width: 200px !important;
}

.h-50 {
    height: 50px;
}

.h-35 {
    height: 35px;
}

.h-30 {
    height: 30px;
}

.w-maxcontent {
    width: 35% !important;
}

@media (min-width: 1200px) {
    .w-xl-300px {
        width: 300px !important;
    }

    .w-xl-200px {
        width: 200px !important;
    }
}

/* ==========================================================================
  PADDING PADDING
   ========================================================================== */

.p-0 {
    padding: 0px;
}

.p-20 {
    padding: 20px;
}

.pt-0 {
    padding-top: 0px !important;
}

.pt-5 {
    padding-top: 5px !important;
}

.pt-10 {
    padding-top: 10px !important;
}

.pt-15 {
    padding-top: 15px !important;
}

.pb-0 {
    padding-bottom: 0px !important;
}

.pb-10 {
    padding-bottom: 10px !important;
}

.pb-15 {
    padding-bottom: 15px !important;
}

.pl-20 {
    padding-left: 20px;
}

.pl-10 {
    padding-left: 10px !important;
}

.pr-10 {
    padding-right: 10px !important;
}

.pr-15 {
    padding-right: 15px !important;
}

.pr-20 {
    padding-right: 20px;
}

.pr-45 {
    padding-right: 45px !important;
}
/* ==========================================================================
  MARGENES MARGENES
   ========================================================================== */

.m-0 {
    margin: 0px;
}

.m-auto {
    margin: 0 auto;
}

.mb-0 {
    margin-bottom: 0px;
}

.mb-3 {
    margin-bottom: 3px !important;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px !important;
}

.mt-0 {
    margin-top: 0px;
}

.mt-2 {
    margin-top: 2px !important;
}

.mt-8 {
    margin-top: 8px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-15 {
    margin-top: 15px !important;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.ml-auto {
    margin-left: auto;
}

.mr-5 {
    margin-right: 5px;
}

.mr-10 {
    margin-right: 10px;
}

.mr-20 {
    margin-right: 20px;
}

.ml-10 {
    margin-left: 10px;
}

.ml-15 {
    margin-left: 15px;
}

.ml-20 {
    margin-left: 20px;
}

.m-auto {
    margin: 0 auto;
}


/* ==========================================================================
 BORDES BORDES
   ========================================================================== */
.bo-r-01 {
    border-right: 1px solid #ccc;
}

.bo-t-01 {
    border-top: 1px solid #ccc;
}

.bo-b-01 {
    border-bottom: 1px solid #ccc;
}

.bo-01-dash {
    border: 1px dashed #fff !important;
}
/* ==========================================================================
   TEXTOS TEXTO
   ========================================================================== */
.text-center {
    text-align: center !important;
}

.text-upp {
    text-transform: uppercase;
}

.text-trans-normal {
    text-transform: none;
}


.text-18 {
    font-size: 18px !important;
}

.text-17 {
    font-size: 17px !important;
}

.text-16 {
    font-size: 16px !important;
}

.text-14 {
    font-size: 14px !important;
}

.text-13 {
    font-size: 13px !important;
}

.text-12 {
    font-size: 12px !important;
}

.text-11 {
    font-size: 11px !important;
}



.text-20 {
    font-size: 20px !important;
}

.text-25 {
    font-size: 25px !important;
}

.text-40 {
    font-size: 40px !important;
}

.text-bold {
    font-weight: bold;
}

/*colores texto*/
.greyscale {
    filter: grayscale(70%);
}

.text-red {
    color: #c53d1b !important;
}

.text-success {
    color: #1bc5bd !important;
}

.text-info {
    color: #2196f3 !important;
}

.text-dark-grey {
    color: #585858 !important;
}

.text-dark {
    color: #181c32 !important;
}

.text-color-01 {
    color: #fff !important;
}

.text-color-02 {
    color: #f2f2f2 !important;
}

.text-grey {
    color: #838383 !important;
}

.text-green {
    color: #26ca6a !important;
}

.text-color-03 {
    color: #b5b5c3 !important;
}

.text-color-04 {
    color: #585ca8 !important;
}

.text-color-05 {
    color: #ef8e78 !important;
}

.text-color-06 {
    color: #3f4dc6 !important;
}

.icon-2x {
    font-size: 2.5rem !important;
}

.lh-normal {
    line-height: normal;
}

.text-primary {
    color: #4e5bc9
}

a.text-primary:hover {
    color: #6c76d1
}

.modal-dialog {
    z-index: 1041;
}


/*===========================================================================
FLEX FLEX
=============================================================================*/

.d-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.align-items-center {
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

.align-items-end {
    -ms-flex-align: end !important;
    align-items: flex-end !important;
}

.justify-content-center {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.justify-content-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
}

.d-lg-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.flex-row {
    -ms-flex-direction: row !important;
    flex-direction: row !important;
}

.flex-column {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}

.flex-lg-fill {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
}

.flex-shrink-0 {
    -ms-flex-negative: 0 !important;
    flex-shrink: 0 !important;
}

.flex-shrink-1 {
    -ms-flex-negative: 1 !important;
    flex-shrink: 1 !important;
}

.flex-grow-1 {
    -webkit-box-flex: 1 !important;
    -ms-flex-positive: 1 !important;
    flex-grow: 1 !important;
}

.justify-content-between {
    -webkit-box-pack: justify !important;
    -ms-flex-pack: justify !important;
    justify-content: space-between !important;
}

.flex-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
}

.order-md-1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

.order-0 {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
}

.order-1 {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

.order-2 {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
}

.order-3 {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
}

.order-4 {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
}

@media (min-width:768px) {
    .order-md-1 {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
    }

    .order-md-2 {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
    }
}

/* ==========================================================================
   LOGON
   ========================================================================== */

.half,
.half .container > .row {
    height: 100vh;
}

@media (max-width: 991.98px) {
    .half .bg {
        height: 500px;
    }
}

.half .contents {
    width: 40%;
}

.half .bg {
    width: 60%;
}

.contents .container {
    width: 100% !important;
}

@media (max-width: 1199.98px) {

    .half .contents,
    .half .bg {
        width: 100%;
    }
}

.half .bg {
    background-size: cover;
    background-position: center;
}

.half a {
    color: #888;
    text-decoration: none !important;
}

    .half a:hover {
        color: #6971b9;
        text-decoration: none !important;
    }

.half .btn {
    height: 54px;
    padding-left: 30px;
    padding-right: 30px;
}

.half .forgot-pass {
    position: relative;
    top: 2px;
    font-size: 14px;
}

/*-----*/

.wrapper.w-logon {
    padding-left: 0px;
}

.wrapper header {
    display: block;
    height: 65px;
    margin-bottom: 0;
    padding: 0;
    position: fixed;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    width: calc(100% - 70px);
    z-index: 800;
    background: #3f4dc6;
    /*background: #03a9f4;*/
    /*  -webkit-box-shadow: inset 0 10px 0 0 #0288d1;
            box-shadow: inset 0 10px 0 0 #0288d1;*/
    /*
    position: fixed;
    margin: 0; padding: 0;
    width: 100%;
    height: 70px;
    z-index: 10;
    background: #03a9f4;

    -webkit-transition: transform 1s ease;
            transition: transform 1s ease;
    -webkit-transition-delay: .5s;
            transition-delay: .5s;
            */
}

.header .container-fluid {
    min-width: 1280px;
    position: relative;
}

h1.header__title {
    /*margin-left: 150px;*/
}

.header__title {
    float: left;
    display: inline;
    width: auto;
    height: 70px;
    margin: 0 0 0 0px;
    padding: 10px 0 0 0;
    color: #fff;
    font-size: 22px;
    line-height: 70px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

    .header__title a {
        color: #fff;
        text-decoration: none;
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }

        .header__title a:hover {
            border-bottom: 1px solid #fff;
        }

        .header__title a:active {
            opacity: 0.5;
        }

    .header__title i {
        width: 15px;
        text-align: center;
        height: 60px;
        line-height: inherit;
        font-size: 18px;
    }

.content {
    /*display: none;*/
    width: 100%;
    height: 100vh;
    /*min-height: 100%;*/
    margin: 0;
    padding: 85px 2% 0 2%;
    /* overflow-x: hidden;
    overflow-y: scroll;*/
    -webkit-overflow-scrolling: touch;
    /* -webkit-transition: transform 1s ease, height 1s ease;
            transition: transform 1s ease, height 1s ease;
    -webkit-transition-delay: .5s;
            transition-delay: .5s;*/
    z-index: 1;
}

.wrapper-home {
    overflow: hidden;
}

    .wrapper-home .paper-card {
        height: 100%;
        min-height: calc(100vh - 170px);
        margin: 0;
    }

.home-panel {
    background: #e1e1e1 !important;
}

.wrapper-home .paper-card > .panel-body {
    height: 100%;
    max-height: 100%;
    padding-right: 10px;
}

.content-pizarra {
    width: 100%;
    /*
    overflow-y: hidden;
    overflow-x: hidden;
    */
}

.page-title {
    float: left;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    font-size: 36px;
    line-height: 75px;
}

.page-title2 {
    color: #727272;
}

.text-alert-sprint {
    display: contents;
}

.rework-icon {
    padding-bottom: 3px;
}

.navbar-inverse {
    background-color: #03A9F4;
}

.navbar-brand {
    width: 100px;
    height: auto;
    background: url(../img/galileo-logo.png) center center no-repeat;
    background-size: cover;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    opacity: 0.5;
    transition: all 0.3s ease-in-out;
}

    .navbar-brand:hover {
        opacity: 1;
    }

/*.navbar-brand:active{
  background-size: 80%;
}*/

.user-dropdown a {
    display: table;
    padding: 0 15px 0 0;
    color: #fff;
}

.user-data {
    display: table-cell;
    width: 40px;
    height: 70px;
    color: #fff;
    padding-top: 10px;
    vertical-align: middle;
}

    .user-data .avatar {
        float: none;
        display: block;
        margin: 0;
        border: 2px solid rgba(255, 255, 255, 0.5);
        object-fit: cover;
    }

    .user-data .avatar {
        object-fit: cover;
        width: 37px;
        height: 37px;
    }

    .user-data .name,
    .user-data .status {
        float: left;
        display: block;
        width: 220px;
        height: 20px;
        line-height: 20px;
        text-align: left;
    }

    .user-data .name {
        margin-top: 3px;
    }

.navbar-nav .user-dropdown .dropdown-menu {
    margin-top: 0;
    padding: 15px 0 10px 0;
    min-width: 200px;
}

.navbar-nav > li.user-dropdown > a {
    height: auto;
    overflow: hidden;
    border-radius: 0;
    padding-left: 5px;
    padding-right: 20px;
}

.user-dropdown {
    position: relative;
}

    .user-dropdown .dropdown-menu > li > a {
        font-size: 15px;
    }

        .user-dropdown .dropdown-menu > li > a .zmdi {
            float: right;
            margin-top: 5px;
        }

@-moz-document url-prefix() {
    .user-dropdown .dropdown-menu > li > a .zmdi {
        position: absolute;
        right: 15px;
    }
}

.user-dropdown .caret,
.user-dropdown .caret-up,
.user-dropdown .chevron {
    position: absolute;
    right: 6px;
    top: 25px;
}

.caret-up {
    width: 0;
    height: 0;
    border-left: 4px solid rgba(0, 0, 0, 0);
    border-right: 4px solid rgba(0, 0, 0, 0);
    border-bottom: 4px solid;
    display: inline-block;
    margin-left: 2px;
    vertical-align: middle;
}

.navbar-nav > li.user-dropdown > a:hover,
.nav .user-dropdown.open > a,
.nav .user-dropdown.open > a:active,
.nav .user-dropdown.open > a:focus {
    background-color: #2b43aa;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: #1976d2;
    border: none;
}

.notify-wrapper {
    position: absolute;
    top: 0;
    width: auto;
    height: 70px;
    text-align: right;
}

    .notify-wrapper.top-bar-icons {
        width: 60px;
    }

    .notify-wrapper .notify-icon {
        display: inline-block;
        width: 45px;
        height: 70px;
        margin: 0;
        padding: 10px 0 0 0;
        color: #fff;
        text-align: center;
        line-height: 60px;
        position: relative;
        overflow: hidden;
    }

        .notify-wrapper .notify-icon:hover,
        .notify-wrapper .notify-icon.active {
            background-color: #2b43aa;
        }

            .notify-wrapper .notify-icon.active:after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                margin: 0 auto;
                right: 0;
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 11px solid #fff;
            }

.notify-icon .indicator {
    position: absolute;
    top: 25px;
    right: 2px;
    width: 8px;
    height: 8px;
    background-color: #ef5350;
    border-radius: 50%;
}

.inboxxx .indicator {
    right: 4px;
}

.notifications .indicator {
    right: 10px;
}

.tasks .indicator {
    right: 5px;
}

.has-deploys .indicator {
    background-color: #CDDC39;
}

.notify-wrapper .inboxxx {
    font-size: 20px;
}

.notify-wrapper .notifications {
    font-size: 18px;
}

.notify-wrapper .fullscreen {
    font-size: 24px;
}

.notify-wrapper .tasks {
    font-size: 24px;
}

.notify-wrapper .mispizarras {
    font-size: 24px;
}

.notify-widget {
    position: absolute;
    top: 68px;
    display: none;
    width: 600px;
    height: 350px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
    -webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    z-index: 10;
    overflow: hidden;
}

    .notify-widget.animated {
        animation-duration: .3s;
    }

    .notify-widget .arrow-up {
        position: relative;
        top: -34px;
        left: 330px;
        width: 0;
        height: 0;
        border-left: 15px solid transparent;
        border-right: 15px solid transparent;
        border-bottom: 15px solid #fff;
    }

    .notify-widget.w-pending--tasks .arrow-up {
        left: 381px;
    }

    .notify-widget > .notify-title {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0;
        padding: 0 15px;
        display: block;
        width: 100%;
        height: auto;
        font-size: 15px;
        font-weight: 400;
        text-align: left;
        color: #727272;
        line-height: 50px;
        border-bottom: 1px solid #e1e1e1;
    }

        .notify-widget > .notify-title .badge {
            margin: -1px 0 0 5px;
            width: 22px;
            height: 22px;
            font-weight: 500;
            letter-spacing: normal;
            line-height: 22px;
            text-indent: 0;
            background: #ed3337;
            background: rgba(237, 51, 55, 0.85);
            border: none;
        }

    .notify-widget .view-log {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 35px;
        display: block;
        margin: 0;
        padding: 0 15px;
        text-align: center;
        text-transform: uppercase;
        font-size: 13px;
        font-weight: 500;
        color: #fff;
        background: #448aff;
        line-height: 35px;
        z-index: 15;
        -webkit-transition: background 0.2s ease;
        transition: background 0.2s ease;
    }

        .notify-widget .view-log:hover {
            text-decoration: none;
            background: #03a9f4;
        }

.notify-body {
    position: absolute;
    top: 51px;
    left: 0;
    display: block;
    width: 99.8%;
    height: 245px;
    margin: 10px 0 0 0;
    padding: 0 0 50px 15px;
    overflow-y: scroll;
}

    .notify-body .hito {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 5px 5px 6px 20px;
        overflow: hidden;
        position: relative;
        border-bottom: 1px solid #dbdbdb;
    }

.notify-widget.w-pending--tasks .hito {
    padding-left: 0;
}

.notify-body .hito p {
    float: left;
    display: block;
    margin: 0;
    padding: 0 0 0 5px;
    text-align: left;
    line-height: 18px;
}

.notify-widget.w-pending--tasks .hito p {
    width: 100%;
    height: auto;
}

.notify-body .hito a,
.content-log a {
    text-decoration: none;
}

    .notify-body .hito a:hover,
    .content-log a:hover {
        border-bottom: 1px solid #2196f3;
    }

    .notify-body .hito a:active,
    .content-log a:active {
        opacity: 0.5;
    }

.notify-body .hito time,
.nsprint {
    float: left;
    display: block;
    margin: -2px 0 0 0;
    padding: 0 0 0 6px;
    width: 100%;
    height: auto;
    color: #727272;
    font-size: 12px;
    text-align: left;
}

.notify-widget.w-pending--tasks .hito time,
.nsprint {
    width: auto;
    margin: 0 15px 0 0;
    padding: 0 0 0 2px;
}

.notify-body .hito .h-action,
.timeline-hito .h-action {
    color: red;
    font-weight: 500;
    border-bottom: 1px dotted red;
    cursor: help;
}

.w-notifications .notify-body .hito > .zmdi {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 20px;
}

.w-notifications .notify-body .hito .zmdi-edit {
    font-size: 15px;
}

.w-notifications .notify-body .hito .zmdi-account-add {
    font-size: 17px;
}

.notify-body .hito .zmdi-playlist-plus {
    font-size: 19px;
}

.paper-card {
    margin-top: 25px;
}

    .paper-card h1 {
        font-size: 34px;
    }

.progress-indicators {
    margin-top: 30px;
}

    .progress-indicators .progress {
        float: left;
        display: block;
        width: 100%;
        margin-bottom: 0;
    }

    .progress-indicators .progress-data {
        float: left;
        display: block;
        width: 100%;
        height: auto;
    }

    .progress-indicators .progress-percent {
        float: right;
        display: inline-block;
        width: 10%;
        margin: 0;
        text-align: right;
        font-size: 12px;
        color: #727272;
    }

    .progress-indicators .progress-data span:first-child {
        float: left;
        text-align: left;
    }

    .progress-indicators .progress-name {
        float: left;
        display: block;
        margin: 0;
        width: 100%;
        height: auto;
        text-align: left;
        text-transform: uppercase;
        font-size: 1.231em;
    }

.ui-sortable {
    float: left;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

    .ui-sortable .task {
        width: 100%;
        float: left;
        display: block;
        height: auto;
    }

.wrapper-home .task {
    padding: 0 0 12px 0;
}

.task-content {
    position: relative;
    width: 100%;
    height: 95%;
    padding: 0 15px 30px 0;
    margin-top: 15px;
    overflow-y: scroll;
}

.action-row {
    padding: 35px 0 5px 3px;
}

.paper-form .action-row button + button {
    margin-left: 15px;
}

.paper-form .btn {
    min-width: 150px;
}

.paper-form .well {
    float: left;
    width: 100%;
    padding: 0;
    background: #f1f1f1;
}

.btn-cancel {
    border: none;
    box-shadow: none;
    font-weight: 500;
}

.btn-pass {
    border: none;
    box-shadow: none;
    font-weight: 500;
    position: relative;
    z-index: 1;
    float: right;
}

.task-title {
    float: left;
    width: 100%;
    height: auto;
    display: block;
}

    .task-title .label {
        font-size: 85%;
        font-weight: 400;
        padding: 3px 8px;
        margin: 3px 0 0 5px;
        display: inline;
        float: left
    }

.task-title-sp {
    float: left;
    display: inline-block;
    width: 80%;
}

    .task-title-sp .task-desc,
    .task-title-sp .task-py {
        float: left;
        display: inline-block;
        width: 100%;
        height: auto;
    }

    .task-title-sp .task-py {
        margin: 0;
    }

    .task-title-sp .task-desc {
        width: auto;
        padding-right: 15px;
        font-size: 1.385em;
    }

.progress {
    height: auto;
    background: #fff;
    overflow: hidden;
}

.progress-bar {
    height: 5px;
    transition: width 2.50s ease !important;
    background-color: #2196f3;
}

.wrapper-home .progress-bar {
    height: 8px;
}

.wrapper-home .progress-bar {
    height: 8px;
}

.progress-bar:last-child {
    border-radius: 0 3px 3px 0;
}

    .progress-bar:last-child:before {
        content: "";
        height: 5px;
    }

.wrapper-home .progress-bar:last-child:before {
    height: 8px;
}

.progress-bar:last-child:before {
    background-color: #ebedf3;
}

.progress-bar-warning {
    background-color: #FFC107;
}

    .progress-bar-warning:last-child.progress-bar:before {
        background-color: #ffe0b3;
    }

.progress-bar-danger {
    background-color: #f44336;
}

    .progress-bar-danger:last-child.progress-bar:before {
        background-color: #f28e92;
    }

.progress-bar-success {
    background-color: #4CAF50;
}

    .progress-bar-success:last-child.progress-bar:before {
        background-color: #c7e7c8;
    }

.progress-bar-violet {
    background-color: #924a91;
}

    .progress-bar-violet:last-child.progress-bar:before {
        background-color: #ccb9cc;
    }

/*.progress .progress-bar {
  -webkit-animation-direction: reverse;
     -moz-animation-direction: reverse;
      -ms-animation-direction: reverse;
       -o-animation-direction: reverse;
          animation-direction: reverse;
}*/

.column-container {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 79vh;
    margin: 0;
    padding: 15px 0 10px 0;
    background: #e1e1e1;
    border-radius: 4px;
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    -webkit-transition-delay: .1s;
    transition-delay: .1s;
    overflow: hidden;
    position: relative;
}

    .column-container.column-expanded {
        max-width: 1024px;
        height: 80vh;
        position: absolute;
        top: 100px;
        left: 0;
        margin: 0 auto;
        right: 0;
        z-index: 50;
        -webkit-transform: scale(0, 5);
        transform: scale(0, 5);
    }

        .column-container.column-expanded.active {
            -webkit-transform: scale(1.2);
            transform: scale(1.2);
            -webkit-transition: all 0.4s ease;
            transition: all 0.4s ease;
        }

    .column-container h1 {
        display: inline-block;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        font-weight: 500;
        color: #727272;
        text-transform: uppercase;
        line-height: 24px;
    }

    .column-container:hover,
    .column-container.ex-over {
        border-color: #03A9F4;
    }

    .column-container.column-expanded:hover {
        border: 2px solid #B3E5FC;
    }
/*
.col-one .cards-container {
    min-height: 65vh;
    max-height: 65vh;
}*/

.cards-container {
    display: block;
    width: 99%;
    /*  height: 100%;
   min-height: 200px;
    max-height: 690px;*/
    margin: 15px 0 0 0;
    padding: 0 15px;
    overflow-y: scroll;
    overflow-x: hidden;
    /*orientation: vertical;*/
}

    .cards-container:after {
        content: ".";
        clear: both;
        display: block;
        visibility: hidden;
        height: 0;
    }

.scrollable-container-top-95 {
    overflow: hidden;
    position: absolute;
    top: 95px;
    left: 0;
    right: 0;
    bottom: 15px;
    padding: 20px;
}

.scrollable-container-top-40 {
    overflow: hidden;
    position: absolute;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 15px;
    padding: 20px;
}

.scrollable-container-top-70 {
    overflow: hidden;
    position: absolute;
    top: 70px;
    left: 0;
    right: 0;
    padding: 20px;
}

.container-bottom-90 {
    bottom: 90px;
}

.sp-actions-bottom {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 15px;
    padding: 20px;
}

.cards-container::-webkit-scrollbar {
    width: 8px;
}

.cards-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.5);
}


.workitem-card {
    display: block;
    width: 100%;
    min-height: 100px;
    height: auto;
    margin: 0 0 15px 0;
    /* padding: 12px;*/
    background: #fff;
    border-radius: 3px;
    overflow: hidden;
    position: relative;
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);*/
    -webkit-transform: scale(1);
    transform: scale(1);
    /*transition: box-shadow 0.5s ease;*/
    -webkit-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

    .workitem-card.is-moving {
        box-shadow: none;
        -webkit-transform: scale(1.25);
        transform: scale(1.25);
        cursor: move;
    }

        .workitem-card.is-moving.gu-mirror .user-designed {
            display: none;
        }

    .workitem-card.is-moved {
        /*background: #03a9f4;
  background: rgb(3,169,244);*/
        border-color: #FF9800;
        color: #fff;
        box-shadow: none;
    }

    .workitem-card[draggable] {
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        Required to make elements draggable in old WebKit -khtml-user-drag: element;
        -webkit-user-drag: element;
        cursor: -webkit-grab !important;
        cursor: -moz-grab !important;
    }

.workitem-content {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

.workitem-card .workitem-content p {
    display: block;
    width: 100%;
    height: auto;
    min-height: 40px;
    color: #212121;
    margin: 0;
    padding: 4px 0 10px 0;
    line-height: 1.3;
    overflow: hidden;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

.workitem-card .workitem-content h1 {
    display: block;
    width: 100%;
    color: #212121;
    margin: 0;
    overflow: hidden;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
    font-size: 16px;
    font-weight: bold;
    text-transform: none !important;
}

.column-container .user-data {
    padding-top: 0;
    float: left;
    display: inline-block;
    height: auto;
}

    .column-container .user-data .avatar {
        position: absolute;
        border: none;
        margin-left: -1px;
    }

.workitem-card:hover {
    cursor: move;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
}

.cloned-column .workitem-card:hover {
    cursor: default;
}

.cloned-column .workitem-card .workitem-content p {
    cursor: text;
}

.workitem-card .user-avatar {
    float: left;
    display: inline-block;
    margin: 0 8px 5px 0;
}

.add-user {
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
}

    .add-user,
    .add-user:focus {
        float: left;
        display: inline-block;
        background-color: #fff;
        color: #0288d1;
        font-size: 13px;
        font-weight: 400;
        border: 1px dashed #0288d1;
        border-radius: 100%;
    }

        .add-user:hover,
        .add-user:active {
            background-color: #0288d1;
            border: 1px solid #0288d1;
            color: #fff;
        }

.workitem-card .card-options {
    float: right;
    display: block;
    width: 87%;
    height: 24px;
    margin: 12px 0 0 0;
    padding: 0 10px;
    line-height: 24px;
}

/*
.col-one .workitem-card .card-options {
    width: 78%;
}
*/

.card-options a {
    float: left;
    display: inline-block;
    width: 30px;
    height: 24px;
    margin: 0 0 0 0;
    color: #727272;
    font-size: 12px;
    text-align: center;
    line-height: 24px;
    border-radius: 500%;
}

    .card-options a:focus {
        text-decoration: none;
    }

    .card-options a > .zmdi {
        color: #0288d1;
        font-size: 14px;
    }

    .card-options a:hover {
        opacity: 0.5;
        text-decoration: none;
    }

.card-options .attached-counter > .zmdi {
    font-size: 16px;
}

.card-options .comments-counter > .zmdi {
    color: #03a9f4;
}

.card-options .comments-counter > .zmdi-chevron-up {
    font-size: 16px;
}

.card-options .assign-user > .zmdi {
    color: #03a9f4;
}

.card-options .assign-user > .zmdi-chevron-up {
    font-size: 16px;
}

.workitem-card .reveal-panel {
    /*display: block; opacity: 1;*/
    width: 100%;
    height: 30px;
    bottom: 15px;
    padding: 0 0 0 15px;
    background: #03a9f4;
    background: rgba(3, 169, 244, 0.90);
    /*background: rgba(0,0,0,0.85);*/
}

    .workitem-card .reveal-panel.animated {
        display: block;
        opacity: 1;
    }

    .workitem-card .reveal-panel .reveal-options {
        display: inline-block;
        width: auto;
        height: auto;
        margin: 0 10px 0 0;
        padding: 0;
        text-align: center;
        font-size: 13px;
        line-height: 30px;
        color: #fff;
    }

        .workitem-card .reveal-panel .reveal-options:hover {
            text-decoration: none;
            opacity: 0.5;
        }

    .workitem-card .reveal-panel .reveal-close {
        float: right;
        width: 70px;
        height: 30px;
        margin: 0;
        padding: 0;
        background: #ed3337;
        background: rgba(237, 51, 55, 0.85);
        border-left: 1px dotted #fff;
    }

.col-two .workitem-card .reveal-panel .reveal-options:first-child,
.col-three .workitem-card .reveal-panel .reveal-options:first-child,
.col-four .workitem-card .reveal-panel .reveal-options:first-child {
    display: none;
}


.tipo-tarea {
    text-transform: uppercase;
    background: #e5e5e5;
    padding: 2px 5px;
    border-radius: 2px;
    line-height: normal !important;
}

    .tipo-tarea .tipo-tarea-text {
        margin: 3px 0px 3px 0px;
        padding: 0;
        color: #999;
        font-size: 11px;
        font-weight: bold;
    }

.comments-counter {
    float: left;
    font-size: 14px;
    color: #999;
}

.more-detail-workitem {
    font-size: 24px;
    line-height: 24px;
    cursor: pointer;
    color: #999;
}

.proyect-state,
.sprint-state {
    float: left;
    display: inline-block;
    width: 35px;
    height: 35px;
    color: #0288D1;
    margin-right: 5px;
    font-size: 13px;
    font-weight: 400;
    border: 2px solid #fff;
    text-align: center;
    line-height: 34px;
}

.time-estimated,
.user-designed {
    color: #727272;
}

.time-estimated-danger,
.user-designed {
    color: #ed3337;
}

.time-estimated,
.user-designed {
    width: 50px;
}

.col-two .user-designed,
.col-three .user-designed,
.col-four .user-designed {
    display: none;
}

.card-extra-info {
    float: left;
    display: none;
    width: 100%;
    height: auto;
    margin: 15px 0 0 0;
    padding: 0;
    overflow: hidden;
}


.title-card-more-detail {
    font-size: 12px;
    text-transform: uppercase;
    color: #949493;
    font-weight: bold;
    margin: 0px;
}

.card-extra-info .user-created, .card-extra-info .date-created {
    font-size: 13px;
}

    .card-extra-info .user-created i, .card-extra-info .date-created i {
        font-size: 13px;
        color: #02aa61;
    }

.comments-form,
.comments-wrap,
.card-actions {
    /* float: left;*/
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    clear: both;
}

    .comments-form .form-group {
        margin-bottom: 0;
    }

.comments-wrap {
    display: block;
    width: 100%;
    height: auto;
    padding: 15px 0;
    margin: 0;
    overflow: hidden;
}

    .comments-wrap .user-comment .user-name {
        font-size: 92%;
        line-height: 20px;
    }

    .comments-wrap .user-comment .user-name,
    .comments-wrap .user-comment .time {
        display: block;
        height: auto;
        margin: 0;
        padding-left: 5px;
        text-align: left;
        color: #727272;
    }

        .comments-wrap .user-comment .user-name strong {
            font-weight: 500;
        }

    .comments-wrap .user-comment .time {
        color: #999;
    }

    .comments-wrap .user-comment .time {
        line-height: 15px;
    }

    .comments-wrap .user-comment p {
        margin-top: 10px;
        font-size: 13px;
        color: #666;
        line-height: 1.3;
    }


.comments-recibido p {
    background: #eef0d8 none repeat scroll 0 0;
    border-radius: 0 8px 8px 8px;
    margin: 0;
    padding: 10px 10px;
    width: 100%;
    border: 1px solid #ccd481;
}

.card-extra-info .comments-form .card-comment {
    overflow: auto;
    resize: none;
    font-size: 13px;
    font-weight: 400;
}

.card-extra-info .comments-form .btn-sm {
    float: right;
    position: absolute;
    bottom: 40px;
    right: 25px;
    color: #ffffff;
    box-shadow: none;
    font-size: 15px;
    background: #212121;
    border-radius: 50%;
    width: 35px;
    height: 35px;
}

    .card-extra-info .comments-form .btn-sm:hover, .card-extra-info .comments-form .btn-sm:active, .card-extra-info .comments-form .btn-sm:focus {
        background: #555454;
    }



.card-extra-info .comments-form .control-label {
    color: #999;
}

    .card-extra-info .comments-form .control-label .zmdi {
        margin-right: 5px;
    }

.card-actions {
    padding: 5px 0;
    border: 2px solid #B3E5FC;
}

.card-action-link {
    display: inline-block;
    margin: 0 0 0 15px;
}

    .card-action-link.del {
        color: #e51c23;
    }

.cards-container > *,
.item-grid > *,
.products > *,
.tab-content--proyectm > * {
    transform: scale(0, 0);
    transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

.no-js .cards-container > *,
.no-js .item-grid > *,
.no-js .products > *,
.tab-content--proyectm > * {
    transform: scale(1, 1);
}

.cards-container.animating-in > *,
.item-grid.animating-in > *,
.products.animating-in > *,
.tab-content--proyectm.animating-in > * {
    transform: scale(1, 1);
}

.cards-container.animating-out > *,
.item-grid.animating-out > *,
.products.animating-out > *,
.tab-content--proyectm > * {
    transform: scale(0, 0);
}

.sidebar-overlay {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    background: #000;
    z-index: 3200;
    transition: visibility 0 linear 0.4s, opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateZ(0);
}

    .sidebar-overlay.active {
        opacity: 0.5;
        visibility: visible;
        transition-delay: 0;
    }

/* -- Sprint Sidebar style ------------------------------- */

.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 3250;
    display: block;
    min-height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: #fff;
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.35);
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
    /*overflow-y: auto;
  overflow-x: hidden;*/
}

.sidebar-default {
    position: relative;
    display: block;
    height: 100%;
    min-height: 200px;
    max-height: 750px;
    margin: 15px 0 0 0;
    padding: 0 15px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.sidebar:before,
.sidebar:after {
    content: " ";
    display: table;
}

.sidebar:after {
    clear: both;
}

.sidebar {
    width: 0;
    transform: translate3d(-710px, 0, 0);
}

    .sidebar.open {
        min-width: 710px;
        width: 710px;
        transform: translate3d(0, 0, 0);
    }

.sidebar-fixed-right {
    transform: translate3d(710px, 0, 0);
}

    .sidebar-fixed-right.open {
        transform: translate3d(0, 0, 0);
    }

.sidebar .page-header {
    margin: 0;
    padding: 0 15px 0 0;
    background: #3f4dc6;
    height: 60px;
}

    .sidebar .page-header h1,
    .sidebar .page-header .timer {
        float: left;
        margin: 0;
        width: 40%;
        display: inline-block;
        padding: 0;
        color: #fff;
        font-size: 20px;
        line-height: 60px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: hidden;
    }

    .sidebar .page-header .timer {
        float: right;
        display: inline-block;
        width: 40%;
        font-weight:;
        text-align: right;
    }

        .sidebar .page-header .timer .zmdi {
            margin-right: 5px;
        }

.sidebar .sidebar-toggle {
    /* position: absolute;
    top: 75px;
    left: -50px;*/
    float: left;
    display: inline-block;
    width: 50px;
    height: 38px;
    font-size: 18px;
    text-align: left;
    color: #fff;
    background: #3f4dc6;
    border-radius: 2px 0 0 2px;
    border: none;
    line-height: 40px;
    box-shadow: none;
    z-index: 2001;
    text-align: center;
}

.sidebar-toggle:focus,
.sidebar-toggle:active,
.sidebar-toggle:active:focus {
    outline: none;
}

.page-header .sidebar-toggle:hover {
    background: #5e68c2;
}

.sidebar-toggle:active {
    background: none;
}

.info-panels {
    padding: 25px 0;
}

    .info-panels .panel-title {
        text-align: center;
    }

    .info-panels .panel-text {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 30px;
    }

        .info-panels .panel-text i {
            display: block;
            clear: both;
            font-size: 45px;
        }

.aside-scroll {
    width: 100%;
    height: calc(100vh - 60px);
    overflow-y: auto;
}

.sp-description,
.sp-burndown,
.sp-action {
    padding: 15px;
}

    .sp-description .item-label {
        float: left;
        display: block;
        width: 100%;
        height: auto;
        color: #727272;
    }

        .sp-description .item-label strong {
            color: #3f4dc6;
            font-weight: 500;
            font-size: 18px;
            text-transform: uppercase;
        }

    .sp-description p {
        font-size: 15px;
        line-height: 22px;
        color: #212121;
        margin: 15px 0 0 0;
        padding: 0 15px 25px 0;
    }

    .sp-description .panel-default > .panel-heading {
        padding: 10px 15px 0 15px;
        background: none;
        font-size: 17px;
        color: #212121;
    }

    .sp-burndown .section-title {
        display: inline-block;
        width: auto;
        height: auto;
        font-size: 15px;
        text-transform: uppercase;
        font-weight: 500;
        margin: 0;
        color: #2b2b2b;
        line-height: 36px;
    }

    .sp-burndown .burndown-chart {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 15px 0;
        position: relative;
    }

        .sp-burndown .burndown-chart canvas {
            /* width: 100% !important;
  max-width: 750px;
  min-width: 500px;
  min-height: 250px;
  height: auto !important;*/
        }

        .sp-burndown .burndown-chart .reference {
            position: absolute;
            top: 0;
            right: 0px;
            width: 120px;
            height: auto;
            background: #fff;
            background: rgba(255, 255, 255, 0.5);
            border: 1px solid #d1d1d1;
        }

.burndown-chart .reference span {
    float: left;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 15px;
    font-size: 12px;
    text-transform: uppercase;
    text-align: right;
    line-height: 30px;
}

.burndown-chart .reference .ideal {
    color: #71909f;
}

.burndown-chart .reference .todo {
    color: #ff5559;
}

.reference .ideal {
    color: #a5a5a5;
}

.reference .todo {
    color: #ea1b3d;
}


.sprint-description a.h1 {
    font-size: 20px;
    text-transform: none;
    line-height: normal;
    border-bottom: 0px !important;
    position: relative;
}



/*
--------------------
para el ideal y por hacer del detalle de sprint cerrado
----------------------

.sp-burndown .burndown-chart .referenceSprint {
    position: absolute;
    top: 0;
    right: 150px;
    width: 120px;
    height: auto;
    background: #fff;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid #d1d1d1;
}

.burndown-chart .referenceSprint span {
    float: left;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 15px;
    font-size: 12px;
    text-transform: uppercase;
    text-align: right;
    line-height: 30px;
}

.burndown-chart .referenceSprint .ideal {
    color: #71909f;
}

.burndown-chart .referenceSprint .todo {
    color: #ff5559;
}
*/

.btn-sp-detail {
    margin: 0;
    padding: 0 0 0 15px;
    float: left;
    display: inline-block;
    font-size: 15px;
    text-align: right;
    color: #3f4dc6 !important;
    line-height: 45px;
    position: relative;
}

    .btn-sp-detail .zmdi {
        position: absolute;
        top: 8px;
        right: -15px;
    }

.cards-container .empty-message {
    display: block;
    width: 100%;
    height: 106px;
    margin: 0 0 15px 0;
    padding: 0 15px;
    text-align: center;
    border: 1px dashed #9e9e9e;
    border-radius: 2px;
}

    .cards-container .empty-message p {
        margin: 0;
        color: #727272;
        font-size: 14px;
        line-height: 100px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

.listrap {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0 0 50px 0;
    max-height: 565px;
    cursor: default;
    -webkit-user-select: none;
    user-select: none;
    overflow-y: scroll;
    overflow-x: hidden;
    position: relative;
}

    .listrap::-webkit-scrollbar {
        width: 8px;
    }

    .listrap::-webkit-scrollbar-track {
        background: #B3E5FC;
    }

    .listrap li {
        float: left;
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 10px;
        transition: background-color 0.1s ease-in-out;
    }

        .listrap li.active,
        .listrap li:hover {
            background-color: #B3E5FC;
        }

    .listrap strong {
        margin-left: 10px;
    }

    .listrap .listrap-toggle {
        float: left;
        display: inline-block;
        width: 70px;
        height: 70px;
        margin: 0;
        padding: 0;
    }

        .listrap .listrap-toggle span {
            background-color: #03A9F4;
            opacity: 0.8;
            z-index: 100;
            width: 70px;
            height: 70px;
            display: none;
            position: absolute;
            border-radius: 50%;
            text-align: center;
            line-height: 70px;
            vertical-align: middle;
            color: #ffffff;
            font-size: 45px;
        }

            .listrap .listrap-toggle span:before {
                font-family: 'Material-Design-Iconic-Font';
                content: "\f299";
            }

    .listrap li.active .listrap-toggle span {
        display: block;
    }

    .listrap .user-details {
        float: left;
        display: inline-block;
        width: auto;
        height: 70px;
        margin: 0;
        padding: 10px 0 0 0;
    }

        .listrap .user-details span {
            float: left;
            display: block;
            width: 100%;
            height: auto;
            margin: 0;
            padding: 0 0 0 15px;
            text-align: left;
        }

        .listrap .user-details strong,
        .listrap .user-details small {
            display: block;
            margin: 0;
        }

.chart-title {
    float: left;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 75px;
}

.chart-wrap {
    float: right;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
}

.chart,
.hours-chart {
    display: inline-block;
    width: 75px;
    height: 75px;
    margin: 0;
    text-align: center;
    vertical-align: top;
    position: relative;
    box-sizing: border-box;
    padding-top: 18px;
}

    .chart span,
    .hours-chart span {
        display: block;
        width: 100%;
        height: auto;
        font-size: 1.6em;
        font-weight: normal;
        text-align: center;
    }

    .chart canvas,
    .hours-chart canvas {
        position: absolute;
        left: 0;
        top: 0;
    }

.card-columns {
    width: 100%;
    -webkit-transition: padding-top 0.5s ease;
    transition: padding-top 0.5s ease;
    overflow-x: auto;
    display: flex;
}

    .card-columns .col-xs-3,
    .card-columns .col-md-3 {
        padding-left: 10px;
        padding-right: 10px;
        min-width: 300px;
        flex-direction: column;
    }

.bar-fixed .card-columns {
    padding-top: 110px;
    padding-bottom: 150px;
}

.bar-fixed .header-detail {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    right: 0;
    width: 100%;
    padding: 0;
    z-index: 10;
}

    .bar-fixed .header-detail .col-md-12 {
        padding-left: 0;
        padding-right: 0;
    }

    .bar-fixed .header-detail .panel {
        padding-left: 18px;
        padding-right: 18px;
    }

.paper-card .form-group,
.modal .form-group {
    position: relative;
    margin-top: 35px;
    margin-bottom: 20px;
}

    .paper-card .form-group:hover input[type=text],
    .paper-card .form-group:hover select,
    .paper-card .form-group:hover textarea {
        -webkit-box-shadow: inset 0 -2px 0 #2196f3;
        box-shadow: inset 0 -2px 0 #2196f3;
    }

    .paper-card .form-group.has-error .float-label {
        color: #e51c23;
    }

    .paper-card .form-group .control-label,
    .modal .form-group .control-label {
        display: block;
        width: 100%;
        color: #727272;
        font-size: 14px;
    }

.float-label {
    position: absolute;
    top: -18px;
    color: #999;
    font-size: 12px;
    font-weight: 400;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
    transition: 0.2s ease all;
}

.paper-card .form-group .float-label,
.modal .form-group .float-label,
.paper-card select.form-control option:not(:checked) ~ .float-label {
    left: 0;
    top: 4px;
    font-size: 16px;
    pointer-events: none;
}

/* active state */

.paper-card .form-control:focus ~ .float-label,
.modal .form-control:focus ~ .float-label,
.paper-card textarea.form-control:valid ~ .float-label,
.modal textarea.form-control:valid ~ .float-label,
.paper-card input.form-control:valid ~ .float-label,
.paper-card select.form-control:valid option:checked ~ .float-label,
.modal select.form-control:valid option:checked ~ .float-label,
.modal .form-control:valid ~ .float-label,
.paper-card .form-control ~ .float-label.float-fixed,
.paper-card select.form-control ~ .float-label.float-fixed,
.modal select.form-control ~ .float-label.float-fixed,
.modal input.form-control ~ .float-label.float-fixed,
.paper-card .form-group-static .float-label {
    top: -18px;
    font-size: 13px;
}

.paper-card .form-control::-webkit-input-placeholder,
.modal .form-control::-webkit-input-placeholder {
    color: #fff;
}

.paper-card .form-control::-moz-placeholder,
.modal .form-control::-moz-placeholder {
    color: #fff;
}

/* firefox 19+ */

.paper-card .form-control:-ms-input-placeholder,
.modal .form-control:-ms-input-placeholder {
    color: #fff;
}

/* ie */

.paper-card input.form-control:focus:-moz-placeholder,
.modal input.form-control:focus:-moz-placeholder {
    color: #fff;
}




.modal.modalwi .form-control::-webkit-input-placeholder {
    color: #dbdbdb;
}


.modal.modalwi .form-control::-moz-placeholder {
    color: #dbdbdb;
}

/* firefox 19+ */


.modal.modalwi .form-control:-ms-input-placeholder {
    color: #dbdbdb;
}

/* ie */


.modal.modalwi input.form-control:focus:-moz-placeholder {
    color: #dbdbdb;
}


.input-filter-text::-webkit-input-placeholder {
    color: #999 !important;
}

.input-filter-text::-moz-placeholder {
    color: #999 !important;
}

.input-filter-text:-ms-input-placeholder {
    color: #999 !important;
}
/**/

.search-filter::-webkit-input-placeholder {
    color: #b6b6b6 !important;
}

.paper-card .form-control:focus::-webkit-input-placeholder,
.modal .form-control:focus::-webkit-input-placeholder {
    color: #b6b6b6;
}

.paper-card .form-control:focus::-moz-placeholder,
.modal .form-control:focus::-moz-placeholder {
    color: #b6b6b6;
}

/* firefox 19+ */

.paper-card .form-control:focus:-ms-input-placeholder,
.modal .form-control:focus:-ms-input-placeholder {
    color: #b6b6b6;
}

/* ie */

.paper-card input.form-control:focus:-moz-placeholder,
.modal input.form-control:focus:-moz-placeholder {
    color: #b6b6b6;
}

.paper-card .form-group.has-feedback i,
.modal .form-group.has-feedback i {
    position: absolute;
    top: 10px;
    right: 2px;
    font-size: 18px;
    color: #727272;
}

.paper-card .action-row {
    /*margin-top: 100px;*/
}

.paper-form > .panel-heading {
    padding: 0 15px;
    -webkit-box-shadow: inset 0 10px 0 #d7d7d7;
    box-shadow: inset 0 10px 0 #d7d7d7;
}

.form-control-static {
    font-size: 15px;
}

.radio-inline,
.checkbox-inline,
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline {
    margin-top: 15px;
}

.list-group-item {
    border: none;
}

.workitems-list .list-group-item:first-child {
    border-radius: inherit;
}

.workitems-list {
    float: left;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 2% 0 0;
    min-height: 600px;
    max-height: 650px;
    position: relative;
    overflow: auto;
}

.backlog-scroll-list {
    float: left;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0 2% 0 0;
    min-height: 600px;
    max-height: 650px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

    .backlog-scroll-list.backlog-proy-det {
        min-height: 200px !important;
        max-height: 350px !important;
    }

.workitems-list li,
.workitems-list-home li {
    width: 100%;
    height: auto;
    display: block;
    float: left;
    margin: 0;
    padding: 1%;
    color: #727272;
    list-style-type: none;
    /*background: rgba(179,229,252,.4);
  border-left: 3px solid rgba(2,136,209,.2);*/
    background: rgba(179, 229, 252, 0.2);
    border-left: 4px solid rgba(2, 136, 209, 0.2);
    transition: background-color .5s ease-in-out;
}

    .workitems-list li:nth-child(odd),
    .workitems-list-home li:nth-child(odd) {
        background: rgba(255, 255, 255, 1);
        border-left: 4px solid rgba(179, 229, 252, 0.6);
    }

    /*.workitems-list li:hover, 
.workitems-list li:nth-child(odd):hover, 
.workitems-list li:first-child.new{
  border-color: rgba(2,136,209,1);
  background: #03A9F4;
  color: #fff;
}

.workitems-list li:hover a,
.workitems-list li:first-child.new a{
  color: #fff;
}*/

    .workitems-list li span,
    .workitems-list li p,
    .workitems-list-home li span,
    .workitems-list-home li p {
        display: inline;
        margin: 0;
        padding: 0;
    }

    .workitems-list li p,
    .workitems-list-home li p {
        width: 90%;
    }

    .workitems-list li a,
    .workitems-list-home li a {
        float: left;
        display: inline-block;
        width: auto;
        max-width: 90%;
    }

.backlog-loaded .panel-body {
    padding-right: 3px;
}

.search-filter {
    margin-top: 12px;
}

.list-group-item .checkbox-inline {
    margin: 0;
    width: 100%;
    float: left;
}

.animating li {
    transform: translateY(-100%) scaleY(1);
    animation-name: insert-from-top;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}

    .animating li:nth-child(1) {
        animation-delay: 0.015s;
        z-index: 1;
    }

    .animating li:nth-child(2) {
        animation-delay: 0.15s;
        z-index: 2;
    }

    .animating li:nth-child(3) {
        animation-delay: 0.225s;
        z-index: 3;
    }

    .animating li:nth-child(4) {
        animation-delay: 0.3s;
        z-index: 4;
    }

    .animating li:nth-child(5) {
        animation-delay: 0.375s;
        z-index: 5;
    }

    .animating li:nth-child(6) {
        animation-delay: 0.45s;
        z-index: 6;
    }

    .animating li:nth-child(7) {
        animation-delay: 0.525s;
        z-index: 7;
    }

    .animating li:nth-child(8) {
        animation-delay: 0.6s;
        z-index: 8;
    }

    .animating li:nth-child(9) {
        animation-delay: 0.675s;
        z-index: 9;
    }

    .animating li:nth-child(10) {
        animation-delay: 0.75s;
        z-index: 10;
    }

    .animating li:nth-child(11) {
        animation-delay: 0.825s;
        z-index: 11;
    }

    .animating li:nth-child(12) {
        animation-delay: 0.9s;
        z-index: 12;
    }

    .animating li:nth-child(13) {
        animation-delay: 0.975s;
        z-index: 13;
    }

    .animating li:nth-child(14) {
        animation-delay: 1.05s;
        z-index: 14;
    }

    .animating li:nth-child(15) {
        animation-delay: 1.125s;
        z-index: 15;
    }

    .animating li:nth-child(16) {
        animation-delay: 1.2s;
        z-index: 16;
    }

    .animating li:nth-child(17) {
        animation-delay: 1.275s;
        z-index: 17;
    }

    .animating li:nth-child(18) {
        animation-delay: 1.35s;
        z-index: 18;
    }

    .animating li:nth-child(19) {
        animation-delay: 1.425s;
        z-index: 19;
    }

    .animating li:nth-child(20) {
        animation-delay: 1.5s;
        z-index: 20;
    }

@keyframes insert-from-top {
    30% {
        opacity: 1;
        transform: translateY(30%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*!
 * Datepicker for Bootstrap
 *
 * Copyright 2012 Stefan Petre
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 */

.datepicker {
    top: 0;
    left: 0;
    padding: 4px;
    margin-top: 1px;
    border-radius: 3px;
    /*.dow {
    border-top: 1px solid #ddd !important;
  }*/
}

    .datepicker:before {
        content: '';
        display: inline-block;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #ccc;
        border-bottom-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: -7px;
        left: 6px;
    }

    .datepicker:after {
        content: '';
        display: inline-block;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-bottom: 6px solid #ffffff;
        position: absolute;
        top: -6px;
        left: 7px;
    }

    .datepicker > div {
        display: none;
    }

    .datepicker table {
        width: 100%;
        margin: 0;
    }

    .datepicker td,
    .datepicker th {
        text-align: center;
        width: 20px;
        height: 20px;
        border-radius: 3px;
    }

        .datepicker td.day:hover {
            color: #fff;
            background: #7e8b99;
            cursor: pointer;
        }

        .datepicker td.day.disabled {
            color: #eeeeee;
        }

        .datepicker td.old,
        .datepicker td.new {
            color: #999999;
        }

        .datepicker td.active,
        .datepicker td.active:hover {
            color: #ffffff;
            background-color: #3f4dc6;
        }

            .datepicker td.active:hover,
            .datepicker td.active:hover:hover,
            .datepicker td.active:focus,
            .datepicker td.active:hover:focus,
            .datepicker td.active:active,
            .datepicker td.active:hover:active,
            .datepicker td.active.active,
            .datepicker td.active:hover.active,
            .datepicker td.active.disabled,
            .datepicker td.active:hover.disabled,
            .datepicker td.active[disabled],
            .datepicker td.active:hover[disabled] {
                color: #ffffff;
                background-color: #3f4dc6;
            }

                .datepicker td.active:active,
                .datepicker td.active:hover:active,
                .datepicker td.active.active,
                .datepicker td.active:hover.active {
                    background-color: rgb(57, 97, 177);
                }

        .datepicker td span {
            display: block;
            width: 47px;
            height: 54px;
            line-height: 54px;
            float: left;
            margin: 2px;
            cursor: pointer;
            border-radius: 3px;
        }

            .datepicker td span:hover {
                background: #eeeeee;
            }

            .datepicker td span.active {
                color: #ffffff;
                background-color: #0288D1;
            }

                .datepicker td span.active:hover,
                .datepicker td span.active:focus,
                .datepicker td span.active:active,
                .datepicker td span.active.active,
                .datepicker td span.active.disabled,
                .datepicker td span.active[disabled] {
                    color: #ffffff;
                    background-color: #0288D1;
                }

                .datepicker td span.active:active,
                .datepicker td span.active.active {
                    background-color: #003399 \9;
                }

            .datepicker td span.old {
                color: #999999;
            }

        .datepicker th.switch {
            width: 145px;
        }

        .datepicker th.next,
        .datepicker th.prev {
            font-size: 21px;
        }

    .datepicker thead tr:first-child th {
        cursor: pointer;
    }

        .datepicker thead tr:first-child th:hover {
            background: #eeeeee;
        }

.input-append.date .add-on i,
.input-prepend.date .add-on i {
    display: block;
    cursor: pointer;
    width: 16px;
    height: 16px;
}

/**
 * CONTENTS
 *
 * #Introduction........Naming conventions used throughout the code.
 *
 * #SETTINGS
 * Variables............Globally-available variables and config.
 *
 * #TOOLS
 * Mixins...............Useful mixins.
 *
 * #GENERIC
 * Demo styles..........Styles for demo only (consider removing these).
 *
 * #BASE
 * Raw styles.............the very basic component wrapper.
 * Modifiers..............the basic styles dependant on component placement.
 * Debuggers..............the basic styles dependant on component placement.
 *
 * #BUTTONS
 * Base..................Wrapping and constraining every button.
 * Modifiers.............Styles that depends on state and settings.
 * Animations............Main animations of the component.
 * Debuggers.............Styles for development.
 *
 * #LABELS
 * Base..................Wrapping and constraining every label.
 * Modifiers.............styles that depends on state and settings.
 * Debuggers.............Styles for development.
 *
 *
 * #DEVELOPMENT
 * In development........These styles are in development and not yet finalised
 * Debuggers..........helper styles and flags for development.
 */

/*------------------------------------*\
    #Introduction
\*------------------------------------*/

/**
 * The code AND the comments use naming conventions to refer to each part of
 * the UI put in place by this component. If you see that somewhere they are
 * not followed please consider a Pull Request. The naming conventions are:
 *
 * "Component" : the widget itself as a whole. This is the last time it will be
 *               called anything different than "component". So, stay away from
 *               "widget", "button" or anything else when referring to the
 *               Component in general.
 *
 * "Main Button" : the button that is always in view. Hovering or clicking on it
 *                 will reveal the child buttons.
 *
 * "Child buttons" : if you've read the previous point you know what they are.
 *                   Did you read the previous point? :)
 *
 * "Label(s)" : the tooltip that fades in when hovering over a button.

/*------------------------------------*\
    #SETTINGS | Variables
\*------------------------------------*/

/* COLORS ----------------------------*/

/* EFFECTS ---------------------------*/

/* SPEEDS ----------------------------*/

/* SIZES -----------------------------*/

/* OTHER VARIABLES -------------------*/

/* IMPORT USER-DEFINED OVERRIDES -----*/

/*------------------------------------*\
    #BASE | Raw styles
\*------------------------------------*/

/**
 * The very core styling of the button.
 * These styles are shared by every instance of the button.
 * Styles placed here should NOT care about placement in the screen,
 * options chosen by the user or state of the button.
 */

.mfb-component,
.mfb-component--tl,
.mfb-component--tr,
.mfb-component--bl,
.mfb-component--br {
    box-sizing: border-box;
    margin: 0;
    position: fixed;
    white-space: nowrap;
    z-index: 30;
    padding-left: 0;
    list-style: none;
}

    .mfb-component *,
    .mfb-component--tl *,
    .mfb-component--tr *,
    .mfb-component--bl *,
    .mfb-component--br *,
    .mfb-component *:before,
    .mfb-component--tl *:before,
    .mfb-component--tr *:before,
    .mfb-component--bl *:before,
    .mfb-component--br *:before,
    .mfb-component *:after,
    .mfb-component--tl *:after,
    .mfb-component--tr *:after,
    .mfb-component--bl *:after,
    .mfb-component--br *:after {
        box-sizing: inherit;
    }

/*------------------------------------*\
    #BASE | Modifiers
\*------------------------------------*/

/**
 * These styles depends on the placement of the button.
 * Styles can be:
 * 1. Top-left:  modified by the " --tl " suffix.
 * 2. Top-right: modified by the " --tr " suffix.
 * 3. Bottom-left:  modified by the " --bl " suffix.
 * 4. Bottom-right: modified by the " --br " suffix.
 */

.mfb-component--tl {
    left: 0;
    top: 0;
}

.mfb-component--tr {
    right: 0;
    top: 0;
}

.mfb-component--bl {
    left: 0;
    bottom: 0;
}

.mfb-component--br {
    right: 15px;
    bottom: 35px;
}

/*------------------------------------*\
    #BUTTONS | Base
\*------------------------------------*/

.mfb-component__button,
.mfb-component__button--main,
.mfb-component__button--child {
    background: #448aff;
    display: inline-block;
    position: relative;
    border: none;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.14), 0 4px 8px rgba(0, 0, 0, 0.28);
    cursor: pointer;
    outline: none;
    padding: 0;
    position: relative;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    font-weight: bold;
    color: #f1f1f1;
}

/**
 * This is the unordered list for the list items that contain
 * the child buttons.
 *
 */

.mfb-component__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .mfb-component__list > li {
        display: block;
        position: absolute;
        top: 0;
        padding: 10px 0;
        margin: -10px 0;
    }

/**
 * This is the basic styles for all the icons inside the main button
 */

.mfb-component__icon,
.mfb-component__main-icon--active,
.mfb-component__main-icon--resting,
.mfb-component__child-icon {
    position: absolute;
    font-size: 18px;
    text-align: center;
    line-height: 56px;
    width: 100%;
}

.mfb-component__wrap {
    padding: 0;
    margin: 0;
}

[data-mfb-toggle="hover"]:hover .mfb-component__icon,
[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--active,
[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--resting,
[data-mfb-toggle="hover"]:hover .mfb-component__child-icon,
[data-mfb-state="open"] .mfb-component__icon,
[data-mfb-state="open"] .mfb-component__main-icon--active,
[data-mfb-state="open"] .mfb-component__main-icon--resting,
[data-mfb-state="open"] .mfb-component__child-icon {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
}

span.tag {
    margin-top: 10px;
}

/*------------------------------------*\
    #BUTTONS | Modifiers
\*------------------------------------*/

.mfb-component__button--main {
    height: 56px;
    width: 56px;
    z-index: 20;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
    /* For some Androids */
    transition: all .1s ease;
    will-change: transform;
}

    .mfb-component__button--main:active {
        opacity: 0.5;
        -webkit-transform: scale3d(0.9, 0.9, 1);
        transform: scale3d(0.9, 0.9, 1);
    }

.mfb-component__button--child {
    height: 56px;
    width: 56px;
}

.mfb-component__main-icon--active,
.mfb-component__main-icon--resting {
    -webkit-transform: scale(1) rotate(360deg);
    transform: scale(1) rotate(360deg);
    -webkit-transition: -webkit-transform 250ms cubic-bezier(0.4, 0, 1, 1);
    transition: transform 250ms cubic-bezier(0.4, 0, 1, 1);
}

.mfb-component__main-icon--active {
    opacity: 0;
}

[data-mfb-toggle="hover"]:hover .mfb-component__main-icon,
[data-mfb-state="open"] .mfb-component__main-icon {
    -webkit-transform: scale(1) rotate(0deg);
    transform: scale(1) rotate(0deg);
}

[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--resting,
[data-mfb-state="open"] .mfb-component__main-icon--resting {
    opacity: 0;
}

[data-mfb-toggle="hover"]:hover .mfb-component__main-icon--active,
[data-mfb-state="open"] .mfb-component__main-icon--active {
    opacity: 1;
}

/*------------------------------------*\
    #BUTTONS | Animations
\*------------------------------------*/

/**
 * SLIDE IN + FADE
 * When hovering the main button, the child buttons slide out from beneath
 * the main button while transitioning from transparent to opaque.
 *
 */

.mfb-component--tl.mfb-slidein .mfb-component__list li,
.mfb-component--tr.mfb-slidein .mfb-component__list li {
    opacity: 0;
    transition: all 0.2s;
}

.mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li,
.mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li,
.mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li,
.mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li {
    opacity: 1;
}

    .mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
    .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
    .mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
    .mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
        -webkit-transform: translateY(70px);
        transform: translateY(70px);
    }

    .mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
    .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
    .mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
    .mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
        -webkit-transform: translateY(140px);
        transform: translateY(140px);
    }

    .mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
    .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
    .mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
    .mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
        -webkit-transform: translateY(210px);
        transform: translateY(210px);
    }

    .mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
    .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
    .mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
    .mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
        -webkit-transform: translateY(280px);
        transform: translateY(280px);
    }

    .mfb-component--tl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(5),
    .mfb-component--tl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(5),
    .mfb-component--tr.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(5),
    .mfb-component--tr.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(5) {
        -webkit-transform: translateY(350px);
        transform: translateY(350px);
    }

.mfb-component--bl.mfb-slidein .mfb-component__list li,
.mfb-component--br.mfb-slidein .mfb-component__list li {
    opacity: 0;
    transition: all 0.5s;
}

.mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li,
.mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li,
.mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li,
.mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li {
    opacity: 1;
}

    .mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
    .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
    .mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
    .mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
        -webkit-transform: translateY(-70px);
        transform: translateY(-70px);
    }

    .mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
    .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
    .mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
    .mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
        -webkit-transform: translateY(-140px);
        transform: translateY(-140px);
    }

    .mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
    .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
    .mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
    .mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
        -webkit-transform: translateY(-210px);
        transform: translateY(-210px);
    }

    .mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
    .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
    .mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
    .mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
        -webkit-transform: translateY(-280px);
        transform: translateY(-280px);
    }

    .mfb-component--bl.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(5),
    .mfb-component--bl.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(5),
    .mfb-component--br.mfb-slidein[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(5),
    .mfb-component--br.mfb-slidein[data-mfb-state="open"] .mfb-component__list li:nth-child(5) {
        -webkit-transform: translateY(-350px);
        transform: translateY(-350px);
    }

/**
 * ZOOM-IN
 * When hovering the main button, the child buttons grow
 * from zero to normal size.
 *
 */

.mfb-component--tl.mfb-zoomin .mfb-component__list li,
.mfb-component--tr.mfb-zoomin .mfb-component__list li {
    -webkit-transform: scale(0);
    transform: scale(0);
}

    .mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(1),
    .mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(1) {
        -webkit-transform: translateY(70px) scale(0);
        transform: translateY(70px) scale(0);
        transition: all 0.5s;
        transition-delay: 0.15s;
    }

    .mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(2),
    .mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(2) {
        -webkit-transform: translateY(140px) scale(0);
        transform: translateY(140px) scale(0);
        transition: all 0.5s;
        transition-delay: 0.1s;
    }

    .mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(3),
    .mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(3) {
        -webkit-transform: translateY(210px) scale(0);
        transform: translateY(210px) scale(0);
        transition: all 0.5s;
        transition-delay: 0.05s;
    }

    .mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(4),
    .mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(4) {
        -webkit-transform: translateY(280px) scale(0);
        transform: translateY(280px) scale(0);
        transition: all 0.5s;
        transition-delay: 0s;
    }

    .mfb-component--tl.mfb-zoomin .mfb-component__list li:nth-child(5),
    .mfb-component--tr.mfb-zoomin .mfb-component__list li:nth-child(5) {
        -webkit-transform: translateY(350px) scale(0);
        transform: translateY(350px) scale(0);
        transition: all 0.5s;
        transition-delay: 0s;
    }

.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
.mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
    -webkit-transform: translateY(70px) scale(1);
    transform: translateY(70px) scale(1);
    transition-delay: 0.05s;
}

.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
.mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
    -webkit-transform: translateY(140px) scale(1);
    transform: translateY(140px) scale(1);
    transition-delay: 0.1s;
}

.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
.mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
    -webkit-transform: translateY(210px) scale(1);
    transform: translateY(210px) scale(1);
    transition-delay: 0.15s;
}

.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
.mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
    -webkit-transform: translateY(280px) scale(1);
    transform: translateY(280px) scale(1);
    transition-delay: 0.2s;
}

.mfb-component--tl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(5),
.mfb-component--tl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(5),
.mfb-component--tr.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(5),
.mfb-component--tr.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(5) {
    -webkit-transform: translateY(350px) scale(1);
    transform: translateY(350px) scale(1);
    transition-delay: 0.2s;
}

.mfb-component--bl.mfb-zoomin .mfb-component__list li,
.mfb-component--br.mfb-zoomin .mfb-component__list li {
    -webkit-transform: scale(0);
    transform: scale(0);
}

    .mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(1),
    .mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(1) {
        -webkit-transform: translateY(-70px) scale(0);
        transform: translateY(-70px) scale(0);
        transition: all 0.5s;
        transition-delay: 0.15s;
    }

    .mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(2),
    .mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(2) {
        -webkit-transform: translateY(-140px) scale(0);
        transform: translateY(-140px) scale(0);
        transition: all 0.5s;
        transition-delay: 0.1s;
    }

    .mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(3),
    .mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(3) {
        -webkit-transform: translateY(-210px) scale(0);
        transform: translateY(-210px) scale(0);
        transition: all 0.5s;
        transition-delay: 0.05s;
    }

    .mfb-component--bl.mfb-zoomin .mfb-component__list li:nth-child(4),
    .mfb-component--br.mfb-zoomin .mfb-component__list li:nth-child(4) {
        -webkit-transform: translateY(-280px) scale(0);
        transform: translateY(-280px) scale(0);
        transition: all 0.5s;
        transition-delay: 0s;
    }

.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
.mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
    -webkit-transform: translateY(-70px) scale(1);
    transform: translateY(-70px) scale(1);
    transition-delay: 0.05s;
}

.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
.mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
    -webkit-transform: translateY(-140px) scale(1);
    transform: translateY(-140px) scale(1);
    transition-delay: 0.1s;
}

.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
.mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
    -webkit-transform: translateY(-210px) scale(1);
    transform: translateY(-210px) scale(1);
    transition-delay: 0.15s;
}

.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
.mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
    -webkit-transform: translateY(-280px) scale(1);
    transform: translateY(-280px) scale(1);
    transition-delay: 0.2s;
}

.mfb-component--bl.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(5),
.mfb-component--bl.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(5),
.mfb-component--br.mfb-zoomin[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(5),
.mfb-component--br.mfb-zoomin[data-mfb-state="open"] .mfb-component__list li:nth-child(5) {
    -webkit-transform: translateY(-350px) scale(1);
    transform: translateY(-350px) scale(1);
    transition-delay: 0.2s;
}

/**
 * FOUNTAIN
 * When hovering the main button the child buttons
 * jump into view from outside the viewport
 */

.mfb-component--tl.mfb-fountain .mfb-component__list li,
.mfb-component--tr.mfb-fountain .mfb-component__list li {
    -webkit-transform: scale(0);
    transform: scale(0);
}

    .mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(1),
    .mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(1) {
        -webkit-transform: translateY(-70px) scale(0);
        transform: translateY(-70px) scale(0);
        transition: all 0.5s;
        transition-delay: 0.15s;
    }

    .mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(2),
    .mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(2) {
        -webkit-transform: translateY(-140px) scale(0);
        transform: translateY(-140px) scale(0);
        transition: all 0.5s;
        transition-delay: 0.1s;
    }

    .mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(3),
    .mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(3) {
        -webkit-transform: translateY(-210px) scale(0);
        transform: translateY(-210px) scale(0);
        transition: all 0.5s;
        transition-delay: 0.05s;
    }

    .mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(4),
    .mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(4) {
        -webkit-transform: translateY(-280px) scale(0);
        transform: translateY(-280px) scale(0);
        transition: all 0.5s;
        transition-delay: 0s;
    }

    .mfb-component--tl.mfb-fountain .mfb-component__list li:nth-child(5),
    .mfb-component--tr.mfb-fountain .mfb-component__list li:nth-child(5) {
        -webkit-transform: translateY(-350px) scale(0);
        transform: translateY(-350px) scale(0);
        transition: all 0.5s;
        transition-delay: 0s;
    }

.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
.mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
    -webkit-transform: translateY(70px) scale(1);
    transform: translateY(70px) scale(1);
    transition-delay: 0.05s;
}

.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
.mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
    -webkit-transform: translateY(140px) scale(1);
    transform: translateY(140px) scale(1);
    transition-delay: 0.1s;
}

.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
.mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
    -webkit-transform: translateY(210px) scale(1);
    transform: translateY(210px) scale(1);
    transition-delay: 0.15s;
}

.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
.mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
    -webkit-transform: translateY(280px) scale(1);
    transform: translateY(280px) scale(1);
    transition-delay: 0.2s;
}

.mfb-component--tl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(5),
.mfb-component--tl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(5),
.mfb-component--tr.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(5),
.mfb-component--tr.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(5) {
    -webkit-transform: translateY(350px) scale(1);
    transform: translateY(350px) scale(1);
    transition-delay: 0.2s;
}

.mfb-component--bl.mfb-fountain .mfb-component__list li,
.mfb-component--br.mfb-fountain .mfb-component__list li {
    -webkit-transform: scale(0);
    transform: scale(0);
}

    .mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(1),
    .mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(1) {
        -webkit-transform: translateY(70px) scale(0);
        transform: translateY(70px) scale(0);
        transition: all 0.5s;
        transition-delay: 0.15s;
    }

    .mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(2),
    .mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(2) {
        -webkit-transform: translateY(140px) scale(0);
        transform: translateY(140px) scale(0);
        transition: all 0.5s;
        transition-delay: 0.1s;
    }

    .mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(3),
    .mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(3) {
        -webkit-transform: translateY(210px) scale(0);
        transform: translateY(210px) scale(0);
        transition: all 0.5s;
        transition-delay: 0.05s;
    }

    .mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(4),
    .mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(4) {
        -webkit-transform: translateY(280px) scale(0);
        transform: translateY(280px) scale(0);
        transition: all 0.5s;
        transition-delay: 0s;
    }

    .mfb-component--bl.mfb-fountain .mfb-component__list li:nth-child(5),
    .mfb-component--br.mfb-fountain .mfb-component__list li:nth-child(5) {
        -webkit-transform: translateY(350px) scale(0);
        transform: translateY(350px) scale(0);
        transition: all 0.5s;
        transition-delay: 0s;
    }

.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
.mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(1),
.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(1) {
    -webkit-transform: translateY(-70px) scale(1);
    transform: translateY(-70px) scale(1);
    transition-delay: 0.05s;
}

.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
.mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(2),
.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(2) {
    -webkit-transform: translateY(-140px) scale(1);
    transform: translateY(-140px) scale(1);
    transition-delay: 0.1s;
}

.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
.mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(3),
.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(3) {
    -webkit-transform: translateY(-210px) scale(1);
    transform: translateY(-210px) scale(1);
    transition-delay: 0.15s;
}

.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
.mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(4),
.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(4) {
    -webkit-transform: translateY(-280px) scale(1);
    transform: translateY(-280px) scale(1);
    transition-delay: 0.2s;
}

.mfb-component--bl.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(5),
.mfb-component--bl.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(5),
.mfb-component--br.mfb-fountain[data-mfb-toggle="hover"]:hover .mfb-component__list li:nth-child(5),
.mfb-component--br.mfb-fountain[data-mfb-state="open"] .mfb-component__list li:nth-child(5) {
    -webkit-transform: translateY(-350px) scale(1);
    transform: translateY(-350px) scale(1);
    transition-delay: 0.2s;
}

/*------------------------------------*\
    #LABELS | base
\*------------------------------------*/

/**
 * These are the labels associated to each button,
 * exposed only when hovering the related button.
 * They are called labels but are in fact data-attributes of
 * each button (an anchor tag).
 */

[data-mfb-label]:after {
    content: attr(data-mfb-label);
    opacity: 0;
    transition: all 0.5s;
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 10px;
    border-radius: 3px;
    color: rgba(255, 255, 255, 1);
    font-size: 13px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    margin-top: -10.5px;
    transition: all 0.5s;
}

[data-mfb-toggle="hover"] [data-mfb-label]:hover:after,
[data-mfb-state="open"] [data-mfb-label]:after {
    content: attr(data-mfb-label);
    opacity: 1;
    transition: all 0.3s;
}

/*------------------------------------*\
    #LABELS | Modifiers
\*------------------------------------*/

.mfb-component--br [data-mfb-label]:after,
.mfb-component--tr [data-mfb-label]:after {
    content: attr(data-mfb-label);
    right: 70px;
}

.mfb-component--tl [data-mfb-label]:after,
.mfb-component--bl [data-mfb-label]:after {
    content: attr(data-mfb-label);
    left: 70px;
}

.mfb-component,
.mfb-component--tl,
.mfb-component--tr,
.mfb-component--bl,
.mfb-component--br {
    z-index: 2500;
}

.mfb-component__button:hover,
.mfb-component__button--main:hover,
.mfb-component__button--child:hover {
    background: #03A9F4;
    color: #fff;
}

.modal-body .control-label {
    display: block;
    width: 100%;
}

.modal-body .tab-content {
    padding: 55px 0 0 0;
}

.modal-body .nav > li > a {
    padding: 10px 15px 10px 0;
    margin-right: 10px;
    font-size: 18px;
}

.badge {
    padding: 0;
    margin: 23px 0 0 10px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    border-radius: 100%;
    font-size: 13px;
    font-weight: 500;
    color: #f1f1f1;
    text-indent: 0;
    letter-spacing: 0.03em;
}

/* Log-on *****************************************/

/* Log-on *****************************************/

body.log-on {
    overflow: hidden;
}

.log-on .page-header {
    display: block;
    margin: 0;
    padding: 5% 0 5% 0;
    border: none;
    clear: both;
}

    .log-on .page-header h1,
    .log-on .page-header h2 {
        margin: 0;
        display: block;
        text-align: center;
    }

    .log-on .page-header h1 {
        color: #727272;
        font-size: 3.429em;
    }

    .log-on .page-header h2 {
        color: #727272;
        font-size: 1.714em;
        line-height: 50px;
    }

.form-container {
    display: block;
    width: 35%;
    max-width: 380px;
    margin: 0 auto;
    padding: 3em 2em 2em 2em;
    background: #fafafa;
    border: 1px solid #ebebeb;
    box-shadow: rgba(0, 0, 0, 0.14902) 0px 1px 1px 0px, rgba(0, 0, 0, 0.09804) 0px 1px 2px 0px;
}

    .form-container .btn {
        margin-top: 20px;
    }

.profile-img-card {
    width: 96px;
    height: 96px;
    margin: 0 auto 10px;
    display: block;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

/*
 * Form styles
 */

.profile-name-card {
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0 0;
    min-height: 1em;
}

.forgot-password {
    display: block;
    margin-top: 20px;
}

/* listados *******************/

.row-card {
    padding-top: 20px;
    padding-bottom: 150px;
    position: relative;
    z-index: 1;
}

.list-card {
    height: 250px;
    position: relative;
    border-radius: 3px;
    position: relative;
    overflow: hidden;
}

    .list-card h1 {
        display: block;
        max-width: 80%;
        margin: 0;
        font-size: 18px;
        color: #666;
        line-height: 35px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .list-card h1.full-w {
            max-width: 100%;
            line-height: 25px;
        }

    .list-card h2 {
        display: block;
        max-width: 100%;
        margin: 0;
        font-size: 1.175em;
        color: #727272;
        font-weight: 300;
        line-height: 18px;
    }

        .list-card h2 span {
            font-weight: 300;
        }

    .list-card p {
        margin: 0;
        padding: 25px 0 10px 0;
        text-align: left;
        line-height: 1.4em;
        white-space: normal;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .list-card .owner,
    .list-card .obj-type {
        position: absolute;
        top: 13px;
        right: 15px;
        display: block;
        width: auto;
        height: auto;
        margin: 0;
    }

        .list-card .owner .user-avatar {
            max-width: 100%;
            width: auto;
            height: auto;
            opacity: 0.8;
        }

        .list-card .owner:hover .user-avatar {
            opacity: 1;
        }

    .list-card .obj-type {
        width: 35px;
        height: 35px;
        right: 60px;
        text-align: center;
        color: #727272;
        font-size: 2.475em;
        text-transform: uppercase;
        line-height: 35px;
        opacity: 0.3;
    }

    .list-card .type-lang {
        min-width: 35px;
        width: auto;
    }

    .list-card .obj-type:hover {
        opacity: 1;
    }

    .list-card .obj-type.bug:hover {
        color: red;
    }

    .list-card .obj-type.mejora:hover {
        color: green;
    }

    .list-card .tooltip {
        min-width: 130px;
    }

    .list-card .panel-body {
        min-height: 100%;
        padding-bottom: 45px;
    }

.bg-bottom {
    position: fixed;
    width: 100%;
    height: 150px;
    bottom: 0;
    left: 0;
    display: block;
    background: linear-gradient(to top, rgba(229, 229, 229, 1) 0%, rgba(125, 185, 232, 0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5', endColorstr='#007db9e8', GradientType=0);
    z-index: 1;
}

.row-card > * {
    transform: scale(0, 0);
    transition: transform 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

.no-js .row-card > * {
    transform: scale(1, 1);
}

.row-card.animating-in > * {
    transform: scale(1, 1);
}

.row-card.animating-out > * {
    transform: scale(0, 0);
}

.panel-actions {
    width: 100%;
    height: 45px;
    display: block;
    padding: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    border-top: 1px solid #eee;
}

    .panel-actions .action-celd,
    .panel-actions .comments-counter,
    .panel-actions .pstate,
    .panel-actions .proyect-state,
    .panel-actions .sprint-state {
        float: left;
        display: inline-block;
        width: 45px;
        height: 45px;
        text-align: center;
        font-size: 17px;
        line-height: 45px;
        border-left: 1px solid #eee;
    }

    .panel-actions .comments-counter,
    .panel-actions .pstate,
    .panel-actions .proyect-state,
    .panel-actions .sprint-state {
        width: auto;
        padding-left: 15px;
        font-size: 15px;
        font-weight: 200;
        color: #B6B6B6;
        border: none;
    }

    .panel-actions .proyect-state {
        border: 0;
    }

    .panel-actions .sprint-state {
        font-size: 20px;
    }

        .panel-actions .sprint-state time {
            font-size: 13px;
        }

    .panel-actions .pstate {
        width: 45px;
        padding-left: 0;
        color: #607D8B;
    }

    .panel-actions .card-action-link {
        display: inline;
        color: #727272;
        margin: 0;
        text-decoration: none;
    }

        .panel-actions .card-action-link:hover {
            color: #0288D1;
        }

.list-card:hover .panel-actions .card-action-link {
    color: #03A9F4;
}

.panel-actions .card-action-link.edit:hover {
    color: #0288D1;
}

.panel-actions .card-action-link.delete:hover {
    color: red;
}

.panel-actions .card-action-link:active {
    opacity: 0.3;
}

.modal-confirmation .modal-dialog .modal-footer {
    border-top: 1px solid #eee;
}

.alerts .modal-content {
    box-shadow: none;
    -webkit-box-shadow: none;
    background: none;
}

.panel-actions .description-link {
    float: right;
    width: 45px;
    margin: 0 -2px 0 0;
    text-align: center;
}

.team {
    display: block;
    width: 100%;
    height: auto;
    margin: 10px 0 0 0;
    padding: 0;
}

.team-wrap img {
    float: left;
    display: inline-block;
    margin: 5px 5px 0 0;
    padding: 0;
}

.avatar-empty {
    float: left;
    display: inline-block;
    width: 45px;
    height: 45px;
    margin: 5px 5px 0 0;
    padding: 0;
    text-align: center;
    color: #727272;
    font-size: 1.214em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 44px;
    background: #e1e1e1;
    border-radius: 50%;
}

.team-wrap,
.team-info {
    float: left;
    display: inline-block;
    width: auto;
    height: 50px;
    margin: 10px 0 0 0;
    padding: 0 0 1% 0;
    white-space: nowrap;
    overflow: hidden;
}

.team-wrap {
    width: 85%;
}

.team-info {
    width: 15%;
}

.team-count {
    float: right;
    display: block;
    margin: 5px auto;
    background: none;
    border: 1px dashed #c1c1c1;
}

.reveal-panel {
    position: absolute;
    bottom: 45px;
    left: 0;
    width: 100%;
    height: 105px;
    margin: 0;
    padding: 5px 15px;
    background: #fff;
    display: none;
    opacity: 0;
}

    .reveal-panel.bounceIn {
        display: block;
        opacity: 1;
    }

    .reveal-panel .card-action-link {
        position: relative;
        right: 0;
        bottom: 0;
    }

.team-form-added {
    max-width: 100%;
    height: auto;
}

    .team-form-added .add-user-form {
        width: 50px;
        height: 50px;
        margin: 5px 0 0 0;
        font-size: 1.429em;
        border-radius: 50%;
        line-height: 38px;
    }

        .team-form-added .add-user-form i {
            margin-left: -3px;
        }

        .team-form-added .add-user-form:hover {
            background: #03A9F4;
        }

.paper-detail .form-detail {
    float: left;
    display: block;
    margin: 10px 0 0 0;
    padding: 0 0 25px 0;
    font-size: 1.143em;
}

.paper-detail p.form-detail {
    line-height: 1.25em;
}

.paper-detail .control-label {
    color: #727272;
}

/* ==========================================================================
  PAGINACION PAGINACION
   ========================================================================== */

.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;
    background-color: #6f83d8;
    border-color: #6f83d8;
    cursor: default;
}

.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
    color: #6f83d8;
    background-color: #eeeeee;
    border-color: #dddddd;
}

/* ==========================================================================
   User Profile
   ========================================================================== */

.paper-card-user {
    width: 80%;
    max-width: 400px;
    /*display: block;*/
    margin: 25px 0 0 0;
}

.dropzone {
    position: relative;
    top: -50px;
    width: 100%;
    height: auto;
    min-height: 150px;
    margin: 0;
    padding: 0;
    display: block;
    z-index: 1;
}

    .dropzone:hover .dz-message {
        display: block;
    }

.avatar-wrap,
.dropzone-previews {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 135px;
    height: 135px;
    margin: 0 auto;
    padding: 0;
}

    .avatar-wrap figure {
        width: 100%;
        position: absolute;
        top: 0;
    }

.paper-card-user .user-avatar,
.dropzone .dz-preview .dz-image img {
    width: 135px;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.paper-card-user .user-avatar {
    margin-top: 2px;
}

.user-avatar:hover {
    opacity: 0.75;
}

.paper-card-user .user-title-name,
.paper-card-user .user-rol-position {
    display: block;
    margin: -25px 0 0 0;
    text-align: center;
    font-size: 24px;
}

.paper-card-user .user-rol-position {
    margin: 0;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 36px;
    color: #727272;
}

.paper-card-user > .panel-body {
    min-height: 455px;
    position: relative;
}

.user-email {
    width: auto;
    text-align: center;
    font-size: 18px;
}

.call-lynks {
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 24px;
    margin: 20px 0 0 0;
}

    .call-lynks a {
        display: inline-block;
        margin: 0 5px;
        width: 50px;
        height: 50px;
        line-height: 50px;
    }

.paper-card-user .action-row .btn {
    display: block;
    float: none;
    margin: 0 auto;
}

.paper-card-user .action-row {
    width: 100%;
    position: absolute;
    bottom: 15px;
}

.paper-card-user .p-component {
    position: relative;
}

    .paper-card-user .p-component .progress-percent {
        position: absolute;
        display: block;
        width: 50%;
        height: auto;
        color: #727272;
        left: 0;
        bottom: -25px;
    }

        .paper-card-user .p-component .progress-percent.text-right {
            left: inherit;
            right: 0;
        }

.tab-progress .p-component {
    float: left;
    width: 100%;
    margin-bottom: 10px;
}

    .tab-progress .p-component .progress {
        margin-bottom: 5px;
    }

    .tab-progress .p-component .progress-data {
        float: left;
        display: block;
        width: 100%;
        height: auto;
    }

.task-details .task-time:nth-child(3) {
    color: black;
}

select,
select.form-control {
    float: left;
    display: block;
    color: #212121;
    margin-left: -4px;
}

    select.form-control option {
        color: #212121;
    }

        select.form-control option:first-child {
            color: #727272;
        }

#col-right {
    display: none;
}

    #col-right .paper-card.fadeInUp {
        display: block;
    }

.dz-details,
.dropzone .dz-preview.dz-error .dz-error-message {
    display: none;
}

.dropzone .dz-preview .dz-error-mark svg g {
    fill: red;
}

.dropzone .dz-preview .dz-success-mark svg path {
    fill: #03A9F4;
}

.paper-card-user-tasks {
    margin: 25px 0 0 0;
    width: 400px;
    height: 400px;
    overflow: hidden;
}

    .paper-card-user-tasks .panel-body {
        position: relative;
        left: 0;
        right: 0;
        padding: 0;
        min-height: 100%;
    }

    .paper-card-user-tasks .avatar-wrap {
        margin: auto;
        position: absolute;
        width: 100px;
        height: 100px;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

        .paper-card-user-tasks .avatar-wrap img {
            display: block;
            margin: 0 auto;
        }

.pending-tasks .list-group-item {
    padding-top: 0;
    margin-bottom: 2px;
    border-radius: 0px;
}

    .pending-tasks .list-group-item .task-link {
        float: left;
        display: inline-block;
        width: auto;
        max-width: 85%;
        font-size: 15px;
        color: #212121;
        line-height: 30px;
        clear: right;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pending-tasks .list-group-item:hover .task-link {
        color: #212121;
    }

    .pending-tasks .list-group-item .task-link:hover,
    .pending-tasks .list-group-item .proyect-link:hover,
    .pending-tasks .list-group-item .comment-link:hover {
        color: #0288D1;
        text-decoration: none;
    }

    .pending-tasks .list-group-item .task-details {
        float: left;
        display: inline-block;
        width: auto;
        height: auto;
        padding: 0 15px 0 0;
        text-align: left;
        line-height: 20px;
        clear: both;
    }

    .pending-tasks .list-group-item .proyect-link,
    .pending-tasks .list-group-item .comment-link {
        display: inline;
        float: left;
        width: auto;
        height: auto;
        margin: 0 15px 0 0;
        min-width: 80px;
        color: #727272;
    }

    .pending-tasks .list-group-item .comment-link {
        width: 120px;
    }

.tab-content {
    float: left;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.pending-tasks .tab-pane {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 15px 0 0 0;
}

.pending-tasks .list-group-item.c-low {
    border-left-color: #4CAF50;
}

.pending-tasks .list-group-item.c-medium {
    border-left-color: #FFC107;
}

.pending-tasks .list-group-item.c-high {
    border-left-color: #f44336;
}

.list-group-item:last-child {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.pending-tasks .nav-tabs {
    float: left;
    display: inline-block;
    width: auto;
}

.btn-filter {
    float: right;
}

    .btn-filter .dropdown-menu {
        left: inherit;
        right: 0;
    }

    .btn-filter .btn {
        width: 30px;
        font-size: 18px;
        line-height: 30px;
        padding: 0;
    }

    .btn-filter .dropdown-menu > li.filtered > a::before,
    .btn-filter .dropdown-menu > li.filtered > a:hover::before {
        float: right;
        font-family: 'Material-Design-Iconic-Font';
        font-weight: normal;
        font-style: normal;
        content: "\f26b";
        color: #0288D1;
    }

    .btn-filter .dropdown-menu > li > a:hover::before {
        float: right;
        font-family: 'Material-Design-Iconic-Font';
        font-weight: normal;
        font-style: normal;
        content: "\f26b";
    }

.taks-time-countdown {
    position: absolute;
    right: 0;
    top: 0;
    width: 150px;
    height: auto;
    text-align: center;
    font-size: 20px;
    color: #727272;
    line-height: 58px;
}

    .taks-time-countdown.running::before {
        float: left;
        display: inline-block;
        font-family: 'Material-Design-Iconic-Font';
        font-weight: normal;
        font-style: normal;
        content: "\f0bb";
        color: #212121;
    }

    .taks-time-countdown.paused::before {
        float: left;
        display: inline-block;
        font-family: 'Material-Design-Iconic-Font';
        font-weight: normal;
        font-style: normal;
        content: "\f0b8";
    }

    .taks-time-countdown .timer {
        color: #212121;
    }

.view-wrap {
    float: right;
    display: inline-block;
    width: auto;
    height: 75px;
}

    .view-wrap .btn-view,
    .view-wrap .btn-filter-view {
        float: left;
        display: inline-block;
        width: 25px;
        height: 35px;
        margin: 20px 5px 20px 5px;
        padding: 0;
        text-align: center;
        color: #212121;
        line-height: 35px;
    }

        .view-wrap .btn-view:hover,
        .view-wrap .btn-filter-view:hover {
            color: #0288D1;
            text-decoration: none;
        }

        .view-wrap .btn-view:active,
        .view-wrap .btn-filter-view:active {
            opacity: 0.5;
            text-decoration: none;
        }

        .view-wrap .btn-view i {
            display: inline;
        }

        .view-wrap .btn-view.active-view {
            color: #727272;
            opacity: 0.5;
            cursor: default;
        }

    .view-wrap .btn-filter-view {
        color: #212121;
    }

    .view-wrap .btn-view:focus,
    .view-wrap .btn-view:active {
        text-decoration: none;
        border-bottom: none;
    }

.filter-options li {
    margin-left: 40px;
}

.filter-options .label-control {
    color: #b6bed6;
}

.filter-options input,
.filter-options input.form-control {
    -webkit-box-shadow: none;
    box-shadow: none;
    color: #fff;
}

    .filter-options input::placeholder {
        /* Chrome, Firefox, Opera, Safari 10.1+ */
        color: #fff;
        opacity: 1;
        /* Firefox */
        font-weight: bold;
    }

    .filter-options input:-ms-input-placeholder {
        /* Internet Explorer 10-11 */
        color: #fff;
        font-weight: bold;
    }

    .filter-options input::-ms-input-placeholder {
        /* Microsoft Edge */
        color: #fff;
        font-weight: bold;
    }

.filter-options select:hover,
.filter-options select.form-control:hover {
}

.col-md-1-medio {
    width: 12%;
    float: left;
}

.col-md-2-medio {
    width: 20%;
    float: left;
}

.col-150px {
    float: left;
    width: 100px !important;
    text-align: left;
}

.col-calc-150px {
    width: calc(100% - 100px);
}

.col-80px {
    float: left;
    width: 80px !important;
    text-align: left;
}

.col-calc-80px {
    width: calc(100% - 80px);
}

.filter-options select,
.filter-options select.form-control {
    color: #fff;
}

.filter-action {
    width: 100%;
    display: block;
    padding: 0 15px 0 15px;
    /*border-top: 1px solid #e1e1e1;*/
    position: absolute;
    bottom: 15px;
    left: 15px;
}

.filter-list .label-control {
    float: left;
    display: block;
    width: 100%;
}

.filter-list .checkbox,
.filter-list .radio {
    float: left;
    display: inline-block;
    width: auto;
    padding: 0 20px 0 0;
    margin: 10px 0 0 0;
}

.tags {
    margin: 0px;
    /*padding:25px 0 0 0;*/
    list-style: none;
    overflow: hidden;
}

    .tags li,
    .tags span {
        float: left;
        line-height: 22px;
        position: relative;
        font-size: 12px;
        font-weight: 200;
    }

    .tags li {
        float: right;
        display: inline-block;
        margin: 0;
    }

    .tags span {
        margin-left: 20px;
        padding: 0 10px 0 12px;
        background: #aa0674;
        color: #fff;
        text-decoration: none;
        -moz-border-radius-bottomright: 4px;
        -webkit-border-bottom-right-radius: 4px;
        border-bottom-right-radius: 4px;
        -moz-border-radius-topright: 4px;
        -webkit-border-top-right-radius: 4px;
        border-top-right-radius: 4px;
    }

        .tags span:before {
            content: "";
            float: left;
            position: absolute;
            top: 0;
            left: -10px;
            width: 0;
            height: 0;
            border-color: transparent #aa0674 transparent transparent;
            border-style: solid;
            border-width: 10px 10px 12px 0;
        }

        .tags span:after {
            content: "";
            position: absolute;
            top: 9px;
            left: 0;
            float: left;
            width: 4px;
            height: 4px;
            border-radius: 10px;
            background: #fff;
        }

        .tags span:hover {
            background: #ac4288;
        }

            .tags span:hover:before {
                border-color: transparent #ac4288 transparent transparent;
            }

        .tags span a {
            display: inline;
            margin: 0 0 0 5px;
            color: #fff;
            font-weight: 400;
        }

.cd-control .radio {
    float: left;
    display: inline-block;
    width: auto;
    margin: 15px 0 0 0;
    padding: 0 20px 0 0;
    font-size: 15px;
    font-weight: 500;
    position: relative;
}

    .cd-control .radio > label {
        font-size: 14px;
        letter-spacing: 0.04em;
    }

/*.cd-control .cd-color{
  float: right; display: inline-block;
  width: 30px; height: auto; min-height: 1px;
  margin: 0; padding: 0 0 5px 0; color: #fff;
  text-align: center;
  position: absolute;
  bottom: 8px; left: 25px;
}

.cd-control .cd-color.c-low{
  background-color: #4CAF50;
  height: 0; line-height: 22px;
  transition: height 1s linear;
  transition-delay: .5s;
}

.cd-control .cd-color.c-medium{
  background-color: #FFC107;
  height: 0; line-height: 30px;
  transition: height 1s linear;
  transition-delay: 1s;
}

.cd-control .cd-color.c-high{
  background-color: #f44336;
  height: 0; line-height: 45px;
  transition: height 1s linear;
  transition-delay: 1.5s;
}*/

/**/

.modal-loaded .cd-control .cd-color.c-low {
    height: 22px;
}

.modal-loaded .cd-control .cd-color.c-medium {
    height: 30px;
}

.modal-loaded .cd-control .cd-color.c-high {
    height: 45px;
}

/* Chart modal workitems ****/

.hours-piewidget {
    position: absolute;
    float: right;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    right: 15px;
    top: 5px;
}

.te-group span {
    float: left;
    display: inline-block;
    margin: 0;
    padding: 0 5px 0 0;
    text-align: left;
    line-height: 30px;
}

.te {
    float: left;
    display: inline-block;
    height: 30px;
    width: 45px;
}

.proyect-list .list-card {
    height: 200px;
}

.panel-actions .tooltip {
    min-width: 10px;
    top: -25px !important;
    left: 8px !important;
}

.panel-actions .tooltip-inner {
    width: 100px;
    line-height: 19px;
}

.btn-signin:active {
    opacity: 0.5;
}

.paper-card .card-title {
    font-size: 24px;
}

.wrapper-home .paper-card .card-title {
    margin: 0;
}

.wrapper-home .card-title .badge {
    position: relative;
    top: -4px;
    left: 8px;
    margin: 0;
    background: #ddd;
    color: #727272;
}

.table-list {
    display: block;
    overflow-x: hidden;
    overflow-y: scroll;
}

.table .comments-counter,
.table .pstate,
.table .proyect-state,
.table .sprint-state {
    display: block;
    width: 100%;
    font-size: 15px;
    text-align: center;
    color: #727272;
    border: none;
    margin: 0;
    line-height: 35px;
}

.table > tbody > tr > td .btn {
    font-size: 15px;
}

.table-pagination {
    display: block;
    width: 100%;
    height: auto;
    border-top: 1px solid #eee;
}

.panel-table .table-pagination {
    border: none;
}

.table-pagination .pagination {
    /*float: right;*/
    margin: 0;
}

.pactivo .panel-actions .proyect-state,
.proyect-state .zmdi-done,
.spcompleto .sprint-state .zmdi,
.spcompleto .sp-data-percent {
    color: #4CAF50;
}

.pInactivo .panel-actions .proyect-state,
.proyect-state .zmdi-report,
.spIncompleto .sprint-state .zmdi,
.spIncompleto .sp-data-percent {
    color: #f44336;
}

.pactivo .panel-body,
.spcompleto .panel-body {
    border-radius: 3px 3px 0 0;
    -webkit-box-shadow: inset 0 2px 0 0 #4CAF50;
    box-shadow: inset 0 2px 0 0 #4CAF50;
}

.pInactivo {
    -webkit-box-shadow: none;
    box-shadow: none;
}

    .pInactivo .panel-body,
    .spIncompleto .panel-body {
        border-radius: 3px 3px 0 0;
        -webkit-box-shadow: inset 0 2px 0 0 #f44336;
        box-shadow: inset 0 2px 0 0 #f44336;
    }

.sprints .reveal-panel {
    width: 99%;
    max-height: 60px;
    margin: 5px 0 5px 0;
    padding-top: 0;
    padding-right: 0;
    overflow-y: scroll;
    overflow-x: hidden;
}

    .sprints .reveal-panel p {
        padding: 5px 0 0 0;
    }

.sprints .sprint-date {
    position: absolute;
    right: 0;
    top: 0;
    width: 85px;
    height: 75px;
    text-align: center;
    color: #727272;
    line-height: 75px;
}

.sprints .sp-data-percent {
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
    width: 135px;
    height: 75px;
    font-size: 30px;
    line-height: 75px;
}

.sidebar .sprint-state {
    position: absolute;
    top: 20px;
    right: 16px;
    display: inline;
    color: #4CAF50;
}

.sidebar-form,
.sidebar-results {
    padding-top: 25px;
    padding-bottom: 10px;
}

    .sidebar-form .btn {
        /*float: right;*/
        margin-left: 15px;
        margin-top: 5px;
    }

.sidebar-sprint-data {
    background: #03A9F4;
    border-radius: 0 0 4px 4px;
}

    .sidebar-sprint-data > h2 {
        margin: 0;
        padding: 0 30px;
        background: #0288D1;
        color: #fff;
        line-height: 50px;
    }

.user-task-wrap {
    display: block;
    width: 98.5%;
    min-height: 200px;
    max-height: 250px;
    margin: 20px 0 20px 0;
    padding: 0 15px 0 15px;
    overflow-y: scroll;
}

.user-sidebar-list,
.user-task-list {
    float: left;
    display: inline-block;
    margin: 0;
    padding: 0 2% 0 0;
    width: 50%;
    height: auto;
}

    .user-sidebar-list li,
    .user-task-list li {
        float: left;
        width: 100%;
        display: block;
        padding: 0 0 10px 0;
        list-style-type: none;
    }

        .user-sidebar-list li figure {
            float: left;
            display: inline;
            width: auto;
        }

    .user-sidebar-list .user-name {
        float: left;
        display: block;
        width: auto;
        height: auto;
        padding-left: 10px;
        font-size: 15px;
        color: #fff;
        line-height: 45px;
    }

.user-task-list {
    float: right;
}

    .user-task-list .task-total,
    .user-task-list .hours-total {
        float: left;
        display: inline-block;
        width: 50%;
        height: auto;
        font-size: 15px;
        text-align: right;
        color: #fff;
        line-height: 45px;
    }

.total-listfooter {
    height: 75px;
    background: #B3E5FC;
    color: #222222;
    line-height: 75px;
    border-radius: 0 0 4px 4px;
}

.sidebar label.float-label {
    position: absolute;
    color: #999;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

.sidebar .form-group {
    position: relative;
}

.sidebar .float-label {
    left: 15px;
    top: 6px;
    font-size: 15px;
    pointer-events: none;
}

/* active state */

.sidebar .form-control:focus ~ .float-label,
.sidebar .form-control:valid ~ .float-label {
    top: -18px;
    font-size: 12px;
    font-weight: 300;
}

/* input colors ---- */

.sidebar .form-control:focus ~ label {
    color: #0288D1;
}

.total-wrap {
    float: right;
    width: 100%;
    height: auto;
    padding: 0 15px;
}

    .total-wrap .total-time {
        float: right;
        display: inline-block;
        height: auto;
        width: auto;
        text-align: right;
        font-size: 17px;
        line-height: 75px;
    }

.confirm-alert {
    display: block;
    text-align: center;
    color: #ed3337;
    margin: 15px;
}

.sidebar .alert-warning {
    margin: 20px 0 0 0;
    padding: 0 15px;
    background: rgba(255, 152, 0, 0.55);
    color: #513004;
    overflow: hidden;
}

    .sidebar .alert-warning i,
    .sidebar .alert-warning p {
        float: left;
        display: inline-block;
        line-height: 50px;
    }

    .sidebar .alert-warning p {
        padding: 0 0 0 15px;
    }

.sidebar .alert .alert-link {
    padding-bottom: 3px;
    color: #513004;
    border-bottom: 1px dotted #513004;
}

a.alert-link.sidebar-toggle {
    cursor: pointer;
}

.text-overflow-card {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

p.text-card {
    font-size: 12px !important;
    margin-left: 10px;
}

.sidebar .alert .alert-link:hover,
.sidebar .alert .alert-link:active,
.sidebar .alert .alert-link-back:hover,
.sidebar .alert .alert-link-back:active {
    opacity: 0.75;
    text-decoration: none;
}

.sidebar.spcompleto {
    -webkit-box-shadow: inset 0 10px 0 0 #4CAF50;
    box-shadow: inset 0 10px 0 0 #4CAF50;
}

.sidebar.spIncompleto {
    -webkit-box-shadow: inset 0 10px 0 0 #f44336;
    box-shadow: inset 0 10px 0 0 #f44336;
}

.sidebar-results .data {
    float: left;
    display: block;
    width: 100%;
    height: auto;
    text-align: left;
}

.sidebar-results .data-title {
    font-size: 15px;
    font-weight: 300;
    color: #727272;
}

.sidebar-results .data-result {
    font-size: 22px;
    font-weight: 500;
    color: #222222;
}

.carousel-control.left,
.carousel-control.right {
    background-image: none
}

.sidebar-sprint-tasks {
    padding-top: 2px;
    height: 415px;
    overflow: auto;
}

.sidebar .alert .alert-link-back {
    float: left;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    color: #513004;
}

.sidebar .alert .alert-link-back,
.sidebar .sp-step-two .alert .zmdi-warning {
    display: none;
}

.sidebar .sp-step-two .alert .alert-link {
    cursor: none;
    text-decoration: none;
    border-bottom: none;
}

.sidebar .sp-step-two .alert .alert-link-back {
    display: inline-block;
}

.sidebar.spcompleto .panel {
    margin: 0 1px 23px 1px;
}

.sidebar.spcompleto .panel-body {
    min-height: 50px;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.sidebar .cards-container {
    padding: 2px;
    min-height: inherit;
    max-height: inherit;
    height: auto;
    overflow: visible;
}

    .sidebar .cards-container .workitem-card {
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }

        .sidebar .cards-container .workitem-card:hover {
            cursor: inherit;
            -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
        }

.workitem-card.wazul {
    background: blue;
    opacity: 1;
}

/* Toggle Button
 *
 * a.k.a. hamburger icon. 
 */

.mm-menu-wrapper {
    display: table;
    position: absolute;
    top: 10px;
    left: 15px;
    width: 40px;
    height: 54px;
    margin: 0;
    padding: 0;
    z-index: 5000;
}

    .mm-menu-wrapper .mm-inner {
        display: table-cell;
        width: 100%;
        height: 100%;
        vertical-align: middle;
    }

.mm-menu-toggle {
    position: relative;
    width: 22px;
    height: 18px;
    margin: 2.5px auto;
    background: -webkit-linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 7px, #fff 7px, #fff 9px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 5px);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0) 7px, #fff 7px, #fff 9px, rgba(255, 255, 255, 0) 5px, rgba(255, 255, 255, 0) 5px);
    font-size: 1;
    text-indent: -9999px;
    z-index: 25;
    -webkit-transition: opacity 0.2s ease;
    transition: opacity 0.2s ease;
    will-change: transform;
}

    .mm-menu-toggle::before,
    .mm-menu-toggle::after {
        display: block;
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #fff;
        content: "";
    }

    .mm-menu-toggle::before {
        top: 2px;
        -webkit-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
        transform-origin: bottom left;
    }

    .mm-menu-toggle::after {
        bottom: 0;
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
    }

    .mm-menu-toggle,
    .mm-menu-toggle::before,
    .mm-menu-toggle::after {
        -webkit-transition: all .3s;
        transition: all .3s;
    }

        /* active states */

        .mm-menu-toggle.active {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }

            .mm-menu-toggle.active::before,
            .mm-menu-toggle.active::after {
                background: #fff;
            }

            .mm-menu-toggle.active::before {
                width: 75%;
                -webkit-transform: translateY(7px) rotate(-45deg);
                -ms-transform: translateY(7px) rotate(-45deg);
                transform: translateY(7px) rotate(-45deg);
            }

            .mm-menu-toggle.active::after {
                width: 75%;
                -webkit-transform: translateY(-7px) rotate(45deg);
                -ms-transform: translateY(-7px) rotate(45deg);
                transform: translateY(-7px) rotate(45deg);
            }

        .mm-menu-toggle:active {
            opacity: 0.5;
        }

/**
 * The actual menu
 *
 * Here be all the stuff for the menu itself.
 */

.mm-menu {
    background-color: #fff;
    color: #fff;
    bottom: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    -webkit-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
    width: 70px;
    z-index: 1000;
    /*  
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3100;
    background-color: #fff;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    box-shadow: 0;
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);

            -webkit-transform: translate3d(-100%, 0, 0);
                    transform: translate3d(-100%, 0, 0);

    -webkit-transition: transform 0.3s, box-shadow 0.3s;
            transition: transform 0.3s, box-shadow 0.3s;
    will-change: transform;*/
}

    .mm-menu:hover {
        width: 230px;
        box-shadow: 0 0 0 15px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    }

    .mm-menu.active {
        /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);

          -webkit-transform: translate3d(0, 0, 0);
                  transform: translate3d(0, 0, 0);*/
    }

/* header */

.mm-menu__header {
    position: relative;
    width: 100%;
    height: 65px;
    /*url(../img/logo-galileo.svg) center center no-repeat*/
    background-size: contain;
    background: #3f4dc6;
    /*-webkit-box-shadow: inset 0 10px 0 0 #0288d1;
    box-shadow: inset 0 10px 0 0 #0288d1;*/
}

.peers {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    height: auto;
    max-width: 100%;
    margin: 0;
    padding: 0;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
}

.peer {
    display: block;
    height: auto;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.logo {
    background-position: 50%;
    width: 69px;
    height: 69px;
    padding: 5px;
}

    .logo img {
        height: 90%;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

.mm-menu .logo-text {
    opacity: 0;
    color: #fff;
    margin: 12px 0 0 20px;
    font-family: 'Roboto', Helvetica Neue, Arial, sans-serif;
    font-size: 20px;
}

.mm-menu:hover .peers {
    padding: 0 0px;
    -webkit-transition: all .1s ease;
    -o-transition: all .1s ease;
    transition: all .1s ease;
}

.mm-menu:hover .logo-text {
    opacity: 1;
}

.icon-holder {
    border-radius: 6px;
    display: inline-block;
    font-size: 20px;
    height: 35px;
    left: 0;
    line-height: 35px;
    margin-right: 14px;
    position: relative;
    text-align: center;
    width: 35px;
}

.mm-menu__items {
    /*border-right: 1px solid rgba(255,255,255,.1);*/
    height: calc(100vh - 65px);
    list-style: none;
    margin: 0;
    overflow: auto;
    padding: 0;
    position: relative;
    margin: 25px 0 0 0;
    padding: 0;
    /*
  float: left; display: block;
  width: 100%; height: auto;
 */
}

.mm-menu__link {
    display: block;
    font-size: 14px;
    font-weight: 500;
    padding: 5px 15px;
    position: relative;
    white-space: nowrap;
    -webkit-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease;
    color: #727272;
}

    .mm-menu__link:hover,
    .mm-menu__link:focus {
        text-decoration: none !important;
        background: #404b77;
        height: auto;
        color: #fff !important;
    }

.sub-menu li .mm-menu__link {
    display: block;
    font-size: 12px;
}

    .sub-menu li .mm-menu__link:hover,
    .sub-menu li .mm-menu__link:focus {
        text-decoration: none !important;
        background: #f1f1f1 !important;
        height: auto;
        color: #727272 !important;
    }

.mm-menu__items .mm-menu__item {
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 18px;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    position: relative;
}

.mm-menu__items .sub-menu {
    border-radius: 0;
    border: none;
    box-shadow: none;
    margin: 0;
    padding: 0;
    width: 100%;
    font-size: 14px;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    background: #fff;
}

.mm-menu .dropdown-header {
    font-size: 14px;
}

.mm-menu__items .mm-menu__item.active.collapsed {
    background: #fff;
    height: auto;
}

.mm-menu__items .mm-menu__item .mm-menu__link .zmdi.zmdi-chevron-down,
.mm-menu__items .mm-menu__item .mm-menu__link .zmdi.zmdi-chevron-up {
    position: absolute;
    top: 15px;
    right: 15px;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: transform .2s ease;
    transition: transform .2s ease;
    will-change: transform;
    display: none
}

.mm-menu:hover .mm-menu__items .mm-menu__item .mm-menu__link .zmdi.zmdi-chevron-down,
.mm-menu:hover .mm-menu__items .mm-menu__item .mm-menu__link .zmdi.zmdi-chevron-up {
    display: inline-block;
}

.mm-menu__items .mm-menu__item.open .mm-menu__link .zmdi.zmdi-chevron-down,
.mm-menu__items .mm-menu__item.open .mm-menu__link .zmdi.zmdi-chevron-up {
    transform: rotate(180deg);
}

.mm-menu__link-text {
    display: none;
}

.mm-menu:hover .mm-menu__item .mm-menu__link-text {
    display: inline-block;
}

.mm-menu .mm-menu__item .sub-menu.collapse {
    display: none;
}

.mm-menu:hover .mm-menu__item .sub-menu.collapse.in {
    display: block !important;
}

.mm-menu .mm-menu__item .sub-menu.collapse.in {
    display: none;
}

.mm-menu__item {
    display: block;
    width: 100%;
    height: auto;
    /* opacity: 0; overflow: hidden;
  -webkit-transform: translateX(-75%);
      -ms-transform: translateX(-75%);
          transform: translateX(-75%);

  -webkit-transform: translate3d(-75%, 0, 0);
          transform: translate3d(-75%, 0, 0);
  will-change: transform;*/
}

    /*
.mm-menu__item.in-view {
  opacity: 1;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);

  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
/**/

    .mm-menu__item.item-1 {
        -webkit-transition: opacity 0.5s 0.1s, -webkit-transform 0.3s 0.1s;
        transition: opacity 0.5s 0.1s, transform 0.3s 0.1s;
    }

    .mm-menu__item.item-2 {
        -webkit-transition: opacity 0.5s 0.2s, -webkit-transform 0.3s 0.2s;
        transition: opacity 0.5s 0.2s, transform 0.3s 0.2s;
    }

    .mm-menu__item.item-3 {
        -webkit-transition: opacity 0.5s 0.3s, -webkit-transform 0.3s 0.3s;
        transition: opacity 0.5s 0.3s, transform 0.3s 0.3s;
    }

    .mm-menu__item.item-4 {
        -webkit-transition: opacity 0.5s 0.4s, -webkit-transform 0.3s 0.4s;
        transition: opacity 0.5s 0.4s, transform 0.3s 0.4s;
    }

    .mm-menu__item.item-5 {
        -webkit-transition: opacity 0.5s 0.5s, -webkit-transform 0.3s 0.5s;
        transition: opacity 0.5s 0.5s, transform 0.3s 0.5s;
    }

    .mm-menu__item.item-6 {
        -webkit-transition: opacity 0.5s 0.6s, -webkit-transform 0.3s 0.6s;
        transition: opacity 0.5s 0.6s, transform 0.3s 0.6s;
    }

    .mm-menu__item.item-7 {
        -webkit-transition: opacity 0.5s 0.7s, -webkit-transform 0.3s 0.7s;
        transition: opacity 0.5s 0.7s, transform 0.3s 0.7s;
    }

    .mm-menu__item.item-8 {
        -webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.3s 0.8s;
        transition: opacity 0.5s 0.8s, transform 0.3s 0.8s;
    }

    .mm-menu__item.item-13 {
        -webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.3s 0.8s;
        transition: opacity 0.5s 0.8s, transform 0.3s 0.8s;
    }

    .mm-menu__item.item-14 {
        -webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.3s 0.8s;
        transition: opacity 0.5s 0.8s, transform 0.3s 0.8s;
    }

    .mm-menu__item.item-15 {
        -webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.3s 0.8s;
        transition: opacity 0.5s 0.8s, transform 0.3s 0.8s;
    }

/* the touch effect, for when a link is touched */

.mm-menu__link--touch-effect {
    display: block;
    position: absolute;
    z-index: 1;
    width: 0;
    height: 0;
    border-radius: 100%;
    background-color: rgba(255, 255, 225, 0.2);
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
}

    .mm-menu__link--touch-effect.animating {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1);
        -webkit-transition: -webkit-transform 0.5s;
        transition: transform 0.5s;
    }

/**
 * Menu mask
 *
 * A mask that comes in and covers the wrapper when the menu is active.
 */

.mm-menu-mask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3000;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .2s ease, visibility .2s;
    transition: opacity .2s ease, visibility .2s;
    will-change: opacity;
}

    .mm-menu-mask.active {
        visibility: visible;
        opacity: 1;
    }

/*Page container*/

/* Timeline ******/

.panel.timeline-card {
    margin-bottom: 0;
}

.timeline-card {
    margin-top: 15px;
    height: 85vh;
    padding: 15px 5px 15px 15px;
}

    .timeline-card .panel-heading {
        position: relative;
        height: 5%;
        padding: 0 2px 0 15px;
        margin-bottom: 5px;
        background-color: #fff;
    }

    .timeline-card .panel-body {
        position: relative;
        height: 95%;
        padding: 0;
        overflow-y: scroll;
    }

#timeline {
    float: left;
    display: block;
    max-width: 100%;
    list-style: none;
    margin: 0 0 30px 85px;
    padding-left: 30px;
    border-left: 2px solid #03a9f4;
    border-left: 2px solid rgba(3, 169, 244, 0.30);
}

    #timeline li {
        margin: 20px 0;
        position: relative;
    }

        #timeline li.no-activity {
            margin: 100px 0;
        }

.timeline .date {
    margin-top: -10px;
    top: 50%;
    left: -110px;
    font-size: 12px;
    color: #727272;
    line-height: 20px;
    position: absolute;
}

.current-time .date {
    color: #b6b6b6;
}

.timeline .circle,
.timeline .circle-action {
    margin-top: -9px;
    top: 50%;
    left: -39px;
    width: 15px;
    height: 15px;
    background: #fff;
    border: 3px solid #03a9f4;
    border-radius: 100%;
    display: block;
    position: absolute;
}

.timeline .circle-action {
    margin-top: -12px;
    left: -43px;
    background: #fff;
    background: rgba(255, 255, 255, 0.85);
    color: #03a9f4;
    width: 25px;
    height: 25px;
    font-size: 20px;
    text-align: center;
    line-height: 25px;
    border: none;
}

    .timeline .circle-action .zmdi-edit,
    .timeline .circle-action .zmdi-time,
    .timeline .circle-action .zmdi-account-add,
    .timeline .circle-action .zmdi-delete,
    .timeline .circle-action .zmdi-comment-text {
        font-size: 16px;
    }

    .timeline .circle-action .zmdi-playlist-plus {
        margin-left: 4px;
    }

.timeline .content-log {
    max-height: 20px;
    padding: 0;
    border-color: transparent;
    position: relative;
}

    .timeline .content-log p {
        max-height: 0;
        color: transparent;
        text-align: justify;
        word-break: break-word;
        hyphens: auto;
        overflow: hidden;
    }

.timeline .content-log {
    max-height: 180px;
    border-color: #eee9dc;
    margin-right: 20px;
}

    .timeline .content-log p {
        display: block;
        margin-left: -2px;
        max-height: 200px;
        color: #222;
    }

.timeline .current-time p {
    text-transform: uppercase;
    padding-left: 5px;
    font-size: 15px;
    font-weight: 500;
    color: #727272;
}

.timeline .content-log .user-avatar {
    display: inline-block;
    margin: 0 5px 0 0;
}

#timeline li.no-activity .content-log p {
    color: #727272;
}

.filter-wrap {
    float: right;
    display: inline-block;
}

    .filter-wrap .btn-filter {
        float: left;
        margin-right: 10px;
    }

        .filter-wrap .btn-filter + .btn-filter {
            float: right;
            margin-right: 0;
        }

.dropdown-menu.dn-sprint {
    min-width: 200px;
}

@media (max-width: 1600px) {
    .sidebar-default {
        position: relative;
        display: block;
        height: 100%;
        min-height: 200px;
        max-height: 525px;
        margin: 15px 0 0 0;
        padding: 0 15px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
}

@media (max-width: 1400px) {
    .sidebar-default {
        position: relative;
        display: block;
        height: 100%;
        min-height: 200px;
        max-height: 400px;
        margin: 15px 0 0 0;
        padding: 0 15px;
        overflow-y: scroll;
        overflow-x: hidden;
    }
}

@media screen and (max-width: 767px) {
    #timeline {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }

        #timeline li {
            margin: 50px 0;
        }

    .timeline label {
        width: 85%;
        font-size: 1.1em;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;
        transform: translateX(18px);
    }

    .timeline .content {
        padding-top: 45px;
        border-color: #eee9dc;
    }

        .timeline .content:before,
        .timeline .content:after {
            border: solid transparent;
            bottom: 100%;
        }

        .timeline .content:before {
            border-bottom-color: inherit;
            border-width: 17px;
            top: -16px;
            left: 50px;
            margin-left: -17px;
        }

        .timeline .content:after {
            border-bottom-color: #48b379;
            border-width: 20px;
            top: -20px;
            left: 50px;
            margin-left: -20px;
        }

        .timeline .content p {
            font-size: 0.9em;
            line-height: 1.4;
        }

    .timeline .circle,
    .timeline .date {
        display: none;
    }
}

.header-detail .page-title {
    font-weight: 500;
    padding-right: 20px;
    line-height: 50px;
    -webkit-transition: color 1s linear;
    transition: color 1s linear;
    -webkit-transition-delay: 1.5s;
    transition-delay: 1.5s;
}

    .header-detail .page-title .zmdi,
    .header-detail .page-title .text-muted {
        color: #727272;
    }

.header-detail .sprint-info {
    font-weight: 400;
}

    .header-detail .sprint-info span {
        font-weight: 300;
    }

    .header-detail .sprint-info.sp-green,
    .header-detail .sprint-info.sp-green .zmdi {
        color: #4CAF50;
    }

    .header-detail .sprint-info.sp-orange,
    .header-detail .sprint-info.sp-orange .zmdi {
        color: #FF9800;
    }

    .header-detail .sprint-info.sp-red,
    .header-detail .sprint-info.sp-red .zmdi {
        color: #f44336;
    }

.header-detail .t-wrap {
    max-width: 650px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-detail .t-burndown {
    position: relative;
    padding-right: 65px;
}

.header-detail .page-title .badge {
    position: absolute;
    top: 8px;
    right: 20px;
    margin: 0;
    padding: 0;
    width: 35px;
    height: 35px;
    font-size: 16px;
    text-indent: -5px;
    font-weight: 600;
    letter-spacing: -0.05em;
    background: #d2d2d2;
    border: 1px solid #d2d2d2;
    color: #212121;
    line-height: 34px;
}

.indice-comp {
    float: left;
    display: inline-block;
    min-width: 150px;
    width: auto;
    height: 60px;
    margin: 30px 4% 0 0;
    padding: 0;
    border-left: 2px solid rgba(3, 169, 244, 0.5);
}

    .indice-comp div {
        display: block;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0 0 0 15px;
        position: relative;
        left: 0;
    }

    .indice-comp .indice-value {
        top: -5px;
        font-size: 36px;
        color: #03a9f4;
        font-weight: 500;
        line-height: 40px;
    }

    .indice-comp .indice-name {
        bottom: -2px;
        font-size: 17px;
        color: #727272;
        line-height: 20px;
    }

.sp-content-detail {
    margin-top: 50px;
}

    .sp-content-detail .nav-tabs {
        margin-bottom: 15px;
    }

        .sp-content-detail .nav-tabs li {
            text-transform: uppercase;
            font-size: 15px;
            margin-right: 30px;
        }

            .sp-content-detail .nav-tabs li.active {
                font-weight: 500;
            }

    .sp-content-detail .nav > li > a {
        padding: 5px 0;
    }

    .sp-content-detail .panel {
        padding: 10px 5px 10px 0;
    }

    .sp-content-detail .panel-body {
        overflow-y: scroll;
    }

.sp--user-row {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

    .sp--user-row:nth-child(even) {
        background: #b6b6b6;
        background: rgba(182, 182, 182, 0.15);
    }

    .sp--user-row .user,
    .sp--user-row .user-avatar,
    .sp--user-row .data-right {
        float: left;
        display: inline-block;
        width: auto;
        height: 45px;
    }

    .sp--user-row .user-avatar {
        border: 1px solid #b6b6b6;
    }

    .sp--user-row .user .data-item {
        float: left;
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0 0 0 15px;
    }

    .sp--user-row .user .user-team-name {
        line-height: 25px;
    }

    .sp--user-row .user .user-team-area {
        line-height: 20px;
    }

    .sp--user-row .sp--completed-tasks {
        line-height: 10px;
    }

        .sp--user-row .sp--completed-tasks .zmdi {
            font-size: 17px;
        }

        .sp--user-row .sp--completed-tasks.tasks-ok .zmdi {
            color: #4CAF50;
        }

        .sp--user-row .sp--completed-tasks.tasks-warning .zmdi {
            color: #f44336;
        }

    .sp--user-row .progress {
        display: inline-block;
        margin: 20px 0 0 0;
        width: 80%;
    }

    .sp--user-row .progress-text {
        float: right;
        display: inline-block;
        width: 20%;
        height: auto;
        line-height: 45px;
        text-align: center;
    }

    .sp--user-row .sp-hours {
        display: block;
        width: 100%;
        height: auto;
        text-align: center;
        line-height: 45px;
    }

    .sp--user-row .progress-bar {
        background: #0288d1;
        height: 8px;
    }

        .sp--user-row .progress-bar:last-child:before {
            background: #e0e0e0;
            height: 8px;
        }

.panel-heading .progress-percent {
    float: left;
    display: inline-block;
    width: 10%;
    height: 10px;
    margin: -2px 0 0 0;
    line-height: 10px;
    text-align: center;
}

.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 25;
    width: 50px;
    height: 50px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 100%;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: all .4s ease;
    transition: all .4s ease;
}

    .overlay.active {
        border-radius: 1%;
        width: 100vh;
        height: 100vh;
        -webkit-transform: scale(5);
        transform: scale(5);
        -webkit-transition: all .4s ease;
        transition: all .4s ease;
    }

/* Drag events styles + Dragula */

.gu-mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: 0.8;
}

.workitem-card.gu-mirror .user-data {
    float: right;
    margin: -15px 0 0 0;
}

.gu-mirror .workitem-content {
    max-width: 80%;
    display: inline-block;
}

.gu-hide {
    display: none !important;
}

.gu-unselectable {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

.gu-transit {
    opacity: 0.2;
}

/* Fullscreen styles   *********************/

/*:-webkit-full-screen body{
  background: #212121 url(../img/icon_pattern.png) repeat 0 0;
}

:-moz-full-screen body{
  background: #212121 url(../img/icon_pattern.png) repeat 0 0;
}

:-ms-fullscreen body{
  background: #212121 url(../img/icon_pattern.png) repeat 0 0;
}

:fullscreen body{
  background: #212121 url(../img/icon_pattern.png) repeat 0 0;
}

:-webkit-full-screen .header-detail .page-title{
  color: #fff;
}

:-moz-full-screen .header-detail .page-title{
  color: #fff;
}

:-ms-fullscreen .header-detail .page-title{
  color: #fff;
}

:fullscreen .header-detail .page-title{
  color: #fff;
}

:-webkit-full-screen .content{
  overflow: hidden;
  height: 100vh;
}

:-moz-full-screen .content{
  overflow: hidden;
  height: 100vh;
}

:-ms-fullscreen .content{
  overflow: hidden;
  height: 100vh;
}

:fullscreen .content{
  overflow: hidden;
  height: 100vh;
}*/

/*-*/

:-webkit-full-screen .mm-menu-wrapper,
:-webkit-full-screen .notify-widget {
    display: none;
}

:-moz-full-screen .mm-menu-wrapper,
:-moz-full-screen .notify-widget {
    display: none;
}

:-ms-fullscreen .mm-menu-wrapper,
:-ms-fullscreen .notify-widget {
    display: none;
}

:fullscreen .mm-menu-wrapper,
:fullscreen .notify-widget {
    display: none;
}

:-webkit-full-screen .header,
:-webkit-full-screen .content {
    /*-webkit-box-shadow: inset 0 10px 0 0 #0288d1;
          box-shadow: inset 0 10px 0 0 #0288d1;*/
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
}

:-moz-full-screen .header,
:-moz-full-screen .content {
    /*-webkit-box-shadow: inset 0 10px 0 0 #0288d1;
          box-shadow: inset 0 10px 0 0 #0288d1;*/
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
}

:-ms-fullscreen .header,
:-ms-fullscreen .content {
    /*-webkit-box-shadow: inset 0 10px 0 0 #0288d1;
          box-shadow: inset 0 10px 0 0 #0288d1;*/
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
}

:fullscreen .header,
:fullscreen .content {
    /*-webkit-box-shadow: inset 0 10px 0 0 #0288d1;
          box-shadow: inset 0 10px 0 0 #0288d1;*/
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
}

header .badge {
    color: #fff;
    border: 2px solid white;
    background: none;
}

.filedrag {
    background: #fff;
    padding: 15px;
    color: #727272;
    text-align: center;
    border: 1px dashed #b6b6b6;
    border-radius: 4px;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

    .filedrag:hover {
        border-color: #03a9f4;
    }

    .filedrag > p {
        color: #727272;
        font-size: 22px;
        font-weight: 400;
        -webkit-transition: all .3s ease;
        transition: all .3s ease;
    }

    .filedrag:hover > p {
        color: #03a9f4;
    }

    .filedrag > p i {
        font-size: 48px;
    }

.previewarea {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 5px 15px;
    background: #727272;
    background: rgba(114, 114, 114, 0.25);
    overflow: hidden;
}

    .previewarea h3 {
        color: #727272;
        font-size: 16px;
        margin: 0;
        padding: 0;
        line-height: 30px;
    }

    .previewarea span {
        float: left;
        display: inline-block;
        width: auto;
        height: 30px;
        margin: 0;
        padding: 0 10px 0 0;
        font-size: 14px;
        color: #212121;
        line-height: 30px;
    }

.btn-upload {
    margin: 15px 0 0 0;
}

.uploaded-files h4 {
    margin: 0;
    padding: 0;
    font-size: 18px;
    color: #727272;
}

.uploaded-files ul {
    float: left;
    display: block;
    width: 100%;
    height: auto;
    margin: 15px 0 0 0;
    padding: 0;
}

    .uploaded-files ul li {
        list-style-type: none;
        height: 30px;
    }

        .uploaded-files ul li a {
            display: inline-block;
            padding: 0 0 0 25px;
            margin: 0;
            position: relative;
            line-height: 24px;
            border-bottom: 1px solid transparent;
        }

            .uploaded-files ul li a:hover {
                text-decoration: none;
                border-bottom: 1px solid #212121;
            }

            .uploaded-files ul li a:before {
                position: absolute;
                left: 0;
                top: 0;
                font-family: 'Material-Design-Iconic-Font';
                font-size: 18px;
            }

            .uploaded-files ul li a[href$=".xls"]:before {
                top: -2px;
                content: '\f222';
            }

            .uploaded-files ul li a[href$=".xls"]:hover {
                color: green;
                border-bottom-color: green;
            }

            .uploaded-files ul li a[href$=".docx"]:before,
            .uploaded-files ul li a[href$=".doc"]:before,
            .uploaded-files ul li a[href$=".pdf"]:before {
                top: -2px;
                content: '\f223';
            }

            .uploaded-files ul li a[href$=".doc"]:hover,
            .uploaded-files ul li a[href$=".docx"]:hover {
                color: #0288d1;
                border-bottom-color: #0288d1;
            }

            .uploaded-files ul li a[href$=".pdf"]:hover {
                color: red;
                border-bottom-color: red;
            }

            .uploaded-files ul li a[href$=".jpg"]:before,
            .uploaded-files ul li a[href$=".png"]:before {
                content: '\f17f';
            }

            .uploaded-files ul li a[href$=".jpg"]:hover,
            .uploaded-files ul li a[href$=".png"]:hover {
                color: gray;
                border-bottom-color: gray;
            }

            .uploaded-files ul li a.file-upload-delete {
                height: 30px;
                width: auto;
                padding: 0;
                margin-left: 30px;
                font-size: 16px;
                color: red;
                text-decoration: none;
                border: none;
                opacity: 0;
                -webkit-transition: opacity .s ease;
                transition: opacity .3s ease;
                line-height: 30px;
            }

        .uploaded-files ul li:hover a.file-upload-delete {
            opacity: 1;
        }

        .uploaded-files ul li a.file-upload-delete:hover {
            opacity: 0.5;
        }

.paper-form .panel-accordion .panel,
.panel-sprint .panel-accordion .panel {
    padding-bottom: 0;
}

.paper-form .panel-accordion .panel-heading,
.panel-sprint .panel-accordion .panel-heading {
    padding: 0 15px;
    box-shadow: none;
}

.sgc .panel.paper-form .panel-accordion .panel-body {
    min-height: inherit;
    padding: 15px;
}

.paper-form .panel-solicitudes .panel,
.panel-sprint .panel {
    box-shadow: none;
    border: 1px solid #d7d7d7;
}

.paper-form .panel-solicitudes h4 {
    font-weight: 500;
}

.sgc .paper-form .panel-accordion .panel-heading a:first-child,
.content-detail .paper-form .panel-accordion .panel-heading a:first-child,
.panel-sprint .panel-accordion .panel-heading a:first-child {
    display: block;
    width: 100%;
    padding: 15px 0;
    text-transform: uppercase;
    text-decoration: none;
}

.panel-sprint .sprint-name {
    float: left !important;
    display: inline-block !important;
    width: auto !important;
    max-width: 80%px;
}

    .panel-sprint .sprint-name span:first-child {
        float: left;
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 450px;
    }

    .panel-sprint .sprint-name span:last-child {
        float: left;
        display: inline-block;
    }

.open-sprint-accordion {
    float: right;
    margin: 15px 0 0 0;
}

.content-detail .paper-form .panel-accordion .panel-heading a:hover,
.panel-sprint .panel-accordion .panel-heading a:hover {
    text-decoration: none;
}

.content-detail .paper-form .panel-accordion .panel-heading .zmdi,
.panel-sprint .panel-accordion .panel-heading .zmdi {
    position: relative;
    top: -1px;
    font-size: 12px;
    margin-right: 5px;
}

/*tabs*/

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus {
    color: #6f83d8;
}

    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus:hover {
        border: none;
        color: #4e5f96;
    }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:focus {
        -webkit-box-shadow: inset 0 -2px 0 #6f83d8;
        box-shadow: inset 0 -2px 0 #6f83d8;
        color: #6f83d8;
    }

.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus:hover {
    background-color: transparent;
    -webkit-box-shadow: inset 0 -2px 0 #4e5f96;
    box-shadow: inset 0 -2px 0 #4e5f96;
    color: #4e5f96;
}

ul.nav-tabs.list-sgc a {
    display: inline;
    font-size: 18px;
    margin: 0;
    width: auto;
    font-size: 17px;
}

/*estado hallazgos */

/*.paper-form .panel-heading.hzg-open  h1 .zmdi{
  color: #4caf50;
  font-size:25px;
 
}
.paper-form .panel-heading.hzg-close  h1 .zmdi{
  color: #727272;
  font-size:25px;
}
.paper-form .panel-heading.hzg-confirm  h1 .zmdi{
  color: #727272;
}

.paper-form .panel-heading.hzg-ev  h1 .zmdi{
  color: #727272;
}*/

/*estado hallazgos*/

.paper-form .panel-heading.hzg-open:before {
    color: #4caf50;
    /*abierta*/
    font-size: 25px;
    font-family: 'Material-Design-Iconic-Font';
    content: "\f18f";
    position: absolute;
    top: 16px;
}

.paper-form .panel-heading.hzg-close:before {
    color: #727272;
    /*cerrado*/
    font-size: 25px;
    font-family: 'Material-Design-Iconic-Font';
    content: "\f190";
    position: absolute;
    top: 16px;
}

.paper-form .panel-heading.hzg-confirm:before {
    color: #727272;
    /*confirm*/
    font-size: 25px;
    font-family: 'Material-Design-Iconic-Font';
    content: "\f267";
    position: absolute;
    top: 16px;
}

.paper-form .panel-heading.hzg-ev:before {
    color: #727272;
    /*evaluado*/
    font-size: 25px;
    font-family: 'Material-Design-Iconic-Font';
    content: "\f26b";
    position: absolute;
    top: 16px;
}

.sgc .panel.paper-form .panel-heading.hzg-open h1,
.sgc .panel.paper-form .panel-heading.hzg-close h1,
.sgc .panel.paper-form .panel-heading.hzg-confirm h1,
.sgc .panel.paper-form .panel-heading.hzg-ev h1 {
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-indent: 50px;
}

/*estado solicitudes */

.panel.paper-form.detail-sol .panel-heading.sd-open:before {
    color: #4caf50;
    /*abierta*/
    font-family: 'Material-Design-Iconic-Font';
    content: "\f26d";
    position: absolute;
    top: 25px;
    font-size: 16px;
}

.panel.paper-form.detail-sol .panel-heading.sd-closed:before {
    color: #727272;
    /*cerrada*/
    font-family: 'Material-Design-Iconic-Font';
    content: "\f26d";
    position: absolute;
    top: 25px;
    font-size: 16px;
}

.panel.paper-form.detail-sol .panel-heading.sd-pending:before {
    color: #fec800;
    /*pendiente*/
    font-family: 'Material-Design-Iconic-Font';
    content: "\f26d";
    position: absolute;
    top: 25px;
    font-size: 16px;
}

.panel.paper-form.detail-sol .panel-heading.sd-partial:before {
    color: #a5b75d;
    /*entrega parcial*/
    font-family: 'Material-Design-Iconic-Font';
    content: "\f26d";
    position: absolute;
    top: 25px;
    font-size: 16px;
}

.panel.paper-form.detail-sol .panel-heading.sd-evaluada:before {
    color: #0a9d98;
    /*evaluada*/
    font-family: 'Material-Design-Iconic-Font';
    content: "\f26d";
    position: absolute;
    top: 25px;
    font-size: 16px;
}

.panel.paper-form .panel-heading.sd-open h1,
.panel.paper-form .panel-heading.sd-closed h1,
.panel.paper-form .panel-heading.sd-pending h1,
.panel.paper-form .panel-heading.sd-partial h1,
.panel.paper-form .panel-heading.sd-evaluada h1 {
    font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-indent: 50px;
}

.paper-form .panel-solicitudes .panel-heading.sd-open a:first-child .zmdi-circle,
.panel-sprint .panel-heading.sd-open a:first-child .zmdi-circle {
    color: #4caf50;
}

.paper-form .panel-solicitudes .panel-heading.sd-closed a:first-child .zmdi-circle,
.panel-sprint .panel-heading.sd-closed a:first-child .zmdi-circle {
    color: #727272;
}

.paper-form .panel-solicitudes .panel-heading.sd-pending a:first-child .zmdi-circle,
.panel-sprint .panel-heading.sd-pending a:first-child .zmdi-circle {
    color: #fec800;
}

.paper-form .panel-solicitudes .panel-heading.sd-partial a:first-child .zmdi-circle,
.panel-sprint .panel-heading.sd-partial a:first-child .zmdi-circle {
    color: #a5b75d;
}

.content-detail .paper-form .panel-accordion .panel-heading .zmdi-chevron-down,
.panel-sprint .panel-accordion .panel-heading .zmdi-chevron-down,
.content-detail .paper-form .panel-accordion .panel-heading .zmdi-chevron-up,
.panel-sprint .panel-accordion .panel-heading .zmdi-chevron-up {
    float: right;
    color: #727272;
    font-size: 16px;
}

.paper-form .panel-solicitudes .panel-heading .hover-links,
.panel-sprint .panel-heading .hover-links {
    padding-bottom: 2px;
    visibility: hidden;
    text-transform: inherit;
    font-weight: 400;
    position: absolute;
    top: 13px;
    right: 0;
    font-size: 16px;
    border-bottom: 1px solid transparent;
    color: #2196f3;
}

.paper-form .panel-solicitudes .panel-heading:hover .hover-links,
.panel-sprint .panel-heading:hover .hover-links {
    visibility: visible;
}

.paper-form .panel-solicitudes .panel-heading .hover-links.sd-edit,
.panel-sprint .panel-heading .hover-links.sd-edit {
    right: 192px;
    color: #03a9f4;
}

    .paper-form .panel-solicitudes .panel-heading .hover-links.sd-edit:hover,
    .panel-sprint .panel-heading .hover-links.sd-edit:hover {
        border-bottom-color: #03a9f4;
    }

.paper-form .panel-solicitudes .panel-heading .hover-links.sd-eval {
    right: 315px;
    color: #03a9f4;
}

.paper-form .panel-solicitudes .panel-heading .hover-links.sd-detail .panel-sprint .panel-heading .hover-links.sd-detail {
    right: 200px;
    color: #03a9f4;
}

.paper-form .panel-solicitudes .panel-heading .hover-links.sd-detail:hover .panel-sprint .panel-heading .hover-links.sd-detail:hover {
    border-bottom-color: #03a9f4;
}

.paper-form .panel-solicitudes .panel-heading .hover-links.sd-eval:hover .panel-sprint .panel-heading .hover-links.sd-eval:hover {
    border-bottom-color: #03a9f4;
}

.paper-form .panel-solicitudes .panel-heading .hover-links.sd-delete,
.panel-sprint .panel-heading .hover-links.sd-delete {
    right: 100px;
    color: #f44336;
}

    .paper-form .panel-solicitudes .panel-heading .hover-links.sd-delete:hover,
    .panel-sprint .panel-heading .hover-links.sd-delete:hover {
        border-bottom-color: #f44336;
    }

.paper-form .panel-solicitudes .panel-heading .hover-links.sd-close,
.panel-sprint .panel-heading .hover-links.sd-close {
    right: 300px;
    color: #03a9f4;
}

    .paper-form .panel-solicitudes .panel-heading .hover-links.sd-close:hover,
    .panel-sprint .panel-heading .hover-links.sd-close:hover {
        border-bottom-color: #03a9f4;
    }

.paper-form .panel-solicitudes .panel-heading .hover-links:active,
.panel-sprint .panel-heading .hover-links:active {
    opacity: 0.5;
    text-decoration: none;
}

.paper-form .panel-solicitudes .panel-heading .hover-links:focus,
.panel-sprint .panel-heading .hover-links:focus {
    text-decoration: none;
}

.dropdown-control-go {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    display: none;
    background: #fff;
}

    .dropdown-control-go.fadeInDown {
        display: block;
    }

    .dropdown-control-go select {
        margin: 15px 0 0 0;
        max-width: 100%;
    }

    .dropdown-control-go .dc-go--buttons {
        float: left;
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 15px 0 0 0;
    }

.wrap-table-link {
    text-decoration: none;
    border-bottom: 1px solid transparent;
    color: #000;
    float: left;
    width: 100%;
    height: 100%;
}

.table-link {
    margin-right: 15px;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.panel-table .action-link .table-link {
    margin-right: 0;
    margin-left: 15px;
}

.table-link:hover {
    text-decoration: none;
}

.table-link--delete {
    color: red;
}

.table-label {
    display: inline-block;
    font-weight: 400;
    width: 85px;
    text-align: center;
    padding: 5px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.datepicker.dropdown-menu {
    z-index: 1041 !important;
}

/* Monitor de Proyectos **********/

.nav-tabs.tabs-badge li {
    padding: 10px 0;
    margin-right: 25px;
}

.tabs-badge .badge,
.page-title-badge .badge {
    position: absolute;
    top: 10px;
    right: -2px;
    margin: 0 !important;
}

.tabs-badge .active .badge {
    background: rgb(2, 136, 209);
    background: rgba(2, 136, 209, 1);
}

.tab-content--proyectm,
.tab-content--proysprint {
    margin-top: 15px;
    padding: 0 25px 0 0;
}

    .tab-content--proyectm .panel {
        position: relative;
        float: left;
        display: block;
        height: 175px;
        width: 100%;
    }

    .tab-content--proyectm.tab-content--proyect-home .panel {
        position: relative;
        float: left;
        display: block;
        height: auto;
        width: 100%;
        min-height: 200px;
    }

    .tab-content--proyectm .panel-default > .panel-heading {
        float: left;
        display: inline-block;
        background: none;
        padding-top: 15px;
        padding-bottom: 15px;
        width: 75%;
        max-width: 850px;
    }

.wrapper-home .tab-content--proyectm .panel-default > .panel-heading {
    padding-top: 15px;
    padding-bottom: 10px;
}

.tab-content--proyectm .panel-default > .panel-body {
    float: left;
    display: inline-block;
    padding-top: 0;
    width: 75%;
    max-width: 850px;
}

.tab-content--proyectm .panel-body > p {
    max-height: 50px;
    margin: 0;
    overflow: hidden;
    overflow-y: auto;
}

.tab-content--proyectm .panel-heading-title {
    float: left;
    width: 100%;
    margin: 0;
    font-size: 20px;
    font-weight: 500;
}

    .tab-content--proyectm .panel-heading-title .progress {
        margin: 5px 0 10px 0;
        width: 30%;
        display: block;
    }

    .tab-content--proyectm .panel-heading-title a {
        float: left;
        width: 100%;
        color: black;
    }

/*.tab-content--proyectm{
  max-height: 800px;
  overflow-y: auto; 
}*/

.tab-content--proyectm .panel {
    -webkit-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.panel-info-right {
    float: right;
    display: inline-block;
    position: absolute;
    top: 0;
    right: 0;
    width: 20%;
    height: 175px;
    max-width: 200px;
    overflow: hidden;
}

.tab-content--proyectm.tab-content--proyect-home .panel-info-right {
    height: 100%;
}

.panel-info-right .day,
.panel-info-right .icon-indicator {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    color: #727272;
    line-height: 135px;
    border-left: 1px solid #e0e0e0;
}

.panel-info-right .deadline {
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
    position: absolute;
    bottom: 50px;
    font-size: 15px;
}

.panel-info-right .icon-indicator {
    line-height: 225px;
    font-size: 30px;
}

.proyect-onfire .panel-info-right,
.tab-content--proyectm [danger] .panel-info-right {
    background: #f44336;
}

    .tab-content--proyectm [danger] .panel-info-right .day,
    .tab-content--proyectm [danger] .panel-info-right .icon-indicator,
    .tab-content--proyectm [success] .panel-info-right .day,
    .tab-content--proyectm [success] .panel-info-right .icon-indicator {
        color: #fff;
    }

.proyect-looksgood .panel-info-right,
.tab-content--proyectm [success] .panel-info-right {
    background: #4caf50;
}

.crush {
    margin: 5px 25px 0 0;
    float: left;
}

    .crush:hover li {
        width: 58px;
        /* hover in speed */
        -webkit-transition: width 0.55s;
        -moz-transition: width 0.55s;
        transition: width 0.55s;
    }

        .crush:hover li .badge {
            display: inline;
        }

    .crush li {
        width: 25px;
        padding: 0;
        /* hover out speed */
        -webkit-transition: width 0.45s;
        -moz-transition: width 0.45s;
        transition: width 0.45s;
    }

        .crush li a {
            width: 45px;
            height: 45px;
            overflow: hidden;
            border-radius: 50%;
        }

        .crush li img {
            width: 45px;
            height: 45px;
            object-fit: cover;
        }

.grayscale-hover:hover {
    -webkit-filter: brightness(1.10) grayscale(100%) contrast(90%);
    -moz-filter: brightness(1.10) grayscale(100%) contrast(90%);
    filter: brightness(1.10) grayscale(100%) contrast(90%);
}

.panel-info-right .triangle {
    position: absolute;
    top: -4px;
    right: -2px;
    width: 60px;
    height: 60px;
    background: url(../img/triangle.png) right center no-repeat;
}

.panel-users {
    width: 100%;
    min-height: 570px;
    margin-top: 15px;
}

    .panel-users ul li {
        margin-bottom: 25px;
    }

    .panel-users ul.list-inline li a {
        overflow: hidden;
        border-radius: 50%;
        width: 60px;
        height: 60px;
    }

/* */

.content.no-scroll {
    overflow: hidden;
}

.background-back {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: #03a9f4;
    animation: fill 5s linear 1;
}

@-webkit-keyframes fill {
    from {
        height: 100vh;
    }

    to {
        height: 10vh;
    }
}

@keyframes fill {
    from {
        height: 100vh;
    }

    to {
        height: 10vh;
    }
}

.form-rnt {
    padding: 15px 15px 25px 15px;
    background: #f0f0f0;
}

    .form-rnt .control-label > span {
        font-size: 18px;
        font-weight: 500;
    }

    .form-rnt .control-label > i:first-child {
        width: 45px;
        height: 45px;
        margin-left: -5px;
        margin-right: 10px;
        color: #B6B6B6;
        font-size: 22px;
        text-align: center;
        line-height: 44px;
        background: #fff;
        border-radius: 100%;
    }

    .form-rnt .control-label a {
        margin: 0 0 0 15px;
    }

    .form-rnt textarea,
    .form-rnt textarea:focus,
    .form-rnt textarea.form-control:focus,
    .form-text textarea,
    .form-text textarea:focus,
    .form-text textarea.form-control:focus {
        padding: 8px;
        margin-top: 15px;
        width: 100%;
        height: 150px;
        background: #fff;
        line-height: 1.4;
    }

        .form-rnt textarea[disabled],
        .form-rnt textarea.form-control[disabled] {
            background: #fff;
            overflow: auto;
        }

.copy-link {
    position: absolute;
    right: 15px;
    top: 25px;
    width: 65px;
    height: 30px;
    font-size: 16px;
    text-align: center;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    line-height: 30px;
}

    .copy-link:hover {
        border-bottom-color: #0a6ebd;
        text-decoration: none;
    }

.btn-download {
    text-align: left;
    font-size: 16px;
}

    .btn-download .zmdi {
        margin-right: 15px;
    }

.sub-section-title {
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    color: #727272;
    margin-bottom: 0;
}

    .sub-section-title:after {
        border: none !important;
    }

    .sub-section-title .zmdi {
        margin-right: 5px;
    }

.comment-user,
.comment-form {
    float: left;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}

.comment-user {
    padding-left: 15px;
    width: 5%;
}

.comment-form {
    padding-left: 15px;
    padding-right: 15px;
    width: 95%;
}

.user-avatar--comment {
    position: relative;
    top: 30px;
    left: 0;
    will-change: transform;
}

    .user-avatar--comment.slideInUp {
        -webkit-transform: translateY(0);
        transform: translateY(5%);
    }

.paper-card .form-group.form-group--controls .label-radios {
    display: block;
}

.paper-card .form-group.form-group--controls .radio-inline {
    padding-left: 0;
    padding-right: 25px;
}

.list-comments {
    border-bottom: 1px dashed #B6B6B6;
    padding-bottom: 30px;
}

    .list-comments li {
        position: relative;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto;
        overflow: hidden;
    }

    .list-comments .comment-user,
    .list-comments .comment-text {
        position: relative;
        float: left;
        display: inline-block;
        margin: 30px 0 0 0;
        padding: 0;
        width: auto;
        height: 100%;
        font-size: 16px;
    }

    .list-comments .comment-user {
        min-width: 60px;
        width: 5%;
    }

    .list-comments .comment-text {
        width: 95%;
    }

        .list-comments .comment-text > span {
            display: block;
            width: 100%;
            height: auto;
            margin: -5px 0 0 0;
        }

        .list-comments .comment-text p {
            font-size: 16px;
            color: #727272;
            line-height: 1.5;
        }

        .list-comments .comment-text > span.comment-control {
            height: 34px;
            color: #727272;
        }

.comment-control > .zmdi {
    display: none;
    margin-right: 5px;
}

.comment-control > .zmdi-alert-triangle {
    color: #f3b700;
}

.comment-control > .zmdi-alert-circle {
    color: #f36767;
}

.comment-control > .zmdi-check {
    color: #23c742;
}

[data-control~="OK"] .comment-control .zmdi-thumb-up,
[data-control~="OK"] .comment-control .zmdi-check {
    display: inline-block;
}

[data-control~="BUGS_NO_BLOQUEANTES"] .comment-control .zmdi-thumb-up,
[data-control~="BUGS_NO_BLOQUEANTES"] .comment-control .zmdi-alert-triangle {
    display: inline-block;
}

[data-control~="BUGS_BLOQUEANTES"] .comment-control .zmdi-thumb-down,
[data-control~="BUGS_BLOQUEANTESr"] .comment-control .zmdi-alert-circle {
    display: inline-block;
}

.paper-card .form-group.form-group--controls {
    margin-top: 0;
}

.panel .panel-with--user .user-avatar {
    position: absolute;
    top: 20px;
    left: 15px;
}

.amb-serv .panel .panel-heading.panel-with--user h1 {
    position: relative;
    left: 0;
    top: 0;
    padding-left: 5%;
    line-height: 60px;
}

    .amb-serv .panel .panel-heading.panel-with--user h1 span {
        color: #727272;
        font-weight: 400;
        float: right;
    }

.comment-row {
    min-height: 180px;
}

    .comment-row blockquote {
        border: none;
        height: 80px;
        max-width: 400px;
        display: block;
        margin: 25px auto;
        text-align: center;
        position: relative;
    }

        .comment-row blockquote p {
            font-size: 18px;
            color: #727272;
        }

        .comment-row blockquote:before {
            position: absolute;
            top: -15px;
            left: 10px;
            content: "\f1b2";
            font-family: 'Material-Design-Iconic-Font';
            font-size: 36px;
            color: #727272;
            color: rgba(114, 114, 114, 0.5);
            -webkit-transform: scale(-1, 1);
            -ms-transform: scale(-1, 1);
            transform: scale(-1, 1);
        }

        .comment-row blockquote:after {
            position: absolute;
            right: 10px;
            bottom: -10px;
            content: "\f1b2";
            font-family: 'Material-Design-Iconic-Font';
            font-size: 36px;
            color: #727272;
            color: rgba(114, 114, 114, 0.5);
        }

        .comment-row blockquote .user-avatar {
            display: block;
            margin: 0 auto;
            top: inherit;
            bottom: -10px;
        }

        .comment-row blockquote > span {
            position: absolute;
            left: 0;
            bottom: -75px;
            right: 0;
            font-size: 14px;
        }

            .comment-row blockquote > span strong {
                font-weight: 500;
            }

            .comment-row blockquote > span time {
                color: #727272;
                font-weight: 400;
            }

.form-control.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

    .form-control.inputfile + label {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0 4px;
        font-size: 16px;
        font-weight: 400;
        color: #727272;
        background-color: #fff;
        -webkit-box-shadow: inset 0 -1px 0 #ddd;
        box-shadow: inset 0 -1px 0 #ddd;
        line-height: 37px;
    }

        .form-control.inputfile:focus + label,
        .form-control.inputfile + label:hover {
            -webkit-box-shadow: inset 0 -2px 0 #2196f3;
            box-shadow: inset 0 -2px 0 #2196f3;
        }

            .form-control.inputfile:focus + label .zmdi:first-child,
            .form-control.inputfile + label:hover .zmdi:first-child {
                color: #2196f3;
            }

.inputfile + label {
    cursor: pointer;
    /* "hand" cursor */
}

.inputfile:focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label * {
    pointer-events: none;
}

.inputfile:focus + label,
.inputfile.has-focus + label {
    outline: 1px dotted #000;
    outline: -webkit-focus-ring-color auto 5px;
}

.inputfile + label .zmdi {
    margin-right: 5px;
}

.inputfile + label .zmdi-more {
    float: right;
    margin-top: 8px;
}

.inputfile-galileo + label {
    color: #626cc4;
}

.inputfile-galileo + label {
    border: 1px solid #626cc4;
    background-color: #f2f2f2;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

    .inputfile-galileo:focus + label,
    .inputfile-galileo.has-focus + label,
    .inputfile-galileo + label:hover {
        border-color: #717696;
    }

    .inputfile-galileo + label span,
    .inputfile-galileo + label strong {
        padding: 0.625rem 1.25rem;
        /* 10px 20px */
    }

    .inputfile-galileo + label span {
        width: 200px;
        min-height: 2em;
        display: inline-block;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        vertical-align: top;
    }

    .inputfile-galileo + label strong {
        height: 100%;
        color: #f2f2f2;
        background-color: #626cc4;
        display: inline-block;
        float: right;
    }

    .inputfile-galileo:focus + label strong,
    .inputfile-galileo.has-focus + label strong,
    .inputfile-galileo + label:hover strong {
        background-color: #717696;
    }

@media screen and (max-width: 50em) {
    .inputfile-galileo + label strong {
        display: block;
    }
}

/* Calendar de Deploys *******************************************************/
/*.calendar-ds .row,*/
.calendar-col,
.calendar-col .panel {
    min-height: 100%;
    height: auto;
}

    .calendar-col .panel {
        margin: 0;
    }

.calendar-ds #calendar {
    max-width: 100%;
    margin: 0 auto;
}

.calendar-ds .calendar-col--reference .h5 {
    font-weight: 500;
}

.amb-list {
    float: left;
    display: block;
    margin: 0;
    padding: 0;
}

    .amb-list li {
        list-style-type: none;
    }

        .amb-list li .zmdi {
            margin-right: 10px;
        }

.amb-uat .zmdi {
    color: #465a64;
}

.amb-qa .zmdi {
    color: #358a39;
}

.amb-st .zmdi {
    color: #1971d3;
}

.amb-prod .zmdi {
    color: #4c2b70;
}

.calendar-ds .fc-body > tr > .fc-widget-content {
    border-width: 0;
}

.fc-event.qa {
    background-color: #358a39;
}

.fc-event.prod {
    background-color: #4c2b70;
}

.fc-event.sta {
    background-color: #1971d3;
}

.fc-event.uat {
    background-color: #465a64;
}

.empty-state img {
    display: block;
    margin: 0 auto;
}

.empty-state h5 {
    display: block;
    width: 100%;
    height: auto;
    text-align: center;
    text-transform: uppercase;
    color: #0288d1;
}

.panel .panel-heading.pry-active:before,
.panel .panel-heading.pry-inactive:before {
    color: #4caf50;
    /*abierta*/
    font-family: 'Material-Design-Iconic-Font';
    content: "\f26d";
    position: absolute;
    top: 28px;
    font-size: 14px;
}

.panel .panel-heading.pry-inactive:before {
}

/*
.panel .panel-heading h1{
  text-indent: 25px;
}*/

.content-detail .panel-heading[spcomplete],
.form-group-static[spcomplete],
.panel-sprint .panel-heading[spcomplete] {
    color: #4caf50;
}

.content-detail .panel-heading[spIncomplete],
.panel-sprint .panel-heading[spIncomplete] {
    color: #f44336;
}

.content-detail .panel-heading[spActive],
.panel-sprint .panel-heading[spActive] {
    color: #2196f3;
}

.content-detail .panel-heading .deadline,
.panel-sprint .panel-heading .deadline {
    font-weight: 400;
    color: #727272;
}

.content-detail .table-link,
.panel-sprint <.table-link {
    display: inline-block;
    margin-left: 5px;
}

.fleft {
    float: left;
    margin: 0 0px 0 0 !important;
}

.form-control-static.fleft.mtop {
    margin: 4px 0 0 10px !important;
}

.uploader.mtop35 {
    margin-top: 35px;
}

.sp-panel-status {
    position: absolute;
    left: 210px;
    top: 0;
    width: auto;
    height: 46px;
    font-size: 15px;
    line-height: 46px;
}

    .sp-panel-status .zmdi {
        position: relative;
        top: 2px !important;
        font-size: 18px !important;
    }

    .sp-panel-status > span {
        color: #727272;
        visibility: hidden;
    }

.content-detail .panel-heading:hover .sp-panel-status > span {
    visibility: visible;
}

.content-detail .paper-form .panel-solicitudes .panel-heading .hover-links.sd-detail,
.panel-sprint .panel-heading .hover-links.sd-detail {
    right: 50px;
}

.panel .panel-heading.server-type h1 {
    padding: 0 0 0 25px;
}

.panel .panel-heading.server-type:before {
    color: #333;
    font-family: 'Material-Design-Iconic-Font';
    position: absolute;
    top: 22px;
    font-size: 20px;
}

.panel .panel-heading.server-type[windows]:before {
    content: "\f363";
}

.panel .panel-heading.server-type[linux-redhat] {
    content: "";
    background: url(../img/redhat.svg) 12px 30px no-repeat;
    background-size: 20px 20px;
}

.panel .panel-heading.server-type[linux-ubuntu] {
    content: "";
    background: url(../img/ubuntu.svg) 12px 30px no-repeat;
    background-size: 18px 18px;
}

.panel-title .sys-type {
    color: #727272;
}

.form-control-static .inline-link {
    display: inline-block;
    margin: 0 0 0 5px;
    position: relative;
    top: -4px;
    font-size: 14px;
}

.content-list.amb-serv .panel .panel-body {
    border-top: none;
    overflow: auto;
    margin-right: 5px;
}

.panel-list {
    height: calc(100vh - 245px);
    position: relative;
}

    .panel-list .table-list {
        overflow-y: auto;
        max-height: 630px;
    }

    .panel-list .table-pagination {
        position: absolute;
        left: 15px;
        bottom: 15px;
        border: none;
    }

.sub-section-title > span {
    font-weight: 400;
    margin-left: 5px;
}

/* Product Backlog ******************/

.product-backlog .panel {
    padding-bottom: 0;
}

.product-backlog select.form-control {
    padding-left: 0;
}

.product-backlog .paper-card .form-group--select .float-label {
    left: -5px;
}

.paper-form .btn-pb-add {
    margin-top: 8px;
    min-width: 48px;
}

    .paper-form .btn-pb-add:focus {
        -webkit-background-size: 100% 100%;
        background-size: 100%;
    }

.btn-pb-add > .zmdi {
    font-size: 24px;
}

.panel-add-pb .form-group {
    margin-top: 15px;
}

.pb-criticy {
    position: absolute;
    top: 1px;
    right: 0;
    width: 50px;
    font-size: 20px;
    background: #fff;
    color: #727272;
    text-align: center;
    transition: color .2s ease;
}

    .pb-criticy.pb-criticy-low {
        color: #4caf50;
    }

    .pb-criticy.pb-criticy-med {
        color: #ea8400;
    }

    .pb-criticy.pb-criticy-high {
        color: #f44336;
    }

.tooltip.top .tooltip-arrow {
    border-top-color: #000;
}

.product-backlog .panel.panel-add-pb {
    padding-bottom: 0;
}

.product-backlog--items {
    margin: 0 0 0 0px;
    padding: 0;
}

    .product-backlog--items.margin {
        margin: 0 0 0 15px !important;
    }

    .product-backlog--items li {
        list-style-type: none;
        padding-left: 20px;
        font-weight: 500;
        background: url(../img/drag-dots.gif) no-repeat 0px 10px;
        /*background-size: 16px 16px;*/
        border-bottom: 1px solid #e1e1e1;
        position: relative;
        line-height: 36px
    }

        .product-backlog--items li[epicaActiva=true] {
            background-color: rgba(3, 169, 244, 0.1);
        }

        .product-backlog--items li:hover {
            background-position: 0px -18px;
        }

        .product-backlog--items li .backlog-item {
            display: inline-block;
            color: inherit;
            text-decoration: none;
        }

            .product-backlog--items li .backlog-item:hover {
                text-decoration: none;
            }

    /*.product-backlog--items-epics li{
  padding-left: 10px;
  background: none;
}*/

    .product-backlog--items > li.has-child {
        background: none;
    }

    .product-backlog--items li:last-child {
        border: none;
    }

    .product-backlog--items li:focus::before,
    [itembacklogcontrol][tipoItemBacklogCodigo='Epica']:focus::before {
        /*box-shadow: -5px 0px 0px -2px rgba(3, 169, 244, 0.5);*/
        position: absolute;
        top: 0;
        left: -5px;
        bottom: 0;
        margin: auto 0;
        content: "";
        width: 4px;
        height: 50%;
        background-color: rgba(3, 169, 244, 0.35);
    }

    /*
.product-backlog--items li ul{
  margin-left: 25px;
}*/

    .product-backlog--items .checkbox-inline {
        margin-top: 0;
        padding-left: 25px;
        line-height: 36px;
        font-weight: 500;
        position: relative;
    }

        .product-backlog--items .checkbox-inline:active {
            opacity: 0.75;
        }

    .product-backlog--items ul li > .checkbox-inline {
        font-weight: 400;
    }

    .product-backlog--items .checkbox-inline input[type="checkbox"] {
        margin-top: 11px;
        margin-left: -25px;
    }

        .product-backlog--items input[type="checkbox"]:after,
        .product-backlog--items .checkbox input[type="checkbox"]:after,
        .product-backlog--items .checkbox-inline input[type="checkbox"]:after {
            width: 16px;
            height: 16px;
        }

        .product-backlog--items input[type="checkbox"]:checked:before,
        .product-backlog--items .checkbox input[type="checkbox"]:checked:before,
        .product-backlog--items .checkbox-inline input[type="checkbox"]:checked:before {
            top: 0.4px;
            left: 5.6px;
            width: 5px;
            height: 9px;
        }

.pb-item--options {
    display: inline-block;
    width: auto;
    height: 36px;
    margin-left: 15px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .1s ease;
}

    .pb-item--options .zmdi {
        position: relative;
        top: 2px;
    }

.product-backlog--items > li.has-child:hover .pb-item--options {
    visibility: hidden;
    opacity: 0;
}

.product-backlog--items > li:hover .pb-item--options,
.product-backlog--items > li.has-child ul li:hover .pb-item--options {
    visibility: visible;
    opacity: 1;
}

.product-backlog--items > li:hover:not(label) {
    cursor: hand;
    cursor: -webkit-grab !important;
    cursor: -moz-grab !important;
}

.pb-item--options > a {
    display: inline-block;
    font-size: 16px;
    width: 15px;
    height: auto;
    margin-right: 5px;
    text-align: center;
    line-height: 36px;
}

.pb-items--completed .checkbox-inline,
.pb-items--completed.compl {
    text-decoration: line-through;
    color: #999999;
}

    .pb-items--completed.compl.green {
        text-decoration: line-through;
        color: #4CAF50;
    }

    .pb-items--completed.compl span.check {
        padding: 0 0 0 25px;
    }

.pb-items--taken .checkbox-inline {
    color: #999999;
}

    .pb-items--completed .checkbox-inline input[type="checkbox"],
    .pb-items--taken .checkbox-inline input[type="checkbox"] {
        display: none;
    }

    .pb-items--completed .checkbox-inline:before,
    .pb-items--taken .checkbox-inline:before {
        position: absolute;
        top: -2px;
        left: 0;
        font-family: 'Material-Design-Iconic-Font';
        font-size: 18px;
    }

.pb-items--completed.compl span.check:before {
    position: absolute;
    top: -1px;
    left: 25px;
    font-family: 'Material-Design-Iconic-Font';
    font-size: 18px;
    content: '\f269';
}

.pb-items--completed .checkbox-inline:before {
    content: '\f269';
}

.pb-items--taken .checkbox-inline:before {
    content: '\f205';
}

.pb-items-ellipsis {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 350px;
    /*display: inline-block;*/
    white-space: nowrap;
    height: 24px;
}

.panel-options--wrap {
    float: right;
    display: inline-block;
    width: auto;
    height: auto;
    margin-top: 10px;
}

    .panel-options--wrap .btn-options {
        display: inline-block;
        width: 25px;
        height: auto;
        font-size: 20px;
        color: #727272;
        text-align: center;
        line-height: 30px;
    }

    .panel-options--wrap .open .btn-options {
        opacity: 0.5;
    }

    .panel-options--wrap .btn-filter {
        float: none;
    }

    .panel-options--wrap .btn-refresh:active {
        opacity: 0.5;
    }

.search-in-list {
    position: relative;
    float: left;
    display: inline-block;
    margin: -5px 5px 0 0;
    padding: 0;
    width: 250px;
    height: 30px;
    z-index: 0;
}

    .search-in-list .form-group {
        margin-bottom: 0;
        height: 30px;
    }

    .search-in-list .form-control {
        position: absolute;
        top: 0;
        right: 0;
        width: 25px;
        padding-right: 25px;
        transition: width .3s cubic-bezier(0.000, 0.795, 0.000, 1.000);
        cursor: pointer;
        -webkit-box-shadow: none;
        box-shadow: none;
        z-index: 3;
    }

.panel-backlog .search-in-list {
    position: relative;
    display: inline-block;
    margin: -5px 15px 0 0;
    padding: 0;
    width: 300px;
    height: 30px;
    z-index: 0;
}

    .panel-backlog .search-in-list .form-group {
        margin: 0 0 0 0;
    }

.top25px {
    margin: 25px 0 0 0;
}

.mbot25 {
    margin-bottom: 25px;
}

.search-in-list .form-control:focus {
    width: 100%;
    z-index: 1;
    cursor: text;
    -webkit-box-shadow: inset 0 -2px 0 #2196f3;
    box-shadow: inset 0 -2px 0 #2196f3;
}

.search-in-list .btn.btn-search--inlist {
    position: absolute;
    top: 6px;
    right: 0;
    min-width: 25px !important;
    width: 25px;
    height: 30px;
    margin: 0;
    padding: 0;
    font-size: 20px;
    color: #727272;
    line-height: 30px;
    box-shadow: none;
    border: none;
    z-index: 1;
}

.search-in-list .btn:hover,
.search-in-list:hover .btn {
    color: #0a6ebd;
}

.paper-form .btn-action--massive {
    min-width: 45px;
    border: none;
    box-shadow: none;
}

.product-backlog .panel-footer {
    background: none;
}

.massive-actions {
    float: right;
    margin-right: 15px;
}

    .massive-actions > span {
        text-transform: uppercase;
        color: #727272;
    }

.panel-epics {
    height: 100vh;
}

.select-system-bklog {
    position: absolute;
    top: 13px;
    left: 250px;
    display: inline;
    /*padding-right: 30px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAMAAACelLz8AAAAJ1BMVEVmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmZmaP/QSjAAAADHRSTlMAAgMJC0uWpKa6wMxMdjkoAAAANUlEQVR4AeXJyQEAERAAsNl7Hf3X6xt0QL6JpZWq30pdvdadme+0PMdzvHm8YThHcT1H7K0BtOMDniZhWOgAAAAASUVORK5CYII=);
  -webkit-background-size: 13px 13px;
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: right center;*/
}

    .select-system-bklog .form-control {
        /*width: 135px;*/
        width: auto;
        padding-right: 15px;
        font-size: 18px;
        font-weight: 500;
        color: #03a9f4;
        text-transform: uppercase;
        /*background-image: none;*/
        box-shadow: none;
        transition: color .2s ease;
    }

        /*.select-system-bklog .form-control.selected{
  width: auto;
}*/

        .select-system-bklog .form-control > option {
            font-size: 16px;
            text-transform: none;
            padding: 0 5px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .select-system-bklog .form-control:hover {
            color: #0288d1;
            cursor: pointer;
        }

#width_tmp_select.form-control {
    display: none;
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

    .visuallyhidden.focusable:active,
    .visuallyhidden.focusable:focus {
        clip: auto;
        height: auto;
        margin: 0;
        overflow: visible;
        position: static;
        width: auto;
    }

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   Media Queries for Responsive Design.
   ========================================================================== */

/* Custom, iPhone Retina */

@media only screen and (max-width: 1200px) {
    .item-aside-backlog {
        font-size: 10px;
    }

    .inb-left {
        width: 18vw !important;
        left: 85px;
    }

    span.tag {
        margin-top: 0px !important;
    }
}

@media only screen and (min-width: 320px) {
    .navbar {
        margin-bottom: 0;
    }

    .navbar-brand {
        margin-left: 5px;
        width: 60px;
        background-size: 100%;
    }

    .log-on .content,
    .content {
        height: auto;
        padding: 85px 15px 15px 15px;
        min-width: 1200px;
    }

    .log-on .content {
        height: 100vh;
        padding-top: 15px;
    }

    /*  .log-on .page-header {
    float:left;
    width: 30%;
    height: 100vh;
  }
    .log-on .page-header .peers {
    font-size: 2em;
    margin: 0 auto;
    width:300px;
    height: 90vh;

  }*/
    .logo.logon {
        width: 120px
    }

        .logo.logon img {
            width: 100% !important;
            margin: 0 !important;
            height: auto
        }

    .logo-text.logon {
        font-size: 1.429em;
        color: #fff;
        margin: 60px 0 0 0;
    }

    .log-on .page-header h1 {
        font-size: 1.429em;
    }

    .log-on .page-header h2 {
        font-size: 1.143em;
        line-height: 20px;
        margin: 20px 0 0 0;
    }

    .header__title {
        font-size: 18px;
        line-height: 56px;
        max-width: 150px;
    }

    .notify-wrapper {
        right: 0;
    }

    .notify-widget {
        top: 60px;
        right: 0;
        border-radius: 0;
    }

    .profile-img-card {
        width: 65px;
        height: 65px;
        margin: 0 auto;
    }

    .form-container {
        width: 90%;
        max-width: inherit;
        padding: 1.5em 1em 1em 1em;
    }

    .page-title {
        width: auto;
        font-size: 24px;
        text-align: center;
        line-height: 30px;
    }

    .page-title2 {
        width: auto;
        padding-left: 25px;
    }

    .title-tasks {
        width: auto;
        padding-left: 10px;
    }

    .badge {
        margin: 0 0 0 10px;
    }

    .team-wrap img,
    .avatar-empty,
    .team-form-added .add-user-form {
        width: 35px;
        height: 35px;
        line-height: 34px;
    }

    .avatar-empty {
        line-height: 34px;
    }

    .list-card {
        min-height: 195px;
        height: auto;
    }

        .list-card .owner {
            width: 35px;
            height: 35px;
        }

        .list-card .obj-type {
            font-size: 20px;
            right: 50px;
        }

            .list-card .obj-type .zmdi-bug-report {
                font-size: 24px;
            }

    .mfb-component--br {
        bottom: 5px;
    }

    .bg-bottom {
        height: 90px;
    }

    .team-wrap,
    .team-info {
        height: auto;
    }

    .paper-card-user {
        width: 90%;
        margin: 45px auto;
    }

        .paper-card-user .user-avatar {
            width: 90px;
        }

        .paper-card-user > .panel-body {
            min-height: 355px;
        }

    .call-lynks a {
        font-size: 30px;
    }

    .dropzone {
        min-height: 75px;
    }

        .dropzone .dz-message {
            width: 90px;
            line-height: 90px;
        }

    .paper-card-user-tasks {
        width: 100%;
    }

    .btn-filter {
        top: -80px;
    }

    .pending-tasks .list-group-item {
        padding-left: 10px;
    }

    .tags {
        width: 90%;
        /* padding: 10px 0 0 0; */
    }

    .sgc .tags {
        margin: 10px 0 0 0;
    }

    .filter-options .filter-wrap {
        min-height: 150px;
        height: auto;
        padding-bottom: 75px;
    }

    .view-wrap {
        height: 45px;
    }

        .view-wrap .btn-filter-view {
            margin-top: 0;
            margin-bottom: 0;
        }

    .mm-menu {
        /*width: 265px;
    -webkit-transform: translateX(-265px);
        -ms-transform: translateX(-265px);
            transform: translateX(-265px);

    -webkit-transform: translate3d(-265px, 0, 0);
            transform: translate3d(-265px, 0, 0);*/
    }

    .wrapper.mm-menu-open {
        -webkit-transform: translateX(265px);
        -ms-transform: translateX(265px);
        transform: translateX(265px);
        -webkit-transform: translate3d(265px, 0, 0);
        transform: translate3d(265px, 0, 0);
    }

    .amb-list {
        padding-bottom: 25px;
    }

        .amb-list li {
            display: inline;
            padding-right: 5px;
        }

            .amb-list li .zmdi {
                margin-right: 0;
            }

    .fc-toolbar h2 {
        font-size: 18px;
    }

    .fc-toolbar h2 {
        margin-top: 25px;
    }

    .fc-list-table td {
        border-width: 0;
    }

    .notify-wrapper {
        width: 100%;
    }

    .task-title-sp .task-description {
        font-size: 12px;
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0 0 10px 0;
        float: left;
    }

    .task-title-sp .task-desc {
        font-size: 14px;
        display: inline-block;
    }

    .alert.alert-toast {
        left: 0;
        right: 0;
        width: 94%;
        margin: auto;
    }

    .alert-toast.in {
        opacity: 1;
        -webkit-transform: translateY(-85px);
        transform: translateY(-85px);
        -webkit-transform: translate3d(0, -85px, 0);
        transform: translate3d(0, -85px, 0);
    }

    .filter-options {
        position: relative;
        width: calc(100% + 30px);
        height: 40px;
        top: -25px;
        background: #0059a2;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        color: #fff;
        overflow: hidden;
        min-width: 1280px;
        -webkit-box-align: center !important;
        -ms-flex-align: center !important;
        align-items: center !important;
        -webkit-box-pack: center !important;
        -ms-flex-pack: center !important;
        justify-content: center !important;
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
    }

        .filter-options ul {
            list-style: none;
            margin: 0;
            height: 40px;
            padding: 0;
        }

            .filter-options ul li {
                float: left;
                height: 40px;
            }

                .filter-options ul li .label-control {
                    float: left;
                    width: auto;
                    padding: 0 15px;
                }

                .filter-options ul li .form-control {
                    width: auto;
                    padding: 0 10px;
                    float: right;
                    background: #404b77;
                    font-size: 12px;
                    font-weight: bold;
                    border-bottom: 2px solid #404b77;
                    height: 40px;
                    max-width: 150px;
                    text-indent: 0;
                    cursor: pointer;
                    text-overflow: ellipsis;
                }

                .filter-options ul li .btn {
                    margin: 10px 15px;
                }

        .filter-options.sgc {
            height: auto;
            padding: 0;
        }

            .filter-options.sgc div.EtiquetasHallazgos {
                position: relative;
            }

                .filter-options.sgc div.EtiquetasHallazgos ul:first-child {
                    margin: 0 0 10px 0;
                }

                .filter-options.sgc div.EtiquetasHallazgos ul:last-child {
                    margin: 0 10%;
                }

            .filter-options.sgc .form-group {
                margin: 0;
            }

        .filter-options label {
            font-size: 12px;
            line-height: 39px;
            text-align: 0;
            padding: 0 5px 0 0;
        }

    /* Tooltip container */
    .tooltip-1 {
        z-index: 12;
        cursor: pointer;
        pointer-events: auto !important;
    }

        /* Tooltip text */
        .tooltip-1 .tooltiptext {
            display: none;
            width: 120px;
            top: 100%;
            left: 0%;
            margin-left: -10px;
            /* Use half of the width (120/2 = 60), to center the tooltip */
            background: rgba(0, 0, 0, 0.7);
            color: #fff;
            text-align: center;
            padding: 5px;
            border-radius: 2px;
            font-size: 12px;
            /* Position the tooltip text - see examples below! */
            position: absolute;
            z-index: 300;
        }

        /* Show the tooltip text when you mouse over the tooltip container */
        .tooltip-1:hover .tooltiptext {
            display: block;
        }

        .tooltip-1 .tooltiptext::after {
            content: " ";
            position: absolute;
            bottom: 100%;
            /* At the top of the tooltip */
            left: 15%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: transparent transparent rgba(0, 0, 0, 0.7) transparent;
        }

    .filter-options select,
    .filter-options select.form-control {
        font-size: 12px;
        font-weight: bold;
        background: url(../img/white-caret.png) #404b77 !important;
        -webkit-background-size: 10px !important;
        background-size: 10px !important;
        background-repeat: no-repeat !important;
        background-position: 95% center !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border-bottom: 2px solid #008cff;
        height: 40px;
        max-width: 150px;
        text-indent: 0;
        padding-right: 25px !important;
    }

        .filter-options select option,
        .filter-options select.form-control option {
            color: #fff;
            text-indent: 0;
            max-width: 150px;
        }

    .filter-options input.form-control {
        font-size: 12px;
        font-weight: bold;
    }

    .filter-options.sgc .form-group {
        position: relative;
    }

    .filter-options .form-group i {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 12px;
        color: #fff;
    }

    .navbar-nav > li.user-dropdown > a {
        padding-top: 0;
        padding-bottom: 0;
        float: right;
    }

    .navbar-brand {
        margin-left: 0;
        width: 100px;
        background-size: cover;
    }

    .header .navbar-right {
        margin-right: 0;
    }

    .badge {
        margin: 23px 0 0 10px;
    }

    header .badge {
        margin: 20px 0 0 15px;
        width: 32px;
        height: 32px;
        line-height: 28px;
    }

    @-moz-document url-prefix() {
        header .badge {
            line-height: 28px;
        }
    }

    .log-on .page-header h1 {
        font-size: 2.768em;
    }

    .log-on .page-header h2 {
        font-size: 1.714em;
        line-height: 50px;
    }

    .notify-wrapper {
        padding-right: 100px;
    }

    .notify-widget {
        right: 15px;
        border-radius: 0 0 4px 4px;
    }

    .header__title {
        font-size: 22px;
        line-height: 70px;
        max-width: inherit;
    }

    .profile-img-card {
        width: 96px;
        height: 96px;
        margin: 0 auto 10px;
    }

    .version {
        position: absolute;
        bottom: 15px;
        width: 380px;
        right: 20vw;
        text-align: center;
        font-size: 12px;
        color: #999999;
        z-index: 0;
    }
}

/* Extra Small Devices, Phones */

@media only screen and (min-width: 480px) {
    .sgc-subheader {
        position: relative;
        top: 60px;
        left: 0;
        width: 100%;
        background: #0059a2;
        height: auto;
        margin: 0;
        padding: 40px 0;
        overflow: hidden;
    }
}

/* Small Devices, Tablets */

@media only screen and (min-width: 768px) {
    .form-container {
        width: 35%;
        max-width: 380px;
        padding: 3em 2em 2em 2em;
    }

    .page-title {
        width: auto;
        font-size: 36px;
        text-align: left;
        line-height: 75px;
    }

    .page-title2 {
        padding-left: 0;
    }

    .cards-container {
        padding: 2px 10px 0 10px;
        /* max-height: 520px;*/
    }

    .add-user,
    .more-options,
    .more-options:focus,
    .more-options:active,
    .comments-counter {
        width: 28px;
        height: 28px;
        line-height: 28px;
    }

        .add-user,
        .more-options,
        .more-options:focus,
        .more-options:active {
            line-height: 28px;
        }

    .workitem-card .user-avatar {
        width: 30px;
        height: 30px;
    }

    .time-estimated,
    .user-designed {
        width: auto;
        font-size: 12px;
        /*
        line-height: 30px;
        */
    }

    .workitem-card .card-data .c1 {
        padding-right: 0;
    }

    .workitem-card .card-data .c2 {
        padding-left: 0;
    }

    .cards-container .empty-message {
        font-size: 15px;
    }

    .info-panels .panel-text {
        font-size: 20px;
    }

        .info-panels .panel-text i {
            font-size: 30px;
        }

    .page-title {
        font-size: 22px;
        height: 35px;
        line-height: 35px;
    }

    .header-detail .page-title {
        font-size: 18px;
        height: 28px;
        line-height: 28px;
    }

    .page-title2 {
        font-size: 24px;
    }

    /*  .workitems-list{
    min-height: 400px;
    max-height: 480px;
  }*/
    /*  .wrapper-home .workitems-list{
    min-height: 300px;
    max-height:  430px;
  }*/
    .paper-card .action-row {
        /*margin-top: 20px;*/
    }

    .log-on .page-header {
        padding: 0;
    }

    .form-container {
        max-width: 350px;
    }

    .profile-img-card {
        width: 75px;
        height: 75px;
    }

    .list-card {
        height: 180px;
    }

        .list-card h1 {
            font-size: 16px;
            max-width: 60%;
        }

        .list-card .obj-type {
            width: 30px;
            height: 30px;
            right: 50px;
            font-size: 1.714em;
        }

        .list-card .type-lang {
            right: 15px;
            min-width: 30px;
            width: auto;
        }

        .list-card .owner {
            width: 30px;
            height: 30px;
        }

    .sprints .list-card {
        min-height: 100px;
        height: 120px;
    }

    .modal-confirmation .modal-dialog,
    .alerts .modal-dialog {
        margin-top: 10%;
    }

        .modal-confirmation .modal-dialog .modal-body p {
            font-size: 1.2em;
        }

    .alerts .modal-dialog {
        width: 800px;
    }

    .team img,
    .team-wrap img,
    .avatar-empty,
    .team-form-added .add-user-form {
        width: 45px;
        height: 45px;
        line-height: 44px;
    }

    .team-form-added .add-user-form {
        line-height: 34px;
    }

    .user-sidebar-list .user-avatar,
    .user-sidebar-list .avatar-empty {
        width: 40px;
        height: 40px;
        margin: 0;
        line-height: 39px;
    }

    .bg-bottom {
        height: 150px;
    }

    .mfb-component--br {
        right: 35px;
        bottom: 30px;
    }

    .paper-card-user {
        width: 80%;
        max-width: 400px;
        margin: 25px auto;
    }

        .paper-card-user .user-avatar {
            width: 135px;
        }

        .paper-card-user > .panel-body {
            min-height: 455px;
        }

    .call-lynks a {
        font-size: 24px;
    }

    .dropzone {
        min-height: 150px;
    }

        .dropzone .dz-message {
            width: 135px;
            line-height: 135px;
        }

    .paper-card-user-tasks {
        width: 400px;
    }

    .btn-filter {
        top: 0px;
    }

    .tags {
        width: 100%;
        /*padding: 25px 0 0 0;*/
    }

    .filter-options .filter-wrap {
        height: 150px;
        padding-bottom: 0;
    }

    .view-wrap {
        height: 75px;
    }

        .view-wrap .btn-filter-view {
            margin-top: 20px;
            margin-bottom: 20px;
        }

    .table-list {
        height: 350px;
    }

    .panel-list .table-list {
        height: auto;
        max-height: 475px;
    }

    .user-sidebar-list .user-name,
    .user-task-list .task-total,
    .user-task-list .hours-total {
        line-height: 40px;
    }

    .user-task-wrap {
        max-height: 250px;
    }

    .sidebar.open {
        width: 680px;
    }

    .mm-menu {
        /*width: 250px;
    -webkit-transform: translateX(-250px);
        -ms-transform: translateX(-250px);
            transform: translateX(-250px);*/
    }

    .wrapper.mm-menu-open {
        -webkit-transform: translateX(250px);
        -ms-transform: translateX(250px);
        transform: translateX(250px);
        -webkit-transform: translate3d(250px, 0, 0);
        transform: translate3d(250px, 0, 0);
    }

    .mm-menu__items .mm-menu__item {
        font-size: 15px;
    }

    .user-dropdown .chevron {
        top: 25px;
    }

    .notify-icon .indicator {
        width: 6px;
        height: 6px;
    }

    .column-container h1 {
        font-size: 13px;
    }

    .header-detail .page-title .badge {
        top: 0;
        width: 30px;
        height: 30px;
        font-size: 12px;
        line-height: 28px;
        text-indent: -2px;
    }

    .btn-sp-detail {
        min-width: 125px;
        margin: 0;
        text-align: left;
        font-weight: 500;
        letter-spacing: 0.04em;
        line-height: 30px;
    }

    .block-sprint .text-state {
        font-size: 13px;
    }

    .sidebar .page-header {
        height: 61px;
    }

        .sidebar .page-header h1,
        .sidebar .page-header .timer {
            line-height: 60px;
        }

    .sidebar .sidebar-toggle {
        top: 0px;
        height: 60px;
    }

    .sp-description p {
        font-size: 13px;
        line-height: 18px;
    }

    .workitem-card .reveal-panel .reveal-options {
        font-size: 12px;
    }

        .workitem-card .reveal-panel .reveal-options .zmdi {
            font-size: 14px;
        }

    .workitem-card .reveal-panel .reveal-close {
        width: 45px;
    }
    /*
    .col-two .cards-container {
        min-height: 72vh;
        max-height: 72vh;
    }

    .col-three .cards-container {
        min-height: 72vh;
        max-height: 72vh;
    }

    .col-four .cards-container {
        min-height: 72vh;
        max-height: 72vh;
    }
*/
    .team-card .active-sprints,
    .team-card .last-activity,
    .user-team-name {
        font-size: 15px;
    }

    .team-card .user-team-tasks {
        width: 105px;
        font-size: 13px;
    }

    .team-card .data-right {
        padding-left: 15px;
    }

    .user-team-area {
        font-size: 13px;
        line-height: 18px;
    }

    .team-card .user {
        width: 18%;
    }

    .team-card .data-right {
        width: 82%;
    }

    .team-card .more-options-team {
        font-size: 20px;
    }

    .team-card .mood {
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 15px;
    }

    .team-card .sprint-list .nsprint,
    .team-card .sprint-list .user-team-tasks {
        font-size: 13px;
    }

    .sp-content-detail .panel-body {
        max-height: 300px;
    }
    /*
    .col-one {
        height: 80vh;
    }

    .col-one .cards-container {
        min-height: 65vh;
        max-height: 65vh;
    }

    .col-two {
        min-height: 80vh;
        max-height: 80vh
    }

    .col-two .cards-container {
        min-height: 72vh;
        max-height: 72vh;
    }

    .col-three {
        min-height: 80vh;
        max-height: 80vh
    }

    .col-three .cards-container {
        min-height: 72vh;
        max-height: 72vh;
    }

    .col-four {
        min-height: 80vh;
        max-height: 80vh;
    }

    .col-four .cards-container {
        min-height: 72vh;
        max-height: 72vh;
    }*/

    .sgc .pagination > li > a,
    .sgc .pagination > li > span {
        font-size: 14px;
    }

    .comment-user,
    .list-comments .comment-user {
        width: 6%;
    }

    .comment-form,
    .list-comments .comment-text {
        width: 93%;
    }

    .inb-left .list-group-item {
        /*font-size: 14px;*/
        line-height: 35px;
    }

        .inb-left .list-group-item .zmdi {
            font-size: 15px;
        }

        .inb-left .list-group-item a .tag {
            /*font-size: 14px;*/
            font-weight: bold !important;
        }

    .inbox .table th,
    .inbox .table td {
        line-height: 35px;
    }

    .inbox .table {
        margin-top: 8px;
        font-size: 14px;
    }

    .inbox .filter-top .label {
        margin-top: 8px;
        font-size: 12px;
    }

    .table-filter > a {
        font-size: 20px;
    }

    .amb-list {
        padding-bottom: 25px;
    }

        .amb-list li {
            display: block;
        }

            .amb-list li .zmdi {
                margin-right: 5px;
            }

    .fc-toolbar h2 {
        font-size: 24px;
    }

    .fc-toolbar h2 {
        margin-top: 15px;
    }

    .fc-list-table td {
        border-width: 1px 0 0;
    }

    #calendar-mobile {
        display: none;
    }

    .notify-wrapper {
        max-width: 600px;
    }

    .panel-info-right .day {
        font-size: 18px;
    }

    .panel-info-right .deadline {
        font-size: 13px;
    }

    .panel-table .panel-body {
        /* max-height: 425px;*/
    }

        .panel-table .panel-body.panel-body-scroll {
            max-height: 250px;
        }

        .panel-table .panel-body.panel-body-no-scroll {
            height: auto;
            max-height: auto;
            overflow-y: none !important;
        }

    .modal-workitem .modal-dialog {
        width: 900px;
    }
}

/* Medium Devices, Desktops */

@media only screen and (min-width: 992px) {
    .list-card {
        height: 200px;
    }

    .proyect-list .list-card {
        height: 250px;
    }

    .wrapper header {
        height: 60px;
    }

    .panel-sprint .tab-content--proysprint {
        height: calc(100vh - 150px);
        overflow-y: auto;
    }

    .mm-menu__header {
        height: 60px;
    }

    .header__title {
        height: 60px;
        font-size: 20px;
        line-height: 50px;
    }

    .mm-menu-wrapper {
        height: 50px;
    }

    .notify-wrapper,
    .notify-wrapper .notify-icon {
        height: 60px;
    }

        .notify-wrapper .notify-icon {
            line-height: 50px;
        }

    .user-data {
        width: 40px;
        height: 60px;
    }

    .column-container .user-data {
        width: 30px;
        height: auto;
    }

    .workitem-card .asign-user {
        width: 30px;
        height: 30px;
        line-height: 30px;
    }

    .user-dropdown .caret,
    .user-dropdown .caret-up {
        top: 32px;
    }

    ul.nav li.user-dropdown:hover > ul.dropdown-menu {
        display: block;
    }

    .sp-content-detail .panel-body {
        max-height: 450px;
    }

    :-webkit-full-screen .header,
    :-webkit-full-screen .content {
        -webkit-transform: translateY(-60px);
        transform: translateY(-60px);
    }

    .sgc-subheader h1 {
        font-size: 28px;
    }

    .btn-sgc {
        width: 150px;
        height: 150px;
    }

        .btn-sgc i {
            position: absolute;
            top: 40px;
            left: 0;
            right: 0;
            width: 100%;
            font-size: 45px;
        }

        .btn-sgc span {
            position: absolute;
            bottom: 15px;
            left: 0;
            right: 0;
            width: 100%;
            font-size: 14px;
            letter-spacing: 0.05em;
        }

    /*  .sgc .panel .panel-body{
    max-height: 500px;
  }
  .sgc .panel.panel-table .panel-body{
    max-height: 250px;
  }*/
    .sgc .panel.panel-table.table-sgc-home .panel-body {
        max-height: 293px;
    }

    .sgc .panel.paper-form .panel-body {
        max-height: inherit;
    }

    .table-sgc td {
        font-size: 14px;
    }

    .paper-card .form-group .radio-inline,
    .checkbox-inline {
        padding-left: 0;
    }

    .filedrag > p {
        font-size: 18px;
    }

    .previewarea h3 {
        font-size: 13px;
    }

    /*  .tab-content--proyectm {
      max-height: 672px;
  }*/
    /*.wrapper-home .tab-content--proyectm {
      max-height: 400px;
  }*/
    .proyect-list .card-amb {
        min-height: 250px;
        height: auto;
    }

    .alert.alert-toast {
        left: 15px;
        right: inherit;
        width: auto;
        margin: 0;
    }

    .alert-toast.in {
        opacity: 1;
        -webkit-transform: translateY(-45px);
        transform: translateY(-45px);
        -webkit-transform: translate3d(0, -45px, 0);
        transform: translate3d(0, -45px, 0);
    }

    .table > tbody > tr > td,
    .table.table-header > tbody > tr > td {
        font-size: 12px;
    }

    .list-group-item .checkbox-inline {
        padding-left: 25px;
    }

    .nav-tabs.tabs-badge li a,
    .page-title-badge {
        padding: 0 50px 10px 2px;
        text-transform: uppercase;
        font-size: 15px;
        font-weight: 500;
    }

    .panel-width-fix {
        float: left;
        width: 100%;
        padding: 0 15px;
    }

    .filter-width-fix {
        float: left;
        width: 100%;
        padding: 0 15px;
    }

    .filter-flex-2-12 {
        float: left;
        padding: 0 15px;
        width: 16.6666%;
    }

    .filter-flex-3-12 {
        float: left;
        padding: 0 15px;
        width: 25%;
    }

    .button-filter {
        margin-top: 35px;
    }

    .nav > li > a {
        position: relative;
        display: block;
        padding: 10px 10px;
    }

    .off-col-1-backlog {
        float: left;
        width: 50%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .off-col-2-backlog {
        float: left;
        width: 50%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .sgc-col-9-10 {
        float: right;
        width: 84%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .sgc-col-3-2 {
        float: left;
        width: 15%;
        padding: 0 15px;
    }

    .col-200px {
        float: left;
        width: 150px !important;
        text-align: left;
    }

    .col-calc-200px {
        width: calc(100% - 150px);
    }
}

@media only screen and (min-width: 1400px) {
    .panel-table .panel-body.panel-body-scroll {
        max-height: 350px;
    }

    /* .col-one {
        min-height: 80vh;
    }

    .col-two {
        min-height: 80vh;
    }

    .col-three {
        min-height: 80vh;
    }

    .col-four {
        min-height: 80vh;
    }

    .col-one .cards-container {
        min-height: 65vh;
        max-height: 65vh;
    }

    .col-tree .cards-container,
    .col-four .cards-container {
        min-height: 65vh;
        max-height: 65vh;
    }*/

    /*.sgc .panel.panel-table .panel-body{
    max-height: 392px;
  }
   .sgc .panel.panel-table.table-sgc-home .panel-body{
    max-height: 293px;
  }*/
}

/* Large Devices, Wide Screens */

@media only screen and (min-width: 1448px) {
    .wrapper header {
        height: 70px;
    }

    .form-container {
        right: 25vw;
    }

    .version {
        right: 25vw;
    }

    .mm-menu__header {
        height: 70px;
    }

    .header__title {
        height: 70px;
        font-size: 22px;
        line-height: 60px;
    }

    header .badge {
        margin: 22px 0 0 15px;
        width: 35px;
        height: 35px;
        line-height: 32px;
    }

    @-moz-document url-prefix() {
        header .badge {
            line-height: 30px;
        }
    }

    .notify-wrapper,
    .notify-wrapper .notify-icon {
        height: 70px;
    }

        .notify-wrapper .notify-icon {
            line-height: 60px;
        }

    .user-data {
        width: 45px;
        height: 70px;
    }

    .column-container .user-data {
        width: 36px;
        height: auto;
    }

    .workitem-card .asign-user {
        width: 36px;
        height: 36px;
        line-height: 36px;
    }

    .user-dropdown .caret,
    .user-dropdown .caret-up {
        top: 35px;
    }

    .cards-container {
        padding: 2px 15px 0 15px;
    }

    .column-expanded .workitem-card .workitem-content p {
        font-size: 17px;
        line-height: 25px;
    }

    .add-user,
    .more-options,
    .more-options:focus,
    .more-options:active,
    .comments-counter {
        width: 30px;
        height: 24px;
        line-height: 24px;
    }

    .workitem-card .user-avatar {
        width: 36px;
        height: 36px;
    }

    .add-user {
        line-height: 33px;
    }

    .time-estimated,
    .user-designed {
        width: auto;
        font-size: 12px;
        line-height: 24px;
    }

    .column-expanded .time-estimated,
    .column-expanded .user-designed {
        font-size: 15px;
    }

    .cards-container .empty-message {
        font-size: 17px;
    }

    .info-panels .panel-text {
        font-size: 30px;
    }

        .info-panels .panel-text i {
            font-size: 45px;
        }

    .page-title {
        font-size: 36px;
    }

    .header-detail .page-title {
        font-size: 18px;
        height: 28px;
        line-height: 28px;
    }

    .page-title2 {
        font-size: 30px;
    }

    .workitems-list,
    .backlog-scroll-list {
        min-height: 300px;
        max-height: 680px;
    }

    /*.wrapper-home .workitems-list {
    min-height: 300px;
    max-height: 600px;
}*/
    .paper-card .action-row {
        /*margin-top: 100px;*/
    }

    .log-on .page-header {
        padding: 5% 0 2.5% 0;
    }

    .form-container {
        max-width: 380px;
    }

    .profile-img-card {
        width: 96px;
        height: 96px;
    }

    .filter-options {
        position: relative;
        width: calc(100% + 60px);
        height: 40px;
        top: -15px;
        left: -15px;
        padding: 3px 15px;
        background: #404b77;
        position: relative;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
        color: #fff;
        overflow: hidden;
    }

        .filter-options label {
            font-size: 14px;
            line-height: 37px;
            height: 35px;
            text-align: right;
            padding: 0 15px 0 0;
        }

        .filter-options select,
        .filter-options select.form-control {
            font-size: 14px;
            font-weight: bold;
            line-height: 1.5;
            border: none;
        }

    .filter-list,
    .filter-list-2 {
        float: left;
        width: 90%;
        margin: 0 5%;
    }

    .filter-options input.form-control {
        font-size: 14px;
    }

    .panel-sprint .tab-content--proysprint {
        height: calc(100vh - 200px);
        overflow-y: auto;
    }

    .col-200px {
        float: left;
        width: 200px !important;
        text-align: left;
    }

    .col-calc-200px {
        width: calc(100% - 200px);
    }

    /*.filter-options input, .filter-options input.form-control {
    font-size: 14px;
}*/
    .filter-option .btn-xs,
    .filter-option-2 .btn-xs {
        margin: 10px 0;
    }

    .list-card {
        height: 250px;
    }

        .list-card h1 {
            font-size: 18px;
        }

        .list-card .obj-type {
            width: 35px;
            height: 35px;
            right: 60px;
            font-size: 2.475em;
        }

        .list-card .type-lang {
            min-width: 35px;
            width: auto;
            right: 18px;
            font-size: 1.714em;
        }

        .list-card .owner {
            width: 40px;
            height: 40px;
        }

    .modal-confirmation .modal-dialog,
    .alerts .modal-dialog {
        margin-top: 15%;
    }

    .proyect-list .list-card {
        height: 300px;
    }

    .table-list {
        height: 500px;
    }

    .panel-list .table-list {
        height: auto;
        max-height: 630px;
    }

    .user-sidebar-list .user-avatar,
    .user-sidebar-list .avatar-empty {
        width: 45px;
        height: 45px;
        margin: 0;
        line-height: 44px;
    }

    .user-sidebar-list .user-name,
    .user-task-list .task-total,
    .user-task-list .hours-total {
        line-height: 45px;
    }

    .user-task-wrap {
        max-height: 350px;
    }

    .mm-menu {
        /*width: 300px;
    -webkit-transform: translateX(-300px);
        -ms-transform: translateX(-300px);
            transform: translateX(-300px);*/
    }

    .wrapper.mm-menu-open {
        -webkit-transform: translateX(300px);
        -ms-transform: translateX(300px);
        transform: translateX(300px);
        -webkit-transform: translate3d(300px, 0, 0);
        transform: translate3d(300px, 0, 0);
    }

    .mm-menu__items .mm-menu__item {
        font-size: 16px;
    }

    .user-dropdown .chevron {
        top: 32px;
    }

    .notify-icon .indicator {
        width: 8px;
        height: 8px;
    }

    .column-container h1 {
        font-size: 14px;
    }

    .block-sprint .text-state {
        font-size: 15px;
    }

    .sidebar .page-header {
        height: 71px;
    }

        .sidebar .page-header h1,
        .sidebar .page-header .timer {
            line-height: 70px;
        }

    .sidebar .sidebar-toggle {
        top: 0px;
        height: 70px;
    }

    .sp-description p {
        font-size: 15px;
        line-height: 22px;
    }

    .workitem-card .reveal-panel .reveal-options {
        font-size: 13px;
    }

        .workitem-card .reveal-panel .reveal-options .zmdi {
            font-size: 15px;
        }

    .workitem-card .reveal-panel .reveal-close {
        width: 80px;
    }
    /*
    .cards-container {
        max-height: 660px;
    }

    .col-one .cards-container {
        min-height: 72vh;
    }

    .col-two .cards-container {
        min-height: 72vh;
    }

    .col-three .cards-container {
        min-height: 72vh;
    }

    .col-four .cards-container {
        min-height: 72vh;
    }
*/
    .team-card .active-sprints,
    .team-card .last-activity,
    .user-team-name {
        font-size: 17px;
    }

    .team-card .user-team-tasks {
        width: 115px;
        font-size: 14px;
    }

    .team-card .data-right {
        padding-left: 5px;
    }

    .user-team-area {
        line-height: 25px;
        font-size: 14px;
    }

    .team-card .user {
        width: 20%;
    }

    .team-card .data-right {
        width: 80%;
    }

    .team-card .more-options-team {
        font-size: 24px;
    }

    .team-card .mood {
        width: 25px;
        height: 25px;
        font-size: 17px;
        line-height: 25px;
    }

    .team-card .sprint-list .nsprint,
    .team-card .sprint-list .user-team-tasks {
        font-size: 15px;
    }

    .sp-content-detail .panel-body {
        max-height: 580px;
    }

    :-webkit-full-screen .header,
    :-webkit-full-screen .content {
        -webkit-transform: translateY(-70px);
        transform: translateY(-70px);
    }

    .team img,
    .team-wrap img,
    .avatar-empty,
    .team-form-added .add-user-form {
        width: 45px;
        height: 45px;
        line-height: 48px;
    }

    .team-form-added .add-user-form {
        line-height: 42px;
    }

    .sgc-col-9-10 {
        float: left;
        width: 75%;
        padding: 0 15px;
    }

    .sgc-col-3-2 {
        float: left;
        width: 25%;
        padding: 0 15px;
    }

    .sgc-subheader h1 {
        font-size: 30px;
        letter-spacing: 0.02em;
    }

    .btn-sgc {
        width: 180px;
        height: 180px;
    }

    .btn-sgc {
        margin: 15px 17px 0 0;
        background: rgb(2, 136, 209);
        color: #fff;
        position: relative;
    }

        .btn-sgc:hover {
            background: #03A9F4;
            color: #fff;
        }

        .btn-sgc i {
            position: absolute;
            top: 60px;
            left: 0;
            right: 0;
            width: 100%;
            font-size: 48px;
        }

        .btn-sgc span {
            position: absolute;
            bottom: 15px;
            left: 0;
            right: 0;
            width: 100%;
            font-size: 16px;
            letter-spacing: 0.05em;
        }

    /*.sgc .panel .panel-body{
    max-height: 675px;
  }
  .sgc .panel.panel-table .panel-body{
    max-height: 515px;
  }*/
    .sgc .panel.paper-form .panel-body {
        min-height: 500px;
    }

    .sgc .panel.paper-form .panel-body {
        max-height: inherit;
    }

    .table-sgc td {
        font-size: 16px;
    }

    .paper-card .form-group .radio-inline,
    .checkbox-inline {
        padding-left: 25px;
    }

    .filedrag > p {
        font-size: 18px;
    }

    .previewarea h3 {
        font-size: 16px;
    }

    #uploader_form {
        max-width: 780px;
    }

    .sgc .pagination > li > a,
    .sgc .pagination > li > span {
        font-size: 16px;
    }

    /*.tab-content--proyectm {
      max-height: 800px;
  }*/
    .comment-user,
    .list-comments .comment-user {
        width: 5%;
    }

    .comment-form,
    .list-comments .comment-text {
        width: 95%;
    }

    .inb-left .list-group-item {
        font-size: 16px;
        line-height: 48px;
    }

        .inb-left .list-group-item .zmdi {
            font-size: 22px;
        }

        .inb-left .list-group-item .tag {
            font-size: 16px;
            line-height: 30px;
        }

    .inbox .table th,
    .inbox .table td {
        line-height: 48px;
    }

    .inbox .table {
        margin-top: 15px;
        font-size: 16px;
    }

    .inbox .filter-top .label {
        margin-top: 15px;
        font-size: 14px;
    }

    .table-filter > a {
        font-size: 22px;
    }

    .panel-table .panel-body {
        /* max-height: 600px;*/
    }

        .panel-table .panel-body.panel-body-scroll {
            max-height: 530px;
        }

    .table > tbody > tr > td {
        font-size: 14px;
        line-height: 1.446;
    }

    .nav > li > a {
        position: relative;
        display: block;
        padding: 10px 15px;
    }

    .form-textarea .user-avatar--comment {
        position: absolute;
        left: -80px;
        top: -2px;
    }
}

/* Large Devices, Wide Screens */

@media only screen and (min-width: 1660px) {

    .nav-tabs.tabs-badge li a,
    .page-title-badge {
        padding: 0 50px 10px 2px;
        text-transform: uppercase;
        font-size: 16px;
        font-weight: 500;
    }

    .list-card {
        height: 200px;
    }

    .user-task-wrap {
        max-height: 450px;
    }

    /*
    .sidebar.open {
        width: 900px;
    }
    */
    .task-title-sp .task-desc {
        font-size: 14px;
    }

    .panel-info-right .day {
        font-size: 30px;
    }

    .panel-info-right .deadline {
        font-size: 15px;
    }

    .panel-width-fix {
        float: left;
        width: 75%;
        padding: 0 15px 0 15px;
    }

    .filter-width-fix {
        float: left;
        width: 25%;
        padding: 0 15px 0 15px;
    }

    .filter-flex-2-12,
    .filter-flex-3-12 {
        float: left;
        padding: 0 15px;
        width: 100%;
    }

    .task-title-sp .task-description {
        font-size: 12px;
        width: 50%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        margin: 3px 0 0 15px;
    }

    .off-col-1-backlog {
        float: left;
        width: 58.33333333%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .off-col-2-backlog {
        float: left;
        width: 41.66666667%;
        padding-left: 15px;
        padding-right: 15px;
    }

    /* .col-one {
        min-height: 80vh;
        max-height: 80vh;
    }

    .col-one .cards-container {
        min-height: 72vh;
        max-height: 72vh;
    }

    .col-two {
        min-height: 80vh;
        max-height: 80vh;
    }

    .col-two .cards-container {
        min-height: 72vh;
        max-height: 72vh;
    }

    .col-three {
        min-height: 80vh;
        max-height: 80vh;
    }

    .col-three .cards-container {
        min-height: 72vh;
        max-height: 72vh;
    }

    .col-four {
        min-height: 80vh;
        max-height: 80vh;
    }

    .col-four .cards-container {
        min-height: 72vh;
        max-height: 72vh;
    }
*/
    .sgc .panel.panel-table.table-sgc-home .panel-body {
        max-height: 493px;
    }

    .sgc-subheader {
        position: relative;
        top: 70px;
        left: 0;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 40px 0;
        overflow: hidden;
    }

    .notify-widget {
        top: 70px;
        right: 0;
        border-radius: 0;
    }
}

.block-sprint {
    float: right;
    display: inline-block;
    width: auto;
    height: 40px;
}

.toggle-switch {
    float: right;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}

.block-sprint .text-state {
    float: left;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 35px 0 0;
    color: #727272;
    line-height: 30px;
}

.lbl {
    position: relative;
    display: block;
    height: 16px;
    width: 44px;
    margin: 5px 15px 0 0;
    font-size: 17px;
    background: #898989;
    text-align: center;
    border-radius: 100px;
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.toggle-sprint .lbl {
    width: 48px;
}

.lbl:after {
    position: absolute;
    left: -2px;
    top: -3px;
    display: block;
    width: 24px;
    height: 24px;
    border-radius: 100px;
    background: #fff;
    -webkit-box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
    ;
    box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
    content: "";
    /*content: "\f18f";*/
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.toggle-sprint .lbl:after {
    width: 26px;
    height: 26px;
    top: -5px;
    left: -5px;
    line-height: 26px;
    color: #727272;
    text-indent: 1px;
}

.lbl:active:after {
    -webkit-transform: scale(1.15, 0.85);
    transform: scale(1.15, 0.85);
}

.cbx:checked ~ label {
    /*background: #a5c1ef;*/
    background: #ef9a9a;
}

    .cbx:checked ~ label:after {
        left: 30px;
        /*background: #448aff;*/
        background: #f44336;
        color: #fff;
        /*content: "\f190";*/
        content: "";
    }

.cbx:disabled ~ label {
    background: #d5d5d5;
    pointer-events: none;
}

    .cbx:disabled ~ label:after {
        background: #bcbdbc;
    }

.team-card {
    min-height: 150px;
    position: relative;
    transition: opacity 0.5s ease-in-out, box-shadow 1s ease-in-out;
}

    .team-card .panel-body {
        padding-top: 30px;
    }

    .team-card .more-options-team {
        position: absolute;
        top: 5px;
        right: 15px;
        line-height: 30px;
    }

    .team-card .user {
        float: left;
        display: inline-block;
        width: 20%;
        height: auto;
        position: relative;
    }

    .team-card .mood {
        position: absolute;
        left: 5px;
        bottom: 5px;
        background: #fff;
        background: rgba(255, 255, 255, 0.85);
        color: #4CAF50;
        border-radius: 100%;
        text-align: center;
    }

        .team-card .mood .zmdi {
            position: relative;
            top: 1px;
        }

        .team-card .mood .zmdi-fire {
            color: #f44336;
        }

        .team-card .mood .zmdi-thumb-up {
            color: #03A9F4;
        }

        .team-card .mood .zmdi-coffee {
            color: #6D4C41;
        }

    .team-card .data-right {
        float: left;
        display: inline-block;
        width: 80%;
        height: auto;
        margin: 0;
    }

        .team-card .data-right .data-item {
            display: block;
            width: 100%;
            height: auto;
            text-align: left;
        }

.user-team-name {
    text-transform: uppercase;
    font-weight: 400;
    line-height: 20px;
}

.user-team-area {
    text-transform: capitalize;
    color: #727272;
    font-weight: 400;
    letter-spacing: 0.01px;
}

.team-card .progress {
    margin: 5px 0 0 0;
    border-radius: 15px;
}

.team-card .progress-bar,
.team-card .progress-bar:last-child:before {
    height: 8px;
}

    .team-card .progress-bar:last-child {
        border-radius: 0 15px 15px 0;
    }

        .team-card .progress-bar:last-child:before {
            background: #e0e0e0;
        }

.team-card .progress-bar {
    background: #0288d1;
}

.team-card .metrics {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.team-card .tendencia,
.team-card .user-team-tasks {
    float: left;
    display: inline-block;
    margin: 0;
    padding: 0;
    height: auto;
    line-height: 30px;
}

.team-card .tendencia {
    font-size: 15px;
}

.tendencia.trending-up {
    color: green;
}

.tendencia.trending-down {
    color: red;
}

.tendencia.trending-flat {
    color: #222;
}

.team-card .user-team-tasks {
    float: right;
    color: #727272;
}

    .team-card .user-team-tasks span {
        float: right;
    }

.team-card .active-sprints {
    display: block;
    width: 100%;
    height: auto;
    color: #727272;
}

    .team-card .active-sprints a,
    .team-card .active-sprints .zmdi,
    .team-card .last-activity time {
        color: #0068b4;
        font-weight: 500;
    }

.team-card .sp--no-activity {
    color: #0068b4;
}

.team-card .active-sprints .zmdi {
    margin-left: 5px;
    -webkit-transition: transform 0.2s ease;
    ;
    transition: transform 0.2s ease;
}

.team-card .active-sprints a {
    text-decoration: none;
}

    .team-card .active-sprints a:hover {
        text-decoration: none;
        color: #0288d1;
        border-bottom: 1px solid #0288d1;
    }

    .team-card .active-sprints a:active {
        opacity: 0.5;
    }

.team-card .last-activity {
    display: block;
    width: 100%;
    height: auto;
    color: #727272;
}

.user-team-tasks strong {
    color: #0288d1;
    font-weight: 500;
}

.team-card .panel-footer {
    padding: 0 15px 10px 15px;
    background: #fff;
}

.team-card .sprint-list {
    float: left;
    display: none;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 15px 0;
}

    .team-card .sprint-list li {
        list-style-type: none;
        float: left;
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
        padding: 0;
    }

    .team-card .sprint-list .nsprint,
    .team-card .sprint-list .user-team-tasks {
        margin: 0;
        padding: 0;
        line-height: 30px;
        font-weight: 400;
    }

        .team-card .sprint-list .user-team-tasks strong {
            color: #222;
        }

.content .section-divider:first-child {
    height: 40px;
    margin-top: 15px;
}

.users-working hr,
.users-unasigned hr {
    position: relative;
    top: -24px;
    z-index: 0;
}

.page-divider {
    position: relative;
    top: 0;
    left: 0;
    display: inline-block;
    width: auto;
    background: #f1f1f1;
    margin: 0;
    padding: 0 15px 0 0;
    font-size: 17px;
    color: #727272;
    z-index: 1;
}

.users-working:hover .page-divider,
.users-unasigned:hover .page-divider {
    color: #222;
}

.team-card.no-inmersive {
    opacity: 0.75;
    box-shadow: none;
}

.card-opened.inmersive {
    opacity: 1;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.col-header {
    display: block;
    width: 99%;
    height: 24px;
    padding: 0 15px 0 15px;
    clear: both;
    position: relative;
    transition: height .2s ease;
}

    .col-header .expanded-out,
    .column-expanded .more-options,
    .col-header .expanded-toggle {
        display: none;
    }

.column-expanded .col-header .expanded-out,
.column-container:hover .col-header .expanded-toggle {
    display: block;
}

.column-container.column-expanded:hover .col-header .expanded-toggle {
    display: none;
}

.col-header .expanded-toggle,
.col-header .expanded-out {
    position: absolute;
    top: -12px;
    right: 8px;
    font-size: 22px;
    opacity: 0.5;
    transition: opacity .2s ease;
}

    .col-header .expanded-toggle:hover,
    .col-header .expanded-out:hover,
    .col-header .column-sort:hover {
        opacity: 1;
    }

.col-header .column-sort:active {
    opacity: 0.25;
}

.col-header .column-sort {
    /*visibility: hidden;*/
    font-size: 18px;
    opacity: 0.5;
}

.col-header .column-sort {
    visibility: visible;
    color: #999;
}

    .col-header .column-sort.sort-active {
        color: #607D8B;
        opacity: 1;
    }

.modal-dialog textarea,
.modal-dialog textarea.form-control {
    height: 100px;
}

#workitems .modal-body .tab-content {
    padding: 0;
}

/* SGC **************************/

.sgc-subheader h1 {
    color: #fff;
    font-weight: 300;
    margin: 0;
    padding: 0;
    line-height: 40px;
}

    .sgc-subheader h1 strong {
        font-weight: 500;
    }

.sgc-indicators {
    float: left;
    display: inline-block;
    width: 50%;
    height: 40px;
    color: #f1f1f1;
    font-size: 16px;
    letter-spacing: 0.03em;
    line-height: 40px;
}

    .sgc-indicators > span {
        float: left;
        display: inline-block;
        height: 40px;
        font-size: 30px;
        padding-right: 15px;
        line-height: 40px;
    }

.btn-sgc {
    margin: 15px 17px 0 0;
    background: rgb(2, 136, 209);
    color: #fff;
    position: relative;
}

    .btn-sgc:hover {
        background: #03A9F4;
        color: #fff;
    }

.sgc .panel,
.amb-serv .panel,
.product-backlog .panel,
.wrapper-home .panel {
    margin-top: 15px;
}

.product-backlog .panel-backlog .panel-body,
.product-backlog .panel-epics .panel-body {
    padding-left: 0;
}

.sgc .panel .panel-heading,
.amb-serv .panel .panel-heading,
.content-detail .panel .panel-heading,
.panel-sprint .panel-heading {
    background: none;
    position: relative;
}

.content-detail .panel-accordion .panel-heading:hover {
    background: #f2f2f2;
}

.sgc .paper-form .panel-heading,
.amb-serv .paper-form .panel-heading,
.content-detail .paper-form .panel-heading,
.panel-sprint .panel-heading {
    overflow: hidden;
}

.sgc .panel .panel-heading h1,
.amb-serv .panel .panel-heading h1,
.content-detail h1 {
    display: inline-block;
    font-size: 18px;
    margin: 15px 0 0 0;
    text-transform: uppercase;
    line-height: 50px;
}

    .sgc .panel .panel-heading h1:after,
    .amb-serv .panel .panel-heading h1:after,
    .content-detail h1:after {
        position: absolute;
        content: "";
        height: 1px;
        z-index: 500;
        border-bottom: 1px solid #ddd;
        width: calc(100% - 30px);
        left: 0;
        bottom: 0;
        padding: 0 15px;
        margin: 0 15px;
    }

.sgc .panel .panel-body h2,
.amb-serv .panel .panel-body h2,
.content-detail .panel .panel-body h2 {
    display: inline;
    width: auto;
    font-size: 16px;
    color: #727272;
    font-weight: 500;
    margin: 0;
    text-transform: uppercase;
    line-height: 48px;
}

.amb-serv .panel .panel-body h2 {
    display: block;
    /*
    margin-top: 30px;
    */
}

/*.sgc .panel .panel-body,
.amb-serv .panel .panel-body{
  margin-right: 15px;
  overflow-y: scroll; 
}*/

.sgc .panel.paper-form .panel-body,
.amb-serv .panel.paper-form .panel-body {
    padding-top: 20px;
    margin-right: 0;
    overflow-y: auto;
}

.sgc .view-all {
    float: left;
    text-transform: uppercase;
    text-decoration: none;
    margin: 10px 0 0 15px;
    float: left;
    display: inline-block;
    font-size: 15px;
    text-align: right;
    color: rgba(33, 150, 243, 0.65);
    line-height: 45px;
    position: relative;
    font-weight: 600;
}

    .sgc .view-all:hover {
        opacity: 0.5;
    }

.sgc select,
select.form-control,
.amb-serv select,
select.form-control {
    padding-left: 5px;
}

.sgc-filter {
    margin-bottom: 30px;
}

.table-sgc td:first-child i {
    margin-right: 15px;
}

.paper-card .form-group .label-radios,
.modal .form-group .label-radios {
    display: inline-block;
    width: auto;
    margin-top: 5px;
    font-size: 16px;
}

.paper-card .form-group .radio-inline,
.modal .form-group .radio-inline {
    margin-top: 0;
}

.panel-table .panel-heading {
    /*  padding: 15px 15px;
  margin-right: 20px;*/
    background: none;
}

.panel-table .panel-body {
    padding-top: 0;
}

.panel-body .table {
    margin-bottom: 0px;
}

.sgc .panel.panel-table {
    padding-bottom: 0;
}

.panel-table .panel-footer {
    /*position: absolute;
  left: 0; bottom: 0;*/
    background: none;
}

.table-header {
    border: none;
    margin-bottom: 0;
}

table.table-header > tbody > tr > td {
    padding: 0 8px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 500;
    border-top: none;
}

.no-padding {
    padding: 0 !important;
}

.sgc .table-pagination .pagination {
    float: none;
    margin: 0;
}

.sgc .panel-footer {
    background: none;
}

.table-sgc {
    margin-bottom: 0;
}

.btn.dropdown-toggle .caret {
    margin-left: 5px;
    margin-top: 8px;
}

.actions-menu {
    width: 100%;
    padding: 10px 0;
    border: none;
    background: #2196f3;
    color: #fff;
}

    .actions-menu > li {
        font-size: 17px;
        color: #fff;
    }

        .actions-menu > li > a {
            color: #fff;
        }

.btn-actions {
    width: 200px;
    text-align: left;
}

    .btn-actions .caret {
        /* float: right;*/
        position: absolute;
        right: 19px;
        top: 10px;
    }

.btn-group-actions {
    margin-left: 25px;
}

.add-item-detail {
    font-size: 14px;
    float: right;
}

    .add-item-detail .zmdi {
        font-size: 20px;
        vertical-align: sub;
    }

.change-name {
}

    .change-name a .zmdi {
        font-size: 20px;
        display: inline-block;
        padding: 50px 0 0;
    }

.print-detail {
    position: absolute;
    top: 18px;
    right: 10px;
    width: 30px;
    height: 40px;
    font-size: 24px;
    text-align: center;
    line-height: 40px;
}

.content-detail .detail-state {
    position: relative;
    top: -3px;
    left: 15px;
    width: auto;
    height: 25px;
    margin: 0;
    padding: 0 5px;
    font-size: 13px;
    text-align: center;
    background: #727272;
    color: #fff;
    text-transform: uppercase;
    border-radius: 4px;
    line-height: 25px;
    padding: 5px 10px;
}

.creation-date {
    float: right;
    display: inline-block;
    font-size: 14px;
    margin: 18px 0 0 0;
    text-transform: uppercase;
    line-height: 50px;
}

.well .detail-state {
    position: relative;
    top: 10px;
    right: auto;
    float: left;
    margin: 10px 0 5px 0;
}

.content-detail .detail-state.det-created {
    color: #666666;
    background-color: #ffffff;
    border-color: #eeeeee;
    text-transform: uppercase;
    border-right: none;
    border-bottom: none;
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.3);
}

.content-detail .detail-state.det-active {
    background: #4CAF50;
}

.content-detail .detail-state.det-state {
    background: #2196f3;
}

.content-detail .detail-state.det-closed {
    background: #f44336;
}

.content-detail .detail-state.det-erased {
    background: #465a64;
}

.form-textarea .user-avatar--comment {
    position: absolute;
    left: -60px;
    top: -2px;
}

.paper-card .form-group--comments .control-label {
    left: 15px;
}

textarea.form-control--comments {
    border: 1px solid #ddd;
    border-bottom: none;
    padding: 5px;
    border-radius: 4px;
}

    textarea.form-control--comments:focus {
        border-color: #ddd;
    }

        textarea.form-control--comments:focus ~ .control-label {
            opacity: 0;
        }

.form-group--comments::before {
    content: '';
    display: block;
    position: absolute;
    top: 9px;
    left: -22px;
    width: 0;
    height: 0;
    border-color: transparent #ddd transparent transparent;
    border-style: solid;
    border-width: 11px;
}

.form-group--comments::after {
    content: '';
    display: block;
    position: absolute;
    top: 10px;
    left: -19px;
    width: 0;
    height: 0;
    border-color: transparent #fff transparent transparent;
    border-style: solid;
    border-width: 10px;
}

.sgc-form-detail .uploaded-files ul li {
    display: inline;
    padding-right: 15px;
}

ul.comments-response {
    margin: 15px 0 0 15px;
    padding: 0 0 0 10px;
}

    ul.comments-response li {
        list-style-type: none;
        font-size: 14px;
        line-height: 22px;
        padding-bottom: 15px;
        margin-bottom: 15px;
        position: relative;
        border-bottom: 1px dotted #ddd;
    }

        ul.comments-response li:before {
            position: absolute;
            top: 0;
            left: -5px;
            font-family: 'Material-Design-Iconic-Font';
            content: '\f263';
            margin: 0 0 0 -20px;
            color: #ccc;
            font-size: 18px;
        }

.modal-actions-sm {
    margin-top: 7.5%;
    width: 400px;
}

.modal-actions {
    margin-top: 7.5%;
    width: 980px;
}

    .modal-actions .modal-content,
    .modal-actions-sm .modal-content {
        border-radius: 4px;
        overflow: hidden;
    }

    .modal-actions .modal-header,
    .modal-actions-sm .modal-header {
        padding: 25px 15px 15px 15px;
        -webkit-box-shadow: inset 0 10px 0 #d7d7d7;
        box-shadow: inset 0 10px 0 #d7d7d7;
    }

    .modal-actions .modal-body,
    .modal-actions-sm .modal-body {
        min-height: 300px;
    }

    .modal-actions .modal-title,
    .modal-actions-sm .modal-title {
        text-transform: uppercase;
        font-weight: 500;
        font-size: 18px;
    }

        .modal-actions .modal-title span,
        .modal-actions-sm .modal-title span {
            padding-left: 15px;
            color: #727272;
            font-weight: 400;
            font-size: 16px;
        }

.tooltip-inner {
    background: #000;
}

.tooltip.left .tooltip-arrow {
    border-left-color: #000;
}

.user-data > .user-hover-tooltip {
    cursor: help;
    width: 100%;
    height: 100%;
    display: block;
}

.paper-form .btn-clone,
.paper-form .btn-remove {
    width: 35px;
    min-width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 24px;
    border-radius: 100%;
    margin: 30px 0 0 0;
    padding: 0;
}

.paper-form .btn-clone {
    color: #2196f3;
}

.row-to-clone {
    max-height: 100%;
}

.row-container {
    max-height: 350px;
    overflow-y: scroll;
}

.panel-ambientes .panel-heading {
    padding: 0 15px;
}

.amb-serv .panel-ambientes .panel {
    padding-bottom: 0;
}

.panel-ambientes .panel-title {
    position: relative;
    width: 100%;
    height: 45px;
    color: #fff;
}

.amb-serv .panel-ambientes .panel .panel-heading {
    -webkit-transition: background .2s ease;
    transition: background .2s ease;
}

.amb-serv .panel .panel-ambientes .panel .prod,
.amb-serv .panel .panel-heading[data-control="produccion"] {
    background: #4c2ba2;
    background: rgba(76, 43, 112, 0.85);
}

.panel .panel-ambientes .panel .prod:hover,
.panel .panel-heading[data-control="produccion"]:hover {
    background: rgba(76, 43, 112, 1);
}

.amb-serv .panel .panel-ambientes .panel .sta,
.amb-serv .panel .panel-heading[data-control="staging"] {
    background: #1971d3;
    background: rgba(25, 113, 211, 0.85);
}

    .amb-serv .panel .panel-ambientes .panel .sta:hover,
    .amb-serv .panel .panel-heading[data-control="staging"]:hover {
        background: rgba(25, 113, 211, 1);
    }

.amb-serv .panel .panel-ambientes .panel .uat,
.amb-serv .panel .panel-heading[data-control="uat"] {
    background: #465a64;
    background: rgba(70, 90, 100, 0.85);
}

    .amb-serv .panel .panel-ambientes .panel .uat:hover,
    .amb-serv .panel .panel-heading[data-control="uat"]:hover {
        background: rgba(70, 90, 100, 1);
    }

.amb-serv .panel .panel-ambientes .panel .qua,
.amb-serv .panel .panel-heading[data-control="qa"] {
    background: #358a39;
    background: rgba(53, 138, 57, 0.85);
}

    .amb-serv .panel .panel-ambientes .panel .qua:hover,
    .amb-serv .panel .panel-heading[data-control="qa"]:hover {
        background: rgba(53, 138, 57, 1);
    }

.amb-serv .panel .panel-heading[data-control="desarrollo"] {
    background: #FF5722;
    background: rgba(255, 87, 34, 0.85);
}

    .amb-serv .panel .panel-heading[data-control="desarrollo"]:hover {
        background: rgba(255, 87, 34, 1);
    }

.amb-serv .panel .panel-heading[data-control="bd"] {
    background: #00BCD4;
    background: rgba(0, 188, 212, 0.85);
}

    .amb-serv .panel .panel-heading[data-control="bd"]:hover {
        background: rgba(0, 188, 212, 1);
    }

.panel-ambientes .accordion-toggle {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 45px;
    display: block;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 45px;
    z-index: 2;
}

    .panel-ambientes .accordion-toggle:hover,
    .panel-ambientes .accordion-toggle:focus {
        text-decoration: none;
    }

    .panel-ambientes .accordion-toggle:after {
        font-family: 'Material-Design-Iconic-Font';
        content: "\f273";
        float: right;
    }

    .panel-ambientes .accordion-toggle.collapsed:after {
        content: "\f278";
    }

.selection-info {
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    display: block;
    width: 300px;
    height: 45px;
    margin: 0 auto;
    line-height: 45px;
    z-index: 1;
}

.server-list {
    float: left;
    display: inline-block;
    width: auto;
    margin: 15px 0 0 0;
    padding-right: 60px;
}

.team-wrap .person-toggle img {
    -webkit-filter: brightness(1.10) grayscale(100%) contrast(90%);
    -moz-filter: brightness(1.10) grayscale(100%) contrast(90%);
    filter: brightness(1.10) grayscale(100%) contrast(90%);
    will-change: filter;
}

    .team-wrap .person-selected img,
    .team-wrap .person-toggle img:hover,
    .team-wrap .person-ok img {
        -webkit-filter: brightness(1) grayscale(0) contrast(100%);
        -moz-filter: brightness(1) grayscale(0) contrast(100%);
        filter: brightness(1) grayscale(0) contrast(100%);
    }

.paper-form .btn.add-user-form {
    min-width: 10px;
}

.person-toggle {
    float: left;
    display: inline-block;
    position: relative;
    width: auto;
    height: auto;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
    will-change: filter;
}

    .person-toggle:active {
        -webkit-transform: scale(0.85) rotate(-5deg);
        transform: scale(0.85) rotate(-5deg);
    }

    .person-toggle > img {
        position: relative;
        z-index: 1;
    }

    .person-toggle > .zmdi {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: absolute;
        bottom: 0px;
        left: 0px;
        text-align: center;
        font-size: 18px;
        /*
        background: #ff9800;*/
        background: #3edd91;
        color: #fff;
        border-radius: 100%;
        z-index: 3;
        visibility: hidden;
    }

    .person-toggle.person-selected > .zmdi {
        visibility: visible;
    }

    .person-toggle.person-ok .zmdi-check-all {
        background: #23a700;
        visibility: visible;
    }

    .person-toggle input[type=checkbox] {
        float: none;
        position: absolute;
        top: 22px;
        left: 15px;
        margin: auto;
        right: 0;
        bottom: 0;
        z-index: 0;
        visibility: hidden;
    }

.amb-indicator {
    float: left;
    display: inline-block;
    width: 26px;
    height: 26px;
    margin: 10px 10px 0 0;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 100%;
    position: relative;
}

    .amb-indicator span {
        margin: auto;
        position: absolute;
        top: 0px;
        left: 0;
        bottom: 0;
        right: 0;
        width: 18px;
        height: 18px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 100%;
    }

        .amb-indicator span span {
            width: 12px;
            height: 12px;
            background: rgba(255, 255, 255, 0.75);
            top: 0;
        }

.inbox-subheader {
    width: 100%;
    height: 30vh;
    margin: 0;
    padding: 40px 0;
    background: #03a9f4;
    background: rgb(3, 169, 244);
    overflow: hidden;
    position: relative;
    z-index: 0;
}

.inb-left,
.inb-right {
    position: absolute;
    top: 12vh;
    float: left;
    display: inline-block;
    margin: 0;
    padding: 15px 0;
    height: 86vh;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    z-index: 1;
}

.inb-left {
    width: 20vw;
    left: 85px;
}

.inb-right {
    width: 71vw;
    right: 15px;
}

.inb-left .list-group {
    margin: 0;
}

.inb-left .list-group-item {
    margin: 0;
    padding: 0 15px;
    color: #727272;
    overflow: hidden;
    border-bottom: 1px solid rgba(182, 182, 182, 0.25);
}

    .inb-left .list-group-item > a {
        display: block;
        width: 100%;
        height: auto;
        color: inherit;
    }

    .inb-left .list-group-item .zmdi {
        position: relative;
        top: 3px;
        margin-right: 10px;
    }

    .inb-left .list-group-item .tag {
        float: right;
        display: inline-block;
        /*background: none;*/
    }

.inb-left .list-group .list-group-item {
    border-radius: 0 !important;
    transition: border-color .2s ease-in, box-shadow .1s ease-in-out;
    position: relative;
}

.has-to-view:after,
.inbox .table td .has-to-view-td {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 15px 15px 0;
    border-color: transparent #8BC34A transparent transparent;
}

.inb-left .list-group .list-group-item.active,
.inb-left .list-group .list-group-item a:hover {
    color: inherit;
    background: none;
    text-decoration: none;
}

.inb-left .list-group .list-group-item:hover .badge {
    background: rgba(187, 187, 187, 0.5);
    color: #333;
}

.inb-left .list-group .list-group-item.active {
    -webkit-box-shadow: inset 5px 0 0 0 rgb(3, 169, 244);
    box-shadow: inset 5px 0 0 0 rgb(3, 169, 244);
}

.inb-left .list-group .list-group-item:active {
    color: #fff;
    -webkit-box-shadow: inset 400px 0 0 0 rgba(3, 169, 244, 1);
    box-shadow: inset 400px 0 0 0 rgba(3, 169, 244, 1);
}

    .inb-left .list-group .list-group-item:active .badge {
        background: #fff;
    }

.inb-left .list-group .list-group-item a:active,
.inb-left .list-group .list-group-item a:focus {
    text-decoration: none;
}

.inbox {
    padding-left: 15px;
    padding-right: 15px;
}

    .inbox .filter-top .label {
        float: left;
        display: inline-block;
        padding: 3px 8px 2px 8px;
        margin-right: 15px;
        background: none;
        color: #313131;
        font-weight: 500;
        text-transform: uppercase;
        border: 2px solid #e1e1e1;
    }

        .inbox .filter-top .label[ambiente=qa] {
            background-color: white;
            border-color: #358a39;
            color: #358a39;
        }

        .inbox .filter-top .label[ambiente=desarrollo] {
            background-color: white;
            border-color: #FF5722;
            color: #FF5722;
        }

        .inbox .filter-top .label[ambiente=producción] {
            background-color: white;
            border-color: #4c2b70;
            color: #4c2b70;
        }

        .inbox .filter-top .label[ambiente=staging] {
            background-color: white;
            border-color: #1971d3;
            color: #1971d3;
        }

        .inbox .filter-top .label[ambiente=uat] {
            background-color: white;
            border-color: #465a64;
            color: #465a64;
        }

        .inbox .filter-top .label[ambiente=bd] {
            background-color: white;
            border-color: #795548;
            color: #795548;
        }

        .inbox .filter-top .label.active {
            background: #e1e1e1;
        }

        .inbox .filter-top .label[none]:hover {
            border-color: #313131;
        }

        /**/

        .inbox .filter-top .label.active[qa],
        .inbox .filter-top .label[qa]:hover {
            background-color: #358a39;
            color: #fff;
        }

        .inbox .filter-top .label.active[desarrollo],
        .inbox .filter-top .label[desarrollo]:hover {
            background-color: #FF5722;
            color: #fff;
        }

        .inbox .filter-top .label.active[producción],
        .inbox .filter-top .label[producción]:hover {
            background-color: #4c2b70;
            color: #fff;
        }

        .inbox .filter-top .label.active[staging],
        .inbox .filter-top .label[staging]:hover {
            background-color: #1971d3;
            color: #fff;
        }

        .inbox .filter-top .label.active[uat],
        .inbox .filter-top .label[uat]:hover {
            background-color: #465a64;
            color: #fff;
        }

        .inbox .filter-top .label.active[bd],
        .inbox .filter-top .label[bd]:hover {
            background-color: #795548;
            color: #fff;
        }

.inb-left .list-group .list-group-item:hover {
    border-color: rgb(3, 169, 244);
}

.inbox .table {
    table-layout: fixed;
}

    .inbox .table th,
    .inbox .table td {
        padding: 0;
        position: relative;
    }

    /*.inbox .table td.text-wrap{
  max-width: 200px;
}*/

    .inbox .table td {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .inbox .table td:first-child {
            padding-left: 5px;
        }

    .inbox .table th {
        padding: 0 8px;
    }

    .inbox .table td:last-child {
        position: relative;
        padding-right: 8px;
    }

.table-filter > a {
    margin-right: 15px;
    color: #727272;
}

    .table-filter > a:hover {
        color: #313131;
    }

.panel-table {
    /* height: calc(100vh - 275px);*/
    position: relative;
    margin-top: 15px;
}

.serv-linux--redhat {
    padding-left: 20px;
    background: url(../img/redhat.svg) 0px center no-repeat;
    background-size: 14px;
}

.serv-linux--ubuntu {
    padding-left: 20px;
    background: url(../img/ubuntu.svg) 0 center no-repeat;
    background-size: 14px;
}

/*.panel-table .panel-body{
    margin-right: 10px;
    overflow-y: scroll;
}*/

/* GAL 1.4.0 *****************************/

.add-workitem,
.add-workitem:focus,
.options-workitem {
    display: block;
    width: 100%;
    width: calc(100% - 0px);
    height: 45px;
    margin: 15px 0 0 0;
    padding: 0;
    text-align: center;
    text-decoration: none;
    border: 1px dashed #9e9e9e;
    color: #727272;
    line-height: 45px;
    border-radius: 4px;
    transition: all .2s ease;
    white-space: nowrap;
    overflow: hidden;
}

    .add-workitem:hover {
        color: #2196f3;
        background-color: rgba(33, 150, 243, 0.10);
        border-color: #2196f3;
        text-decoration: none;
    }

        .add-workitem:active,
        .add-workitem:hover:active {
            color: #727272;
            border-color: #727272;
        }

.options-workitem {
    border: none;
    transition: opacity .2s ease;
    will-change: opacity;
}

    .options-workitem.hide {
        visibility: hidden;
        display: block !important;
        opacity: 0;
    }

    .options-workitem.show {
        visibility: visible;
        display: block !important;
        opacity: 1;
    }

.col-header.col-expanded {
    height: 84px;
}

.col-one .col-header {
    height: 84px;
}

    .col-one .col-header.col-expanded {
        height: 148px;
    }

.edit-workitem,
.delete-workitem {
    float: left;
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
    border: 1px dashed #9e9e9e;
    position: relative;
}

.edit-workitem {
    color: #2196f3;
    border-radius: 4px 0 0 4px;
    /*border-right: none;*/
}

.options-workitem-delete .edit-workitem {
    border-right: none;
    width: 50%;
}

.delete-workitem {
    color: #f44336;
    border-radius: 0 4px 4px 0;
    border-left: none;
}

.options-workitem-delete .delete-workitem {
    width: 50%;
}

.edit-workitem:hover,
.delete-workitem:hover {
    text-decoration: none;
}

.edit-workitem:hover,
.edit-workitem.hover {
    color: #2196f3;
    background-color: rgba(33, 150, 243, 0.20);
    border-color: #2196f3;
}

.delete-workitem:hover,
.delete-workitem.hover {
    color: #f44336;
    background-color: rgba(244, 67, 54, 0.20);
    border-color: #f44336;
}

/*.add-workitem.el-deleted{
  background-color: #f44336;
  color: #fff;
}*/

.add-workitem .zmdi,
.options-workitem .zmdi {
    position: relative;
    top: 1px;
    font-size: 16px;
    margin-right: 5px;
}

.col-header .column-filter {
    float: right;
    display: inline-block;
    width: auto;
    height: 24px;
    line-height: 24px;
}

.col-header .column-sort {
    width: 25px;
    height: 25px;
    display: block;
    text-align: right;
}

    .col-header .column-sort.dropdown-more {
        opacity: 1;
    }

    .col-header .column-sort.sort-user {
        font-size: 17px;
    }

.workitem-card .asign-user {
    float: left;
    display: inline-block;
    margin-left: 5px;
    color: #727272;
    text-align: center;
    border: 1px dashed #727272;
    border-radius: 50%;
}

    .workitem-card .asign-user:hover {
        color: #2196f3;
        border-color: #2196f3;
    }

    .workitem-card .asign-user .zmdi {
        position: relative;
        top: 2px;
        font-size: 18px;
    }

.workitem-card:before {
    position: absolute;
    /*
    left: 10px;
    */
    right: 0;
    top: 0px;
    content: "";
    width: 0;
    height: 2px;
    background: #d1d1d1;
    border-radius: 2px 0 0 2px;
    transition: width .3s ease-out;
    transition-delay: 1s;
}

.loaded .workitem-card:before {
    width: 100%;
}

.workitem-card.low:before,
.workitem-card[criticidad="3"]:before {
    background-color: #f44336;
}

.workitem-card.medium:before,
.workitem-card[criticidad="2"]:before {
    background-color: #ffc107;
}

.workitem-card.high:before,
.workitem-card[criticidad="1"]:before {
    background-color: #4caf50;
}

.col-two .workitem-card .asign-user,
.col-three .workitem-card .asign-user,
.col-four .workitem-card .asign-user {
    display: none;
}

.col-two .edit-workitem,
.col-three .edit-workitem,
.col-four .edit-workitem {
    width: 100%;
    border-right: 1px dashed #9e9e9e;
}

/* Modal workitem ********/

.modal-workitem .te-group > .control-label {
    margin-bottom: 15px;
}

.modal-workitem .checkbox-inline {
    font-size: 14px;
    letter-spacing: 0.04em;
    padding: 15px 0 0 25px;
}

.modal-workitem .modal-footer .btn {
    font-size: 15px;
}

.modal-workitem .modal-footer .btn-default {
    background: none;
    border: none;
    box-shadow: none;
    font-weight: 500;
}

.modal-workitem .modal-footer .btn-primary {
    min-width: 125px;
}

.modal-workitem .form-control:valid ~ .float-label,
.modal-workitem select.form-control ~ .float-label.float-fixed {
    top: 0;
    font-size: 14px;
}

.modal-workitem select.form-control {
    /* margin-top: 35px;*/
}

.modal-workitem .modal-dialog {
    margin: 125px auto;
}

.c-low > input[type="radio"]:before,
[criticidad="1"] > input[type="radio"]:before {
    background-color: #4CAF50;
}

.c-low > input[type="radio"]:after,
.c-low > input[type="radio"]:checked:after,
[criticidad="1"] > input[type="radio"]:after,
[criticidad="1"] > input[type="radio"]:checked:after {
    border-color: #4CAF50;
}

.c-medium > input[type="radio"]:before,
[criticidad="2"] > input[type="radio"]:before {
    background-color: #FFC107;
}

.c-medium > input[type="radio"]:after,
.c-medium > input[type="radio"]:checked:after,
[criticidad="2"] > input[type="radio"]:after,
[criticidad="2"] > input[type="radio"]:checked:after {
    border-color: #FFC107;
}

.c-high > input[type="radio"]:before,
[criticidad="3"] > input[type="radio"]:before {
    background-color: #f44336;
}

.c-high > input[type="radio"]:after,
.c-high > input[type="radio"]:checked:after,
[criticidad="3"] > input[type="radio"]:after,
[criticidad="3"] > input[type="radio"]:checked:after {
    border-color: #f44336;
}

/* EMPTY ESTATES *********************************/

.empty {
    min-height: 20px;
    padding: 10px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.empty-white {
    min-height: 20px;
    padding: 20px;
    margin-bottom: 20px;
}

    .empty-white figure {
        width: 258px;
        display: block;
        margin: 20px auto;
    }

        .empty-white figure img {
            width: 70%;
            margin: 0 auto;
        }

    .empty-white img {
        margin: 0 auto;
        width: 150px;
    }

    .empty-white p {
        display: block;
        text-align: center;
        font-size: 18px;
    }


.empty-h80vh {
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.empty-finds {
    min-height: 20px;
    padding: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 3px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

    .empty-finds.upload {
        margin: 20px 0;
    }

        .empty-finds.upload figure {
            width: 70px;
            display: block;
            margin: 20px auto;
        }

    .empty-finds figure {
        width: 258px;
        display: block;
        margin: 20px auto;
    }

        .empty-finds figure img {
            width: 70%;
            margin: 0 auto;
        }

    .empty-finds img {
        margin: 0 auto;
        width: 150px;
    }

    .empty-finds p {
        display: block;
        text-align: center;
        font-size: 18px;
    }

.empty-flex {
    min-height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

/* Toast Notifications ***************************/
.alert-toast {
    position: fixed;
    left: 15px;
    top: inherit;
    bottom: 0;
    right: inherit;
    min-height: 45px;
    height: auto;
    min-width: 300px;
    margin: 0;
    padding: 8px 15px 8px 45px;
    opacity: 0;
    border: none;
    border-radius: 3px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.19), 0 6px 30px rgba(0, 0, 0, 0.23);
    -webkit-transform: translateY(45px);
    transform: translateY(45px);
    -webkit-transform: translate3d(0, 45px, 0);
    transform: translate3d(0, 45px, 0);
    transition: transform .3s ease, opacity .3s ease;
    will-change: transform, opacity;
    z-index: 9999;
    cursor: pointer;
}

    .alert-toast.in:hover {
        opacity: 0.85;
    }

    .alert-toast .ap {
        position: absolute;
        left: 10px;
        top: 0;
        bottom: 0;
        margin: auto 0;
    }

    .alert-toast > p {
        font-size: 14px;
        font-weight: 300;
        line-height: 1.6;
    }

        .alert-toast > p strong {
            font-weight: 400;
        }

    .alert-toast.alert-success:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        margin: auto 0;
        width: 30px;
        text-align: center;
        vertical-align: middle;
        display: table;
        padding: 0;
    }

/* Chips *********************/

.chips-wrapper {
    float: right;
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding-top: 8px;
}

.chip-item {
    float: left;
    display: inline;
    width: 20px;
    height: 20px;
    margin: 0 5px 0 5px;
    padding: 0 8px;
    text-align: center;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 400;
    color: #727272;
    background-color: #dedede;
    border-radius: 15px;
    line-height: 21px;
    transition: width .2s ease, color .3s linear;
}

    .chip-item.chip-item--func,
    .chip-item.chip-item--bug,
    .chip-item.chip-item--epic {
        color: rgba(255, 255, 255, 0);
    }

    .chip-item > strong {
        margin-left: -0.5px;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
    }

    .chip-item.chip-item--epic {
        background-color: #3F51B5;
    }

    .chip-item.chip-item--func {
        background-color: #4CAF50;
    }

    .chip-item.chip-item--bug {
        background-color: #f44336;
    }

.product-backlog--items > li:hover > .chips-wrapper .chip-item {
    width: 65px;
}

.product-backlog--items > li:hover > .chips-wrapper .chip-item {
    color: rgba(255, 255, 255, 1);
}

    .product-backlog--items > li:hover > .chips-wrapper .chip-item > strong {
        font-weight: 400;
    }

.list-counter {
    font-size: 18px;
    line-height: 36px;
    font-weight: 400;
    padding-left: 8px;
    color: #727272;
}

/* ==========================================================================
   Print styles.
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

        a[href]:after {
            content: " ("attr(href) ")";
        }

    abbr[title]:after {
        content: " ("attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
        /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

.resaltarWorkitem {
    background: none repeat scroll 0 0 #03a9f4;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    display: block;
    height: auto !important;
    margin: 0 0 5% 3px;
    min-height: 30px !important;
    padding: 15px 0;
    transition: border-color 0.3s ease 0s;
    width: 100%;
}

/* ==========================================================================
   Icono de Clasificación de Cambio de tarjeta Backlog del listado de Backlogs
 ========================================================================== */

i[Mejora],
i[Bug] {
    display: none;
}

a[title="Mejora"] > i[Mejora] {
    display: inline-block !important;
}

a[title="Bug"] > i[Bug] {
    display: inline-block !important;
}

.preloader-wrapper {
    display: inline-block;
    position: relative;
    width: 48px;
    height: 48px;
}

    .preloader-wrapper.small {
        width: 36px;
        height: 36px;
    }

    .preloader-wrapper.big {
        width: 64px;
        height: 64px;
    }

    .preloader-wrapper.active {
        /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
        -webkit-animation: container-rotate 1568ms linear infinite;
        animation: container-rotate 1568ms linear infinite;
    }

@-webkit-keyframes container-rotate {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes container-rotate {
    to {
        transform: rotate(360deg);
    }
}

.spinner-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.spinner-blue,
.spinner-blue-only {
    border-color: #4285f4;
}

.spinner-red,
.spinner-red-only {
    border-color: #db4437;
}

.spinner-yellow,
.spinner-yellow-only {
    border-color: #f4b400;
}

.spinner-green,
.spinner-green-only {
    border-color: #0f9d58;
}

.active .spinner-layer.spinner-blue {
    /* durations: 4 * ARCTIME */
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-red {
    /* durations: 4 * ARCTIME */
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-yellow {
    /* durations: 4 * ARCTIME */
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-green {
    /* durations: 4 * ARCTIME */
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .spinner-layer.spinner-blue-only,
.active .spinner-layer.spinner-red-only,
.active .spinner-layer.spinner-yellow-only,
.active .spinner-layer.spinner-green-only {
    /* durations: 4 * ARCTIME */
    opacity: 1;
    -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@-webkit-keyframes fill-unfill-rotate {
    /* 0.5 * ARCSIZE */
    /* 1   * ARCSIZE */
    /* 1.5 * ARCSIZE */
    /* 2   * ARCSIZE */
    /* 2.5 * ARCSIZE */
    /* 3   * ARCSIZE */
    /* 3.5 * ARCSIZE */
    /* 4   * ARCSIZE */
    12.5% {
        -webkit-transform: rotate(135deg);
    }

    25% {
        -webkit-transform: rotate(270deg);
    }

    37.5% {
        -webkit-transform: rotate(405deg);
    }

    50% {
        -webkit-transform: rotate(540deg);
    }

    62.5% {
        -webkit-transform: rotate(675deg);
    }

    75% {
        -webkit-transform: rotate(810deg);
    }

    87.5% {
        -webkit-transform: rotate(945deg);
    }

    to {
        -webkit-transform: rotate(1080deg);
    }
}

@keyframes fill-unfill-rotate {
    /* 0.5 * ARCSIZE */
    /* 1   * ARCSIZE */
    /* 1.5 * ARCSIZE */
    /* 2   * ARCSIZE */
    /* 2.5 * ARCSIZE */
    /* 3   * ARCSIZE */
    /* 3.5 * ARCSIZE */
    /* 4   * ARCSIZE */
    12.5% {
        transform: rotate(135deg);
    }

    25% {
        transform: rotate(270deg);
    }

    37.5% {
        transform: rotate(405deg);
    }

    50% {
        transform: rotate(540deg);
    }

    62.5% {
        transform: rotate(675deg);
    }

    75% {
        transform: rotate(810deg);
    }

    87.5% {
        transform: rotate(945deg);
    }

    to {
        transform: rotate(1080deg);
    }
}

@-webkit-keyframes blue-fade-in-out {
    from {
        opacity: 1;
    }

    25% {
        opacity: 1;
    }

    26% {
        opacity: 0;
    }

    89% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@keyframes blue-fade-in-out {
    from {
        opacity: 1;
    }

    25% {
        opacity: 1;
    }

    26% {
        opacity: 0;
    }

    89% {
        opacity: 0;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes red-fade-in-out {
    from {
        opacity: 0;
    }

    15% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    51% {
        opacity: 0;
    }
}

@keyframes red-fade-in-out {
    from {
        opacity: 0;
    }

    15% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    50% {
        opacity: 1;
    }

    51% {
        opacity: 0;
    }
}

@-webkit-keyframes yellow-fade-in-out {
    from {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    76% {
        opacity: 0;
    }
}

@keyframes yellow-fade-in-out {
    from {
        opacity: 0;
    }

    40% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    76% {
        opacity: 0;
    }
}

@-webkit-keyframes green-fade-in-out {
    from {
        opacity: 0;
    }

    65% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes green-fade-in-out {
    from {
        opacity: 0;
    }

    65% {
        opacity: 0;
    }

    75% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/**
 * Patch the gap that appear between the two adjacent div.circle-clipper while the
 * spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
 */

.gap-patch {
    position: absolute;
    top: 0;
    left: 45%;
    width: 10%;
    height: 100%;
    overflow: hidden;
    border-color: inherit;
}

    .gap-patch .circle {
        width: 1000%;
        left: -450%;
    }

.circle-clipper {
    display: inline-block;
    position: relative;
    width: 50%;
    height: 100%;
    overflow: hidden;
    border-color: inherit;
}

    .circle-clipper .circle {
        width: 200%;
        height: 100%;
        border-width: 3px;
        /* STROKEWIDTH */
        border-style: solid;
        border-color: inherit;
        border-bottom-color: transparent !important;
        border-radius: 50%;
        -webkit-animation: none;
        animation: none;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
    }

    .circle-clipper.left .circle {
        left: 0;
        border-right-color: transparent !important;
        -webkit-transform: rotate(129deg);
        transform: rotate(129deg);
    }

    .circle-clipper.right .circle {
        left: -100%;
        border-left-color: transparent !important;
        -webkit-transform: rotate(-129deg);
        transform: rotate(-129deg);
    }

.active .circle-clipper.left .circle {
    /* duration: ARCTIME */
    -webkit-animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

.active .circle-clipper.right .circle {
    /* duration: ARCTIME */
    -webkit-animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
    animation: right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
}

@-webkit-keyframes left-spin {
    from {
        -webkit-transform: rotate(130deg);
    }

    50% {
        -webkit-transform: rotate(-5deg);
    }

    to {
        -webkit-transform: rotate(130deg);
    }
}

@keyframes left-spin {
    from {
        transform: rotate(130deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    to {
        transform: rotate(130deg);
    }
}

@-webkit-keyframes right-spin {
    from {
        -webkit-transform: rotate(-130deg);
    }

    50% {
        -webkit-transform: rotate(5deg);
    }

    to {
        -webkit-transform: rotate(-130deg);
    }
}

@keyframes right-spin {
    from {
        transform: rotate(-130deg);
    }

    50% {
        transform: rotate(5deg);
    }

    to {
        transform: rotate(-130deg);
    }
}

#spinnerContainer.cooldown {
    /* duration: SHRINK_TIME */
    -webkit-animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
    animation: container-rotate 1568ms linear infinite, fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

@-webkit-keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.slider {
    position: relative;
    height: 440px;
    width: 100%;
}

    .slider.fullscreen {
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

        .slider.fullscreen ul.slides {
            height: 100%;
        }

        .slider.fullscreen ul.indicators {
            z-index: 2;
            bottom: 30px;
        }

    .slider .slides {
        background-color: #9e9e9e;
        margin: 0;
        height: 400px;
    }

        .slider .slides li {
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 100%;
            height: inherit;
            overflow: hidden;
        }

            .slider .slides li img {
                height: 100%;
                width: 100%;
                background-size: cover;
                background-position: center;
            }

            .slider .slides li .caption {
                color: #fff;
                position: absolute;
                top: 15%;
                left: 15%;
                width: 70%;
                opacity: 0;
            }

                .slider .slides li .caption p {
                    color: #e0e0e0;
                }

            .slider .slides li.active {
                z-index: 2;
            }

    .slider .indicators {
        position: absolute;
        text-align: center;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
    }

        .slider .indicators .indicator-item {
            display: inline-block;
            position: relative;
            cursor: pointer;
            height: 16px;
            width: 16px;
            margin: 0 12px;
            background-color: #e0e0e0;
            -webkit-transition: background-color .3s;
            -moz-transition: background-color .3s;
            -o-transition: background-color .3s;
            -ms-transition: background-color .3s;
            transition: background-color .3s;
            border-radius: 50%;
        }

            .slider .indicators .indicator-item.active {
                background-color: #4CAF50;
            }

/* ==========================================================================
   $BASE-PICKER
   ========================================================================== */

/**
 * Note: the root picker element should *NOT* be styled more than what's here.
 */

.picker {
    font-size: 16px;
    text-align: left;
    line-height: 1.2;
    color: #000000;
    position: absolute;
    z-index: 10000;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/**
 * The picker input element.
 */

.picker__input {
    cursor: default;
}

    /**
 * When the picker is opened, the input element is "activated".
 */

    .picker__input.picker__input--active {
        border-color: #0089ec;
    }

/**
 * The holder is the only "scrollable" top-level container element.
 */

.picker__holder {
    width: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/*!
 * Default mobile-first, responsive styling for pickadate.js
 * Demo: http://amsul.github.io/pickadate.js
 */

/**
 * Note: the root picker element should *NOT* be styled more than what's here.
 */

/**
 * Make the holder and frame fullscreen.
 */

.picker__holder,
.picker__frame {
    bottom: 0;
    left: 0;
    right: 0;
    top: 100%;
}

/**
 * The holder should overlay the entire screen.
 */

.picker__holder {
    position: fixed;
    -webkit-transition: background 0.15s ease-out, top 0s 0.15s;
    -moz-transition: background 0.15s ease-out, top 0s 0.15s;
    transition: background 0.15s ease-out, top 0s 0.15s;
    -webkit-backface-visibility: hidden;
}

/**
 * The frame that bounds the box contents of the picker.
 */

.picker__frame {
    position: absolute;
    margin: 0 auto;
    min-width: 256px;
    max-width: 300px;
    max-height: 350px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
    -webkit-transition: all 0.15s ease-out;
    -moz-transition: all 0.15s ease-out;
    transition: all 0.15s ease-out;
}

@media (min-height: 28.875em) {
    .picker__frame {
        overflow: visible;
        top: auto;
        bottom: -100%;
        max-height: 80%;
    }
}

@media (min-height: 40.125em) {
    .picker__frame {
        margin-bottom: 7.5%;
    }
}

/**
 * The wrapper sets the stage to vertically align the box contents.
 */

.picker__wrap {
    display: table;
    width: 100%;
    height: 100%;
}

@media (min-height: 28.875em) {
    .picker__wrap {
        display: block;
    }
}

/**
 * The box contains all the picker contents.
 */

.picker__box {
    background: #ffffff;
    display: table-cell;
    vertical-align: middle;
}

@media (min-height: 28.875em) {
    .picker__box {
        display: block;
        border: 1px solid #777777;
        border-top-color: #898989;
        border-bottom-width: 0;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
        border-radius: 5px 5px 0 0;
        -webkit-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
        -moz-box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
        box-shadow: 0 12px 36px 16px rgba(0, 0, 0, 0.24);
    }
}

/**
 * When the picker opens...
 */

.picker--opened .picker__holder {
    top: 0;
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#1E000000,endColorstr=#1E000000)";
    zoom: 1;
    background: rgba(0, 0, 0, 0.32);
    -webkit-transition: background 0.15s ease-out;
    -moz-transition: background 0.15s ease-out;
    transition: background 0.15s ease-out;
}

.picker--opened .picker__frame {
    top: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}

@media (min-height: 35.875em) {
    .picker--opened .picker__frame {
        top: 10%;
        bottom: 20% auto;
    }
}

/**
 * For `large` screens, transform into an inline picker.
 */

/* ==========================================================================
   CUSTOM MATERIALIZE STYLES
   ========================================================================== */

.picker__input.picker__input--active {
    border-color: #E3F2FD;
}

.picker__frame {
    margin: 0 auto;
    max-width: 325px;
}

@media (min-height: 38.875em) {
    .picker--opened .picker__frame {
        top: 10%;
        bottom: auto;
    }
}

/* ==========================================================================
   $BASE-DATE-PICKER
   ========================================================================== */

/**
 * The picker box.
 */

.picker__box {
    padding: 0 1em;
}

/**
 * The header containing the month and year stuff.
 */

.picker__header {
    text-align: center;
    position: relative;
    margin-top: .75em;
}

/**
 * The month and year labels.
 */

.picker__month,
.picker__year {
    display: inline-block;
    margin-left: .25em;
    margin-right: .25em;
}

/**
 * The month and year selectors.
 */

.picker__select--month,
.picker__select--year {
    height: 2em;
    padding: 0;
    margin-left: .25em;
    margin-right: .25em;
}

    .picker__select--month.browser-default {
        display: inline;
        background-color: #FFFFFF;
        width: 40%;
    }

    .picker__select--year.browser-default {
        display: inline;
        background-color: #FFFFFF;
        width: 25%;
    }

    .picker__select--month:focus,
    .picker__select--year:focus {
        border-color: rgba(0, 0, 0, 0.05);
    }

/**
 * The month navigation buttons.
 */

.picker__nav--prev,
.picker__nav--next {
    position: absolute;
    padding: .5em 1.25em;
    width: 1em;
    height: 1em;
    box-sizing: content-box;
    top: -0.25em;
}

.picker__nav--prev {
    left: -1em;
    padding-right: 1.25em;
}

.picker__nav--next {
    right: -1em;
    padding-left: 1.25em;
}

.picker__nav--disabled,
.picker__nav--disabled:hover,
.picker__nav--disabled:before,
.picker__nav--disabled:before:hover {
    cursor: default;
    background: none;
    border-right-color: #f5f5f5;
    border-left-color: #f5f5f5;
}

/**
 * The calendar table of dates
 */

.picker__table {
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 1rem;
    width: 100%;
    margin-top: .75em;
    margin-bottom: .5em;
}

    .picker__table th,
    .picker__table td {
        text-align: center;
    }

    .picker__table td {
        margin: 0;
        padding: 0;
    }

/**
 * The weekday labels
 */

.picker__weekday {
    width: 14.285714286%;
    font-size: .75em;
    padding-bottom: .25em;
    color: #999999;
    font-weight: 500;
    /* Increase the spacing a tad */
}

@media (min-height: 33.875em) {
    .picker__weekday {
        padding-bottom: .5em;
    }
}

/**
 * The days on the calendar
 */

.picker__day--today {
    position: relative;
    color: #595959;
    letter-spacing: -.3;
    padding: .75rem 0;
    font-weight: 400;
    border: 1px solid transparent;
}

.picker__day--disabled:before {
    border-top-color: #aaaaaa;
}

.picker__day--infocus:hover {
    cursor: pointer;
    color: #000;
    font-weight: 500;
}

.picker__day--outfocus {
    display: none;
    padding: .75rem 0;
    color: #fff;
}

    .picker__day--outfocus:hover {
        cursor: pointer;
        color: #dddddd;
        font-weight: 500;
    }

.picker__day--highlighted:hover,
.picker--focused .picker__day--highlighted {
    cursor: pointer;
}

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
    border-radius: 50%;
    -webkit-transform: scale(.75);
    -moz-transform: scale(.75);
    -ms-transform: scale(.75);
    -o-transform: scale(.75);
    transform: scale(.75);
    background: #0089ec;
    color: #ffffff;
}

.picker__day--disabled,
.picker__day--disabled:hover,
.picker--focused .picker__day--disabled {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #dddddd;
    cursor: default;
}

.picker__day--highlighted.picker__day--disabled,
.picker__day--highlighted.picker__day--disabled:hover {
    background: #bbbbbb;
}

/**
 * The footer containing the "today", "clear", and "close" buttons.
 */

.picker__footer {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.picker__button--today,
.picker__button--clear,
.picker__button--close {
    border: 1px solid #ffffff;
    background: #ffffff;
    font-size: .8em;
    padding: .66em 0;
    font-weight: bold;
    width: 33%;
    display: inline-block;
    vertical-align: bottom;
}

    .picker__button--today:hover,
    .picker__button--clear:hover,
    .picker__button--close:hover {
        cursor: pointer;
        color: #000000;
        background: #b1dcfb;
        border-bottom-color: #b1dcfb;
    }

    .picker__button--today:focus,
    .picker__button--clear:focus,
    .picker__button--close:focus {
        background: #b1dcfb;
        border-color: rgba(0, 0, 0, 0.05);
        outline: none;
    }

    .picker__button--today:before,
    .picker__button--clear:before,
    .picker__button--close:before {
        position: relative;
        display: inline-block;
        height: 0;
    }

    .picker__button--today:before,
    .picker__button--clear:before {
        content: " ";
        margin-right: .45em;
    }

    .picker__button--today:before {
        top: -0.05em;
        width: 0;
        border-top: 0.66em solid #0059bc;
        border-left: .66em solid transparent;
    }

    .picker__button--clear:before {
        top: -0.25em;
        width: .66em;
        border-top: 3px solid #ee2200;
    }

    .picker__button--close:before {
        content: "\D7";
        top: -0.1em;
        vertical-align: top;
        font-size: 1.1em;
        margin-right: .35em;
        color: #777777;
    }

    .picker__button--today[disabled],
    .picker__button--today[disabled]:hover {
        background: #f5f5f5;
        border-color: #f5f5f5;
        color: #dddddd;
        cursor: default;
    }

        .picker__button--today[disabled]:before {
            border-top-color: #aaaaaa;
        }

/* ==========================================================================
   CUSTOM MATERIALIZE STYLES
   ========================================================================== */

.picker__box {
    border-radius: 2px;
    overflow: hidden;
}

.picker__date-display {
    text-align: center;
    background-color: #26a69a;
    color: #fff;
    padding-bottom: 15px;
    font-weight: 300;
}

.picker__nav--prev:hover,
.picker__nav--next:hover {
    cursor: pointer;
    color: #000000;
    background: #a1ded8;
}

.picker__weekday-display {
    background-color: #1f897f;
    padding: 10px;
    font-weight: 200;
    letter-spacing: .5;
    font-size: 1rem;
    margin-bottom: 15px;
}

.picker__month-display {
    text-transform: uppercase;
    font-size: 2rem;
}

.picker__day-display {
    font-size: 4.5rem;
    font-weight: 400;
}

.picker__year-display {
    font-size: 1.8rem;
    color: rgba(255, 255, 255, 0.4);
}

.picker__box {
    padding: 0;
}

.picker__calendar-container {
    padding: 0 1rem;
}

    .picker__calendar-container thead {
        border: none;
    }

.picker__table {
    margin-top: 0;
    margin-bottom: .5em;
}

.picker__day--infocus {
    color: #595959;
    letter-spacing: -.3;
    padding: .75rem 0;
    font-weight: 400;
    border: 1px solid transparent;
}

.picker__day.picker__day--today {
    color: #26a69a;
}

    .picker__day.picker__day--today.picker__day--selected {
        color: #fff;
    }

.picker__weekday {
    font-size: .9rem;
}

.picker__day--selected,
.picker__day--selected:hover,
.picker--focused .picker__day--selected {
    border-radius: 50%;
    -webkit-transform: scale(.9);
    -moz-transform: scale(.9);
    -ms-transform: scale(.9);
    -o-transform: scale(.9);
    transform: scale(.9);
    background-color: #26a69a;
    color: #ffffff;
}

    .picker__day--selected.picker__day--outfocus,
    .picker__day--selected:hover.picker__day--outfocus,
    .picker--focused .picker__day--selected.picker__day--outfocus {
        background-color: #a1ded8;
    }

.picker__footer {
    text-align: right;
    padding: 5px 10px;
}

.picker__close,
.picker__today {
    font-size: 1.1rem;
    padding: 0 1rem;
    color: #26a69a;
}

.picker__nav--prev:before,
.picker__nav--next:before {
    content: " ";
    border-top: .5em solid transparent;
    border-bottom: .5em solid transparent;
    border-right: 0.75em solid #676767;
    width: 0;
    height: 0;
    display: block;
    margin: 0 auto;
}

.picker__nav--next:before {
    border-right: 0;
    border-left: 0.75em solid #676767;
}

button.picker__today:focus,
button.picker__clear:focus,
button.picker__close:focus {
    background-color: #a1ded8;
}

/* ==========================================================================
   $BASE-TIME-PICKER
   ========================================================================== */

/**
 * The list of times.
 */

.picker__list {
    list-style: none;
    padding: 0.75em 0 4.2em;
    margin: 0;
}

/**
 * The times on the clock.
 */

.picker__list-item {
    border-bottom: 1px solid #dddddd;
    border-top: 1px solid #dddddd;
    margin-bottom: -1px;
    position: relative;
    background: #ffffff;
    padding: .75em 1.25em;
}

@media (min-height: 46.75em) {
    .picker__list-item {
        padding: .5em 1em;
    }
}

/* Hovered time */

.picker__list-item:hover {
    cursor: pointer;
    color: #000000;
    background: #b1dcfb;
    border-color: #0089ec;
    z-index: 10;
}

/* Highlighted and hovered/focused time */

.picker__list-item--highlighted {
    border-color: #0089ec;
    z-index: 10;
}

    .picker__list-item--highlighted:hover,
    .picker--focused .picker__list-item--highlighted {
        cursor: pointer;
        color: #000000;
        background: #b1dcfb;
    }

/* Selected and hovered/focused time */

.picker__list-item--selected,
.picker__list-item--selected:hover,
.picker--focused .picker__list-item--selected {
    background: #0089ec;
    color: #ffffff;
    z-index: 10;
}

/* Disabled time */

.picker__list-item--disabled,
.picker__list-item--disabled:hover,
.picker--focused .picker__list-item--disabled {
    background: #f5f5f5;
    border-color: #f5f5f5;
    color: #dddddd;
    cursor: default;
    border-color: #dddddd;
    z-index: auto;
}

/**
 * The clear button
 */

.picker--time .picker__button--clear {
    display: block;
    width: 80%;
    margin: 1em auto 0;
    padding: 1em 1.25em;
    background: none;
    border: 0;
    font-weight: 500;
    font-size: .67em;
    text-align: center;
    text-transform: uppercase;
    color: #666;
}

    .picker--time .picker__button--clear:hover,
    .picker--time .picker__button--clear:focus {
        color: #000000;
        background: #b1dcfb;
        background: #ee2200;
        border-color: #ee2200;
        cursor: pointer;
        color: #ffffff;
        outline: none;
    }

    .picker--time .picker__button--clear:before {
        top: -0.25em;
        color: #666;
        font-size: 1.25em;
        font-weight: bold;
    }

    .picker--time .picker__button--clear:hover:before,
    .picker--time .picker__button--clear:focus:before {
        color: #ffffff;
    }

/* ==========================================================================
   $DEFAULT-TIME-PICKER
   ========================================================================== */

/**
 * The frame the bounds the time picker.
 */

.picker--time .picker__frame {
    min-width: 256px;
    max-width: 320px;
}

/**
 * The picker box.
 */

.picker--time .picker__box {
    font-size: 1em;
    background: #f2f2f2;
    padding: 0;
}

@media (min-height: 40.125em) {
    .picker--time .picker__box {
        margin-bottom: 5em;
    }
}

.preloader-wrapper {
    top: 0;
    margin: auto;
    left: 0;
    bottom: 0;
    position: fixed;
    right: 0;
    z-index: 10000;
}

/*
 * The MIT License
 * Copyright (c) 2012 Matias Meno <m@tias.me>
 */

@-webkit-keyframes passing-through {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px);
    }

    30%, 70% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        -o-transform: translateY(-40px);
        transform: translateY(-40px);
    }
}

@-moz-keyframes passing-through {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px);
    }

    30%, 70% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        -o-transform: translateY(-40px);
        transform: translateY(-40px);
    }
}

@keyframes passing-through {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px);
    }

    30%, 70% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-40px);
        -moz-transform: translateY(-40px);
        -ms-transform: translateY(-40px);
        -o-transform: translateY(-40px);
        transform: translateY(-40px);
    }
}

@-webkit-keyframes slide-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px);
    }

    30% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@-moz-keyframes slide-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px);
    }

    30% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -ms-transform: translateY(40px);
        -o-transform: translateY(40px);
        transform: translateY(40px);
    }

    30% {
        opacity: 1;
        -webkit-transform: translateY(0px);
        -moz-transform: translateY(0px);
        -ms-transform: translateY(0px);
        -o-transform: translateY(0px);
        transform: translateY(0px);
    }
}

@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    10% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }

    20% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    10% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }

    20% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes pulse {
    0% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }

    10% {
        -webkit-transform: scale(1.1);
        -moz-transform: scale(1.1);
        -ms-transform: scale(1.1);
        -o-transform: scale(1.1);
        transform: scale(1.1);
    }

    20% {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

.dropzone,
.dropzone * {
    box-sizing: border-box;
}

    .dropzone.dz-clickable {
        cursor: pointer;
    }

        .dropzone.dz-clickable * {
            cursor: default;
        }

        .dropzone.dz-clickable .dz-message,
        .dropzone.dz-clickable .dz-message * {
            cursor: pointer;
        }

    .dropzone.dz-started .dz-message {
        display: none;
    }

    .dropzone.dz-drag-hover {
        border-style: solid;
    }

        .dropzone.dz-drag-hover .dz-message {
            opacity: 0.5;
        }

    .dropzone .dz-message {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0 auto;
        right: 0;
        height: auto;
        text-align: center;
        margin: 2px auto;
        padding: 0;
        color: #212121;
        font-size: 2.475em;
        display: none;
        background: rgba(255, 255, 255, 0.75);
        border-radius: 50%;
    }

    .dropzone .dz-preview {
        position: relative;
        display: inline-block;
        width: 135px;
        height: 135px;
        vertical-align: top;
        margin: 0;
        padding: 2px 0 0 0;
    }

        .dropzone .dz-preview:hover {
            z-index: 1000;
        }

            .dropzone .dz-preview:hover .dz-details {
                opacity: 1;
            }

        .dropzone .dz-preview.dz-file-preview .dz-image {
            border-radius: 20px;
            background: #999;
            background: linear-gradient(to bottom, #eee, #ddd);
        }

        .dropzone .dz-preview.dz-file-preview .dz-details {
            opacity: 1;
        }

        .dropzone .dz-preview.dz-image-preview .dz-details {
            -webkit-transition: opacity 0.2s linear;
            -moz-transition: opacity 0.2s linear;
            -ms-transition: opacity 0.2s linear;
            -o-transition: opacity 0.2s linear;
            transition: opacity 0.2s linear;
        }

        .dropzone .dz-preview .dz-remove {
            font-size: 14px;
            text-align: center;
            display: block;
            cursor: pointer;
            border: none;
        }

            .dropzone .dz-preview .dz-remove:hover {
                text-decoration: underline;
            }

        .dropzone .dz-preview:hover .dz-details {
            opacity: 1;
        }

        .dropzone .dz-preview .dz-details {
            z-index: 20;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            font-size: 13px;
            min-width: 100%;
            max-width: 100%;
            padding: 2em 1em;
            text-align: center;
            color: rgba(0, 0, 0, 0.9);
            line-height: 150%;
        }

            .dropzone .dz-preview .dz-details .dz-size {
                margin-bottom: 1em;
                font-size: 16px;
            }

            .dropzone .dz-preview .dz-details .dz-filename {
                white-space: nowrap;
            }

                .dropzone .dz-preview .dz-details .dz-filename:hover span {
                    border: 1px solid rgba(200, 200, 200, 0.8);
                    background-color: rgba(255, 255, 255, 0.8);
                }

                .dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                    .dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
                        border: 1px solid transparent;
                    }

                .dropzone .dz-preview .dz-details .dz-filename span,
                .dropzone .dz-preview .dz-details .dz-size span {
                    background-color: rgba(255, 255, 255, 0.4);
                    padding: 0 0.4em;
                    border-radius: 3px;
                }

        .dropzone .dz-preview:hover .dz-image img {
            -webkit-transform: scale(1.05, 1.05);
            -moz-transform: scale(1.05, 1.05);
            -ms-transform: scale(1.05, 1.05);
            -o-transform: scale(1.05, 1.05);
            transform: scale(1.05, 1.05);
            -webkit-filter: blur(8px);
            filter: blur(8px);
        }

        .dropzone .dz-preview .dz-image {
            border-radius: 50%;
            overflow: hidden;
            width: 100%;
            height: auto;
            position: relative;
            display: block;
            background: #fff;
            z-index: 10;
        }

            .dropzone .dz-preview .dz-image img {
                display: block;
            }

        .dropzone .dz-preview.dz-success .dz-success-mark {
            -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
            -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
            -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
            -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
            animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
        }

        .dropzone .dz-preview.dz-error .dz-error-mark {
            opacity: 1;
            -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
            -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
            -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
            -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
            animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
        }

        .dropzone .dz-preview .dz-success-mark,
        .dropzone .dz-preview .dz-error-mark {
            pointer-events: none;
            opacity: 0;
            z-index: 500;
            position: absolute;
            display: block;
            top: 50%;
            left: 50%;
            margin-left: -27px;
            margin-top: -27px;
        }

            .dropzone .dz-preview .dz-success-mark svg,
            .dropzone .dz-preview .dz-error-mark svg {
                display: block;
                width: 54px;
                height: 54px;
            }

        .dropzone .dz-preview.dz-processing .dz-progress {
            opacity: 1;
            -webkit-transition: all 0.2s linear;
            -moz-transition: all 0.2s linear;
            -ms-transition: all 0.2s linear;
            -o-transition: all 0.2s linear;
            transition: all 0.2s linear;
        }

        .dropzone .dz-preview.dz-complete .dz-progress {
            opacity: 0;
            -webkit-transition: opacity 0.4s ease-in;
            -moz-transition: opacity 0.4s ease-in;
            -ms-transition: opacity 0.4s ease-in;
            -o-transition: opacity 0.4s ease-in;
            transition: opacity 0.4s ease-in;
        }

        .dropzone .dz-preview:not(.dz-processing) .dz-progress {
            -webkit-animation: pulse 6s ease infinite;
            -moz-animation: pulse 6s ease infinite;
            -ms-animation: pulse 6s ease infinite;
            -o-animation: pulse 6s ease infinite;
            animation: pulse 6s ease infinite;
        }

        .dropzone .dz-preview .dz-progress {
            opacity: 1;
            z-index: 1000;
            pointer-events: none;
            position: absolute;
            height: 16px;
            left: 50%;
            top: 50%;
            margin-top: -8px;
            width: 80px;
            margin-left: -40px;
            background: rgba(255, 255, 255, 0.9);
            -webkit-transform: scale(1);
            border-radius: 8px;
            overflow: hidden;
        }

            .dropzone .dz-preview .dz-progress .dz-upload {
                background: #333;
                background: linear-gradient(to bottom, #666, #444);
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                width: 0;
                -webkit-transition: width 300ms ease-in-out;
                -moz-transition: width 300ms ease-in-out;
                -ms-transition: width 300ms ease-in-out;
                -o-transition: width 300ms ease-in-out;
                transition: width 300ms ease-in-out;
            }

        .dropzone .dz-preview.dz-error:hover .dz-error-message {
            opacity: 1;
            pointer-events: auto;
        }

        .dropzone .dz-preview .dz-error-message {
            pointer-events: none;
            z-index: 1000;
            position: absolute;
            display: block;
            display: none;
            opacity: 0;
            -webkit-transition: opacity 0.3s ease;
            -moz-transition: opacity 0.3s ease;
            -ms-transition: opacity 0.3s ease;
            -o-transition: opacity 0.3s ease;
            transition: opacity 0.3s ease;
            border-radius: 8px;
            font-size: 13px;
            top: 130px;
            left: -10px;
            width: 140px;
            background: #be2626;
            background: linear-gradient(to bottom, #be2626, #a92222);
            padding: 0.5em 1.2em;
            color: white;
        }

            .dropzone .dz-preview .dz-error-message:after {
                content: '';
                position: absolute;
                top: -6px;
                left: 64px;
                width: 0;
                height: 0;
                border-left: 6px solid transparent;
                border-right: 6px solid transparent;
                border-bottom: 6px solid #be2626;
            }

/*  Balloons *****/

ul.bubble-tasks {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    height: 150px;
    width: 150px;
    padding: 0;
    margin: auto;
}

    ul.bubble-tasks li {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        list-style: none;
        width: 100px;
        height: 100px;
        opacity: 0.75;
        transition: opacity 1s ease-in-out;
        border-radius: 50%;
        overflow: hidden;
    }

        ul.bubble-tasks li span {
            display: block;
            width: 100%;
            height: auto;
            text-align: center;
            color: #fff;
            font-weight: 300;
            font-size: 12px;
        }

            ul.bubble-tasks li span.count {
                margin-top: 25px;
                font-size: 24px;
                font-weight: 500;
                line-height: 30px;
            }

        ul.bubble-tasks li:nth-child(4n) {
            background: transparent;
            overflow: hidden;
            z-index: 1;
        }

        ul.bubble-tasks li:nth-child(4n+1) {
            background: #FFE082;
            background: -moz-linear-gradient(top, #FFE082 0%, #FF6F00 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFE082), color-stop(100%, #FF6F00));
            background: -webkit-linear-gradient(top, #FFE082 0%, #FF6F00 100%);
            background: -o-linear-gradient(top, #FFE082 0%, #FF6F00 100%);
            background: -ms-linear-gradient(top, #FFE082 0%, #FF6F00 100%);
            background: linear-gradient(to bottom, #FFE082 0%, #FF6F00 100%);
            top: -150px;
            left: -150%;
            z-index: 2;
        }

        ul.bubble-tasks li:nth-child(4n+2) {
            background: #B39DDB;
            background: -moz-linear-gradient(top, #B39DDB 0%, #311B92 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #B39DDB), color-stop(100%, #311B92));
            background: -webkit-linear-gradient(top, #B39DDB 0%, #311B92 100%);
            background: -o-linear-gradient(top, #B39DDB 0%, #311B92 100%);
            background: -ms-linear-gradient(top, #B39DDB 0%, #311B92 100%);
            background: linear-gradient(to bottom, #B39DDB 0%, #311B92 100%);
            top: -250px;
            z-index: 3;
        }

        ul.bubble-tasks li:nth-child(4n+3) {
            background: #FFAB91;
            background: -moz-linear-gradient(top, #FFAB91 0%, #880E4F 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFAB91), color-stop(100%, #880E4F));
            background: -webkit-linear-gradient(top, #FFAB91 0%, #880E4F 100%);
            background: -o-linear-gradient(top, #FFAB91 0%, #880E4F 100%);
            background: -ms-linear-gradient(top, #FFAB91 0%, #880E4F 100%);
            background: linear-gradient(to bottom, #FFAB91 0%, #880E4F 100%);
            top: -150px;
            right: -150%;
            z-index: 4;
        }

        ul.bubble-tasks li:nth-child(4n+4) {
            background: #4FC3F7;
            background: -moz-linear-gradient(top, #4FC3F7 0%, #0277BD 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4FC3F7), color-stop(100%, #0277BD));
            background: -webkit-linear-gradient(top, #4FC3F7 0%, #0277BD 100%);
            background: -o-linear-gradient(top, #4FC3F7 0%, #0277BD 100%);
            background: -ms-linear-gradient(top, #4FC3F7 0%, #0277BD 100%);
            background: linear-gradient(to bottom, #4FC3F7 0%, #0277BD 100%);
            bottom: -150px;
            left: -150%;
            z-index: 5;
        }

        ul.bubble-tasks li:nth-child(4n+5) {
            background: #A5D6A7;
            background: -moz-linear-gradient(top, #A5D6A7 0%, #2E7D32 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #A5D6A7), color-stop(100%, #2E7D32));
            background: -webkit-linear-gradient(top, #A5D6A7 0%, #2E7D32 100%);
            background: -o-linear-gradient(top, #A5D6A7 0%, #2E7D32 100%);
            background: -ms-linear-gradient(top, #A5D6A7 0%, #2E7D32 100%);
            background: linear-gradient(to bottom, #A5D6A7 0%, #2E7D32 100%);
            top: 0;
            left: 0;
            bottom: -250px;
            right: 0;
            z-index: 6;
        }

        ul.bubble-tasks li:nth-child(4n+6) {
            background: #e57373;
            background: -moz-linear-gradient(top, #e57373 0%, #b71c1c 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e57373), color-stop(100%, #b71c1c));
            background: -webkit-linear-gradient(top, #e57373 0%, #b71c1c 100%);
            background: -o-linear-gradient(top, #e57373 0%, #b71c1c 100%);
            background: -ms-linear-gradient(top, #e57373 0%, #b71c1c 100%);
            background: linear-gradient(to bottom, #e57373 0%, #b71c1c 100%);
            top: 0;
            left: 0;
            bottom: -150px;
            right: -150%;
            z-index: 7;
        }

/*------------------------------------*\
    $ANIMATIONS
\*------------------------------------*/

@keyframes ballOne {
    0% {
        transform: translateX(150%) translateY(90%) scale(0);
        opacity: 0;
    }

    50% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 0.75;
    }
}

@keyframes ballTwo {
    0% {
        transform: translateX(0) translateY(150%) scale(0);
        opacity: 0;
    }

    30% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 0.75;
    }
}

@keyframes ballThree {
    0% {
        transform: translateX(-125%) translateY(75%) scale(0);
        opacity: 0;
    }

    95% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 0.75;
    }
}

@keyframes ballFour {
    0% {
        transform: translateX(125%) translateY(-75%) scale(0);
        opacity: 0;
    }

    45% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 0.75;
    }
}

@keyframes ballFive {
    0% {
        transform: translateX(0) translateY(-125%) scale(0);
        opacity: 0;
    }

    75% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 0.75;
    }
}

@keyframes ballSix {
    0% {
        transform: translateX(-125%) translateY(-75%) scale(0);
        opacity: 0;
    }

    35% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 0.75;
    }
}

ul.bubble-tasks li:nth-child(4n+1) {
    animation: ballOne 5s 1, bubbleOne 15s infinite;
    animation-delay: 0s, 5s;
}

ul.bubble-tasks li:nth-child(4n+2) {
    animation: ballTwo 5s 1, bubbleTwo 15s infinite;
    animation-delay: 0s, 5s;
}

ul.bubble-tasks li:nth-child(4n+3) {
    animation: ballThree 5s 1, bubbleThree 15s infinite;
    animation-delay: 0s, 5s;
}

ul.bubble-tasks li:nth-child(4n+4) {
    animation: ballFour 5s 1, bubbleFour 15s infinite;
    animation-delay: 0s, 5s;
}

ul.bubble-tasks li:nth-child(4n+5) {
    animation: ballFive 5s 1, bubbleFive 15s infinite;
    animation-delay: 0s, 5s;
}

ul.bubble-tasks li:nth-child(4n+6) {
    animation: ballSix 5s 1, bubbleSix 15s infinite;
    animation-delay: 0s, 5s;
}

/**/

/*-*/

@keyframes bubbleOne {
    0% {
        transform: translateX(0) translateY(0);
        transform-origin: 0 0;
    }

    40% {
        transform-origin: 0 0;
        transform: translateX(0) translateY(50%) scale(0.95);
    }

    80% {
        transform-origin: 0 0;
        transform: translateX(50%) translateY(0);
    }
}

@keyframes bubbleTwo {
    0% {
        transform: translateX(0) translateY(0);
        transform-origin: 0 0;
    }

    40% {
        transform-origin: 0 0;
        transform: translateX(0) translateY(70%) scale(0.75);
    }

    80% {
        transform-origin: 0 0;
        transform: translateX(50%) translateY(-20%);
    }
}

@keyframes bubbleThree {
    0% {
        transform: translateX(0) translateY(0);
    }

    45% {
        transform: translateX(0) translateY(20%) scale(0.5);
    }

    80% {
        transform: translateX(-20%) translateY(0);
    }
}

@keyframes bubbleFour {
    0% {
        transform: translateX(0) translateY(0);
        transform-origin: 0 0;
    }

    45% {
        transform-origin: 0 0;
        transform: translateX(100%) translateY(-40%) scale(0.65);
    }

    80% {
        transform-origin: 0 0;
        transform: translateX(50%) translateY(0);
    }
}

@keyframes bubbleFive {
    0% {
        transform: translateX(0) translateY(0);
        transform-origin: 0 0;
    }

    45% {
        transform-origin: 0 0;
        transform: translateX(-20%) translateY(-30%) scale(0.8);
    }

    80% {
        transform-origin: 0 0;
        transform: translateX(-10%) translateY(-10%);
    }
}

@keyframes bubbleSix {
    0% {
        transform: translateX(0) translateY(0);
        transform-origin: 0 0;
    }

    45% {
        transform-origin: 0 0;
        transform: translateX(-50%) translateY(-30%);
    }

    80% {
        transform-origin: 0 0;
        transform: translateX(-10%) translateY(-10%) scale(1);
    }
}

ul.bubble-tasks li:nth-child(4n+1),
ul.bubble-tasks li:nth-child(4n+2),
ul.bubble-tasks li:nth-child(4n+3),
ul.bubble-tasks li:nth-child(4n+4),
ul.bubble-tasks li:nth-child(4n+5),
ul.bubble-tasks li:nth-child(4n+6) {
    transition-timing-function: linear;
}

.card-amb > .panel-body {
    position: relative;
}

    .card-amb > .panel-body:before {
        content: "";
        position: absolute;
        top: 4px;
        left: 0;
        right: 0;
        width: 98%;
        height: 5px;
        margin: auto;
    }

.card-amb.serv-prod > .panel-body:before {
    background-color: rgba(76, 43, 112, 0.85);
}

.card-amb.serv-qa > .panel-body:before {
    background-color: rgba(53, 138, 57, 0.85);
}

.card-amb.serv-uat > .panel-body:before {
    background-color: rgba(70, 90, 100, 0.85);
}

.card-amb.serv-desa > .panel-body:before {
    background-color: rgba(255, 87, 34, 0.85);
}

.card-amb.serv-staging > .panel-body:before {
    background-color: rgba(25, 113, 211, 0.85);
}

.card-amb .icon-svg img {
    display: block;
    margin: 15px auto;
    opacity: 0.35;
}

.p-absolute {
    position: absolute;
}

.p-relative {
    position: relative;
}

.float-right {
    float: right;
}

.d-block {
    display: block !important;
}

.d-inlineblock {
    display: inline-block !important;
}

.p-top-8 {
    top: -8px;
}

.p-right10 {
    right: 10px;
}

.m-auto {
    margin: 0px auto 0px auto !important;
}

.m-0 {
    margin: 0px !important;
}

.mt-0 {
    margin-top: 0px !important;
}

.mt-5 {
    margin-top: 5px !important;
}

.mt-10 {
    margin-top: 10px !important;
}

.mt-20 {
    margin-top: 20px !important;
}

.mt-40 {
    margin-top: 40px !important;
}

.mb-40 {
    margin-bottom: 40px !important;
}

.mb-60 {
    margin-bottom: 60px !important;
}

.mb-0 {
    margin-bottom: 0px !important;
}

.mb-30 {
    margin-bottom: 30px !important;
}

.mb-20 {
    margin-bottom: 20px !important;
}

.mb-10 {
    margin-bottom: 10px !important;
}

.mb-5 {
    margin-bottom: 5px !important;
}

.mr-20 {
    margin-right: 20px !important;
}

.mr-50 {
    margin-right: 50px !important;
}

.ml-10 {
    margin-left: 10px !important;
}

.p-0 {
    padding: 0px !important;
}

.p-15 {
    padding: 15px !important;
}

.p-30 {
    padding: 30px !important;
}

.pl-0 {
    padding-left: 0px;
}

.pr-0 {
    padding-right: 0px;
}

/*======alta usuario==========
============================*/

.user-top {
    height: 250px;
    padding: 20px 30px;
    border-bottom: 60px solid #fff;
    position: relative;
    /* background-color: #333;*/
    background-image: url(../img/backTopUser.png);
    background-size: cover;
    background-color: var(--topUser-color)
}

    .user-top .profile-right {
        position: absolute;
        right: 50px;
        bottom: -52px;
    }

        .user-top .profile-right img {
            width: 180px;
            height: 180px;
            border: 6px solid #fff;
        }

    .user-top .profile-center {
        position: absolute;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0;
        top: 70px !important;
        height: 190px;
        width: 190px;
        border: 5px solid #fff;
        border-radius: 50%;
    }

.user-profile .area {
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    margin-right: 10px;
    border-radius: 3px;
    color: #fff;
    text-transform: uppercase;
}

/*


.user-top .profile-center .avatar-wrap, .dropzone-previews {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  width: 180px;
  height: 180px;
  margin: 0 auto;
  padding: 0;
  
}


.user-top .profile-center .dropzone .dz-preview {
  position: relative;
  display: inline-block;
  width: 180px;
  height: 180px;
  vertical-align: top;
  margin: 0;
  padding: 2px 0 0 0;
}


.user-top .profile-center.dropzone .dz-preview .dz-image img {
  width: 180px;
  height: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;


}



.user-top .profile-center .user-avatar, .user-top .profile-center.dropzone .dz-preview .dz-image img {
  width: 135px;
  height: auto;
  max-width: 100%;

  margin: 0 auto;
}


.user-top .profile-center.dropzone .dz-preview {
  position: relative;
  display: inline-block;
  width: 180px;
  height: 180px;
  vertical-align: top;
  margin: 0;
  padding: 0px 0 0 0;
  
}



.user-top .profile-center.dropzone .dz-message {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0 auto;
  right: 0;
  height: auto;
  text-align: center;
  margin: 2px auto;
  padding: 0;
  color: #212121;
  font-size: 2.475em;
   background: rgba(255,255,255,0.75);
  border-radius: 50%;
  display: block;
}
*/

.user-top .dropzone .dz-preview.dz-file-preview .dz-image {
    background: rgba(255, 255, 255, 0.75);
    border-radius: 50%;
}

.user-top .dropzone .dz-message {
    border-radius: 50%;
    height: 180px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 180px;
    z-index: 1000;
}

.user-top .dropzone .dz-preview .dz-details {
    padding: 0;
    top: 47px;
}

.user-top .dropzone .dz-message:hover {
    background: rgba(255, 255, 255, 0.75);
}

.user-top .dropzone .dz-message .md {
    font-size: 25px;
    color: #fff;
    line-height: 140px;
}

.user-top .dropzone .dz-preview {
    border-radius: 50%;
    height: 180px;
    margin: 0;
    position: absolute;
    top: 0;
    width: 180px;
    left: 0px;
    padding: 0px !important;
}

.pencil-edit {
    position: absolute;
    border-radius: 50%;
    background: #666;
    border: 2px solid #fff;
    width: 35px;
    height: 35px;
    color: #FFFFFF;
    font-size: 15px;
    line-height: 35px;
    text-align: center;
    bottom: 13px;
    z-index: 12000;
    left: 11px;
}

.user-top .avatar-wrap,
.user-top .dropzone-previews {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    width: 180px;
    height: 180px;
    margin: 0 auto;
    padding: 0;
}

.user-top .dropzone .dz-preview .dz-image img {
    border-radius: 50%;
    height: 180px;
    width: 180px;
}

.user-top .dropzone .dz-preview .dz-image {
    border-radius: 5px;
    display: block;
    height: 180px;
    overflow: hidden;
    position: relative;
    width: 180px;
    z-index: 10;
    border-radius: 50%;
}

.user-top .user-progress {
    position: absolute;
    margin: 0;
    width: 25%;
    top: 210px;
    left: 20px;
}

.user-top .progress-data span.progress-percent {
    font-size: 12px;
    margin: 0px;
}

.user-top .progress {
    margin-bottom: 5px;
}

.user-top .progress-name {
    font-size: 11px;
    color: #666;
    float: left
}

.user-top .progress-bar {
    height: 8px;
}

    .user-top .progress-bar:last-child:before {
        content: "";
        height: 8px;
    }

.panel-heading .progress {
    float: left;
    display: inline-block;
    width: 85%;
}

:root {
    --topUser-color: #9e9ca2;
}

input.pickercolor[type="color"] {
    width: 45px;
    height: 45px;
    padding: 0;
    position: relative;
    top: 0px;
    RIGHT: 0PX;
    background: transparent;
    box-shadow: 0px;
    outline: none;
    border: 0px;
    cursor: pointer;
}

input[type="color"] {
    width: 30px;
    height: 30px;
    padding: 0;
    position: absolute;
    right: 15px;
    top: 15px;
    background: transparent;
    box-shadow: 0px;
    border-radius: 50%;
    outline: none;
    border: 2px solid rgb(235, 235, 235);
    cursor: pointer;
}

.colorTop::-webkit-color-swatch-wrapper {
    padding: 0;
}

.colorTop::-webkit-color-swatch {
    border: none;
    border-radius: 100%;
}

.colorTop::-moz-color-swatch {
    border: none;
    border-radius: 100%;
}

.colorTop::-moz-color-swatch-wrapper {
    padding: 0px;
}




.form-control.big {
    font-size: 25px;
    font-weight: 300;
    color: #000;
}

.card-info {
    border-radius: 5px;
    box-shadow: none;
}

    .card-info.mh {
        min-height: 395px;
    }

    .card-info .panel-heading h1 {
        font-size: 14px !important;
        color: #474649;
        font-weight: 500;
        letter-spacing: 1px !important;
        margin: 0px !important;
    }

    .card-info .form-group {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .card-info .panel-heading .line-top {
        height: 5px;
        background: #2298d6;
        width: 70px;
        margin-top: 15px;
    }

.line-top {
    height: 5px;
    background: #2298d6;
    width: 70px;
    margin-top: 15px;
}

.pmd-range-slider.noUi-target {
    box-shadow: none;
    border: none;
    height: 4px;
    margin: 25px 0 6px;
}

.pmd-range-slider.noUi-connect {
    background: #e2316c;
}

.pmd-range-slider .noUi-connect {
    background: #e2316c;
}

.pmd-range-slider .noUi-handle {
    border: none;
    box-shadow: none;
    border-radius: 50%;
    background: none;
    width: 14px;
    height: 14px;
    left: -7px;
    top: -6px;
    cursor: pointer;
}

    .pmd-range-slider .noUi-handle:after,
    .pmd-range-slider .noUi-handle:before {
        display: none;
    }

    .pmd-range-slider .noUi-handle:before {
        display: block;
        width: 100%;
        height: 100%;
        background: #e2316c;
        position: absolute;
        left: -6px;
        top: 0;
        border-radius: 50%;
    }

.pmd-range-slider.noUi-background,
.pmd-range-slider .noUi-background {
    box-shadow: none;
    background: #c2c2c2;
}

.pmd-range-slider.noUi-background {
    transition: all 0.2s ease-in-out;
}

.pmd-range-slider .noUi-base {
    z-index: 100;
}

.pmd-range-slider .noUi-pips-horizontal {
    height: 2px;
    padding: 0;
    top: 1px;
    z-index: 10;
}

.pmd-range-slider .noUi-pips .noUi-value {
}

.pmd-range-slider .noUi-pips .noUi-marker-horizontal {
    background: #c2c2c2;
    height: 6px;
}

.pmd-range-slider .noUi-pips.noUi-pips-horizontal .noUi-marker-large:first-child {
    margin-left: 0;
}

.pmd-range-slider .noUi-pips.noUi-pips-horizontal .noUi-marker-large:nth-last-child(2) {
    margin-left: -2px;
}

.pmd-range-slider .noUi-pips-vertical {
    width: 2px;
    padding: 0;
    left: 1px;
    z-index: 10;
}

.pmd-range-slider .noUi-pips .noUi-marker-vertical {
    background: #000000;
    width: 2px;
}

.pmd-range-slider .noUi-pips.noUi-pips-vertical .noUi-marker-large:first-child {
    margin-top: -2px;
}

.pmd-range-slider .noUi-pips.noUi-pips-vertical .noUi-marker-large:nth-last-child(2) {
    margin-top: 0px;
}

.pmd-range-slider .noUi-tooltip {
    left: 50%;
    padding: 0;
    width: 28px;
    height: 28px;
    margin-left: -14px;
    border: none;
    background: #e2316c;
    color: #ffffff;
    line-height: 28px;
    border-radius: 50%;
    font-size: 11px;
}

.pmd-range-slider.noUi-horizontal .noUi-handle-upper .noUi-tooltip,
.pmd-range-slider.noUi-horizontal .noUi-handle-lower .noUi-tooltip {
    top: -32px;
    bottom: auto;
}

    .pmd-range-slider.noUi-horizontal .noUi-handle-upper .noUi-tooltip:before,
    .pmd-range-slider.noUi-horizontal .noUi-handle-lower .noUi-tooltip:before {
        content: "";
        width: 20px;
        height: 20px;
        position: absolute;
        left: 50%;
        background: #e2316c;
        margin-left: -10px;
        z-index: -1;
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        top: 9px;
        border-radius: 10px 10px 0px 10px;
    }

.pmd-range-slider.pmd-range-tooltip-right-bottom.noUi-horizontal .noUi-handle-upper .noUi-tooltip {
    top: auto;
    bottom: -32px;
}

    .pmd-range-slider.pmd-range-tooltip-right-bottom.noUi-horizontal .noUi-handle-upper .noUi-tooltip:before {
        top: auto;
        bottom: 9px;
        border-radius: 0 10px 10px 10px;
    }

.pmd-range-slider.pmd-range-tooltip-left-bottom.noUi-horizontal .noUi-handle-lower .noUi-tooltip {
    top: auto;
    bottom: -32px;
}

    .pmd-range-slider.pmd-range-tooltip-left-bottom.noUi-horizontal .noUi-handle-lower .noUi-tooltip:before {
        top: auto;
        bottom: 9px;
        border-radius: 0 10px 10px 10px;
    }

.pmd-range-slider.pmd-range-tooltip-bottom.noUi-horizontal .noUi-handle-upper .noUi-tooltip,
.pmd-range-slider.pmd-range-tooltip-bottom.noUi-horizontal .noUi-handle-lower .noUi-tooltip {
    top: auto;
    bottom: -32px;
}

    .pmd-range-slider.pmd-range-tooltip-bottom.noUi-horizontal .noUi-handle-upper .noUi-tooltip:before,
    .pmd-range-slider.pmd-range-tooltip-bottom.noUi-horizontal .noUi-handle-lower .noUi-tooltip:before {
        top: auto;
        bottom: 9px;
        border-radius: 0 10px 10px 10px;
    }

.pmd-range-slider.pmd-range-tooltip-bottom.noUi-horizontal .noUi-tooltip {
    top: auto;
    bottom: -32px;
}

.pmd-range-slider.pmd-range-tooltip-right-bottom.noUi-horizontal .noUi-handle-upper .noUi-tooltip,
.pmd-range-slider.pmd-range-tooltip-left-bottom.noUi-horizontal .noUi-handle-lower .noUi-tooltip,
.pmd-range-slider.pmd-range-tooltip-bottom.noUi-horizontal .noUi-tooltip {
    -moz-transform-origin: 50% -50%;
    -webkit-transform-origin: 50% -50%;
    transform-origin: 50% -50%;
    will-change: transform;
}

.pmd-range-slider.noUi-vertical {
    height: 300px;
    margin: 20px auto;
}

    .pmd-range-slider.noUi-vertical.noUi-target {
        width: 2px;
    }

    .pmd-range-slider.noUi-vertical.noUi-connect {
        background: #4285f4;
    }

    .pmd-range-slider.noUi-vertical .noUi-handle {
        left: -6px;
    }

    .pmd-range-slider.noUi-vertical .noUi-tooltip {
        margin-left: 0;
        margin-top: -14px;
        top: 50%;
        left: -32px;
    }

    .pmd-range-slider.noUi-vertical .noUi-handle-upper .noUi-tooltip:before,
    .pmd-range-slider.noUi-vertical .noUi-handle-lower .noUi-tooltip:before {
        content: "";
        width: 20px;
        height: 20px;
        position: absolute;
        top: 50%;
        background: #4285f4;
        margin-top: -10px;
        z-index: -1;
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        left: 9px;
        border-radius: 10px 0px 10px 10px;
    }

.pmd-range-slider.pmd-range-tooltip-top-right.noUi-vertical .noUi-handle-upper .noUi-tooltip {
    left: auto;
    right: -32px;
}

    .pmd-range-slider.pmd-range-tooltip-top-right.noUi-vertical .noUi-handle-upper .noUi-tooltip:before {
        left: auto;
        right: 9px;
        border-radius: 10px 10px 10px 0px;
    }

.pmd-range-slider.pmd-range-tooltip-bottom-right.noUi-vertical .noUi-handle-lower .noUi-tooltip {
    left: auto;
    right: -32px;
}

    .pmd-range-slider.pmd-range-tooltip-bottom-right.noUi-vertical .noUi-handle-lower .noUi-tooltip:before {
        left: auto;
        right: 9px;
        border-radius: 10px 10px 10px 0px;
    }

.pmd-range-slider.pmd-range-tooltip-right.noUi-vertical .noUi-handle-upper .noUi-tooltip,
.pmd-range-slider.pmd-range-tooltip-right.noUi-vertical .noUi-handle-lower .noUi-tooltip {
    left: auto;
    right: -32px;
}

    .pmd-range-slider.pmd-range-tooltip-right.noUi-vertical .noUi-handle-upper .noUi-tooltip:before,
    .pmd-range-slider.pmd-range-tooltip-right.noUi-vertical .noUi-handle-lower .noUi-tooltip:before {
        left: auto;
        right: 9px;
        border-radius: 10px 10px 10px 0px;
    }

.pmd-range-slider.pmd-range-tooltip-right.noUi-vertical .noUi-tooltip {
    left: auto;
    right: -32px;
}

.pmd-range-slider.pmd-range-tooltip-top-right.noUi-vertical .noUi-handle-upper .noUi-tooltip,
.pmd-range-slider.pmd-range-tooltip-bottom-right.noUi-vertical .noUi-handle-lower .noUi-tooltip,
.pmd-range-slider.pmd-range-tooltip-right.noUi-vertical .noUi-tooltip {
    -moz-transform-origin: -50% 50%;
    -webkit-transform-origin: -50% 50%;
    transform-origin: -50% 50%;
    will-change: transform;
}

.pmd-range-slider .noUi-tooltip {
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
}

.pmd-range-slider.noUi-horizontal .noUi-tooltip {
    -moz-transform-origin: 50% 150%;
    -webkit-transform-origin: 50% 150%;
    transform-origin: 50% 150%;
    will-change: transform;
}

.pmd-range-slider.noUi-vertical .noUi-tooltip {
    -moz-transform-origin: 150% 50%;
    -webkit-transform-origin: 150% 50%;
    transform-origin: 150% 50%;
    will-change: transform;
}

.pmd-range-slider .noUi-handle:before,
.pmd-range-slider .noUi-tooltip {
    transition: all 0.2s ease-in-out;
}

.pmd-range-slider .noUi-handle.noUi-active:before {
    opacity: 0;
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
}

.pmd-range-slider .noUi-handle.noUi-active .noUi-tooltip {
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}

.pmd-range-slider.pmd-range-tooltip .noUi-handle:before {
    -ms-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
}

.pmd-range-slider.pmd-range-tooltip .noUi-tooltip {
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
}

[disabled].noUi-connect {
    background: #d0d0d0;
}

[disabled].pmd-range-slider.noUi-background {
    background: #f1f1f1;
}

[disabled].pmd-range-slider .noUi-background {
    background: #f1f1f1;
}

[disabled].pmd-range-slider .noUi-handle:before {
    background: #d0d0d0;
}

.pmd-range-slider [disabled].noUi-origin .noUi-handle,
[disabled].pmd-range-slider .noUi-handle {
    cursor: not-allowed;
}

    .pmd-range-slider [disabled].noUi-origin .noUi-handle:before {
        background: #c2c2c2;
    }

.noUi-target {
    background: #c2c2c2;
}

/* ---- Timeline ---- */

ol.timelineWork {
    /* position: relative;
  display: block;

  height: 4px;
  background: #c2c2c2;
  padding:0px;*/
    margin: 100px 0;
    padding: 0px;
}

    /*
ol.timelineWork li.dayTime {
  position: relative;
  display: inline-block;
  float: left;
  font: bold 14px arial;

  height: 11px;
}*/

    ol.timelineWork .dayTime {
        /* position: absolute;*/
        display: block;
        width: 37px;
        height: 37px;
        border-radius: 50%;
        border: 4px solid #41a6d8;
        text-align: center;
        /* left: -61px; */
        top: -22px;
        text-align: center;
        line-height: 32px;
        background: #fff;
        margin: 5px;
    }

        ol.timelineWork .dayTime span {
            text-align: center;
            font-size: 16px;
        }

    /*
ol::before {
  left: -5px;
}

ol::after {
  right: -10px;
  border: 10px solid transparent;
  border-right: 0;
  border-left: 20px solid #31708F;
  border-radius: 3px;
}*/

    /* ---- Timeline elements ---- */

    ol.timelineWork li {
        position: relative;
        display: inline-block;
        float: left;
        width: 0.6%;
        height: 11px;
        border-top: 1px solid #c2c2c2;
    }

        ol.timelineWork li.firstTime {
            border-left: 1px dashed #c2c2c2;
            height: 30px;
        }

            ol.timelineWork li.firstTime:before {
                content: "";
                top: -7px;
                left: -4px;
                display: block;
                width: 9px;
                height: 9px;
                border: 4px solid #e2316c;
                border-radius: 10px;
                background: #e2316c;
                position: absolute;
                z-index: 100;
            }

            ol.timelineWork li.firstTime.last:before {
                content: "";
                top: -5px;
                left: -4px;
                display: block;
                width: 9px;
                height: 9px;
                border: 4px solid #e2316c;
                border-radius: 10px;
                background: #e2316c;
                position: absolute;
                z-index: 100;
            }

        ol.timelineWork li .time {
            position: absolute;
            top: 25px;
            left: -5px;
        }

.ruler.timeWork.last .time {
    top: 27px;
}

.pointFirst {
    content: "";
    top: -7px;
    left: -4px;
    display: block;
    width: 8px;
    height: 9px;
    border: 3px solid #e2316c;
    border-radius: 10px;
    background: #fff;
    position: absolute;
    z-index: 100;
}

.ruler {
    border-left: 1px solid #c2c2c2;
    height: 3px;
}

    .ruler.timeWork {
        border-top: 3px solid #e2316c;
    }

        .ruler.timeWork.last {
            border-top: 1px solid #c2c2c2;
            height: 30px;
        }

.totalhead {
    position: absolute;
    right: 25px;
    top: 25px;
}

    .totalhead .text-big {
        font-size: 36px;
        font-weight: bold;
        color: #666;
        line-height: 35px;
    }

/* user profile*/

.user-profile .panel-heading {
    border-bottom: 1px solid #ccc;
    padding-bottom: 30px !important;
}

.user-profile .totales-top {
    position: absolute;
    top: 215px;
    width: 100%;
}

    .user-profile .totales-top .box {
        float: left;
        text-align: center;
        padding-left: 20px;
    }

.user-profile .text-big {
    font-size: 28px;
    font-weight: bold;
    color: #666;
    line-height: 28px;
}

.user-profile .text-small {
    font-size: 12px;
    font-weight: bold;
    color: #666;
    text-transform: uppercase;
}

.totales-top .zmdi {
    font-size: 25px;
}

    .totales-top .zmdi.emptyBat {
        color: #b9b9b9;
    }

    .totales-top .zmdi.fullBat {
        color: #2298d6;
    }

.user-profile .user-title-name {
    font-size: 37px;
    color: #666;
    font-weight: 300;
}

.user-profile .mail-title-name {
    font-size: 14px;
    color: #666;
}

.btn-outline {
    border: 1px solid #2196f3;
    background: transparent;
    color: #2196f3;
    box-shadow: none;
}

    .btn-outline:hover,
    .btn-outline:active,
    .btn-outline:focus {
        border: 1px solid #145b95;
        background: rgba(8, 125, 235, 0.3);
        color: #145b95;
        box-shadow: none;
    }

/********************
  listados
  ****************/

a.listado {
    display: block;
    background: #fff;
}

    a.listado:hover,
    a.listado:active,
    a.listado:focus {
        text-decoration: none !important;
        background: #f2f2f2;
    }

.item-list {
    color: #333;
    padding: 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}


    .item-list.list-con-href a.detalle-list {
        color: #333;
        background: #f3f6f9
    }

    .item-list.list-con-href .detalle-list:hover {
        background: #f3f6f9 !important;
    }

.d-flex {
    display: flex;
    align-items: flex-start;
}

/*

  .item-list .avatar {
    max-width: 65px;
    max-height: 65px;

    margin-right: 15px;
    position: relative;
    overflow: hidden;
}
*/

.item-list .name-user small {
    color: #999;
}

.item-list .item .zmdi {
    color: #999;
}

.item-list h6 {
    font-size: 25px;
    font-weight: 300;
    margin: 0px;
}

.item-list .item.mail {
    color: #066cf0;
}

.align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important;
}

.item-list .asign-user {
    float: left;
    display: inline-block;
    margin-left: 5px;
    color: #727272;
    text-align: center;
    border: 1px dashed #727272;
    border-radius: 50%;
}

.item-list .asign-user {
    width: 45px;
    height: 45px;
    line-height: 45px;
}

    .item-list .asign-user .zmdi {
        font-size: 20px;
    }

/*areas header*/

.header-item-list {
    padding: 10px;
    margin-bottom: 5px;
    background: #fff;
    margin-top: 15px;
}

.ph-user {
    float: right;
}

    .ph-user .crush {
        margin: 0px 25px 0 0;
    }

.header-item-list .area-bloque span {
    display: block
}

.listado {
    background: #fff;
}

    .listado .area {
        width: 35px;
        height: 35px;
        line-height: 35px;
        font-size: 15px;
        font-weight: bold;
        text-align: center;
        margin-right: 10px;
        border-radius: 3px;
        color: #fff;
        text-transform: uppercase;
    }

    .listado .area-bloque {
        float: right
    }

    .listado .mood {
        position: absolute;
        right: 0px;
        bottom: 3px;
        background: #fff;
        background: rgba(255, 255, 255, 0.85);
        border-radius: 100%;
        text-align: center;
        width: 15px;
        height: 15px;
        border: 2px solid #fff;
    }

        .listado .mood.active {
            background: #52d484;
        }

        .listado .mood.inactive {
            background: #c7050f;
        }

    /* usuario dado de baja*/

    .listado .item-list.dadobaja {
        color: rgb(180, 180, 180) !important;
    }

        .listado .item-list.dadobaja .name-user h6 {
            color: rgb(180, 180, 180) !important;
        }

        .listado .item-list.dadobaja .item.mail {
            color: rgb(180, 180, 180) !important;
        }

        .listado .item-list.dadobaja .user img {
            -webkit-filter: brightness(2) grayscale(100%) contrast(82%);
            -moz-filter: brightness(2) grayscale(100%) contrast(82%);
            filter: brightness(2) grayscale(100%) contrast(82%);
            will-change: filter;
        }

    .listado .user {
        float: left;
        display: inline-block;
        height: auto;
        position: relative;
        width: 65px;
        height: 65px;
        margin-right: 15px;
    }

        .listado .user img {
            object-fit: cover;
            position: relative;
            width: 65px;
            height: 65px;
        }

.header-item-list .area {
    width: 50px;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    float: left;
    margin-right: 10px;
    border-radius: 3px;
    text-transform: uppercase;
}

.header-item-list .area-bloque span.text-area {
    display: block;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: bold;
}

.header-item-list .hours-task .zmdi {
    color: #ccc;
    margin-left: 5px;
}

.header-item-list .hours-task span {
    color: #666;
}

.summarytask .proj {
    font-size: 10px;
    display: block
}

.summarytask .numtask {
    vertical-align: text-bottom;
}

.summarytask .descript {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    width: 250px;
    color: #999;
    font-size: 11px;
}

.area-card {
    width: 15%;
    border-radius: 5px;
}

.area-label-card {
    width: 90%; /* fallback if needed */
    width: calc(100% - 0em);
    border-radius: 5px;
}

.area-text {
    margin: 3px 0px 3px 0px;
    padding: 0;
    color: #fff;
    font-size: 11px;
    font-weight: bold;
}

.area.dis {
    background: #de2b66;
}

.area.des {
    background: #0660d4;
}

.area.adm {
    background: #192431;
}

.area.ana {
    background: #e4bc09;
}

.area.tec {
    background: #93d626;
}

.area.cal {
    background: #b23fcf;
}

.area.bas {
    background: #3fcfab;
}

.area.dir {
    background: #006eff;
}

.area.pmo {
    background: #ff7b00;
}

.dadobaja .area.grisada {
    background: #a6a6a7 !important;
}

.difucultad {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    display: inline-block;
}

    .difucultad.baja {
        border: 3px solid rgb(45, 168, 28);
    }

    .difucultad.media {
        border: 3px solid rgb(230, 208, 16);
    }

    .difucultad.alta {
        border: 3px solid rgb(230, 41, 16);
    }

.task-user .progress {
    margin-bottom: 10px;
}

.details-system {
    color: #999;
    float: right;
    padding-right: 15px;
    font-family: Courier New, Courier, monospace;
}

.emptylist .first {
    display: block;
    color: #613d20;
    font-size: 18px;
    font-weight: 300;
}

.sintarea {
    color: #613d20;
    text-align: right;
    font-size: 45px;
    padding-right: 15px;
}

/* seguimiento proyecto*/

.panel.card-seg .panel-body {
    overflow: hidden !important;
}

.panel.card-seg .panel-header .text-big {
    font-size: 30px;
    line-height: 15px;
}

.panel.card-seg .panel-header .arrow {
    position: absolute;
    right: 30px;
    top: 30px;
}

.panel.card-seg .panel-header p {
    font-size: 15px;
    color: #000;
    margin-bottom: 0px;
    text-transform: uppercase;
    margin-left: 25px;
}

.panel.card-seg a:hover,
.panel.card-seg a:active,
.panel.card-seg a:focus {
    text-decoration: none !important;
}

.deadline .progress {
    position: relative;
    background: #ccc;
}

.deadline {
    position: relative;
}

.reverse {
    float: right;
}

.deadline-point {
    content: "";
    top: -4px;
    left: 48%;
    display: block;
    width: 13px;
    height: 13px;
    border-radius: 10px;
    background: #000;
    position: absolute;
    z-index: 2;
    border: 3px solid #000;
    background: #fff;
}

    .deadline-point:before {
        content: '';
        width: 1px;
        height: 13px;
        left: 49%;
        position: absolute;
        border-left: 1px dashed #333333;
        bottom: 15px;
    }

    .deadline-point span {
        position: absolute;
        top: -44px;
        left: -30px;
        /* right: 40%; */
        font-size: 13px;
        font-weight: bold;
    }

.progress-left {
    position: relative;
}

.progress.progress-deadline {
    overflow: visible;
    margin-bottom: 26px;
    height: 4px;
}

    .progress.progress-deadline .progress-bar {
        position: relative;
        border-radius: 4px;
    }

    .progress.progress-deadline span.normal {
        position: absolute;
        bottom: -46px;
        font-size: 12px;
        line-height: 13px;
        padding: 2px 3px 2px 4px;
        right: -3.4em;
        border-radius: 2px;
        color: #000;
    }

        .progress.progress-deadline span.normal:after {
            width: 1px;
            height: 20px;
            background: transparent;
            bottom: 100%;
            left: 50%;
            border-left-width: 1px;
            border-left-style: dashed;
            content: " ";
            border-left-color: #999;
            width: 0;
            position: absolute;
            pointer-events: none;
            margin-left: -5px;
        }

    .progress.progress-deadline .reverse span.spnReverse {
        position: absolute;
        bottom: -44px;
        font-size: 12px;
        line-height: 13px;
        padding: 2px 3px 2px 4px;
        left: -2.9em;
        border-radius: 2px;
        color: #000;
    }

        .progress.progress-deadline .reverse span.spnReverse:after {
            width: 1px;
            height: 20px;
            background: transparent;
            bottom: 100%;
            right: 50%;
            border-left-width: 1px;
            border-left-style: dashed;
            border-left-color: #999;
            content: " ";
            width: 0;
            position: absolute;
            pointer-events: none;
            margin-left: -5px;
        }

.progress-bar.positive {
    background: -webkit-linear-gradient(left, #16b630 0%, #339adf 100%);
    /* Chrome10-25,Safari5.1-6 */
}

.progress-bar.negative {
    background: -webkit-linear-gradient(left, #f80067 0%, #e60410 100%);
    /* Chrome10-25,Safari5.1-6 */
}

.chart-backlog {
    width: 95%;
    margin: 0 auto;
    position: relative;
}

    .chart-backlog .text {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        display: inline-block;
        text-align: center;
    }

        .chart-backlog .text strong {
            font-size: 40px;
            color: #666;
            line-height: 30px;
        }

        .chart-backlog .text span {
            text-transform: uppercase;
            font-weight: 300;
            color: #666;
            font-size: 10px;
        }

.pieChartItempsProyecto {
    width: 80%;
}

.card-seg {
    padding: 0px !important;
}

    .card-seg .panel-header {
        border-bottom: 1px solid #ccc;
        padding: 10px 15px;
    }

    .card-seg .panel-footer {
        border-top: 1px solid #ccc;
        padding: 10px 15px;
    }

    .card-seg .panel-header h6 {
        font-weight: bold;
        display: inline-block;
        font-size: 16px;
        margin: 0 0 0 8px;
    }

    .card-seg .panel-header span {
        color: #999;
        font-size: 12px;
    }

    .card-seg .sub-title {
        font-size: 10px;
        text-transform: uppercase;
        color: #666;
        letter-spacing: 1px;
    }

.txt-green {
    color: #0f9d58;
}

.txt-red {
    color: #d40a2b;
}

/*permisos usuarios*/

.panel-permisos {
    padding-top: 15px;
    padding-bottom: 0px !important;
}

.permisos--items {
    margin: 0 0 0 0px;
    padding: 0;
    min-height: 200px;
}

    .permisos--items.margin {
        margin: 0 0 0 0px !important;
    }

    .permisos--items .it-permiso {
        list-style-type: none;
        padding-left: 20px;
        font-weight: 500;
        background: url(../img/drag-dots.gif) no-repeat 0px 10px;
        border-bottom: 1px solid #e1e1e1;
        position: relative;
        line-height: 36px
    }

.panel-permisos.detail .permisos--items .it-permiso {
    background: url(../img/drag-dots.gif) no-repeat 0px 10px;
}

    .panel-permisos.detail .permisos--items .it-permiso:hover {
        cursor: default !important;
    }

.permisos--items .it-permiso:hover {
    background-position: 0px -18px;
}

.permisos--items .it-permiso[epicaActiva=true] {
    background-color: rgba(3, 169, 244, 0.1);
}

.panel-permisos h5 {
    margin: 0px 0px 15px 0px;
    text-transform: uppercase;
    font-size: 17px;
}

.pb-item--options {
    display: inline-block;
    width: auto;
    height: 36px;
    margin-left: 15px;
    visibility: hidden;
    opacity: 0;
    transition: opacity .1s ease;
}

    .pb-item--options .zmdi {
        position: relative;
        top: 2px;
    }

.permisos--items > li.has-child:hover .pb-item--options {
    visibility: hidden;
    opacity: 0;
}

.permisos--items .it-permiso:hover {
    cursor: hand !important;
    cursor: -webkit-grab !important;
    cursor: -moz-grab !important;
}

.permisos--items .empty-message {
    display: block;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 15px;
    text-align: center;
    border: 1px dashed #9e9e9e;
    border-radius: 2px;
    line-height: 50px;
    margin-bottom: 15px;
}

.chip-item.chip-item--rol {
    background-color: rgb(164, 47, 231);
}

.chip-item.chip-item--permiso {
    background-color: rgb(14, 181, 211);
}

/* drag an drop*/

/* drop target state */

[data-draggable="target"][aria-dropeffect="move"] {
    border-color: #68b;
    background: #fff;
}

    /* drop target focus and dragover state */

    [data-draggable="target"][aria-dropeffect="move"]:focus,
    [data-draggable="target"][aria-dropeffect="move"].dragover {
        outline: none;
        padding: 15px;
        border: 1px dashed #6bb3d6;
    }

/* items focus state */

[data-draggable="item"]:focus {
    outline: none;
}

/* items grabbed state */

[data-draggable="item"][aria-grabbed="true"] {
    list-style-type: none;
    padding-left: 20px;
    font-weight: 500;
    background: #6bb3d6;
    position: relative;
    line-height: 36px;
    color: #fff;
}

.stretch-card-totals h4,
.stretch-card-totals h2,
.stretch-card-totals h6 {
    color: #fff !important;
}

.stretch-card-totals h2 {
    font-size: 25px;
    font-weight: bold;
}

.stretch-card-totals .card-body {
    padding: 0.5rem 2.5rem;
}

.stretch-card-totals {
    border-radius: 3px;
}

/* fondos*/

.bg-gradient-info {
    background: -webkit-gradient(linear, left top, right top, from(#002a61), color-stop(99%, #4b7fb7));
    background: linear-gradient(to right, #002a61, #4b7fb7 99%);
}

.bg-gradient-red {
    background: -webkit-gradient(linear, left top, right top, from(#bd205e), color-stop(99%, #bf0310));
    background: linear-gradient(to right, #bd205e, #bf0310 99%);
}

.bg-gradient-green {
    background: -webkit-gradient(linear, left top, right top, from(#77aa39), color-stop(99%, #58b5c4));
    background: linear-gradient(to right, #77aa39, #58b5c4 99%);
}

.panel-heading-title-modal h1 {
    font-size: 13px;
    text-transform: uppercase;
    color: #666;
    letter-spacing: 1px;
}

.btn-edit-inline {
    top: -15px;
    position: absolute;
    right: 28px;
    color: #2196f3;
    padding: 5px 10px;
    border-radius: 2px;
    font-size: 16px;
}

    .btn-edit-inline:hover {
        top: -15px;
        position: absolute;
        right: 28px;
        color: #2196f3;
    }

/* pantalla rol usuarios*/

.panel-permisos.altarol {
    position: relative;
    height: 450px;
    padding: 0;
    overflow-y: scroll;
}

.permisoCard h5 {
    margin: 0px 0px 15px 0px;
    text-transform: uppercase;
    font-size: 17px;
}

.inputSearchPermiso {
    width: 100%;
}

.panel-accordion-roles p {
    display: inline-block;
}

/* modificar horario*/

.b-comun {
    width: auto;
    border-radius: 31px;
    background: #e2316c;
    padding: 0px 15px;
    height: auto;
    margin: 0px;
}

    .b-comun .zmdi {
        font-size: 18px;
        margin-left: 15px;
    }

.m0 {
    margin: 0px;
}

@media only screen and (max-width: 300) {
    /*  .col-one {
        min-height: 80vh;
        max-height: 80vh;
    }

    .col-one .cards-container {
        min-height: 72vh;
        max-height: 72vh;
    }

    .col-two {
        min-height: 80vh;
        max-height: 80vh;
    }

    .col-two .cards-container {
        min-height: 72vh;
        max-height: 72vh;
    }

    .col-three {
        min-height: 80vh;
        max-height: 80vh;
    }

    .col-three .cards-container {
        min-height: 72vh;
        max-height: 72vh;
    }

    .col-four {
        min-height: 80vh;
        max-height: 80vh;
    }

    .col-four .cards-container {
        min-height: 72vh;
        max-height: 72vh;
    }*/
}

/*SLIDER DE COMPEJIDAD*/

.slidecontainer {
    width: 100%;
    /* Width of the outside container */
}

/* The slider itself */

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

    /* Mouse-over effects */

    .slider:hover {
        opacity: 1;
        /* Fully shown on mouse-over */
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        height: 25px;
        border: 0;
        background: url(../img/arrow-up.svg);
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 25px;
        height: 25px;
        border: 0;
        background: url(../img/arrow-up.svg);
        cursor: pointer;
    }

.complejidad-label {
    display: flex;
    justify-content: space-between;
}

.complejidad-dots {
    display: flex;
    justify-content: space-between;
}

.circle-0 {
    color: #00FF00;
}

.circle-10 {
    color: #33FF00;
}

.circle-20 {
    color: #66FF00;
}

.circle-30 {
    color: #99FF00;
}

.circle-40 {
    color: #CCFF00;
}

.circle-50 {
    color: #FFFF00;
}

.circle-60 {
    color: #FFCC00;
}

.circle-70 {
    color: #FF9900;
}

.circle-80 {
    color: #FF6600;
}

.circle-90 {
    color: #FF3300;
}

.circle-100 {
    color: #FF0000;
}

.span-title-success {
    color: #23c742;
    font-weight: bold;
    margin-left: 20px;
}

.span-title-danger {
    color: #23c742;
    font-weight: bold;
    margin-left: 20px;
}

.data-sprint {
    margin: 15px 0 20px 0;
}

.paginador-sprint-detalle {
    padding: 0px 0px 15px 0px;
}

.panel-padding {
    padding: 20px;
}

.progress-data {
    display: flex;
    flex-direction: column;
    /*text-align: center;*/
}

.progress-item {
    font-size: 30px;
    color: #666;
    font-weight: bold;
    line-height: 30px;
}

.progress-item-sub {
    text-transform: uppercase;
    font-weight: 300;
    color: #666;
    font-size: 10px;
}

.amb-serv .panel .panel-ambientes .panel .qua,
.amb-serv .panel .panel-heading[data-control="dis"] {
    background: #de2b66;
}

.amb-serv .panel .panel-ambientes .panel .qua,
.amb-serv .panel .panel-heading[data-control="des"] {
    background: #0660d4;
}

.amb-serv .panel .panel-ambientes .panel .qua,
.amb-serv .panel .panel-heading[data-control="adm"] {
    background: #192431;
}

.amb-serv .panel .panel-ambientes .panel .qua,
.amb-serv .panel .panel-heading[data-control="ana"] {
    background: #e4bc09;
}

.amb-serv .panel .panel-ambientes .panel .qua,
.amb-serv .panel .panel-heading[data-control="tec"] {
    background: #93d626;
}

.amb-serv .panel .panel-ambientes .panel .qua,
.amb-serv .panel .panel-heading[data-control="cal"] {
    background: #b23fcf;
}

.amb-serv .panel .panel-ambientes .panel .qua,
.amb-serv .panel .panel-heading[data-control="bas"] {
    background: #3fcfab;
}

.amb-serv .panel .panel-ambientes .panel .qua,
.amb-serv .panel .panel-heading[data-control="dir"] {
    background: #006eff;
}

.amb-serv .panel .panel-ambientes .panel .qua,
.amb-serv .panel .panel-heading[data-control="pmo"] {
    background: #ff7b00;
}

.scroll-list {
    min-height: 350px !important;
    max-height: 350px !important;
    float: left;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    min-height: 600px;
    max-height: 650px;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

.info-ranking-title {
    position: relative;
    left: 150px;
    top: 0;
    right: 0;
    display: block;
    width: 300px;
    height: 45px;
    margin: 0 auto;
    line-height: 45px;
    z-index: 1;
}

.item-info {
    margin: 0 10px;
}

.timer-icon-list {
    color: #339adf;
}

.text-item-list {
    font-size: 12px;
}

.poweredBy {
    position: absolute;
    bottom: 30px;
    right: 20px;
    color: #fff;
}

.numVersionSpn {
    position: absolute;
    bottom: 10px;
    right: 20px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
}

/*======================================================================
DETALLES
=========================================================================*/

.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #ebedf3;
    border-radius: .42rem
}

    .card > hr {
        margin-right: 0;
        margin-left: 0
    }

.card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 2.25rem
}

.card-title {
}

.card-subtitle {
    margin-top: -1rem;
    margin-bottom: 0
}

.card-footer {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 2.25rem
}

.card.card-custom {
    -webkit-box-shadow: 0 0 30px 0 rgba(82, 63, 105, .05);
    box-shadow: 0 0 30px 0 rgba(82, 63, 105, .05);
    border: 0
}

    .card.card-custom > .card-header {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        padding: 2.25rem 2.25rem 0px 2.25rem;
        background-color: transparent
    }

        .card.card-custom > .card-header .card-title h2 {
            font-size: 16px;
            line-height: normal;
            margin: 0px;
        }

        .card.card-custom > .card-header .card-title .card-icon {
            margin-right: .75rem;
            line-height: 0
        }

            .card.card-custom > .card-header .card-title .card-icon i {
                font-size: 1.25rem;
                color: #7e8299;
                line-height: 0
            }

        .card.card-custom > .card-header .card-title,
        .card.card-custom > .card-header .card-title .card-label {
            font-weight: 500;
            font-size: 1.275rem;
            color: #181c32
        }

            .card.card-custom > .card-header .card-title .card-label {
                margin: 0 .75rem 0 0;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap
            }

            .card.card-custom > .card-header .card-title small {
                color: #b5b5c3;
                font-size: 1rem
            }

        .card.card-custom > .card-header .card-toolbar {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            margin: .5rem 0;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        }

    .card.card-custom h1.title {
        font-size: 20px;
        text-transform: none;
        line-height: normal;
        border-bottom: 0px !important;
        position: relative;
    }

.symbol {
    display: inline-block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
    border-radius: .42rem;
}

    .symbol > img {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        border-radius: .42rem
    }

    .symbol > img {
        width: 100%;
        max-width: 50px;
        height: 50px;
        object-fit: cover;
    }

    .symbol.symbol-50 > img {
        width: 100%;
        max-width: 50px;
        height: 50px;
        object-fit: cover;
    }

    .symbol.symbol-lg-120 > img {
        width: 100%;
        max-width: 120px;
        height: 120px;
        object-fit: cover;
    }

.separator.separator-solid {
    border-bottom: 1px solid #ebedf3;
}

.separator {
    height: 0;
}

#marksChart {
    margin: 0 auto;
    width: 75% !important;
    height: 75% !important;
}

/*-------------------------
[ perfect scroll ]
  ---------------------
*/

.ps-container .ps-scrollbar-y-rail {
    right: -0px !important;
}

/*============================================
LISTADOS
=============================================*/
.listado-h40 {
    overflow: hidden;
    height: 40vh;
    position: relative;
}

.listado-h80 {
    overflow: hidden;
    height: 80vh;
    position: relative;
}

.listado-menor-330 {
    overflow: hidden;
    height: 330px;
    position: relative;
}

.listado-menor-345 {
    overflow: hidden;
    height: 345px;
    position: relative;
}

.listado-menor-360 {
    overflow: hidden;
    height: 345px;
    position: relative;
}

.listado-menor-265 {
    overflow: hidden;
    height: 265px;
    position: relative;
}

.listado-menor-250 {
    overflow: hidden;
    height: 250px;
    position: relative;
}

.listado-menor-200 {
    overflow: hidden;
    height: 200px;
    position: relative;
}

.listado-menor-220 {
    overflow: hidden;
    height: 220px;
    position: relative;
}

.listado-menor-225 {
    overflow: hidden;
    height: 225px;
    position: relative;
}

.listado-menor-218 {
    overflow: hidden;
    height: 218px;
    position: relative;
}

.listado-menor-195 {
    overflow: hidden;
    height: 195px;
    position: relative;
}

.listado-menor-240 {
    overflow: hidden;
    height: 240px;
    position: relative;
}

.listado-menor-225 {
    overflow: hidden;
    height: 225px;
    position: relative;
}

.listado-menor-275 {
    overflow: hidden;
    height: 275px;
    position: relative;
}

.listado-menor-285 {
    overflow: hidden;
    height: 285px;
    position: relative;
}

.listado-menor-435 {
    overflow: hidden;
    height: 435px;
    position: relative;
}

.listado-550 {
    overflow: hidden;
    height: 550px;
    position: relative;
}

.listado-635 {
    overflow: hidden;
    height: 635px;
    position: relative;
}

.listado-670 {
    overflow: hidden;
    height: 670px;
    position: relative;
}

a.listado-item.item-list {
    color: #000 !important;
}

    a.listado-item.item-list:hover {
        background: #dbdbdb;
    }

.listado-item {
    display: inline-block;
    background: #fff;
    width: 100%;
}

    .listado-item.item-list.border-list {
        color: #333;
        border: 1px solid #dbdbdb;
        padding: 8px 15px;
        position: relative;
        margin-bottom: 8px;
        box-shadow: none !important;
    }

    .listado-item.item-list {
        color: #333;
        border-bottom: 1px solid #dbdbdb;
        padding: 8px 15px;
        position: relative;
        box-shadow: none !important;
    }

    .listado-item.header-listado {
        font-size: .65rem;
        padding-top: 8px;
        padding-bottom: 8px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        border-bottom: 1px solid #e9ecef;
        font-weight: bold;
        color: #000;
        background-color: #f6f9fc;
    }

    .listado-item p {
        line-height: normal !important;
    }

    .listado-item.header-list-contenido {
        color: #000;
        background-color: #e9e9e9;
    }

    .listado-item.header-list-contenido {
        font-size: 18px;
        padding-top: 5px;
        padding-bottom: 5px;
        border-bottom: 1px solid #e9ecef;
        font-weight: 400;
    }

/*============================================
    ICONOS SERVIDORES
    =============================================*/

.servidor-icon {
    float: left;
    display: inline-block;
    width: 35px;
    height: 35px;
    margin: 5px 5px 0 0;
    padding: 0;
    text-align: center;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 34px;
    border-radius: 50%;
}

    .servidor-icon.qa {
        background: rgba(53, 138, 57, 0.85);
    }

    .servidor-icon.desarrollo {
        background: rgba(255, 87, 34, 0.85);
    }

    .servidor-icon.produccion {
        background: rgba(76, 43, 112, 0.85);
    }

    .servidor-icon.staging {
        background: rgba(25, 113, 211, 0.85);
    }

    .servidor-icon.uat {
        background: rgba(70, 90, 100, 0.85);
    }

.corner-round-icon {
    display: inline-block;
    width: 35px;
    height: 35px;
    padding: 0;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 35px;
    border-radius: 5px;
}

/* iconos servidores en tabs*/

.nav-tabs li.active .servidor-icon.qa {
    background: rgba(53, 138, 57, 0.85);
}

.nav-tabs li.active .servidor-icon.desarrollo {
    background: rgba(255, 87, 34, 0.85);
}

.nav-tabs li.active .servidor-icon.produccion {
    background: rgba(76, 43, 112, 0.85);
}

.nav-tabs li.active .servidor-icon.staging {
    background: rgba(25, 113, 211, 0.85);
}

.nav-tabs li.active .servidor-icon.uat {
    background: rgba(70, 90, 100, 0.85);
}

.nav-tabs li .servidor-icon.qa {
    background: rgba(170, 189, 171, 0.85);
}

.nav-tabs li .servidor-icon.desarrollo {
    background: rgba(243, 185, 167, 0.85);
}

.nav-tabs li .servidor-icon.produccion {
    background: rgba(190, 175, 206, 0.85);
}

.nav-tabs li .servidor-icon.staging {
    background: rgba(146, 174, 206, 0.85);
}

.nav-tabs li .servidor-icon.uat {
    background: rgba(162, 178, 185, 0.85);
}

.divFechasImportantes {
    padding: .75rem;
    line-height: 1.5;
    border-radius: .42rem;
    display: inline-block;
}

.pager-content {
    text-align: right;
}

.pager-linktext {
    font-size: 12px;
    color: #222;
    display: inline-block;
    padding: 0 5px;
    font-weight: bold;
    text-transform: uppercase;
}

.pager-link {
    font-size: 14px;
    color: #222;
    display: inline-block;
    padding: 0 5px;
    font-weight: bold;
}

    .pager-link.active {
        color: #3f4dc6 !important;
    }

/* clases para los listados con etiquetas*/

.bog {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    width: 250px;
}

div.yi {
    overflow: visible;
}

.yi,
.y6 {
    align-items: baseline;
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    flex-shrink: 0;
    line-height: 20px;
}

.tags {
    margin-right: 5px;
    padding: 0 10px;
    background: #283842;
    color: #fff;
    text-decoration: none;
    margin-top: 0px !important;
    border-radius: 4px;
    font-size: 11px;
    white-space: nowrap;
    overflow: inherit;
}

/* avatar en listado*/

.symbol-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

    .symbol-group.symbol-hover .symbol {
        cursor: pointer;
    }

    .symbol-group .symbol:first-child {
        margin-left: 0;
    }

.symbol-group2 .symbol {
    position: relative;
    z-index: 0;
    margin-left: 0px;
    border: 2px solid #fff;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.symbol-group .symbol {
    position: relative;
    z-index: 0;
    margin-left: -10px;
    border: 2px solid #fff;
    -webkit-transition: all .3s ease;
    transition: all .3s ease;
}

.symbol.symbol-circle {
    border-radius: 50%;
}

.symbol {
    display: inline-block;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    position: relative;
    border-radius: .42rem;
}

    .symbol.symbol-30 > img {
        width: 100%;
        max-width: 30px;
        height: 30px;
    }

    .symbol.symbol-45 > img {
        width: 100%;
        max-width: 45px;
        height: 45px;
    }

    .symbol.symbol-circle > img {
        border-radius: 50%;
    }

@media (min-width: 1400px) {
    .symbol > img {
        width: 100%;
        max-width: 50px;
        height: 50px;
    }
}

@media (min-width: 1200px) {
    .symbol > img {
        width: 100%;
        max-width: 50px;
        height: 50px;
    }
}

@media (min-width: 992px) {
    .symbol > img {
        width: 100%;
        max-width: 50px;
        height: 50px;
    }
}

@media (min-width: 768px) {
    .symbol > img {
        width: 100%;
        max-width: 50px;
        height: 50px;
    }
}

@media (min-width: 576px) {
    .symbol > img {
        width: 100%;
        max-width: 50px;
        height: 50px;
    }
}

.symbol > img {
    width: 100%;
    max-width: 50px;
    height: 50px;
}

.symbol > img {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border-radius: .42rem;
}

.symbol-group .symbol:hover {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 1;
}

.symbol.symbol-30 .symbol-label {
    width: 30px;
    height: 30px;
}

.symbol.symbol-light .symbol-label {
    background-color: #f3f6f9;
    color: #7e8299;
}

.symbol .symbol-label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-weight: 500;
    color: #3f4254;
    background-color: #f3f6f9;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 0.42rem;
}

.symbol .symbol-label {
    width: 50px;
    height: 50px;
}

.symbol .symbol-label {
    border-radius: 50%;
}

.symbol.symbol-circle {
    border-radius: 50%;
}

.avatar-proyect-x40 {
    width: 40px;
    height: 40px
}

    .avatar-proyect-x40 img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
    }


.avatar-proyect-x30 {
    width: 30px;
    height: 30px
}

    .avatar-proyect-x30 img {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        object-fit: cover;
    }






.dropdown-menu.addTags {
    padding: .5rem 0;
    margin: .125rem 0 0;
    color: #3f4254;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 0 solid rgba(0, 0, 0, .15);
    border-radius: .42rem;
    -webkit-box-shadow: 0 0 50px 0 rgba(82, 63, 105, .15);
    box-shadow: 0 0 50px 0 rgba(82, 63, 105, .15);
}

.navi {
    padding: 0;
    margin: 0;
    display: block;
    list-style: none;
}

.navi-250 {
    overflow: hidden;
    height: 250px;
    position: relative;
}

.navi-header {
    padding: .75rem 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.navi-footer,
.navi-header,
.navi .navi-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.navi-separator {
    margin: 0;
    margin-bottom: 0px;
    padding: 0;
    height: 0;
    display: block;
    border-bottom: 1px solid #ebedf3;
}

.navi-header {
    border-bottom: 1px solid #ebedf3;
}

.navi-footer {
    border-top: 1px solid #ebedf3;
}

.dropdown-menu.dropdown-menu-sm {
    width: 150px;
}

.dropdown-menu.dropdown-menu-sm-190 {
    width: 190px;
}

.dropdown-menu.dropdown-menu-md {
    width: 250px;
}

.navi .navi-item .navi-link {
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
    color: #3f4254;
}

.navi .navi-item .navi-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 1.5rem;
}

.navi.navi-dropdown .navi-item .navi-link {
    padding: 10px 15px;
}


.navi .navi-item .navi-link {
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
}

    .navi .navi-item .navi-link .tags {
        font-size: 14px;
    }

    .navi .navi-item .navi-link .navi-icon i {
        color: #b5b5c3
    }



.navi.navi-hover .navi-item .navi-link:hover {
    background-color: #f3f6f9;
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
}

.navi-footer {
    padding: .75rem 1.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}



.navi .navi-item .navi-link .navi-text {
    width: auto;
}

.btn.btn-clean {
    color: #616168;
    background-color: transparent;
    border-color: transparent;
    box-shadow: none !important;
    border: 0px;
    font-size: 14px;
}

    .btn.btn-clean:hover,
    .btn.btn-clean:active,
    .btn.btn-clean:focus {
        color: #222222;
        background-color: #d2e3f5;
        border-color: transparent;
        box-shadow: none !important;
        outline: none !important;
    }


    .btn.btn-clean i {
        color: #585858;
    }

.btn.btn-icon i {
    padding: 0;
    margin: 0;
}

.btn-group-sm > .btn i,
.btn.btn-sm i {
    font-size: 18px;
    padding-right: .35rem;
}




/* agregar tags*/

.tagsMuestra {
    width: auto;
    display: inline-block;
    margin-right: 5px;
    font-size: 14px;
    padding: 0 10px;
    text-decoration: none;
    margin-top: 0px !important;
    border-radius: 4px;
    white-space: nowrap;
    padding: 8px 10px;
    overflow: inherit;
    background-color: var(--tagsMuestra-fondo);
    color: var(--tagsMuestra-texto)
}


.delete-tag {
    color: #fff;
    font-size: 15px;
    margin-left: 7px;
}

    .delete-tag:hover {
        color: rgb(206, 206, 206) !important;
    }







/*contenedor de imagens*/
.image-input {
    position: relative;
    display: inline-block;
    border-radius: .42rem;
    background-repeat: no-repeat;
    background-size: cover;
}

    .image-input.image-input-outline .image-input-wrapper {
        border: 3px solid #fff;
        -webkit-box-shadow: 0 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, .075);
        box-shadow: 0 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, .075);
    }


    .image-input .image-input-wrapper {
        border-radius: .42rem;
        background-repeat: no-repeat;
    }

        .image-input .image-input-wrapper img {
            width: 200px;
            height: 180px;
            border-radius: .42rem;
            object-fit: cover;
        }

.btn.btn-icon.btn-xs {
    height: 24px;
    width: 24px;
}

.btn-delete-image-input {
    position: absolute;
    right: -10px;
    top: -10px;
}


.btn.btn-white {
    color: #3f4254;
    background-color: #fff;
    border-color: #fff;
}

    .btn.btn-white.btn-shadow {
        -webkit-box-shadow: 0 9px 16px 0 rgba(24, 28, 50, .25) !important;
        box-shadow: 0 9px 16px 0 rgba(24, 28, 50, .25) !important;
    }

.btn.btn-icon.btn-circle {
    border-radius: 50% !important;
}

.btn.btn-icon.btn-xs {
    height: 24px;
    width: 24px;
}

.btn.btn-icon {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0;
    height: calc(1.5em + 1.3rem + 2px);
    width: calc(1.5em + 1.3rem + 2px);
}

/* file upload usuario*/
.inputfile + label {
    max-width: 80%;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    display: inline-block;
    overflow: hidden;
    padding: 5px 15px;
    /* 10px*/
}

.inputfile {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}


    .inputfile:focus + label,
    .inputfile.has-focus + label {
        outline: 0px;
        outline: -webkit-focus-ring-color auto 5px;
    }

.inputfile-outline + label {
    color: #3f4dc6;
    border: 2px solid currentColor;
    width: 200px;
    text-align: center;
}

    .inputfile-outline:focus + label,
    .inputfile-outline.has-focus + label,
    .inputfile-outline + label:hover {
        color: #626cc4;
    }








.dropdown-menu-action {
    padding: 10px 20px;
}

    .dropdown-menu-action .dropdown-item {
        padding: 10px 0px;
        display: block;
        font-size: 16px;
    }




.swal-icon--warning {
    color: #f8bb86;
    width: 80px;
    height: 80px;
    border: #f4e4d9 4px solid;
    border-radius: 50%;
    box-sizing: content-box;
    display: inline-block;
    line-height: 78px !important;
    font-size: 46px;
    margin: 20px auto;
    text-align: center;
}

.swal-icon--question {
    color: #10b5b1;
    width: 80px;
    height: 80px;
    border: #badddc 4px solid;
    border-radius: 50%;
    box-sizing: content-box;
    display: inline-block;
    line-height: 78px !important;
    font-size: 46px;
    margin: 20px auto;
    text-align: center;
}







/*==================================
MODAL PIZARRA NUEVA
=========================*/

.modal-bd-pizarra .top-modal {
    min-height: 20px;
    margin-bottom: 20px;
    margin: 0 auto;
    text-align: center;
}

    .modal-bd-pizarra .top-modal img {
        margin: 0 auto;
    }

    .modal-bd-pizarra .top-modal h1 {
        font-size: 23px;
        font-weight: bold;
    }



.btn-modal-pz {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all .2s cubic-bezier(.785, .135, .15, .86) 0s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    line-height: 50px;
    padding: 0 30px;
    cursor: pointer;
    color: #fff;
    border-radius: 5px;
    background: #4452a5 !important;
    text-decoration: none;
    font: 600 15px/63px 'Roboto', Helvetica Neue, Arial, sans-serif;
    ;
    text-transform: uppercase;
}

    .btn-modal-pz:hover {
        background: #293787 !important;
    }

.btn-modal-pz__next {
    margin: 20px;
    width: calc(50% - 50px);
}


.modal-ft-pizarra {
    text-align: center !important;
}


.modal-pz .modal-header {
    border-bottom: 1px solid #f2f2f2 !important;
    height: 60px;
}

.contenedor-modal-title .card-title h2 {
    font-weight: 500;
    font-size: 20px;
    color: #181c32;
    margin-top: 0px;
}

.link-volver-pz {
    font-size: 34px;
    font-weight: 300;
    line-height: 24px;
}



.favPizarraMuestra {
    display: inline-block;
    margin-right: 5px;
    padding: 0 10px;
    text-decoration: none;
    margin-top: 0px !important;
    border-radius: 4px;
    white-space: nowrap;
    overflow: inherit;
    background-color: var(--favPizarraMuestra-fondo) !important;
    color: var(--favPizarraMuestra-texto) !important;
    text-transform: uppercase;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 50px;
    font-weight: bold;
}





.modal-pz .modal-header .close-modal-pz {
    color: #999;
    margin: 0 -2px;
    outline: none;
    width: 40px;
    text-align: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.0);
    outline: none;
    box-shadow: none;
    border: 0px;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    line-height: normal;
    float: right;
    font-size: 25px;
}

    .modal-pz .modal-header .close-modal-pz:hover {
        text-decoration: none;
        outline: none;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
        font-size: 25px;
    }





.circulo-total-user-pz {
    border: 1px dashed #ccc;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    text-align: center;
    line-height: 45px;
}

.inpNuevaPlantilla a {
    margin: 0 -2px;
    outline: none;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.0);
    outline: none;
    box-shadow: none;
    border: 0px;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    line-height: normal;
    font-size: 25px;
    line-height: 40px;
}


    .inpNuevaPlantilla a:hover {
        text-decoration: none;
        outline: none;
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
        font-size: 25px;
    }



    .inpNuevaPlantilla a i.zmdi-check {
        color: #69a841;
    }

    .inpNuevaPlantilla a i.zmdi-close {
        color: #999;
    }

    .inpNuevaPlantilla a.p-absolute.ok {
        position: absolute;
        right: -7px;
        top: -7px;
    }

    .inpNuevaPlantilla a.p-absolute.nok {
        position: absolute;
        right: 35px;
        top: -7px;
    }



a.ok-list-plantilla,
a.nok-list-plantilla {
    margin: 0 -2px;
    outline: none;
    width: 40px;
    height: 40px;
    text-align: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.0);
    outline: none;
    box-shadow: none;
    border: 0px;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    line-height: normal;
    font-size: 20px;
    line-height: 40px;
}


    a.ok-list-plantilla:hover,
    a.nok-list-plantilla:hover {
        text-decoration: none;
        outline: none;
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
        font-size: 25px;
    }



a.ok-list-plantilla {
    color: #69a841;
}

a.nok-list-plantilla {
    color: #999;
}

a.ok-list-plantilla {
    position: absolute;
    right: -7px;
    top: -7px;
}

a.nok-list-plantilla {
    position: absolute;
    right: 10px;
    top: -7px;
}




.listadoMisPlantillas .item-plantilla-pz a.name {
    color: #000;
    font-size: 15px;
    width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

    .listadoMisPlantillas .item-plantilla-pz a.name:hover,
    .listadoMisPlantillas .item-plantilla-pz a.name:active,
    .listadoMisPlantillas .item-plantilla-pz a.name:focus {
        color: #006eff;
    }

.armadoColumnas {
    border: 1px solid #d8d8d8;
    padding: 5px 10px 5px 35px;
    background: #fff;
    border-radius: 3px;
    text-transform: uppercase;
    cursor: move;
}


.armadoColumnas {
    background: url(../img/drag.gif) no-repeat 8px 8px;
}


.armadoColumnasInicioCierre {
    border: 1px solid #d8d8d8;
    padding: 5px 10px 5px 15px;
    background: #fff;
    border-radius: 3px;
    text-transform: uppercase;
}



.icons-crear-pz {
    outline: none;
    width: 40px;
    text-align: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.0);
    outline: none;
    box-shadow: none;
    border: 0px;
    -webkit-transition: all 0.1s ease-out;
    -moz-transition: all 0.1s ease-out;
    -ms-transition: all 0.1s ease-out;
    -o-transition: all 0.1s ease-out;
    transition: all 0.1s ease-out;
    line-height: 18px;
    font-size: 18px;
}


    .icons-crear-pz.active {
        color: #3fcfab;
    }

    .icons-crear-pz.inactive {
        color: #d6d6d6;
    }



.inputInCol {
    border: 0px !important;
    box-shadow: none !important;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 13px !important;
}






.empty-col {
    display: block;
    width: 100%;
    margin: 0;
    margin-bottom: 0px;
    padding: 0 15px;
    text-align: center;
    border: 1px dashed #9e9e9e;
    border-radius: 2px;
    margin-bottom: 15px;
}

.popover {
    text-transform: none !important;
}


.cont-col-intermedia-pz {
    padding: 15px 0;
}






.pz-avatar {
    font-weight: 400;
    font-size: 25px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    text-transform: uppercase;
    padding: 0;
    position: relative;
    flex-shrink: 0;
    line-height: 40px;
    font-weight: bold;
    background-color: var(--favPizarraMuestra-fondo);
    color: var(--favPizarraMuestra-texto);
}


.pz-nombre {
    font-weight: 500;
    font-size: 25px;
    line-height: 1.1;
    min-width: 0;
    color: #292d34;
}













/*=============================
 SIDEBAR - VERTICAL Y HORIZONTAL MIS PIZARRAS
 =============================*/

.cbp-spmenu-vertical {
    width: 550px;
    height: 100%;
    top: 0px;
    z-index: 1000;
    bottom: 0px;
    padding-top: 70px;
}

.cbp-spmenu {
    background: #fff;
    position: fixed;
    z-index: 1;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.cbp-spmenu-right {
    right: -550px;
}

    .cbp-spmenu-right.cbp-spmenu-open {
        right: 0px;
    }

/* Transitions */

.cbp-spmenu,
.cbp-spmenu-push {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.cbp-spmenu-push {
    overflow-x: hidden;
    position: relative;
    left: 0;
}

.cbp-spmenu-push-toright {
    right: -450px;
}

/* side bottom*/

.cbp-spmenu-bottom {
    bottom: -285px;
}

    .cbp-spmenu-bottom.cbp-spmenu-open {
        bottom: 0px;
    }

.cbp-spmenu-horizontal {
    width: 100%;
    height: 285px;
    left: 0;
    z-index: 1000;
    overflow: hidden;
}

/* titulo sidenav*/

.title-sidenav {
    border-bottom: 1px solid #dbdbdb;
    padding: 15px;
    display: flex;
    flex-direction: row;
}

    .title-sidenav h3 {
        margin: 0px;
        font-size: 18px;
        font-weight: bold;
    }

    .title-sidenav .title {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 8px;
        width: 1px;
        color: #666;
    }

    .title-sidenav .buttons button {
        color: #666;
        height: 40px;
        line-height: 40px;
        margin: 0 -2px;
        outline: none;
        width: 40px;
        text-align: center;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.0);
        outline: none;
        box-shadow: none;
        border: 0px;
        -webkit-transition: all 0.3s ease-out;
        -moz-transition: all 0.3s ease-out;
        -ms-transition: all 0.3s ease-out;
        -o-transition: all 0.3s ease-out;
        transition: all 0.3s ease-out;
        font-size: 20px;
    }

        .title-sidenav .buttons button:hover {
            background: rgba(0, 0, 0, 0.05);
            text-decoration: none;
            outline: none;
            text-align: center;
            -webkit-transform: rotate(90deg);
            -moz-transform: rotate(90deg);
            -ms-transform: rotate(90deg);
            -o-transform: rotate(90deg);
            transform: rotate(90deg);
        }

#scrollable-container-top-160 {
    position: absolute;
    top: 160px;
    left: 0;
    right: 0;
    bottom: 0px;
    padding: 20px;
}

#scrollable-container-top-150 {
    position: absolute;
    top: 150px;
    left: 0;
    right: 0;
    bottom: 0px;
    padding: 20px;
}

#scrollable-container-top-145 {
    position: absolute;
    top: 150px;
    left: 0;
    right: 0;
    bottom: 50px;
    padding: 20px;
}

.scroll-container-top-145 {
    position: relative;
    height: 100%;
    overflow: hidden;
    ;
}

#scrollable-container-top-225 {
    overflow: auto;
    position: absolute;
    top: 225px;
    left: 0;
    right: 0;
    bottom: 10px;
    padding: 20px;
}

#scrollable-container-top-130 {
    overflow: auto;
    position: absolute;
    top: 130px;
    left: 0;
    right: 0;
    bottom: 0px;
    padding: 20px;
}

#scrollable-container-top-83 {
    overflow: auto;
    position: absolute;
    top: 83px;
    left: 0;
    right: 0;
    bottom: 0px;
}

#scrollable-container-top-75 {
    overflow: auto;
    position: absolute;
    top: 75px;
    left: 0;
    right: 0;
    bottom: 0px;
    padding: 20px;
}


.avatar-pizarra-side {
    border-radius: 25%;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 26px;
    height: 26px;
    position: relative;
    font-weight: bold;
    text-transform: uppercase;
}


#scrollable-container-top-90 {
    overflow: auto;
    position: absolute;
    top: 90px;
    left: 0;
    right: 0;
    bottom: 10px;
    padding: 20px;
}


.bottones-cbp-spmenu-bottom {
    position: absolute;
    bottom: 0px;
    border-top: 1px solid #ccc;
    width: 100%;
    padding: 15px;
}




.ui-sortable {
    float: none !important;
}






.content-wrapper-2 {
    background-color: #444444;
    width: 100%;
    overflow-x: scroll;
}





.filter-by-word {
    position: relative;
}



.cont-button-filter-advance {
}


.button-filter-advance {
    color: #333;
    box-shadow: none;
    font-size: 15px;
    background: transparent;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    padding: 0px;
    font-size: 25px;
    display: block;
}


    .button-filter-advance:hover, .button-filter-advance:focus, .button-filter-advance:active {
        background: #dbdbdb;
        -webkit-transition: opacity 0.2s ease;
        transition: opacity 0.2s ease;
    }


.dropdown.dropdown-lg .dropdown-menu {
    margin-top: 4px;
    padding: 6px 20px;
}

.dropdown.dropdown-lg {
    float: left !important;
}

@media screen and (min-width: 768px) {
    #adv-search {
        width: 500px;
        margin: 0 auto;
    }

    .dropdown.dropdown-lg .dropdown-menu {
        min-width: 500px;
    }
}


.trend-sprint {
    float: left;
}

.options-pz {
    display: block;
    width: 30px;
    height: 30px;
    font-size: 25px;
    text-align: center;
    line-height: 30px;
    background: #2b2b2b;
    border-radius: 50%;
    color: #f2f2f2
}


    .options-pz:hover {
        background: #dbdbdb;
    }



/*
Full screen Modal 
*/

.fullscreen-modal .modal-dialog {
    top: 50px;
    margin: 0;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
}

@media (min-width: 768px) {
    .fullscreen-modal .modal-dialog {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .fullscreen-modal .modal-dialog {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .fullscreen-modal .modal-dialog {
        width: 1170px;
    }
}






/* add new workitem*/


.criticidad-toggle {
    display: inline-block;
    position: relative;
    width: auto;
    height: auto;
    -webkit-transition: transform .3s ease;
    transition: transform .3s ease;
    will-change: filter;
    width: 100px;
}

.criticidad-toggle {
    color: #333 !important;
}


    .criticidad-toggle.c-baja i.zmdi-flag {
        color: #4CAF50 !important;
    }

    .criticidad-toggle.c-media i.zmdi-flag {
        color: #FFC107 !important;
    }

    .criticidad-toggle.c-alta i.zmdi-flag {
        color: #f44336 !important;
    }



    .criticidad-toggle:active {
        -webkit-transform: scale(0.85) rotate(-5deg);
        transform: scale(0.85) rotate(-5deg);
    }

    .criticidad-toggle > .zmdi-flag {
        position: relative;
        z-index: 1;
        font-size: 20px;
        margin-right: 5px;
    }

    .criticidad-toggle > .zmdi-check {
        display: inline-block;
        width: 20px;
        height: 20px;
        position: absolute;
        bottom: 3px;
        right: 18px;
        text-align: center;
        font-size: 18px;
        /*
        background: #ff9800;*/
        color: #3edd91;
        z-index: 3;
        visibility: hidden;
    }

    .criticidad-toggle.criticidad-selected > .zmdi-check {
        visibility: visible;
    }

    .criticidad-toggle.criticidad-ok .zmdi-check {
        background: #23a700;
        visibility: visible;
    }

    .criticidad-toggle input[type=radio] {
        float: none;
        position: absolute;
        top: 22px;
        left: 15px;
        margin: auto;
        right: 0;
        bottom: 0;
        z-index: 0;
        visibility: hidden;
    }






/*contenedor empty flex*/
.contenedoremptyflex {
    margin: 10px auto;
    width: 90%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    background-color: transparent;
    height: 365px;
}




/* boton configuracion color fondo pizarra*/


.change-color-body {
    background-color: var(--body-color) !important;
}

:root {
    --body-color: #f1f1f1;
}

.column-container {
    background-color: var(--columna-color) !important;
}

:root {
    --columna-color: #e1e1e1;
}


.cont-boton-config {
    position: absolute;
    right: 0px;
    height: 30px;
    width: 30px;
}

.boton-config {
    background: #fff;
    height: 30px;
    width: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 20px;
    display: block;
    color: #333 !important;
    border-radius: 3px 0 0 3px;
}



input.colorBkPz[type="color"] {
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    box-shadow: 0px;
    border-radius: 50%;
    outline: none;
    border: 2px solid rgb(235, 235, 235);
    cursor: pointer;
    position: relative
}

.colorBkPz::-webkit-color-swatch-wrapper {
    padding: 0;
}

.colorBkPz::-webkit-color-swatch {
    border: none;
    border-radius: 100%;
}

.colorBkPz::-moz-color-swatch {
    border: none;
    border-radius: 100%;
}

.colorBkPz::-moz-color-swatch-wrapper {
    padding: 0px;
}









/**********************************
detalle deploy
***************************************/

/*-----
ambientes etiquetas
-------*/
.tag-deploy {
    margin-left: 10px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 22px;
    border-radius: .42rem;
    font-size: 1.4rem;
    font-weight: bold;
    background-color: #ebedf3;
    padding: 0px 20px;
    text-transform: uppercase;
}

.tag-qa {
    color: #4DAD32;
    background-color: #E3EFD9;
}

.tag-desa {
    color: #ED6F49;
    background-color: rgb(252, 212, 212);
}

.tag-prod {
    color: #674B85;
    background-color: #DACCED;
}

.tag-staging {
    color: #4581C2;
    background-color: #C3D5E5;
}

.tag-uat {
    color: #62737B;
    background-color: #B8C4C9;
}

.tag-misdeploy {
    color: #964c98;
    background-color: #e9c3eb;
}

.tag-default {
    color: #3b509e;
    background-color: #d8d8ee;
}


.tag-deploy-feed {
    color: #000000;
    background-color: #dbdbdb;
    font-size: 1.1rem !important;
}

/* feedback deploy*/

.mensajeEntranteDeploy_img {
    display: inline-block;
    width: 6%;
}

    .mensajeEntranteDeploy_img img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        margin-top: 23px;
        border: 3px solid #dbdbdb;
        box-sizing: content-box;
    }


.recibido_msg {
    display: inline-block;
    padding: 0 0 0 10px;
    vertical-align: top;
    width: 92%;
}

.recibido_withd_msg {
    margin-left: 15px;
}

    .recibido_withd_msg p {
        background: rgb(226, 226, 226) none repeat scroll 0 0;
        border-radius: 0 8px 8px 8px;
        color: #2b2b2b;
        font-size: 14px;
        margin: 0;
        padding: 5px 10px 5px 12px;
        width: 100%;
    }

    .recibido_withd_msg name {
        color: #242424;
        display: block;
        font-size: 12px;
        margin: 8px 0 0;
    }

.time_date {
    color: #929292;
    display: block;
    font-size: 11px;
}



.comments-form.feedbackdeploycomment .btn-sm {
    float: right;
    position: absolute;
    bottom: 7px;
    right: 20px;
    color: #ffffff;
    box-shadow: none;
    font-size: 15px;
    background: #212121;
    border-radius: 50%;
    width: 35px;
    height: 35px;
}


.btn-respuesta-feed-deploy {
    border: 1px solid #dbdbdb;
    padding: 5px 10px;
    font-size: 12px;
    text-transform: uppercase;
    color: #333;
    display: inline-block;
    display: inline-block;
}

    .btn-respuesta-feed-deploy:hover, .btn-respuesta-feed-deploy:active, .btn-respuesta-feed-deploy:focus {
        color: #6c76d1;
        border: 1px solid #dbdbdb;
        background: #eeeeee;
    }



/*bandeja de deploy*/

.nav-ban-dep {
    padding: 0;
    margin: 0;
    display: block;
    list-style: none;
    line-height: normal;
}

    .nav-ban-dep a {
        color: #333;
    }

    .nav-ban-dep .navi-item {
        margin-bottom: 10px;
    }

        .nav-ban-dep .navi-item .navi-link {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            padding: .75rem 1.5rem;
        }


            .nav-ban-dep .navi-item .navi-link:hover {
                background-color: #f3f6f9;
                color: #3b509e !important;
            }

        .nav-ban-dep .navi-item .navi-text {
            font-weight: bold;
            -webkit-box-flex: 1;
            -ms-flex-positive: 1;
            flex-grow: 1;
        }

    .nav-ban-dep .navi-item {
        padding: 0;
        display: block;
        list-style: none;
        border-radius: .42rem;
    }

    .nav-ban-dep.navi-active .navi-item .navi-link.active {
        background-color: #f3f6f9;
        color: #3b509e !important;
    }



    .nav-ban-dep .navi-icon {
        -webkit-transition: all .15s ease;
        transition: all .15s ease;
        font-size: 20px;
        color: #acabab;
    }

    .nav-ban-dep .navi-item .navi-link .navi-label {
        line-height: 0;
        margin-left: .75rem;
    }


    .nav-ban-dep .label-navi {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 20px;
        font-size: 1.1rem;
    }

    .nav-ban-dep.navi-active .navi-item .navi-link.active .navi-text {
        color: #3b509e !important;
    }

    .nav-ban-dep.navi-active .navi-item .navi-link.active .navi-icon {
        color: #3b509e !important;
    }

.navi-filters .navi-icon {
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
    font-size: 15px;
    border: 3px solid;
    border-radius: 50%;
    width: 12px;
    height: 12px;
}

.navi-filters .navi-link .navi-icon-todos {
    color: #000;
}

.navi-filters .navi-link .navi-icon-losmios {
    color: #964c98;
}

.navi-filters .navi-link .navi-icon-qa {
    color: #4DAD32;
}

.navi-filters .navi-link .navi-icon-desa {
    color: #ED6F49;
}

.navi-filters .navi-link .navi-icon-prod {
    color: #674B85;
}

.navi-filters .navi-link .navi-icon-staging {
    color: #4581C2;
}

.navi-filters .navi-link .navi-icon-uat {
    color: #62737B;
}

.title-filter h2 {
    font-size: 13px;
    text-transform: uppercase;
    padding: 15px;
}


.filter-deploy .column-sort {
    width: 25px;
    height: 25px;
    display: block;
    text-align: right;
    font-size: 20px;
}

.filter-deploy {
    text-align: right;
    display: block;
}



.link-text-deploy-list {
    -moz-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: inset 0 0 0 1px rgba(100,121,143,0.302);
    box-shadow: inset 0 0 0 1px rgba(100,121,143,0.302);
    box-sizing: border-box;
    color: #3b509e !important;
    display: inline-block;
    height: 30px;
    padding: 3px 12px 0 12px;
    margin-right: 8px;
    min-width: 160px;
}

    .link-text-deploy-list:hover {
        background: #f3f6f9;
    }













/*******************
 Preloader en un div
 *****************/

#preloader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(65,85,195,0.5);
    z-index: 9999999;
}

.loader {
    top: 50%;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    position: relative;
    margin: 0 auto;
}

#loader-1:before,
#loader-1:after {
    content: "";
    position: absolute;
    top: -10px;
    left: -10px;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    border: 7px solid transparent;
    border-top-color: #3f4dc6;
}

#loader-1:before {
    z-index: 100;
    animation: spin 1s infinite;
}

#loader-1:after {
    border: 7px solid #f2f2f2;
}

@keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}