@import url("https://fonts.googleapis.com/css?family=Roboto:400,500");

:root {
    --nav-color-black: #393939;
    --dashboard-color: rgba(22,22,49,1);
    --first-orange-color: #ffa62d;
    --black-first-color: #565656;
    --black-second-color: #565656;
    --gray-first-color: #c0c0c0;
    --gray-second-color: #f3f3f3;
    --gray-third-color: #848484;
    --gray-fourth-color: #b1b1b1;
    --gray-five-color: #b1b1b1;
    --red-first-color: #f15a5b;
    --purple-first-color: #8e66ac;
    --green-first-color: #8dce72;
    --blue-first-color: #273996;
    --blue-second-color: #084b7e;
}
/*General functions*/

/*html, body {
    padding-top: 0px !important;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    background-color:#27b89b!important;
}*/

body {
    background: rgba(22,22,49,1);
    font-family: "Roboto", sans-serif;
    font-size: 15px;
    margin: 0;
    overflow-x: hidden;
    padding-top: 0px !important;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    background-color: #161d31 !important;
}

.body-bg {
    background: var(--green-first-color) !important;
}


.alert-background {
    background-color: #fe0000 !important
}

html {
    overflow-x: hidden;
    position: relative;
    min-height: 100%;
    background: rgba(22,22,49,1);
    padding-top: 0px !important;
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.content-header {
    padding-left: 0px !important;
    padding-right: 0px !important;
    background: #565656 !important;
}

.title-section {
    font-size: 14px;
    color: var(--black-first-color) !important;
    font-family: flexo-thin;
}

/*Login*/
.card-login {
    width: 370px
}

.btn-login {
    background: var(--dashboard-color);
    border: none;
    width: 100%;
}

    .btn-login:hover {
        background: var(--dashboard-color) !important;
    }


/*Panel On going production*/
.active-background {
    background-color: white;
}




.text-white {
    color: white;
}

.text-white-footer {
    color: white;
    font-size: 9px;
}

.text-color-green {
    color: #2a8372;
}

.Leftpanel {
    background-color: white;
    margin-right: 10px;
    padding-left: 0px !important;
    padding-right: 0px !important;
}

.Rightpanel {
    background-color: white;
    margin-left: 10px
}

.menuRightpanel {
    background-color: var(--one-color);
    height: 817px;
}



.tab-dashboard {
    border-left: none;
    background-color: green;
}


#card {
    border: none;
}


.a-workstation {
    height: 10%;
    padding-top: 21px !important;
    font-size: 16px;
    padding-left: 18px !important;
    border-bottom: 4px solid white !important;
    background: #f3f3f3 !important;
    border-top: 0px !important;
    border-left: 0px !important;
    border-right: 0px !important;
    font-size: 14px;
    color: black !important;
    font-family: flexo-thin;
    padding-right: 0px !important;
    font-weight: bold;
}

.nav-right-menu {
    width: 100%;
    height: 8%;
    font-family: 'flexo-thin';
    color: black !important;
    font-weight: bold;
    padding: 16px 0px 0px 2px;
    text-decoration: none !important;
    border-bottom: 3px solid white
}

/******+
  General
*/
/*Margin*/
.m-5 {
    margin: 5px;
}

.m-10 {
    margin: 10px;
}

.m-15 {
    margin: 15px;
}

.m-20 {
    margin: 20px;
}

/*Margin-left*/
.ml-5 {
    margin-left: 5px;
}

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

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

.ml-20 {
    margin-left: 20px;
}
/*Margin-right*/
.mr-5 {
    margin-right: 5px;
}

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

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

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

/*Margin-top*/
.mt-5 {
    margin-top: 5px;
}

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

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

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


/******+
    FONT
*/
@font-face {
    font-family: 'flexo-thin';
    src: url('../fonts/NemakFonts/flexo-thin.ttf') format('truetype');
}

/******+
    Nav main
*/
.navbar {
    margin-bottom: 0px;
    border-bottom-width: 0px;
    padding-bottom: 0px;
    border-top-width: 0px;
    padding-top: 0px;
    background: #393939 !important;
    border-radius: 0px !important;
}

.navbar-icons {
    color: #878787;
    font-size: 39px;
    padding-left: 10px 0px 3px 24px;
    padding-top: 6px;
    padding-left: 30px;
    padding-bottom: 9px;
}

/******+
    Nav left
*/
.main-navbar-ul {
    background: #484848;
}

.main-navbar-li {
    height: 94px;
    border-right: 1px solid #5d5d5d;
    padding: 1px 10px 10px 10px;
    font-family: flexo-thin;
}

.main-navbar-title {
    display: block;
    color: ghostwhite;
    font-size: 32px;
    padding: 0px 20px 0px 20px;
}

.main-navbar-subtitle {
    display: block;
    color: ghostwhite;
    font-size: 12px;
    padding: 0px 20px 0px 20px;
}

/******+
    Nav right
*/
.main-navbar-right {
    display: flex !important;
    float: right !important;
    padding: 0;
}

.main-navbar-right-pointer:hover {
    cursor: pointer;
    background-color: #484848;
}


/******+
    Main column left
*/
.tab-title {
    color: var( --green-first-color);
    font-size: 14px;
    font-family: flexo-thin;
    font-weight: bold;
    width: 100% !important;
}

.label-group {
    margin-top: 5px;
    margin-bottom: 5px;
    display: block;
}

.label-title-group {
    color: gray;
    font-size: 12px;
    font-family: flexo-thin;
    display: block;
}

.label-title-content {
    color: black;
    font-size: 14px;
    font-family: flexo-thin;
    display: block;
}

.tabpanel-li {
    padding: 0px !important;
    width: 50%;
}

    .tabpanel-li a {
        width: 140px;
        border-left-width: 0px;
        border-top-width: 0px;
        border-right-width: 0px;
        border-bottom-width: 0px;
        margin-right: 0px;
    }



/******+
    Disponibilidad - Información
*/
/*Inicio gráfica disponibilidad*/
#Grafica_Disponibilidad {
    height: 380px;
}

.highcharts-figure-graph, .highcharts-data-table table {
    min-width: 100px;
    max-width: 300px;
    margin: 0em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #EBEBEB;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}
/*Fin gráfica disponibilidad*/
/*Inicio estilos de disponibilidad*/
.panel {
    padding: 0px 0px;
    width: auto;
    height: auto;
}

.shadow-card {
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.buttons-panel {
    padding-top: 5px;
    padding-bottom: 5px;
}



.switchBtn {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 34px;
}

    .switchBtn input {
        display: none;
    }

.slide {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #2b8473;
    -webkit-transition: .4s;
    transition: .4s;
    padding: 8px;
    color: #fff;
}

    .slide:before {
        position: absolute;
        content: "";
        height: 25px;
        width: 15px;
        left: 30px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slide {
    background-color: #877d93;
    padding-left: 40px;
}

input:focus + .slide {
    box-shadow: 0 0 1px #01aeed;
}

input:checked + .slide:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    left: -20px;
}

/*Slider peronalizado*/
.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: #f3f3f3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

    .slider:hover {
        opacity: 1;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 20px;
        height: 20px;
        background: #15bc9d;
        cursor: pointer;
        border-radius: 2px;
    }

    .slider::-moz-range-thumb {
        width: 12px;
        height: 12px;
        background: #4CAF50;
        cursor: pointer;
    }


.title {
    font-size: calc(88%);
    color: black !important;
    font-family: flexo-thin;
}

.labels {
    font-size: 12px;
    color: black !important;
    padding-right: 246px;
}



/*Fin estilos de disponibilidad*/


/*Configurations */


/*Configurations*/

/*General */
.btn-g_accept {
    background: var(--blue-first-color) !important;
    border: none !important;
    font-family: flexo-thin !important;
    font-size: 12px !important;
    font-weight: bolder !important;
    border-radius: 3px !important;
    height: 34px !important;
    color: white !important;
}

.title-table {
    text-align: center !important;
    font-size: 14px !important;
    background: rgb(86,86,86);
    color: white !important;
    font-weight: bold !important;
}

.font-color-table {
    color: var(--gray-third-color);
}

.i-g {
    color: var(--blue-first-color) !important;
    font-size: 14px !important;
    cursor: pointer !important;
}

.i-g_accept {
    cursor: pointer;
    color: var(--dashboard-color) !important
}

.i-g_cancel {
    cursor: pointer;
    margin-left: 15px;
    color: #f15a4b !important
}

.position-modal {
    position: fixed !important;
    width: 100px !important;
    height: 100px !important;
    margin: 0 auto !important;
    display: table !important;
    position: absolute !important;
    left: -108px !important;
    right: -2px !important;
    top: 565% !important;
    -webkit-transform: translateY(-50%) !important;
    -moz-transform: translateY(-50%) !important;
    -ms-transform: translateY(-50%) !important;
    -o-transform: translateY(-50%) !important;
    transform: translateY(-50%) !important;
}

.w-modal {
    width: 664px !important;
}

.header-modal {
    background: var(--black-first-color) !important;
    color: aliceblue !important;
}

.title-modal {
    font-size: 18px;
    font-family: flexo-thin;
}

.close-modal {
    background-color: #cccccc !important;
    width: 23px !important;
    height: 23px !important;
    padding: 1px 0px 0px 6px !important;
}

.body-modal_text {
    font-family: 'flexo-thin' !important;
    color: black !important;
}

.btn-modal_accept {
    background: var(--dashboard-color) !important;
    border: none !important;
    font-family: flexo-thin !important;
    font-size: 12px !important;
    font-weight: bolder !important;
    border-radius: 3px !important;
    height: 40px !important;
    color: white !important;
}

    .btn-modal_accept:hover {
        background: var(--dashboard-color) !important;
    }

.btn-modal_cancel {
    background: #fc5858 !important;
    border: none !important;
    font-family: flexo-thin;
    font-size: 12px !important;
    font-weight: bolder !important;
    border-radius: 3px !important;
    height: 40px !important;
    color: white !important;
}

    .btn-modal_cancel:hover {
        background: #fa7a7a !important;
    }


label {
 /*   font-family: flexo-thin;
    font-weight: bold;*/
}

input {
   /* font-family: flexo-thin !important;*/
   /* font-weight: 600 !important;*/
  /*  color: var(--gray-third-color) !important;*/
}

select {
    font-family: flexo-thin !important;
    font-weight: 600;
    color: var(--gray-third-color) !important;
}

    select option {
        font-family: flexo-thin !important;
        font-weight: 600;
        color: var(--gray-third-color);
    }

.font-title {
    font-size: 18px;
}

.font-subtitle {
    font-size: 14px;
}

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

/*.btn:hover {
    box-shadow: 3px 3px 5px #999;
}*/
.shadow-link:hover {
    box-shadow: 3px 3px 5px #999;
    text-decoration: none;
}

.shadow-graph:hover {
    box-shadow: 5px 0px 5px -3px #999;
    text-decoration: none;
}
/*General*/
/******+
    Media query 1280px
*/
@media (max-width: 1280px) {
    .main-navbar-right {
        display: flex !important;
        float: left !important;
        border-top: 1px solid #5d5d5d;
    }
}


@media (max-width: 1550px) {
    #A8 {
        padding-top: 2px !important;
    }
}


/* Estilos Pareto */
.arrow-double-left_btn {
    position: absolute;
    top: 11px;
    left: 300px;
    font-size: 19px;
    background: lightgrey;
    padding: 4px;
    border-radius: 5px;
    cursor: pointer;
}

.arrow-one-left_btn {
    position: absolute;
    top: 11px;
    left: 333px;
    font-size: 19px;
    background: lightgrey;
    padding: 4px;
    border-radius: 5px;
    cursor: pointer;
}

.arrow-double-right_btn {
    position: absolute;
    top: 11px;
    left: 685px;
    font-size: 19px;
    background: lightgrey;
    padding: 4px;
    border-radius: 5px;
    cursor: pointer;
}

.arrow-one-right_btn {
    position: absolute;
    top: 11px;
    left: 658px;
    font-size: 19px;
    background: lightgrey;
    padding: 4px;
    border-radius: 5px;
    cursor: pointer;
}

.posicionFechaPareto {
    position: absolute;
    top: 7px;
    left: 364px;
}