body {
    /*background-color: #20263c;*/
    background-color: #444;
    padding-top: 20px; /* 60px to make the container go all the way to the bottom of the topbar */ }
a {
    color: #446e9b; }
/*a:hover i {
    text-decoration: underline; }*/
/*a i {
    color: #000; }*/
h3 {
    margin: 0; padding: 0; }
h4 {
    margin-top: 30px; }
h4:first-child,
h5 + h4 {
    margin-top: 0; }

.navbar-static-top, .navbar-fixed-top, .navbar-fixed-bottom {
    height: 40px; }

ul.nav-tabs {
    margin-top: 25px; }

/* Cabecera para todas las aplicaciones */
.subheader {
    /**
    background-color: #142032;
    background: radial-gradient(farthest-side ellipse at 20% 80%, rgba(20, 32, 50, 0.9), rgba(20, 32, 50, 0.75), rgba(20, 32, 50, 0.9)),url("../img/bgnoise_lg_dark.png");
    background: -webkit-radial-gradient(20% 98%, farthest-side ellipse, rgba(20, 32, 50, 0.9), rgba(20, 32, 50, 0.75), rgba(20, 32, 50, 0.9)),url("../img/bgnoise_lg_dark.png");
    background: -moz-radial-gradient(20% 80%, farthest-side ellipse, rgba(20, 32, 50, 0.9), rgba(20, 32, 50, 0.75), rgba(20, 32, 50, 0.9)),url("../img/bgnoise_lg_dark.png");
    **/
    color: #fff;
    padding-bottom: 0!important;
}
.subheader h1 {
    color: #eee; }
.subheader .nav {
    margin-bottom: 0; margin-left: -20px; margin-right: -10px; padding-left: 20px; 
    padding-right: 20px; }
.subheader .nav-tabs:before, .subheader .nav-tabs:after {
    display: block; }
.subheader .nav a {
    color: #ddd; }
.subheader .nav .dropdown-menu a {
    color: #000; }
.subheader .nav a:active,
.subheader .nav a:hover {
    color: #222; }
.subheader .nav .active a,
.subheader .nav .active a:hover,
.subheader .nav .active a.dropdown-toggle,
.subheader .nav .active a.dropdown-toggle:hover {
    background-color: #fff; border-top: 3px solid #f90; cursor: pointer; margin-top: -2px; }
.subheader .nav a:hover,
.subheader .nav a.dropdown-toggle:hover {
    background-color: #ddd; }
.subheader .nav .open a:hover,
.subheader .nav .open a.dropdown-toggle:hover {
    background-color: #999; }
.subheader .nav .open.active a:hover,
.subheader .nav .open.active a.dropdown-toggle:hover {
    background-color: #000; }
.dropdown-menu {
    z-index: 1001; }
.subheader .nav .active ul.dropdown-menu a {
    border-top: none; cursor: pointer; margin-top: 1 }


/* Cabecera para todas las páginas */
.page-header {
    background-color: #fff; margin: 0 0 20px; padding-top: 30px; }
/*
.page-content {
    margin-left: 225px; }*/



.row {
    margin-left: 0;
    margin-right: 0;
}


/* Botón en progreso */
.btn-progress {
    background-image: url(../img/ajax-loader.gif) !important; background-repeat: no-repeat !important;
    background-position: 85% 50% !important; padding-right: 50px !important; }

/* Paginación de tablas */
.pagination ul {
  -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; list-style: none; }
.pagination ul li {
  display: inline-block; }
.pagination ul > li > a,
.pagination ul > li > span {
  border-left-width: 0;
  padding: 8px; }
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
  border-left-width: 1px; }
.pagination ul > li > a:hover,
.pagination ul > .active > a,
.pagination ul > .active > span {
  background-color: #f5f5f5; border-color: #c6c6c6; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
.pagination ul > li > a:active {
  background-image: -moz-linear-gradient(top, #f6f6f6, #f1f1f1);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f6f6f6), to(#f1f1f1));
  background-image: -webkit-linear-gradient(top, #f6f6f6, #f1f1f1);
  background-image: -o-linear-gradient(top, #f6f6f6, #f1f1f1);
  background-image: linear-gradient(to bottom, #f6f6f6, #f1f1f1);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff6f6f6', endColorstr='#fff1f1f1', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-color: #f4f4f4; -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }
.pagination ul > .active > a,
.pagination ul > .active > span {
  color: #4D90FE; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; }
.pagination ul > .disabled > span,
.pagination ul > .disabled > a,
.pagination ul > .disabled > a:hover {
  color: #b3b3b3; border-color: #d9d9d9;
  background-image: -moz-linear-gradient(top, #f5f5f5, #f1f1f1);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f1f1f1));
  background-image: -webkit-linear-gradient(top, #f5f5f5, #f1f1f1);
  background-image: -o-linear-gradient(top, #f5f5f5, #f1f1f1);
  background-image: linear-gradient(to bottom, #f5f5f5, #f1f1f1); background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#fff1f1f1', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); background-color: #f3f3f3;
  -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; text-shadow: none; }
.pagination .disabled a [class^="icon-"] {
  opacity: 0.3; filter: alpha(opacity=30); }
.pagination ul > li:first-child > a,
.pagination ul > li:first-child > span {
  margin-left: 0; -webkit-border-radius: 2px 0 0 2px; -moz-border-radius: 2px 0 0 2px;
  border-radius: 2px 0 0 2px; }
.pagination ul > li:last-child > a,
.pagination ul > li:last-child > span {
  -webkit-border-radius: 0 2px 2px 0; -moz-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; }

/* Mensajes de salida */
p#output,
span#output {
    display: none; margin: 0 0 0 15px; padding: 5px 15px 5px 35px; }
p#output.progress,
span#output.progress {
    background: url("../img/ajax-loading.gif") no-repeat scroll 8px 10px transparent; color: #468847; }
p#output.succesful,
span#output.succesful {
    background: url("../img/succesful16.png") no-repeat scroll 8px 6px #dff0d8; color: #468847; }
p#output.error,
span#output.error {
    background: url("../img/error16.png") no-repeat scroll 8px 6px #f2dede; color: #b94a48; }

#flogin #output {
    margin: 0 0 15px;
}

/* Lista */
h4.list-group-item-heading {
    background-color: #f5f5f5; border: 1px solid #ddd; border-bottom: 0 none; margin: 0;
    padding: 10px 15px; }




.form-control:focus {
    border-color: #446e9b; }
input.required,
select.required,
textarea.required {
    border-left-width:  4px !important; padding-left: 4px;
}
select:focus, 
textarea:focus, 
input[type="text"]:focus, 
input[type="password"]:focus, 
input[type="datetime"]:focus, 
input[type="datetime-local"]:focus, 
input[type="date"]:focus, 
input[type="month"]:focus, 
input[type="time"]:focus, 
input[type="week"]:focus, 
input[type="number"]:focus, 
input[type="email"]:focus, 
input[type="url"]:focus, 
input[type="search"]:focus, 
input[type="tel"]:focus, 
input[type="color"]:focus, 
.uneditable-input:focus{
    
    border-color: #446e9b; }
select.error, 
textarea.error, 
input[type="text"].error, 
input[type="password"].error, 
input[type="datetime"].error, 
input[type="datetime-local"].error, 
input[type="date"].error, 
input[type="month"].error, 
input[type="time"].error, 
input[type="week"].error, 
input[type="number"].error, 
input[type="email"].error, 
input[type="url"].error, 
input[type="search"].error, 
input[type="tel"].error, 
input[type="color"].error, 
.uneditable-input.error {
    border-color: #b94a48 !important; }

.form-warning {
    color: #000; cursor: help; position: absolute; right: 25px; top: 6px; }
.input-group .form-warning {
    color: #000; cursor: help; position: absolute; right: 35px; top: 6px; }
.form-select-warning {
    color: #000; cursor: help; position: absolute; right: 50px; top: 6px; }

.datepicker {
    -moz-border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    border-radius: 0 !important; z-index: 2000;}

.ui-spinner-input {
    border: none;
    background: none;
    color: inherit;
    padding: 0;
    margin: 0;
    vertical-align: middle;
    margin-left: .4em;
    margin-right: 22px;
    border: 0 none;
}
.ui-spinner-input:focus,
.ui-spinner-input:hover {
    border: 0 none;
}

/*.form-horizontal .caption {
    padding-left: 180px;
}
.form-horizontal .caption p {
    color: #777;
    padding-top: 5px;
}*/


/* Pié de página */
#footer {
     border-top: 1px solid #555; color: #808080; margin: 10px 20px; min-height: 100px; padding-top: 20px; }
#footer a {
    color: #808080; }
#footer a:hover {
    text-decoration: underline; }

/* Barra superior */
.navbar-nav a.dropdown-toggle {
    line-height: 28px; }
.navbar-inverse {
    background-color: #3c3c3c; border-top: 0; }
.navbar-inverse .navbar-nav > .dropdown > a:active .caret,
.navbar-inverse .navbar-nav > .dropdown > a:hover .caret {
    border-bottom-color: #ccc; border-top: #ccc; }
.navbar-nav a.dropdown-toggle:active,
.navbar-nav a.dropdown-toggle:hover,
.navbar-nav a.dropdown-toggle:focus {
    background-color: #000 !important; color: #ccc !important; }
.navbar-brand {
    color: #fff !important; font-size: 1.4em; line-height: 28px;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }

/* Diálogos */
.modal {
    display: inline-table !important; }
.modal-header {
    background-color: #3c3c3c;
    background-image: linear-gradient(to bottom, #3C3C3C 0px, #222222 100%);
    background-repeat: repeat-x; border-bottom: 1px solid #eee; border-radius: 4px 4px 0 0;
    padding: 9px 15px;}
.modal-header h3 {
    color: #999; font-size: 1.3em; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }
.modal-body {
    background-color: #fff; margin-top: 30px; }
.modal-footer {
    background-color: #e6e6e6; margin-top: 0; }
.modal-backdrop, .modal-backdrop.fade.in {
    opacity: 0.5; filter: alpha(opacity=50); background: #000; }
.modal #output {
    float: left; margin-left: 0; }
.modal table .form-group {
    margin-bottom: 0; }


/* Sidebar */
.main-content-sidebar {
    background: #fff url(../img/sidebar_left_line.gif) repeat-y 10px 0; }
.row .col-md-3.sidebar {
    background-color: #fff; float: left; margin-right: 40px; padding: 0; width: 200px; }
.row .col-md-3.sidebar.unfixed {
  top: 0 !important; }
.sidebar .nav > li.nav-header {
    font-weight: bold; padding: 5px 10px; } 
.sidebar .nav > li > a {
    display: block; padding: 5px 10px; }


.container {
    border-bottom: 20px;
}

@media (min-width: 1200px)
{
    .container.fluid {
        width: 100%; }
/*    .row [class*="span"] {
        margin-left: 20px; }*/
}

@media (min-width: 980px)
{
    .container.fluid {
        width: 100%; }
/*    .row [class*="span"] {
        margin-left: 20px; }*/
}

@media (max-width: 979px) and (min-width: 768px)
{
    .container.fluid {
        padding: 0 10px; width: 100%; 
    }
    .row .col-md-3.sidebar
    {
        float: none;
        left: 0 !important;
        position: relative !important;
        top: 0 !important;
        width: auto;
        z-index: 0 !important;
    }
    .main-content-sidebar {
        background: none }
    .row .col-md-9.page-content
    {
        padding-left: 0;
        width: auto;
    }
    .page-content
    {
        margin-left: 0;
        padding-left: 0;
    }
}

@media (max-width: 767px) {
/*    body {
        padding-top: 0;
    }
    .subheader {
        margin: -20px;
        padding: 0 20px;
    }*/
    .container.fluid {
        width: 100%;
    }
    .main-content-sidebar {
        background: none }
    .row .col-md-3.sidebar
    {
        float: none;
        left: 0 !important;
        position: relative !important;
        top: 0 !important;
        width: auto;
        z-index: 0 !important;
    }
    .row .col-md-9.page-content
    {
        padding-left: 0;
        width: auto;
    }
    .page-content
    {
        margin-left: 0;
        padding-left: 0;
    }


}

@media (max-width: 480px) {
/*    body {
        padding-top: 0;
    }
    .subheader {
        margin: -20px;
        padding: 0 20px;
    }
    .main-content
    {
        background-image: none;
    }
    .row .col-md-3.sidebar
    {
        float: none;
        width: auto;
    }
    .row .col-md-9.page-content
    {
        padding-left: 0;
        width: auto;
    }
    .page-content
    {
        margin-left: 0;
        padding-left: 0;
    }*/
}




.nav-list li.back
{
    padding-bottom: 10px;
}
.nav-list li.back a
{
    background-color: #f9f9f9;
    color: #333;
}


/** Para encajar los switches en las filas de las tablas ** /
.table th, .table td {
    line-height: 24px;
}
.has-switch {
    position: absolute;
}

*/



body > .navbar .brand:hover {
    text-decoration: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 30px rgba(255, 255, 255, 0.4);
}
.navbar-inverse .brand:hover, .navbar-inverse .nav > li > a:hover, .navbar-inverse .brand:focus, .navbar-inverse .nav > li > a:focus {
    color: #fff;
}
.navbar .brand:hover, .navbar .brand:focus {
    text-decoration: none;
}
body > .navbar .brand {
    color: #999;
    float: right;
    font-weight: bold;
    line-height: 28px;
    margin-left: 0;
    padding: 5px 0;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 30px rgba(255, 255, 255, 0.125);
    transition: all 0.2s linear 0s;
}
body > .navbar .brand > img {
    /*border-right: 1px solid #555;*/
    margin-right: 5px;
    /*padding-right: 10px;*/
    vertical-align: bottom;
    
}
.navbar-inverse .brand {
    color: #999;
}
.navbar-inverse .brand, .navbar-inverse .nav > li > a {
    color: #999;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.navbar .brand {
    color: #777777;
    display: block;
    float: left;
    font-size: 16px;
    font-weight: 200;
    margin-left: -20px;
    padding: 10px 20px;
    text-shadow: 0 1px 0 #FFFFFF;
}





.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
    background-color: #555;
}
.nav-pills.nav-stacked > li.active > a, .nav-pills.nav-stacked > li.active > a:hover, .nav-pills.nav-stacked > li.active > a:focus {
    background-color: #446E9B;
}
.nav-pills > li > h3 {
    color: #555;
    font-size: .9em;
    font-weight: bold;
    padding: 25px 10px 5px;
    text-transform: uppercase;
}
.nav-pills > li:first-child > h3 {
    padding-top: 5px;
}
.nav-pills > li.caption {
    color: #555;
    font-size: .9em;
    font-weight: bold;
    text-transform: uppercase;
    position: relative;
    display: block;
    padding: 12px 10px 10px;
    border-left: 1px solid #eee;
}

.nav-pills > li.caption:after {
    content: " \00BB";
}

.nav-pills > li.caption:first-child {
    border-left: 0 none;
    padding-left: 0;
}

.btn-primary, .btn-primary:hover {
    background-image: linear-gradient(#6D94BF, #446E9B 50%, #3E648D);
}
.btn-primary {
    background-color: #446E9B;
    border-color: #446E9B;
}

.btn-primary, .btn-primary:hover {
    background-image: linear-gradient(#6D94BF, #446E9B 50%, #3E648D);
    background-repeat: no-repeat;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
    background-color: #385A7F;
    border-color: #315070;
}
.blueSlide .ui-slider-range { background: #446E9B; }


.view-grid,
.view-grid-mini {
    list-style: none;
    margin: 0;
    padding:0;
}
.view-grid li {
    display: inline-block;
    margin: 0 20px 20px 0;
    padding: 0;
    vertical-align: top;
    width: 230px;
}
.view-grid-mini li {
    display: inline-block;
    margin: 0 10px 10px 0;
    padding: 0;
    vertical-align: top;
    width: 115px;
}

label.radio {
    font-weight: normal; }


input[type="checkbox"]:checked:after,
.checkbox input[type="checkbox"]:checked:after,
.checkbox-inline input[type="checkbox"]:checked:after {
    content: url("../img/checkmark.png");
}

.progress { margin-bottom: 0; }


/*
 * Callouts
 *
 * Not quite alerts, but custom and helpful notes for folks reading the docs.
 * Requires a base and modifier class.
 */

/* Common styles for all types */
.bs-callout {
  margin: 20px 0;
  padding: 20px;
  border-left: 3px solid #eee;
}
.bs-callout:first-child {
  margin-top: 0;
}
.bs-callout h4 {
  margin-top: 0;
  margin-bottom: 5px;
}
.bs-callout p:last-child {
  margin-bottom: 0;
}

/* Variations */
.bs-callout-danger {
  background-color: #fdf1ef;
  border-color: #dd4b39;
}
.bs-callout-danger h4 {
  color: #c23321;
}
.bs-callout-warning {
  background-color: #fefbed;
  border-color: #f1e7bc;
}
.bs-callout-warning h4 {
  color: #ba9e27;
}
.bs-callout-info {
  background-color: #f0f7fd;
  border-color: #d0e3f0;
}
.bs-callout-info h4 {
  color: #3b86b9;
}
.bs-callout-success {
  background-color: #dff0d8;
  border-color: #a3d48e;
}
.bs-callout-success h4 {
  color: #3c763d;
}

.row .page-header:first-child {
    padding-top: 0;
}


.breadcrumb {
    background: transparent;
    display: inline-block;
    margin: 0 0 5px;
    padding: 0;
}
.breadcrumb > li + li:before {
    content: "\00BB";
}
.breadcrumb > li + li:before {
    color: #CCCCCC;
    content: "\00BB";
    padding: 0 3px 0 3px;
}
.breadcrumb a {
    color: #555;
}
.breadcrumb a:hover {
    color: #446e9b;
    text-decoration: none;
}
.breadcrumb+h1,
.breadcrumb+h2,
.breadcrumb+h3 {
    margin-top: 0;
}


dl.topics {
    margin: 0;
    padding: 20;
}
dl.topics dt {
    padding: 10px 0 0 0;
}
dl.topics dd {
    margin: 0;
    padding: 10px 0 0 0;
}
dl.topics dl {
    margin: 0;
    padding: 0;
}

dl.topics dd:first-child {
    padding-top: 0;
}
dl.topics dd > dl dd {
    padding-left: 20px;
}
dl.topics i {
    color: #777;
}


.highlight {
    background-color: #F7F7F9;
    border: 1px solid #E1E1E8;
    border-radius: 4px;
    margin-bottom: 14px;
    padding: 9px 14px;
}
.highlight pre {
    background-color: rgba(0, 0, 0, 0);
    border: 0 none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
    white-space: nowrap;
}
.highlight pre code {
    color: #333333;
    font-size: inherit;
}
.highlight pre .lineno {
    color: #BEBEC5;
    display: inline-block;
    margin-right: 10px;
    padding-right: 5px;
    text-align: right;
    width: 22px;
}

.piechart {
    height: 150px;
    margin: 0 auto;
    width: 150px;
}
.piechart-container
{
    text-align: center;
}

.piechart-container h3,
.piechart-container h4 {
    margin: 0;
    padding: 4px;
}

tfoot tr td {
    font-weight: bold;
}


.time-load {
    color: #ccc;
    display: block;
    margin-top: 20px;
}


.timeline {
    list-style: none;
    padding: 20px 0 20px;
    position: relative;
    margin-top: 60px;
}

    .timeline:before {
        top: 0;
        bottom: 0;
        position: absolute;
        content: " ";
        width: 3px;
        background-color: #eeeeee;
        left: 50%;
        margin-left: -1.5px;
        margin-top:-100px;
    }

    .timeline > li {
        margin-bottom: 20px;
        position: relative;
    }

        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }

        .timeline > li:after {
            clear: both;
        }

        .timeline > li:before,
        .timeline > li:after {
            content: " ";
            display: table;
        }

        .timeline > li:after {
            clear: both;
        }

        .timeline > li > .timeline-panel {
            width: 50%;
            float: left;
            border: 1px solid #d4d4d4;
            border-radius: 2px;
            padding: 20px;
            position: relative;
            -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
            margin:-100px -70px 30px -80px;
        }

            .timeline > li > .timeline-panel:before {
                position: absolute;
                top: 26px;
                right: -15px;
                display: inline-block;
                border-top: 15px solid transparent;
                border-left: 15px solid #ccc;
                border-right: 0 solid #ccc;
                border-bottom: 15px solid transparent;
                content: " ";
            }

            .timeline > li > .timeline-panel:after {
                position: absolute;
                top: 27px;
                right: -14px;
                display: inline-block;
                border-top: 14px solid transparent;
                border-left: 14px solid #fff;
                border-right: 0 solid #fff;
                border-bottom: 14px solid transparent;
                content: " ";
            }

        .timeline > li > .timeline-badge {
            color: #fff;
            width: 50px;
            height: 50px;
            line-height: 50px;
            font-size: 1.4em;
            text-align: center;
            position: absolute;
            top: 16px;
            left: 50%;     
            background-color: #999999;
            z-index: 100;
            border-top-right-radius: 50%;
            border-top-left-radius: 50%;
            border-bottom-right-radius: 50%;
            border-bottom-left-radius: 50%;
            margin:-100px -30px -30px -25px;

        }

        .timeline > li > #contenido{
            top: 16px;
            left: 50%;
            position: absolute; 
            margin:-75px -30px -30px -25px; 
        }

        .timeline > li.timeline-inverted > .timeline-panel {
            float: right;
        }

            .timeline > li.timeline-inverted > .timeline-panel:before {
                border-left-width: 0;
                border-right-width: 15px;
                left: -15px;
                right: auto;
            }

            .timeline > li.timeline-inverted > .timeline-panel:after {
                border-left-width: 0;
                border-right-width: 14px;
                left: -14px;
                right: auto;
            }

.timeline-badge.primary {
    background-color: #2e6da4 !important;
}

.timeline-badge.success {
    background-color: #3f903f !important;
}

.timeline-badge.warning {
    background-color: #f0ad4e !important;
}

.timeline-badge.danger {
    background-color: #d9534f !important;
}

.timeline-badge.info {
    background-color: #5bc0de !important;
}


.timeline-badge.show {
    background-color: 8a8c8d !important;
    cursor:pointer;   
    margin-top:15px !important;
    cursor:pointer;
}


.timeline-title {
    margin-top: 0;
    color: inherit;
}

.timeline-body > p,
.timeline-body > ul {
    margin-bottom: 0;
}

    .timeline-body > p + p {
        margin-top: 5px;
    }

@media (max-width: 767px) {
    ul.timeline:before {
        left: 40px;
    }

    ul.timeline > li > .timeline-panel {
        width: calc(100% - 90px);
        width: -moz-calc(100% - 90px);
        width: -webkit-calc(100% - 90px);
    }

    ul.timeline > li > .timeline-badge {
        left: 15px;
        margin-left: 0;
        top: 16px;
        margin:0px;
    }

    ul.timeline > li > .timeline-panel {
        float: right;
        margin:0px;
    }

        ul.timeline > li > .timeline-panel:before {
            border-left-width: 0;
            border-right-width: 15px;
            left: -15px;
            right: auto;
        }

        ul.timeline > li > .timeline-panel:after {
            border-left-width: 0;
            border-right-width: 14px;
            left: -14px;
            right: auto;
        }
}