/*Timeline date*/

.date_form {
    padding-bottom: 25px;
    width: 50%;
}
input[type="date"] {
    position: relative;
    padding: 10px 20px 10px 15px;
    font-size: 1rem;
    margin-top: 6%;
    font-family: monospace;
    border: 1px solid #8292a2;
    border-radius: 2.25rem;
    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='22' viewBox='0 0 20 22'%3E%3Cg fill='none' fill-rule='evenodd' stroke='%23688EBB' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' transform='translate(1 1)'%3E%3Crect width='18' height='18' y='2' rx='2'/%3E%3Cpath d='M13 0L13 4M5 0L5 4M0 8L18 8'/%3E%3C/g%3E%3C/svg%3E") right 1rem center no-repeat;
    cursor: pointer;
}
input[type="date"]:focus {
    outline: none;
    border-color: #3acfff;
    box-shadow: 0 0 0 0.25rem rgba(0, 120, 250, 0.1);
}

::-webkit-datetime-edit-month-field:hover, ::-webkit-datetime-edit-day-field:hover, ::-webkit-datetime-edit-year-field:hover {
    background: rgba(0, 120, 250, 0.1);
}
::-webkit-datetime-edit-text {
    opacity: 0;
}
::-webkit-clear-button, ::-webkit-inner-spin-button {
    display: none;
}
::-webkit-calendar-picker-indicator {
    position: absolute;
    width: 2.5rem;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    cursor: pointer;
    color: rgba(0, 120, 250, 1);
    background: rgba(0, 120, 250, 1);
}
input[type="date"]:hover::-webkit-calendar-picker-indicator {
    opacity: 0.05;
}
input[type="date"]:hover::-webkit-calendar-picker-indicator:hover {
    opacity: 0.15;
}
.btn-timeline {
    background-color: #3f9e22;
    border: 1px solid #3f9e22;
    color: white;
    margin-top: 6%;
}
.btn-timeline:hover {
    background-color: white;
    color: #3f9e22;
    border-color: #3f9e22;
}

.btn-reiniciar {
    background-color: #225c9e;
    border: 1px solid #225c9e;
    color: white;
    margin-top: 6%;
}
.btn-reiniciar:hover {
    background-color: white;
    color: #225c9e;
    border-color: #225c9e;
}

.highcharts-tooltip table th {
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    border-bottom: 1px solid silver;
}

#container {
    width: 100%;
    height: 400px;
    margin: 0px auto !important;
}

.timeline-container {
    margin-bottom: 20px;
}
/*Responsive Timeline*/

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
    #timeline {
        width: 100%;
        height: 400px;
    }
}
/* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */

@media (min-width: 1025px) and (max-width: 1280px) {
    #timeline {
        width: 100%;
        height: 400px;
    }
}
@media (min-width: 768px) and (max-width: 1024px) {
    #timeline {
        width: 100%;
        height: 400px;
    }
}
/* 
    ##Device = Tablets, Ipads (landscape)
    ##Screen = B/w 768px to 1024px
  */

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    #timeline {
        width: 100%;
        height: 400px;
    }
}
/* 
    ##Device = Low Resolution Tablets, Mobiles (Landscape)
    ##Screen = B/w 481px to 767px
  */

@media (min-width: 481px) and (max-width: 767px) {
    #timeline {
        width: 100%;
        height: 400px;
    }
}
/* 
    ##Device = Most of the Smartphones Mobiles (Portrait)
    ##Screen = B/w 320px to 479px
  */

@media (min-width: 320px) and (max-width: 480px) {
    #timeline {
        width: 100%;
        height: 400px;
    }
}

.highcharts-credits {
    display: none !important;
}

.status-content {
    display: flex;
    flex-direction: row;
    font-size: 14px;
}

.status-content .dot {
    height: 15px;
    width: 15px;
    margin-left: 15px;
    margin-right: 5px;
    border-radius: 50%;
    display: inline-block;
}

.status-content .one {
    background-color: #3f9e22;
}

.status-content .two {
    background-color: #B66019;
}

.status-content .three {
    background-color: #031F30;
}

.status-content .four {
    background-color: #b61919;
}

.status-content .five {
    background-color: #737373;
}