html {
    position: relative !important;
    min-height: 100%
}

body {
    padding-top: 50px;
    margin-bottom: 55px;
    background-image: url('../Images/fondo.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #111111;
    color: #989a9e
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-top: 25px;
    padding-bottom: 10px
}

footer {
    width: 100%;
    height: 60px;
    background-color: black;
    color: white;
    /*margin: 20px -5% 0px -5%;*/
    margin: 0px -15px;
    padding: 20px 30px;
    position: absolute;
    bottom: 0
}

fieldset {
    border: 1px solid #ccc; /* Borde gris */
    padding: 10px; /* Espaciado interior */
    margin-bottom: 20px; /* Margen inferior */
    border-radius: 4px;
    border-color: #DA831C;
}

legend {
    font-weight: bold; /* Título en negrita */
    padding: 0 5px; /* Espaciado alrededor del título */
    margin-bottom: 0px;
    border-bottom: none;
    width: auto;
    color: #FFF;
    font-size: 14px
}

.container {
    width: 100% !important
}

.container-content {
    width: 90%;
    margin-right: auto;
    margin-left: auto
}






.navbar-li-last {
    margin-right: 30px !important
}

a:hover {
    cursor: pointer
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input:not(.btn),
select,
textarea {
    color: #fff !important;
    background-color: #1e1e1e !important;
    border: 1px solid #1e1e1e !important;
    -webkit-appearance: caret;
}

.input-group-btn > button {
    border: 1px solid #1e1e1e !important
}

.input-group-addon {
    border: none;
}

input[disabled], select[disabled], textarea[disabled] {
    opacity: 0.6 !important; /* Reduce la opacidad para indicar que están deshabilitados */
}

select {
    width: -moz-available !important; /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available !important; /* Mozilla-based browsers will ignore this. */
    position: relative;
    z-index: 10;
}

.jumbotron{
    background-color: transparent
}

    .jumbotron > h1, .jumbotron > p {
        color: white;
    }

.navbar-brand {
    padding: 6px 10px 5px 30px !important
}

.dropdown-menu > li > a, .navbar-nav > li > a {
    font-size: 16px
}

footer {
    color: white;
    margin: 0px -15px;
    padding: 20px 30px;
    position: absolute;
    bottom: 0
}

table, table th, table tbody tr td {
    border-bottom: 1px solid #4d4d4d !important
}

.table-header, th {
    background-color: #1f1f1f !important;
    color: #fff;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

#browser > td {
    border-top: none !important;
    border-bottom: none !important;
}

table tbody tr td {
    background-color: rgb(42, 42, 42) !important;
    border-left: none !important;
    border-right: none !important;
}

table:not(.table-input) tr:not(#browser):hover td {
    background-color: #44403B !important;
    color: #fff
}

#grv > tbody > tr:not(#browser) > td:hover {
    cursor: pointer
}

#grv > tbody > tr > th {
    min-width: 60px !important;
}

.tableFixHead {
    overflow-y: auto;
    max-height: 69vh;
}

    .tableFixHead thead th,
    .tableFixHead tr.table-header {
        position: sticky;
        top: 0;
        z-index: 999;
    }

table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    padding: 8px 16px;
}

.panel-body > .table-responsive {
    margin: -15px !important;
    scrollbar-width: thin; /* Ancho de la barra de desplazamiento */
    scrollbar-color: rgba(218, 131, 28, 0.6) #1e1e1e; /* Color del pulgar y de la pista */
    -ms-overflow-style: -ms-autohiding-scrollbar; /* Estilo de la barra de desplazamiento */
}

.panel {
    border: 1px solid #2a2a2a !important;
    border-top-right-radius: 6px !important;
    border-top-left-radius: 6px !important;
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.panel-button {
    text-align: right;
    margin-top: 12px
}

.panel-inner > .panel-heading .panel-title > h3 {
    margin-top: 10px
}

.panel-inner > .panel-heading .panel-button {
    margin-top: 4px
}

.checkbox {
    width: 36px !important;
    border-radius: 12px !important
}

#spanTextchkConRecursos{
    font-size: 15px;
    
}

lbchkConRecursos{

}

.linkRegister{
    color: Highlight !important;
}

.login-button{
    text-align: center;
}

.control-label-white {
    color: white;
}

.form-control-register {
    width: 50%;
}

.xml-text-area {
    min-height: 600px;
    font-size: 20px
}

.img-vessel {
    width: -moz-available !important; /* WebKit-based browsers will ignore this. */
    width: -webkit-fill-available !important; /* Mozilla-based browsers will ignore this. */
    max-width: 220px;
    background-color: #1e1e1e;
    border: 1px solid #1e1e1e;
}

/* Modificaciones de estilos Bootstrap */
.navbar-inverse .navbar-nav > li > a {
    color: #fff;
}

.navbar li.dropdown.open > a {
    background-color: rgb(218, 131, 28) !important;
}

.navbar ul.dropdown-menu {
    background-color: #2a2a2a;
}

    .navbar ul.dropdown-menu a {
        color: #989a9e;
    }

        .navbar ul.dropdown-menu a:hover {
            background-color: rgb(218, 131, 28);
            color: #fff;
        }


.panel-info > .panel-heading {
    color: #fff;
    background-color: #111;
    border-color: #111;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.panel-body {
    border: 0px;
}

.panel-footer {
    border-top: 0px;
    border-bottom-right-radius: 2px !important;
    border-bottom-left-radius: 2px !important;
}

.panel-body/*, .modal-body*/ {
    background-color: #2a2a2a;
}

.panel-login, 
.panel-login > .panel-body, 
.panel-login > .panel-heading {
    background-color: rgba(0,0,0,0.5) !important;
    color: #FFFFFF;
}

.panel-footer {
    background-color: rgb(34, 34, 34);
}

.modal-dialog {
    width: 80% !important;
    transform: translate(0%, 15%) !important;
}

.modal-header {
    background-color: #111;
    border-color: #111;
    color: #fff;
    border: 0px !important;
}


#modalHeader > h2, #modalServicesHeader > h2 {
    margin-top: 6px
}

#modalHeader > button, #modalServicesHeader > button {
    height: 23px;
    width: 23px;
    background: #DA831C;
    color: white;
    border: 0px solid #fff;
    border-radius: 4px;
    opacity: 0.8;
    text-shadow: none
}

    #modalHeader > button:hover, #modalServicesHeader > button:hover {
        opacity: 1;
        border: 1px solid #fff;
        background: #F57D28
    }

.modal-header > .close {
    color: #fff;
    opacity: 1
}

.modal-body {
    border-bottom-left-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    background-color: #3a3a3a
}

.modal-footer {
    background-color: rgb(34,34,34);
    border-top: none;
}

#chartdiv > div > svg > g > g:nth-child(2) > g:nth-child(2) > g > g:nth-child(3) {
    display: none;
}

g[role="slider"] > g > path {
    filter: brightness(0.2)
}

a.am5exporting-icon {
    background: #DA831C;
    color: white;
    opacity: 1.0
}

    a.am5exporting-icon:hover {
        background: #F57D28;
        opacity: 1.0;
        border: 1px solid white
    }
    
    .am5exporting-menu-open a.am5exporting-icon,
    .am5exporting-item a:hover {
        background: #F57D28;
    }

ul.am5exporting-list {
    background: #000
}

ul.am5exporting-list > li > a:hover {
    background: #DA831C;
    text-decoration: none
}


.am5exporting-menu path {
    fill: #fff;
}

/*a.am5exporting {
    border: 1px solid white
}*/

.am5exporting-item a {
    color: white !important
}

.btn-default {
    color: #fff;
    background-color: #DA831C;
    border-color: #DA831C;
}

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

    .btn-default:active, .btn-default:focus {
        color: #fff;
        background-color: #DA831C;
        border-color: #DA831C;
        outline: none; /* Eliminar el contorno */
        box-shadow: none; /* Eliminar cualquier sombra */
    }

.btn-success {
    color: #fff;
    background-color: #5cb85c;
    border-color: #5cb85c;
}

    .btn-success:hover {
        color: #fff;
        background-color: #449d44;
        border-color: #fff;
    }

.btn-danger:hover {
    border-color: #fff;
}

.form-control {
    color: #fff !important;
    background-color: #1e1e1e !important;
    border: 1px solid #1e1e1e;
}

    .form-control:focus, .input-group-btn > button:hover, .btn-default:hover {
        border-color: rgb(218, 131, 28);
        outline: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(218, 131, 28, 0.6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(218, 131, 28, 0.6);
    }

/* Establecer el color de fondo en controles que usan selector de Autocompletado. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-text-fill-color: #fff !important;
    border: 1px solid #1e1e1e !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Poner en color blanco el icono de los calendarios en controles input type="datetime" */
::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

select option {
    font-size: 16px;
    padding: 5px
}

/* Establecer el color de un elemento seleccionado en un control desplegable */
select:focus option:checked {
    background: rgb(218, 131, 28) linear-gradient(0deg, rgb(218, 131, 28) 0%, rgb(218, 131, 28) 100%) !important;
}

/* Establecer el estilo hover de los elementos de un desplegable */
option:hover {
    background-color: rgb(218, 131, 28) !important;
    font-weight: bold
    
}

.tableDifferentCell {
    background-color: #DA831C !important;
    color: white
}

.ampopup-content {
    color: white !important;
    border-radius: 4px !important
}

.ampopup-header {
    display: block;
    width: 100%;
    min-height: 2.8em !important;
    background: #111 !important;
    margin-top: -15px;
    border-top: none !important;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.ampopup-close {
    display: block;
    position: absolute;
    top: 0.3em;
    right: 0.3em;
    background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyBoZWlnaHQ9IjUxMiIgdmVyc2lvbj0iMSIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQ0NS4yIDEwOS4ybC00Mi40LTQyLjRMMjU2IDIxMy42IDEwOS4yIDY2LjhsLTQyLjQgNDIuNEwyMTMuNiAyNTYgNjYuOCA0MDIuOGw0Mi40IDQyLjRMMjU2IDI5OC40bDE0Ni44IDE0Ni44IDQyLjQtNDIuNEwyOTguNCAyNTYiLz48L3N2Zz4=) center center / 80% no-repeat rgba(100, 100, 100, 0.1);
    width: 1.2em;
    height: 1.2em;
    cursor: pointer;
    filter: invert(1);
}

.ampopup-inside {
    padding: 1em;
    background-color: #2a2a2a;
}

.ampopup-content {
    overflow: hidden !important;
}


    @media (max-width: 767px) {
        .container-content {
            width: 100%;
        }

        .navbar-li-last {
            margin-right: -15px !important
        }

        .navbar-brand {
            padding: 6px 10px 5px 10px !important;
        }

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

            .panel-title > h2 {
                font-size: 8vw
            }

        .panel-button {
            text-align: center;
            margin-top: 0px
        }

        .tableFixHead {
            max-width: 400px;
        }

        .table-responsive {
            width: inherit;
        }
        
        .img-vessel {
            max-width: 100%;
            margin-bottom: 16px
        }
    }