* { /* word-break:break-all; */
    font-family: 'Times New Roman', Times, serif;
    padding: 0px;
    margin: 0px;
    text-decoration: none;
   }
    html {
        box-sizing: border-box;
        height: 100%;
        width: 100%;

    }

    header {
        /*background-color: #AACA43;*/
        background-color: #D4FF00;
        background-image: url("../img/lancha2.png");
        background-position: right top;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
        height:auto;
       
        
    }

    .header::before {
        content: "";
        position: absolute;
        top: 0px;
        right: 0px;
        bottom: 0px;
        left: 0px;
        background-color: rgba(0,0,0,0.25);
        background-size: cover;
    }

    body {
        height: 100%;
        width: 100%;
    }

    .scroll-bar {
            margin: 4px, 4px;
            padding: 4px;
            
            width: 100%;
            height: 600px;
            overflow-x: auto;
            overflow-y: scroll;
       
        }
    
   .program-trip{

        margin-right: 30px;
        width: 400px;
   }

    
    .links { 
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-decoration: none;
        font-weight: bolder;
        color: #031251;
        cursor: pointer;
        margin-left: 40px;
        
       
    }

    .links:hover { 
        color: #D4FF00;
    }
    
    .links-profile {
        text-decoration: none;
        font-weight: bolder;
        color: #031251;
        cursor: pointer;

    }

    /*-------- */
    .loadership_LHFMT {
        display: flex;
        position: relative;
        justify-content: center;
        width: 40px;
        height: 40px;
      }
      
    .loadership_LHFMT div {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 40px;
        height: 40px;
        border: 10px solid #40404033;
        border-radius: 50%;
      }
      
    .loadership_LHFMT div:nth-child(2) {
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 20%);
        animation: loadership_LHFMT_spin 1.2s infinite;
        animation-timing-function: linear;
        border: 10px solid #838383;
      }
      
      @keyframes loadership_LHFMT_spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

.fuentes-size{

    font-size: 1.42rem;
    word-break:break-all;
    
}
 
.boton-trip {

    margin: 2px; 
    margin-top: 10px; 
    width: 100%; 
    background-color: #031251;
    border-radius: 15px; 
    color: #FFFFFF;
}
.boton-trip:hover {

    background-color: #D4FF00;
    color: #031251;
}

.inicio-sesion {

       
        text-align: center;
        width: 640px;
       
        padding: 30px;

        background-color: #FFFFFF;
        color: #B0D0F5;
        
        border-radius: 10px;
        margin-top: 15px;
        box-shadow: 0em 0em .9em .2em #a1a1a1;
       
    }

.scrollingInX {
    
    width: 100%;
    height: 100%;
    overflow-x: scroll;
    
}



.password-toggle-icon {
    position: relative;
    top: -40px;
    right: -45%;
    
    cursor: pointer;
  }
  
  .password-toggle-icon i {
    font-size: 18px;
    line-height: 1;
    color: #333;
    transition: color 0.3s ease-in-out;
    margin-bottom: 20px;
  }
  
  .password-toggle-icon i:hover {
    color: #000;
  }



/* WAVES PROGRAM A TRIP*/
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:wght@300;400;500;600;800&display=swap');

*, *:before, *:after{
  margin:0;
  padding: 0;
  box-sizing:border-box;
}
.circle{
  
  top: 25px;
 /* left: 20%;
  transform: translate(-50%, -50%);*/
  width: 75px;
  height: 75px;
  border: 5px solid #FFFFFF;
  box-shadow: 0 0 0 5px #031251;
  border-radius: 50%;
  overflow: hidden;
}
.wave{
  position: relative;
  top: 0;
  width: 100%;
  height: 100%;
  background: #2C74B3;
  border-radius: 50%;
  box-shadow: inset 0 0 50px 0 rgba(0, 0, 0, 0.5);
}
.wave:before,
.wave:after{
  content:'';
  position: absolute;
  top: 0;
  left: 50%;
  width: 200%;
  height: 200%;
  background: black;
  transform: translate(-50%, -75%);
}
.wave:before{
  border-radius: 45%;
  background: rgba(255, 255, 255, 1);
  animation: animate 5s linear infinite;
}
.wave:after{
  border-radius: 40%;
  background: rgba(255, 255, 255, 0.5);
  animation: animate 10s linear infinite;
}

@keyframes animate{
  0%{
    transform: translate(-50%, -75%) rotate(0deg);
  }
  100%{
    transform: translate(-50%, -75%) rotate(360deg);
  }
}




.loading-spinner{
  width:30px;
  height:30px;
  border:2px solid indigo;
  border-radius:50%;
  border-top-color:#0001;
  display:inline-block;
  animation:loadingspinner .7s linear infinite;
}
@keyframes loadingspinner{
  0%{
    transform:rotate(0deg)
  }
  100%{
    transform:rotate(360deg)
  }
}



/*

--- --- ---       ---\\\        ///---
--- --- ---\\\    --- \\\      /// ---
---         \\\   ---  \\\    ///  ---
---         |||   ---   \\\  ///   ---
--- --- -- ///    ---    \\\///    ---
--- --- ---       ---              ---
---               ---              ---
---               ---              ---
---               ---              ---

*/

/* ----------- CELLPHONE ----------- */



@media screen and (max-device-width: 480px) { 
    /*----- LOGIN -------*/

    header {
        width: 100%;
       

    }

    .side-menu {
        
        display: block;

    }

    .side-menu2 {
        display: none;

    }
    
    
    .reordenarLineas {
        
        display: block; 
        width: 100%; 
        
    }


    .reordenarLineas2 {
        width: 100%; 
        padding: 30px;
        border-bottom-right-radius: 0px; 
        border-bottom-left-radius: 0px;
        }
   
   
    .centrar {
        
        margin: 0 auto;
        margin-left: 80px;
    }
    
    .links {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-decoration: none;
        font-weight: bolder;
        color: #031251;
        cursor: pointer;
        margin-right: 65px;
        margin-left: 40px;
        
    }
   
   
    .toast {
        display: none;
        position: relative;
        justify-content: end;
        z-index: 2;
        text-align: right;
        width: 10%;
    }

    .menu-boton {
        font-size:12px; 
        background-color: #FFFFFF;
        padding: 0px;
        margin: 0px;

    }

    .menu-boton:hover {
        
        background-color: #C2E641;
        

    }

    .fondo { 
        
        display: block;
        

        background-color: #D4FF00;
        background-repeat: no-repeat;
        
        
        width: 100%;
        
        
    }

    .elmain {
        height: 100%;
        width: 100%;

    }
   
    .back-green {
        display: flex;
        justify-content: center;
        align-items: center;
        
        
    }


    .sesion-texto {
        width: 100%;
        text-align: start;
        margin-top: 10px;
        color: #42549C;
        font-weight: bolder;
    }

    .sesion-texto a{
        color: #FFFFFF;
    }

    #user-texto, #password-texto {
        width: 100%;
        background-color: #B0D0F5;
        margin-top: 10px;
        padding: 20px;
        border-radius: 10px;
        border-style: none;
        

    }

    #boton-inicio {
        border-radius: 10px;
        background-color: #031251;
        color: #FFFFFF;
        font-weight: bolder;

        width: 160px;
        margin-top: 10px;
        padding: 10px;

    }

    .footdown {

        position: absolute;
        bottom: 0;
        width: 100%;
        height: 2.5rem;  
        background-color: #031251;
        
    }

    .centrar-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        
        color: #031251;
    }

    /*PROGRAM A TRIP DESIGN*/
    #notes, #Notes, .texto-info {

        border-style: solid;
        border-color: grey;
        padding: 10px;
    
        

        
    }

    #notes label, #Notes label {
        position: relative;
        top: -30px;
        background-color: #FFFFFF;
        padding-right: 10px;
        padding-left: 10px;

    }


    /*SIDE BAR DESIGN*/

    .side-bar-design{
        
        width: 100%; 
        text-align: left; 
        padding: 10px;
        font-weight: bolder;
        


    }

    .side-bar-design a{
        color: #031251;
    }

    .side-bar-design:hover{

        background-color: #D4FF00;
        
        cursor: pointer;
    }

    .side-bar-design:hover a{

        
        color: #FFFFFF;
        cursor: pointer;
    }





    /*GREEN BANNER PROGRAM A TRIP*/


    .banner-form {
        /*display: flex;*/
        position: relative;

        width: 100%; 
        height: 100px;
        background-color: #D4FF00;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;

        /*justify-content: space-between;*/

    }

    .cerrar-boton {
        display: flex;
        position: absolute;
        width: 60px;
        height: 100%;
        z-index: 2;
        border-top-left-radius: 25px;
        border-bottom-right-radius: 25px;
        background-color: #031251;
        justify-content: center;
        align-items: center;
    }



    /*----- BUTTON TRIP -----*/
    .title-form {
       
        display: block; 
        width: 100%; 
        text-align: center; 
        margin-top: 0px;
        
    }
    /*----- BUTTON TRIP -----*/

    /*DELETE TRIP*/
    /*--------------- MENU - TRAVEL PAGE -----------------*/
    .buttonBurger {
        display: block;
        text-decoration: none;
        border: none;
        background-color: #FFFFFF;
        cursor: pointer;

    }
    .buttonBurger:hover {
        text-decoration: none;
        border: none;
        background-color:#D4FF00;
        cursor: pointer;
        border-radius: 15px;

    }

    .barra-diseno {
        display: block;
        text-align: center;
        border-style: 1px solid;
        border-color: #031251;
        border-radius: 50px;
        
        width: 100%;

 
    }


    input[type='checkbox'] {
        
        width:20px;
        height:20px;
        padding: 0px;

        margin: 0px;

    }

    /* PROGRAM A TRIP */
    .row {
        display: flex; /* equal height of the children */
        flex-direction: column;
        padding-left: 15px;
        padding-right: 15px;
        
        padding-bottom: 10px;
       
      }
      
    .col {
        flex: 0; /*additionally, equal width */

        
      }

    .columnita {
        width: 100%;
    }

    /* LUZ PARPADEANTE */
    @keyframes blink-effect {
        
       50% {
          opacity: 0;
        }
      }
      
    .dots { /*In Progress*/
        border-radius: 100px;
        background-color: rgb(248, 203, 4);
        width: 15px;
        height: 15px;
      }
    
    .dots2 { /*Pending */
        border-radius: 100px;
        background-color: rgb(22, 190, 212);
        width: 15px;
        height: 15px;
      }
    
    .dots3 { /*Cancel*/
        border-radius: 100px;
        background-color: rgb(212, 44, 22);
        width: 15px;
        height: 15px;
      }
    
    .dots4 { /*Complete*/
        border-radius: 100px;
        background-color: rgb(22, 212, 28);
        width: 15px;
        height: 15px;
      }
      
    .blink {
        animation: blink-effect 1s step-end infinite;
      
        /*
        animation-name: blink-effect;
        animation-duration: 1s; 
        animation-iteration-count:infinite;
        animation-timing-function:step-end;
        */
    }



   
    
    #topnav {
        display: block;
        /*justify-content: space-between;
        align-items: center;*/
        color: #FFFFFF;
        float: left;
        width: 100%;
        /*margin-left: 40px;*/
        margin-right: 20px;
        margin-bottom: 70px;  

    }

    #myLinks2 {
        display: none;
        justify-content: end;
        align-items: center;
        color: #FFFFFF;
        float: right;
        width: 100%;
        height: 50px;
        /*margin-left: 40px;*/
        margin-right: 20px;
        

    }

    #myLinks {
        /*float: right;*/
        margin-left: 20px;
        margin-right: 20px;
        
    }
    
    #elTitulo {
        display: none;
    }

    .white-bg {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        background-color: #FFFFFF;
        padding:  20px 5px 20px 5px;
        width: 100%;
        height: 80px;

    }
    .burger-nb {
        margin:10px;
        

    }
    .view-nb {
        margin: 0px;
        background-color: #B0D0F5;

    }
    .dots-nb {
        margin: 0px;
        background-color: #B0D0F5;

    }

    

    #v-next, #v-complete, #v-hour, #v-invoice, #v-profile, #v-editprofile, #v-setting, #v-logout {
    
        display: none;
    }
   
    .menu {
        display: flex;
        justify-content: start;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 85px;
      /*  background-color: #AACA43;   */
        
    }

    .lista-menu2 {
        display: flex;
        justify-content: start;
        align-items: center;
        
        width: 100%;
        height: 80px;
        
        
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        
    }


    .perfil {
        width: 100%;
    }

    .icon {
        display: none;
    }

    #profile-user {

        background-color: #FFFFFF;
        /*margin-left: 200px;*/
        padding: 10px;
        border-radius: 100px;
        border-style: solid 5px;
        border-color: #031251;


    }

  
    
    
    /*-------- ESPACIO PRINCIPAL DE TRABAJO --------*/
   

    .b-lateral {
        display: none;
        border-top-right-radius: 10px;
        
    }

    .b-lateral.open{
        display: block;
        position: absolute;
        z-index: 2;
        background-color: #FFFFFF;
        width: 100%;
        height: 4000px;
        float: left;
        padding: 10px;
    }

    
     .fondo-principal {
        padding: 0px;
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 100%;
        float: left;
        background-color: #FFFFFF;
    }

    .boton-cerrar {
       
        padding: 5px 10px 5px 10px;
        /*margin-top: 20px;
        margin-left: 20px;*/
        border-style: none;
        /*border-radius: 100px;
        background-color: #AACA43;*/
        color: #FFFFFF;
       
        border-top-left-radius: 25px;
        border-bottom-right-radius: 25px;
        background-color: #031251;
        
        
    }

    
    .boton-cerrar:hover {
       /* padding: 5px 10px 5px 10px;*/
        
        border-style: none;
        border-top-left-radius: 25px;
        border-bottom-right-radius: 25px;
        width: 100%;
        height: 100%;
        background-color: #cadff6;
        
        transition: 0.3s;
    }

    .table-description {
        display: inline-flex;
        align-items:center;
        justify-content: flex-start;
        width: 100%;
        height: 60px;
        background-color: #42549C;
        color: #FFFFFF;
    }

    .diseno-table-description {
        margin-left: 15px;
        margin-right: 15px;


    }

    .diseno-cuadro {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 60px;
        margin-top: 3px;
        overflow: hidden;
        padding: 10px;
        background-color: #B0D0F5;
    }

    .diseno-status {
        border-radius: 100px;
        border-style: none;
        background-color: #0b5e77;
        width: 20px;
        height: 20px;
        margin-right: 20px;
        margin-left: 20px;

    }

    .diseno-texto {
        margin-left: 15px;
        margin-right: 15px;
        border-style: none;

    }

    .b-formulario {
        display: none;
        height: 100%;
        width: 100%;
        right: 0;
       /* border-top-left-radius: 10px ;*/
       border-top-left-radius: 15px;
        background-color: #FFFFFF;
        position: absolute;
        padding: 0px;
        padding-bottom: 10px;
        
        z-index: 2;
    }

    .border-div {
        border-style: solid;
        border-color: #031251;

    }
    .other-2 {
        position: absolute;
        display: none;
        justify-content: center;
        align-items: center;
        
       
        width: 100%;
        height: 100%;
        
        padding: 10px;
        z-index: 3;
    }
    .other-form {
        position: relative;
        background-color: #FFFFFF;
        width: 100%;
       
        border-radius: 30px;
        top: 640px;
        
        
    }

    

    /*------- BARRA LATERAL -------*/
    .dot {
        height: 25px;
        width: 25px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        
    }

   .grid-container {
        
        height: 100%;
    }

    

    #boton1 {
        display: block;
        text-decoration: none;
        /*position: relative;
        left: -20px;*/
        border-top-left-radius: 10px;
        /*border-bottom-right-radius: 10px;*/
        border-style: none;
        background-color: #D4FF00;
        color: #031251;
        font-size: 16pt;
        font-weight: bold;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 25px;
        padding-right: 25px;

        /*
        margin-top: 5px;
        padding-left: 10px;
        padding-right: 10px;*/

    }

    #boton1:hover {
        background-color: #B0D0F5;
        color: #031251;
        cursor: pointer;
    }

    .boton2 {
        display: block;
        border-radius: 10px;
        background-color: #FFFFFF;
        color: #031251;
        padding: 10px;
        text-align: center;
        
        
    }

    .boton2:hover {
        background-color: #D4FF00;
        color: #031251;
        cursor: pointer;
    }


.v-line3 { 

    display: none;
}

.form-container {
    display: block;
    color:#031251;
    font-size: large;
    width: 100%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  
    
}

.form-info {
    /*padding: 50px;*/
    background-color: #FFFFFF;
   
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;

    
    
}

.form-diseno {
    margin-bottom: 20px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    
    background-color: #FFFFFF;
}

.form-diseno2 {

    margin-top: 20px;
    margin-bottom: 20px;
}

.wrapper-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.checkbox-design {

    margin: 10px;
    padding: 10px;

}

.buttonService {

    margin-left: 10px;
}


/*EDIT EDDLO ITEMS*/
.edit-embark, .edit-disembark, .edit-deliver, .edit-land {
    display: none;
    /*background-color: #AACA43;*/
    background-color: #D4FF00;
    padding: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.add-embark, .add-disembark, .add-deliver, .add-land  {
    display: none;
    /*background-color: #AACA43; */
    background-color: #D4FF00;
    padding: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}


button {

    border-radius: 10px;
    border-style: none;
    padding: 10px;
    cursor: pointer;
    
}

input {
    padding: 4px;
    margin: 4px;
    background-color: #e2ffe5;
    border-radius: 10px;

}

select {
    background-color: #e2ffe5;
    padding: 7px;
    margin: 4px;
    border-radius: 10px;
}



#savembrk, #savedsmbrk, #savedeliver, #saveland {

    margin-top: 15px;
}



/* Style the tab */
.tab {
    overflow: hidden;
    color: #031251;
    /*background-color: #AACA43;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    background-color: #D4FF00;
  }
  
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    /*background-color: #87a428;*/
    background-color: #D4FF00;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #f6fff7;
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #f6fff7;
    background-color: #f6fff7;
    border-top: none;
    padding: 30px;
  }

  .tabcontent {
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
  }


  
  
  /* Go from zero to full opacity */
  @keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
  }

  .textos {
    border-radius: 10px;
    border-style: none;


  }

  /* EDITAR REFERENCIA*/

  /*  */

  /* GENERAR TICKET */
.ticket-design {
    display: block;
    
    width: 100%;
    height: 100%;

    

    /*border: #000000 2px solid; ADD*/

}
.ticket-design div{
    text-align: center;

}

.ticket-header {
    display: flex;
    justify-content: start;
    align-items: center;

}

/*.ticket-header div {

    padding-left: 30px;
    padding-right: 30px;
}*/

.ticket-information {
    display: flex;
    justify-content: start;


}
/*
.ticket-information div {
    width: 30%;
    text-align: left;

}
*/

.information-pacific {
    width: 900px;
  
}

.information-pacific p {
    line-height: .75em;
    margin-bottom: 10px;
    padding: 0px;
    text-align: left;
    font-family: Calibri, sans-serif;
}

.information-client {
    display: flex;
    justify-content: end;
    /*width: 620px;*/
    width: 870px;
   
}

.cliente-description {
    /*padding-right: 5px;*/
    width: 175px;
}

.cliente-description p {
    text-align:right;
    font-weight: bold;
    line-height: .75em;
    margin-bottom: 0px;
    padding: 0px;
    justify-content: end;
}
.cliente-info {
    width: 460px;
    padding-left: 5px;
}

.cliente-info p {
    text-align: left;
    line-height: .75em;
    margin-bottom: 0px;
    padding:0px;
    

}
.ticket-number-color {
    color: red;
    font-size: medium;

}

.ticket-information2 {
    display: block;
    
}

.sub-total {
    display: flex;
    /*margin-right: 20px;*/
    

}

.sub-total div{  
    text-align: right;
    

}



.invoice-subtotal {
    text-align: right;
    width: 75%;
    border-style: solid;
    border-color:  #000000;
    border-width: 0 0 0 0;
    padding-right: 50px;
}
.invoice-subtotal2 {
    text-align: right;
    width: 25%;
    border-style: solid;
    border-color:  #000000;
    border-width: 0 0 0 0;
    
}

.total {
    display: flex;
    background-color: #9CC2E6;
   /* margin-right: 20px;*/
}

.total div{
    
    text-align: right;

}

.invoice-total {
    text-align: right;
    width: 75%;
    border-style: solid;
    border-color:  #000000;
    border-width: 0 0 0 0;
    padding-right: 50px;
}

.invoice-total2 {
    text-align: right;
    width: 25%;

}

.board {

    display: flex;
    justify-content: center;
    
    padding: 10px;

}

.text-general {
    font-family:  Calibri, sans-serif;
}

.board div {
    align-items: center;
    
}

.board-title {
   text-align: center;
   

}

.board-title p{
  
    margin-bottom: 0px;
 
 }
 

.board-title-1 {
    font-size: 30pt;

}

.board-invoice-number {
    align-self: end;

}


.board-information {

    display: flex;
    justify-content: space-between;
    font-family: Calibri, sans-serif;
    
    width: 1350px;
    

}

.board-client-info {
    display: flex;
    justify-content: start;
    margin-top: 10px;
    width: 850px;

}

.board-client-info2 {
    display: flex;
    justify-content: start;
    
    width: 630px;
    

}

.board-info-left p{
    line-height: .75em;
    /*margin-bottom: 10px;*/
    font-weight: bold;
    font-family: Calibri, sans-serif;
}



.board-client-data {

    padding-left: 0px;
   

}

.board-client-data p{

   
    line-height: .75em;
    margin-bottom: 0px;

}

.board-client-data p span{


   font-family: Calibri, sans-serif;

}

.board-client-data2 {
    margin-top: 10px;
    padding-left: 10px;
   

}

.board-client-data2 p{

   
    line-height: .75em;
    margin-bottom: 0px;

}

.board-client-data2 p span{

  font-family: Calibri, sans-serif;
}

.board-client-data2 p input{

    font-family: Calibri, sans-serif;
  }

.board-info-description {
    margin-top: 10px;
    margin-left: 5px;
}
.board-info-description p {

    text-align: left;
    line-height: .75em;
    margin-bottom: 10px;
    font-weight: bold;
    font-family: Calibri, sans-serif;
    
    
}

.description-title {

    
    font-weight: bold;
}
.description-title p{
    margin-bottom: 0px;
}



.ticket-principal {

    width: 1710px;
    height: 2120px;
    padding: 40px;
    border: #000000 2px solid;
    /*padding-bottom: 40px;*/

}

.ticket-boarding {
    
    border: #000000 2px solid;
}


.ticket-contain {

    display: none;
   

}

.mostrar{

    display: none;
}

.fondo-azul {
    display: block;
    background-color: #9CC2E6;
    width: 100%;
    height: 310px;
    padding: 0px;

}

.editar-des {

    display: none;
    justify-content: center;
    align-items: center;
    padding: 70px;

}

.editar-ser {

    display: none;
    justify-content: center;
    align-items: center;
    padding: 70px;

}

#button-edit-eddlo {
    display: block;
    background-color: #9CC2E6;
    border:none; 
    width: 100%;
    padding: 0px;
    transition-duration: 0.4s;
    height: 310px;
   
    

}



.modal-backdrop {
    z-index: 1;
  }

/*#button-edit-eddlo:hover {
    background-color: #0b5e77;
    cursor: pointer;}*/




#addServices {

    display: block;
    background-color: #FFFFFF;
    border:none; 
    width: 100%;
    padding: 0px;
    transition-duration: 0.4s;
    
  
}



.firmas {

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.firmas div {
    display: block;
}


.generar {

    border-radius: 30px;
    padding: 20px;
}

.info-ticket {

    display: none;
}


/*BARQUITO ANIMADO */
.ship-move {
    display: none;
}



/* DATABASE ADMIN */

.idnt-00 {
    display: block;
    width: 100%;
    padding: 20px;
}

.idnt-0 {
    display: flex;
    width: 100%;
}
.idnt-1 {

    display: flex;
    justify-content: start;
    width: 100%;
}

.idnt-2 {
   display: block;
   width: 100%;
}

.idnt-2-1 {
    display: flex;
    justify-content: start;
    margin-top: 20px;
    width: 100%;
}

.idnt-2-1-1 {
    display: block;
    margin-top: 10px;
    width: 100%;
}

 .idnt-3 {
    display: block;
    width: 70%;
   
 }

 .idnt-3-1 {
    display: flex;
    width: 100%;
    justify-content: space-between;
 }

 .idnt-3-2 {
    display: block;
    width: 100%;
    
 }

 .idnt-3-2-1 {
    display: flex;
    width: 100%;
    justify-content: start;
    flex-wrap: wrap;
    margin-top: 20px;
 }

 .entradas{

    margin-left: 10px;
 }

 .label-center {

    height: 50px; 
    line-height: 50px; 
    padding: 0;
 }

 .flexible {

    width: 100%; 
    padding: 40px; 
    padding-right: 10px; 
    padding-left: 20px;
    padding-top: 20px;  
    padding-bottom: 30px;

 }

 .fleixble2{

    width: 100%; 
    
    padding-right: 10px; 
    padding-left: 20px;
    height: 100%; 
    padding-top: 20px; 
    
    padding-bottom: 30px;
 }

 #authorize1{

    margin-top: 10px;
 }


 .elma{

    visibility: visible;
 }

}





/*

--- --- ---       ---\\\        ///---
--- --- ---\\\    --- \\\      /// ---
---         \\\   ---  \\\    ///  ---
---         |||   ---   \\\  ///   ---
--- --- -- ///    ---    \\\///    ---
--- --- ---       ---              ---
---               ---              ---
---               ---              ---
---               ---              ---

*/

/* ----------- TABLETS ----------- */

    

@media screen and (min-device-width: 481px) and (max-device-width: 920px) { 
    /*----- LOGIN -------*/

    header {
        width: 100%;

    }

    .side-menu {
        
        display: block;

    }

    .side-menu2 {
        display: none;

    }


    .reordenarLineas {
        
        display: block; 
        width: 100%; 
        
    }
    
    
    .reordenarLineas2 {
        width: 100%; 
        padding: 30px;
        border-bottom-right-radius: 0px; 
        border-bottom-left-radius: 0px;
        }
        


   
    .toast {
        display: none;
        position: relative;
        justify-content: end;
        z-index: 2;
        text-align: right;
        width: 10%;
    }

    .menu-boton {
        font-size:12px; 
        background-color: #FFFFFF;
        padding: 0px;
        margin: 0px;

    }

    .menu-boton:hover {
        
        background-color: #C2E641;
        

    }

    .fondo { 
        
        display: block;
        

        background-color: #D4FF00;
        background-repeat: no-repeat;
        
        
        width: 100%;
        
        
    }

    .elmain {
        height: 100%;
        width: 100%;

    }
   
    .back-green {
        display: flex;
        justify-content: center;
        align-items: center;
        
        
    }


    .sesion-texto {
        width: 100%;
        text-align: start;
        margin-top: 10px;
        color: #42549C;
        font-weight: bolder;
    }

    .sesion-texto a{
        color: #FFFFFF;
    }

    #user-texto, #password-texto {
        width: 100%;
        background-color: #B0D0F5;
        margin-top: 10px;
        padding: 20px;
        border-radius: 10px;
        border-style: none;
        

    }

    #boton-inicio {
        border-radius: 10px;
        background-color: #031251;
        color: #FFFFFF;
        font-weight: bolder;

        width: 160px;
        margin-top: 10px;
        padding: 10px;

    }

    .footdown {

        position: absolute;
        bottom: 0;
        width: 100%;
        height: 2.5rem;  
        background-color: #031251;
        
    }

    .centrar-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        
        color: #031251;
    }

    /*PROGRAM A TRIP DESIGN*/
    #notes, #Notes, .texto-info {

        border-style: solid;
        border-color: grey;
        padding: 10px;
    
        

        
    }

    #notes label, #Notes label {
        position: relative;
        top: -30px;
        background-color: #FFFFFF;
        padding-right: 10px;
        padding-left: 10px;

    }


    /*SIDE BAR DESIGN*/

    .side-bar-design{
        
        width: 100%; 
        text-align: left; 
        padding: 10px;
        font-weight: bolder;
        


    }

    .side-bar-design a{
        color: #031251;
    }

    .side-bar-design:hover{

        background-color: #D4FF00;
        
        cursor: pointer;
    }

    .side-bar-design:hover a{

        
        color: #FFFFFF;
        cursor: pointer;
    }





    /*GREEN BANNER PROGRAM A TRIP*/


    .banner-form {
        /*display: flex;*/
        position: relative;

        width: 100%; 
        height: 100px;
        background-color: #D4FF00;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;

        /*justify-content: space-between;*/

    }

    .cerrar-boton {
        display: flex;
        position: absolute;
        width: 60px;
        height: 100%;
        z-index: 2;
        border-top-left-radius: 25px;
        border-bottom-right-radius: 25px;
        background-color: #031251;
        justify-content: center;
        align-items: center;
    }
    
    /*----- BUTTON TRIP -----*/

    .title-form {
       
        display: block; 
        width: 100%; 
        text-align: center; 
        margin-top: 0px;
        
    }
    
    /*----- BUTTON TRIP -----*/


    /*DELETE TRIP*/
    /*--------------- MENU - TRAVEL PAGE -----------------*/
    .buttonBurger {
        display: block;
        text-decoration: none;
        border: none;
        background-color: #FFFFFF;
        cursor: pointer;

    }
    .buttonBurger:hover {
        text-decoration: none;
        border: none;
        background-color:#D4FF00;
        cursor: pointer;
        border-radius: 15px;

    }

    .barra-diseno {
        display: block;
        text-align: center;
        border-style: 1px solid;
        border-color: #031251;
        border-radius: 50px;
        
        width: 100%;

 
    }


    input[type='checkbox'] {
        
        width:20px;
        height:20px;
        padding: 0px;

        margin: 0px;

    }

    /* PROGRAM A TRIP */
    .row {
        display: flex; /* equal height of the children */
        flex-direction: column;
        padding-left: 75px;
        padding-bottom: 10px;
       
      }
      
    .col {
        flex: 0; /*additionally, equal width */

        
      }

    .columnita {
        width: 100%;
    }

    /* LUZ PARPADEANTE */
    @keyframes blink-effect {
        
       50% {
          opacity: 0;
        }
      }
      
    .dots { /*In Progress*/
        border-radius: 100px;
        background-color: rgb(248, 203, 4);
        width: 15px;
        height: 15px;
      }
    
    .dots2 { /*Pending */
        border-radius: 100px;
        background-color: rgb(22, 190, 212);
        width: 15px;
        height: 15px;
      }
    
    .dots3 { /*Cancel*/
        border-radius: 100px;
        background-color: rgb(212, 44, 22);
        width: 15px;
        height: 15px;
      }
    
    .dots4 { /*Complete*/
        border-radius: 100px;
        background-color: rgb(22, 212, 28);
        width: 15px;
        height: 15px;
      }
      
    .blink {
        animation: blink-effect 1s step-end infinite;
      
        /*
        animation-name: blink-effect;
        animation-duration: 1s; 
        animation-iteration-count:infinite;
        animation-timing-function:step-end;
        */
    }



   
    
    #topnav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #FFFFFF;
        float: left;
        width: 100%;
        /*margin-left: 40px;*/
        margin-right: 20px;
        

    }

    #myLinks2 {
        display: none;
        justify-content: end;
        align-items: center;
        color: #FFFFFF;
        float: right;
        width: 100%;
        height: 50px;
       /* margin-left: 40px;*/
        margin-right: 20px;
        

    }

    #myLinks {
        /*float: right;*/
        margin-left: 20px;
        margin-right: 20px;
        
    }

    .white-bg {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        background-color: #FFFFFF;
        padding:  20px 5px 20px 5px;
        width: 25%;
        height: 80px;

    }
    .burger-nb {
        margin:10px;
        

    }
    .view-nb {
        margin: 0px;
        background-color: #B0D0F5;

    }
    .dots-nb {
        margin: 0px;
        background-color: #B0D0F5;

    }

    

    #v-next, #v-complete, #v-hour, #v-invoice, #v-profile, #v-editprofile, #v-setting, #v-logout {
    
        display: none;
    }
   
    .menu {
        display: flex;
        justify-content: start;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 150px;
      /*  background-color: #AACA43;   */
        
    }

    .lista-menu2 {
        display: flex;
        justify-content: start;
        align-items: center;
        
        width: 100%;
        height: 130px;
        
        
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        
    }


    .perfil {
        width: 100%;
    }

    .icon {
        display: none;
    }

    #profile-user {

        background-color: #FFFFFF;
        /*margin-left: 200px;*/
        padding: 10px;
        border-radius: 100px;
        border-style: solid 5px;
        border-color: #031251;


    }

  
    
    
    /*-------- ESPACIO PRINCIPAL DE TRABAJO --------*/
   

    .b-lateral {
        display: none;
        border-top-right-radius: 10px;
        
    }

    .b-lateral.open{
        display: block;
        position: absolute;
        z-index: 2;
        background-color: #FFFFFF;
        width: 50%;
        height: 3000px;
        float: left;
        padding: 10px;
    }

    
     .fondo-principal {
        padding: 0px;
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 100%;
        float: left;
        background-color: #FFFFFF;
    }

    .boton-cerrar {
       
        padding: 5px 10px 5px 10px;
        /*margin-top: 20px;
        margin-left: 20px;*/
        border-style: none;
        /*border-radius: 100px;
        background-color: #AACA43;*/
        color: #FFFFFF;
       
        border-top-left-radius: 25px;
        border-bottom-right-radius: 25px;
        background-color: #031251;
        
        
    }

    
    .boton-cerrar:hover {
       /* padding: 5px 10px 5px 10px;*/
        
        border-style: none;
        border-top-left-radius: 25px;
        border-bottom-right-radius: 25px;
        width: 100%;
        height: 100%;
        background-color: #cadff6;
        
        transition: 0.3s;
    }

    .table-description {
        display: inline-flex;
        align-items:center;
        justify-content: flex-start;
        width: 100%;
        height: 60px;
        background-color: #42549C;
        color: #FFFFFF;
    }

    .diseno-table-description {
        margin-left: 15px;
        margin-right: 15px;


    }

    .diseno-cuadro {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 60px;
        margin-top: 3px;
        overflow: hidden;
        padding: 10px;
        background-color: #B0D0F5;
    }

    .diseno-status {
        border-radius: 100px;
        border-style: none;
        background-color: #0b5e77;
        width: 20px;
        height: 20px;
        margin-right: 20px;
        margin-left: 20px;

    }

    .diseno-texto {
        margin-left: 15px;
        margin-right: 15px;
        border-style: none;

    }

    .b-formulario {
        display: none;
        height: 100%;
        width: 90%;
        right: 0;
       /* border-top-left-radius: 10px ;*/
       border-top-left-radius: 15px;
        background-color: #FFFFFF;
        position: absolute;
        padding: 0px;
        padding-bottom: 10px;
        
        z-index: 2;
    }

    .border-div {
        border-style: solid;
        border-color: #031251;

    }
    .other-2 {
        position: absolute;
        display: none;
        justify-content: center;
        align-items: center;
        
       
        width: 100%;
        height: 100%;
        
        padding: 50px;
        z-index: 3;
    }
    .other-form {
        position: relative;
        background-color: #FFFFFF;
        width: 100%;
       
        border-radius: 30px;
        top: 480px;
        
        
    }

    

    /*------- BARRA LATERAL -------*/
    .dot {
        height: 25px;
        width: 25px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        
    }

   .grid-container {
        
        height: 100%;
    }

    

    #boton1 {
        display: block;
        text-decoration: none;
        /*position: relative;
        left: -20px;*/
        border-top-left-radius: 10px;
        /*border-bottom-right-radius: 10px;*/
        border-style: none;
        background-color: #D4FF00;
        color: #031251;
        font-size: 16pt;
        font-weight: bold;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 25px;
        padding-right: 25px;

        /*
        margin-top: 5px;
        padding-left: 10px;
        padding-right: 10px;*/

    }

    #boton1:hover {
        background-color: #B0D0F5;
        color: #031251;
        cursor: pointer;
    }

    .boton2 {
        display: block;
        border-radius: 10px;
        background-color: #FFFFFF;
        color: #031251;
        padding: 10px;
        text-align: center;
        
        
    }

    .boton2:hover {
        background-color: #D4FF00;
        color: #031251;
        cursor: pointer;
    }


.v-line3 { 

    display: none;
}

.form-container {
    display: block;
    color:#031251;
    font-size: large;
    
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  
    
}

.form-info {
    /*padding: 50px;*/
    background-color: #FFFFFF;
   
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;

    
    
}

.form-diseno {
    margin-bottom: 20px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    
    background-color: #FFFFFF;
}

.form-diseno2 {

    margin-top: 20px;
    margin-bottom: 20px;
}

.wrapper-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.checkbox-design {

    margin: 10px;
    padding: 10px;

}

.buttonService {

    margin-left: 10px;
}


/*EDIT EDDLO ITEMS*/
.edit-embark, .edit-disembark, .edit-deliver, .edit-land {
    display: none;
    /*background-color: #AACA43;*/
    background-color: #D4FF00;
    padding: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.add-embark, .add-disembark, .add-deliver, .add-land  {
    display: none;
    /*background-color: #AACA43; */
    background-color: #D4FF00;
    padding: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}


button {

    border-radius: 10px;
    border-style: none;
    padding: 10px;
    cursor: pointer;
    
}

input {
    padding: 4px;
    margin: 4px;
    background-color: #e2ffe5;
    border-radius: 10px;

}

select {
    background-color: #e2ffe5;
    padding: 7px;
    margin: 4px;
    border-radius: 10px;
}



#savembrk, #savedsmbrk, #savedeliver, #saveland {

    margin-top: 15px;
}



/* Style the tab */
.tab {
    overflow: hidden;
    color: #031251;
    /*background-color: #AACA43;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    background-color: #D4FF00;
  }
  
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    /*background-color: #87a428;*/
    background-color: #D4FF00;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #f6fff7;
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #f6fff7;
    background-color: #f6fff7;
    border-top: none;
    padding: 30px;
  }

  .tabcontent {
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
  }


  
  
  /* Go from zero to full opacity */
  @keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
  }

  .textos {
    border-radius: 10px;
    border-style: none;


  }

  /* EDITAR REFERENCIA*/

  /*  */

  /* GENERAR TICKET */
.ticket-design {
    display: block;
    
    width: 100%;
    height: 100%;

    

    /*border: #000000 2px solid; ADD*/

}
.ticket-design div{
    text-align: center;

}

.ticket-header {
    display: flex;
    justify-content: start;
    align-items: center;

}

/*.ticket-header div {

    padding-left: 30px;
    padding-right: 30px;
}*/

.ticket-information {
    display: flex;
    justify-content: start;


}
/*
.ticket-information div {
    width: 30%;
    text-align: left;

}
*/

.information-pacific {
    width: 900px;
   
}

.information-pacific p {
    line-height: .75em;
    margin-bottom: 10px;
    padding: 0px;
    text-align: left;
    font-family: Calibri, sans-serif;
}

.information-client {
    display: flex;
    justify-content: end;
    /*width: 620px;*/
    width: 870px;
   
}

.cliente-description {
    /*padding-right: 5px;*/
    width: 175px;
}

.cliente-description p {
    text-align:right;
    font-weight: bold;
    line-height: .75em;
    margin-bottom: 0px;
    padding: 0px;
    justify-content: end;
}
.cliente-info {
    width: 460px;
    padding-left: 5px;
}

.cliente-info p {
    text-align: left;
    line-height: .75em;
    margin-bottom: 0px;
    padding:0px;
    

}
.ticket-number-color {
    color: red;
    font-size: medium;

}

.ticket-information2 {
    display: block;
    
}

.sub-total {
    display: flex;
    /*margin-right: 20px;*/
    

}

.sub-total div{  
    text-align: right;
    

}



.invoice-subtotal {
    text-align: right;
    width: 75%;
    border-style: solid;
    border-color:  #000000;
    border-width: 0 0 0 0;
    padding-right: 50px;
}
.invoice-subtotal2 {
    text-align: right;
    width: 25%;
    border-style: solid;
    border-color:  #000000;
    border-width: 0 0 0 0;
    
}

.total {
    display: flex;
    background-color: #9CC2E6;
   /* margin-right: 20px;*/
}

.total div{
    
    text-align: right;

}

.invoice-total {
    text-align: right;
    width: 75%;
    border-style: solid;
    border-color:  #000000;
    border-width: 0 0 0 0;
    padding-right: 50px;
}

.invoice-total2 {
    text-align: right;
    width: 25%;

}

.board {

    display: flex;
    justify-content: center;
    
    padding: 10px;

}

.text-general {
    font-family:  Calibri, sans-serif;
}

.board div {
    align-items: center;
    
}

.board-title {
   text-align: center;
   

}

.board-title p{
  
    margin-bottom: 0px;
 
 }
 

.board-title-1 {
    font-size: 30pt;

}

.board-invoice-number {
    align-self: end;

}


.board-information {

    display: flex;
    justify-content: space-between;
    font-family: Calibri, sans-serif;
    
    width: 1350px;
    

}

.board-client-info {
    display: flex;
    justify-content: start;
    margin-top: 10px;
    width: 850px;

}

.board-client-info2 {
    display: flex;
    justify-content: start;
    
    width: 630px;
    

}

.board-info-left p{
    line-height: .75em;
    /*margin-bottom: 10px;*/
    font-weight: bold;
    font-family: Calibri, sans-serif;
}



.board-client-data {

    padding-left: 0px;
   

}

.board-client-data p{

   
    line-height: .75em;
    margin-bottom: 0px;

}

.board-client-data p span{


   font-family: Calibri, sans-serif;

}

.board-client-data2 {
    margin-top: 10px;
    padding-left: 10px;
   

}

.board-client-data2 p{

   
    line-height: .75em;
    margin-bottom: 0px;

}

.board-client-data2 p span{

  font-family: Calibri, sans-serif;
}

.board-client-data2 p input{

    font-family: Calibri, sans-serif;
  }

.board-info-description {
    margin-top: 10px;
    margin-left: 5px;
}
.board-info-description p {

    text-align: left;
    line-height: .75em;
    margin-bottom: 10px;
    font-weight: bold;
    font-family: Calibri, sans-serif;
    
    
}

.description-title {

    
    font-weight: bold;
}
.description-title p{
    margin-bottom: 0px;
}



.ticket-principal {

    width: 1710px;   /* 1380px*/
    height: 2120px; /* 1000px*/
    padding: 40px;
    border: #000000 2px solid;
    /*padding-bottom: 40px;*/

}

.ticket-boarding {
    
    border: #000000 2px solid;
}


.ticket-contain {

    display: none;
   

}

.mostrar{

    display: none;
}

.fondo-azul {
    display: block;
    background-color: #9CC2E6;
    width: 100%;
    height: 310px;
    padding: 0px;

}

.editar-des {

    display: none;
    justify-content: center;
    align-items: center;
    padding: 70px;

}

.editar-ser {

    display: none;
    justify-content: center;
    align-items: center;
    padding: 70px;

}

#button-edit-eddlo {
    display: block;
    background-color: #9CC2E6;
    border:none; 
    width: 100%;
    padding: 0px;
    transition-duration: 0.4s;
    height: 310px;
   
    

}



.modal-backdrop {
    z-index: 1;
  }

/*#button-edit-eddlo:hover {
    background-color: #0b5e77;
    cursor: pointer;}*/




#addServices {

    display: block;
    background-color: #FFFFFF;
    border:none; 
    width: 100%;
    padding: 0px;
    transition-duration: 0.4s;
    
  
}



.firmas {

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.firmas div {
    display: block;
}


.generar {

    border-radius: 30px;
    padding: 20px;
}

.info-ticket {

    display: none;
}


/*BARQUITO ANIMADO */
.ship-move {
    display: none;
}



/* DATABASE ADMIN */

.idnt-00 {
    display: block;
    width: 100%;
    padding: 20px;
}

.idnt-0 {
    display: flex;
    width: 100%;
}
.idnt-1 {

    display: flex;
    justify-content: start;
    width: 100%;
}

.idnt-2 {
   display: block;
   width: 100%;
}

.idnt-2-1 {
    display: flex;
    justify-content: start;
    margin-top: 20px;
    width: 100%;
}

.idnt-2-1-1 {
    display: block;
    margin-top: 10px;
    width: 100%;
}

 .idnt-3 {
    display: block;
    width: 70%;
   
 }

 .idnt-3-1 {
    display: flex;
    width: 100%;
    justify-content: space-between;
 }

 .idnt-3-2 {
    display: block;
    width: 100%;
    
 }

 .idnt-3-2-1 {
    display: flex;
    width: 100%;
    justify-content: start;
    flex-wrap: wrap;
    margin-top: 20px;
 }

 .entradas{

    margin-left: 10px;
 }

 .label-center {

    height: 50px; 
    line-height: 50px; 
    padding: 0;
 }

 .flexible {

    width: 100%; 
    padding: 40px; 
    padding-right: 10px; 
    padding-left: 20px;
    padding-top: 20px;  
    padding-bottom: 30px;

 }

 .fleixble2{

    width: 100%; 
    
    padding-right: 10px; 
    padding-left: 20px;
    height: 100%; 
    padding-top: 20px; 
    
    padding-bottom: 30px;
 }

 #authorize1{

    margin-top: 10px;
 }


 .elma{

    visibility: visible;
 }

}


/* ----------- GENERAL -----------*/

/*

--- --- ---       ---\\\        ///---
--- --- ---\\\    --- \\\      /// ---
---         \\\   ---  \\\    ///  ---
---         |||   ---   \\\  ///   ---
--- --- -- ///    ---    \\\///    ---
--- --- ---       ---              ---
---               ---              ---
---               ---              ---
---               ---              ---

*/

/* ----------- DESKTOP ----------- */
@media screen and (min-device-width: 921px) { 
    /*----- LOGIN -------*/

    .side-menu {
        display: none;

    }

    .side-menu2 {
        display: flex;
        

    }
    
     .reordenarLineas {
        
        display: flex; 
        width: 100%; 
        justify-content: space-between;
    }
    
    
    .reordenarLineas2 {
        width: 30%; 
        padding: 30px;
        border-bottom-right-radius: 0px; 
        border-bottom-left-radius: 0px;
        }
        
    

    .toast {
        display: none;
        position: relative;
        justify-content: end;
        z-index: 2;
        text-align: right;
        width: 10%;
    }

    .menu-boton {
        font-size:12px; 
        background-color: #FFFFFF;
        padding: 0px;
        margin: 0px;

    }

    .menu-boton:hover {
        
        background-color: #C2E641;
        

    }

    .fondo { 
        
        display: block;
        

        background-color: #D4FF00;
        background-repeat: no-repeat;
        
        
        width: 100%;
        
        
    }

    .elmain {
        display: flex;
        justify-content: space-between;
        align-items: center;
        float: left;
        height: 100%;
        width: 100%;

    }


    .grid-container2{
        display: grid;
        grid-template-columns: 60% 40%;
        height: 100%;
        width: 100%;
    }

    .item1 {
        
        width: 100%;
        height: 100%;
        background-image: url("../img/pm_background2.png");

    }

    .item2 {
        width: 100%;
        height: 100%;
        z-index: 1;
        padding: 30px;
        padding-top: 5px;
         
  
    }
   
    .back-green {
        display: flex;
        justify-content: center;
        align-items: center;
        
        
    }




    .sesion-texto {
        width: 100%;
        text-align: start;
        margin-top: 10px;
        color: #42549C;
        font-weight: bolder;
    }

    .sesion-texto a{
        color: #FFFFFF;
    }

    #user-texto, #password-texto {
        width: 100%;
        background-color: #B0D0F5;
        margin-top: 10px;
        padding: 20px;
        border-radius: 10px;
        border-style: none;
        

    }

    #boton-inicio {
        border-radius: 10px;
        background-color: #031251;
        color: #FFFFFF;
        font-weight: bolder;

        width: 160px;
        margin-top: 10px;
        padding: 10px;

    }

    .footdown {

        position: absolute;
        bottom: 0;
        width: 100%;
        height: 2.5rem;  
        background-color: #031251;
        
    }

    .centrar-pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        
        color: #031251;
    }

    /*PROGRAM A TRIP DESIGN*/
    #notes, #Notes, .texto-info {

        border-style: solid;
        border-color: grey;
        padding: 10px;
    
        

        
    }

    #notes label, #Notes label {
        position: relative;
        top: -30px;
        background-color: #FFFFFF;
        padding-right: 10px;
        padding-left: 10px;

    }


    /*SIDE BAR DESIGN*/

    .side-bar-design{
        
        width: 100%; 
        text-align: left; 
        padding: 10px;
        font-weight: bolder;
        


    }

    .side-bar-design a{
        color: #031251;
    }

    .side-bar-design:hover{

        background-color: #D4FF00;
        
        cursor: pointer;
    }

    .side-bar-design:hover a{

        
        color: #FFFFFF;
        cursor: pointer;
    }





    /*GREEN BANNER PROGRAM A TRIP*/


    .banner-form {
        /*display: flex;*/
        position: relative;

        width: 100%; 
        height: 100px;
        background-color: #D4FF00;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;

        /*justify-content: space-between;*/

    }

    .cerrar-boton {
        display: flex;
        position: absolute;
        width: 60px;
        height: 100%;
        z-index: 2;
        border-top-left-radius: 25px;
        border-bottom-right-radius: 25px;
        background-color: #031251;
        justify-content: center;
        align-items: center;
    }
    
    /*----- BUTTON TRIP -----*/
    
    .title-form {
       
        display: flex; 
        width: 100%; 
        justify-content: start;
        text-align: center; 
        margin-top: 0px;
        
    }
    /*----- BUTTON TRIP -----*/


    /*DELETE TRIP*/
    /*--------------- MENU - TRAVEL PAGE -----------------*/
    .buttonBurger {
        display: block;
        text-decoration: none;
        border: none;
        background-color: #FFFFFF;
        cursor: pointer;

    }
    .buttonBurger:hover {
        text-decoration: none;
        border: none;
        background-color:#D4FF00;
        cursor: pointer;
        border-radius: 15px;

    }

    .barra-diseno {
        display: block;
        text-align: center;
        border-style: 1px solid;
        border-color: #031251;
        border-radius: 50px;
        
        width: 100%;

 
    }


    input[type='checkbox'] {
        
        width:20px;
        height:20px;
        padding: 0px;

        margin: 0px;

    }

    /* PROGRAM A TRIP */
    .row {
        display: flex; /* equal height of the children */
        padding: 20px;
        padding-left: 20px;
      }
      
    .col {
        flex: 1; /* additionally, equal width */
        
      }

    .columnita  {
        width: 50%;
    }

    

    /* LUZ PARPADEANTE */
    @keyframes blink-effect {
        
       50% {
          opacity: 0;
        }
      }
      
    .dots { /*In Progress*/
        border-radius: 100px;
        background-color: rgb(248, 203, 4);
        width: 15px;
        height: 15px;
      }
    
    .dots2 { /*Pending */
        border-radius: 100px;
        background-color: rgb(22, 190, 212);
        width: 15px;
        height: 15px;
      }
    
    .dots3 { /*Cancel*/
        border-radius: 100px;
        background-color: rgb(212, 44, 22);
        width: 15px;
        height: 15px;
      }
    
    .dots4 { /*Complete*/
        border-radius: 100px;
        background-color: rgb(22, 212, 28);
        width: 15px;
        height: 15px;
      }
      
    .blink {
        animation: blink-effect 1s step-end infinite;
      
        /*
        animation-name: blink-effect;
        animation-duration: 1s; 
        animation-iteration-count:infinite;
        animation-timing-function:step-end;
        */
    }



    #topnav {
       
        position: relative;
    }
    #topnav {
        display: flex;
        justify-content: start;
        align-items: center;
        color: #FFFFFF;
        float: left;
        width: 100%;
        height: 80px;
        /*margin-left: 40px;*/
        margin-right: 20px;
        

    }
    
   #myLinks2 {
        display: flex;
        justify-content: end;
        align-items: center;
        color: #FFFFFF;
        float: right;
        width: 100%;
        height: 50px;
        /*margin-left: 40px;*/
        margin-right: 20px;
        

    }

    #myLinks {
        /*float: right;*/
        margin-left: 20px;
        margin-right: 20px;
        
    }

    .white-bg {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-top-right-radius: 15px;
        border-bottom-right-radius: 15px;
        background-color: #FFFFFF;
        padding:  20px 5px 20px 5px;
        width: 15%;
        height: 80px;

    }
    .burger-nb {
        margin:10px;

        
    }
    .view-nb {
        margin: 0px;
        background-color: #B0D0F5;

    }
    .dots-nb {
        margin: 0px;
        background-color: #B0D0F5;

    }

    

    #v-next, #v-complete, #v-hour, #v-invoice, #v-profile, #v-editprofile, #v-setting, #v-logout {
    
        display: none;
    }
   
    .menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        width: 100%;
        height: 85px;
      /*  background-color: #AACA43;   */
        
    }

    .lista-menu2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        width: 100%;
        height: 80px;
        
        
        border-top-left-radius: 50px;
        border-bottom-left-radius: 50px;
        
    }


    .perfil {
        width: 100%;
    }

    .icon {
        display: none;
    }

    #profile-user {

        background-color: #FFFFFF;
        /*margin-left: 200px;*/
        padding: 10px;
        border-radius: 100px;
        border-style: solid 5px;
        border-color: #031251;


    }

  
    
    
    /*-------- ESPACIO PRINCIPAL DE TRABAJO --------*/
   

    .b-lateral {
        display: none;
        border-top-right-radius: 10px;
        
    }

    .b-lateral.open{
        display: block;
        position: absolute;
        z-index: 2;
        background-color: #FFFFFF;
        width: 30%;
        height: 2000px;
        float: left;
        padding: 10px;
    }

    
     .fondo-principal {
        padding: 0px;
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 100%;
        float: left;
        background-color: #FFFFFF;
    }

    .boton-cerrar {
       
        padding: 5px 10px 5px 10px;
        /*margin-top: 20px;
        margin-left: 20px;*/
        border-style: none;
        /*border-radius: 100px;
        background-color: #AACA43;*/
        color: #FFFFFF;
       
        border-top-left-radius: 25px;
        border-bottom-right-radius: 25px;
        background-color: #031251;
        
        
    }

    
    .boton-cerrar:hover {
       /* padding: 5px 10px 5px 10px;*/
        
        border-style: none;
        border-top-left-radius: 25px;
        border-bottom-right-radius: 25px;
        width: 100%;
        height: 100%;
        background-color: #cadff6;
        
        transition: 0.3s;
    }

    .table-description {
        display: inline-flex;
        align-items:center;
        justify-content: flex-start;
        width: 100%;
        height: 60px;
        background-color: #42549C;
        color: #FFFFFF;
    }

    .diseno-table-description {
        margin-left: 15px;
        margin-right: 15px;


    }

    .diseno-cuadro {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        height: 60px;
        margin-top: 3px;
        overflow: hidden;
        padding: 10px;
        background-color: #B0D0F5;
    }

    .diseno-status {
        border-radius: 100px;
        border-style: none;
        background-color: #0b5e77;
        width: 20px;
        height: 20px;
        margin-right: 20px;
        margin-left: 20px;

    }

    .diseno-texto {
        margin-left: 15px;
        margin-right: 15px;
        border-style: none;

    }

    .b-formulario {
        display: none;
        height: 100%;
        width: 60%;
        right: 0;
       /* border-top-left-radius: 10px ;*/
       border-top-left-radius: 15px;
        background-color: #FFFFFF;
        position: absolute;
        padding: 0px;
        padding-bottom: 10px;
        
        z-index: 2;
    }

    .border-div {
        border-style: solid;
        border-color: #031251;

    }
    .other-2 {
        position: absolute;
        display: none;
        justify-content: center;
        align-items: center;
        
       
        width: 100%;
        height: 100%;
        
        padding: 50px;
        z-index: 3;
    }
    .other-form {
        position: relative;
        background-color: #FFFFFF;
        width: 65%;
        border-radius: 30px;
        top: 250px;
        
        
    }

    

    /*------- BARRA LATERAL -------*/
    .dot {
        height: 25px;
        width: 25px;
        background-color: #bbb;
        border-radius: 50%;
        display: inline-block;
        
    }

   .grid-container {
        
        height: 100%;
    }

    

    #boton1 {
        display: block;
        text-decoration: none;
        
        /*position: relative;
        left: -20px;*/
        border-top-left-radius: 10px;
        /*border-bottom-right-radius: 10px;*/
        border-style: none;
        background-color: #D4FF00;
        color: #031251;
        font-size: 16pt;
        font-weight: bold;
        padding-top: 40px;
        padding-bottom: 40px;
        padding-left: 25px;
        padding-right: 25px;

        /*
        margin-top: 5px;
        padding-left: 10px;
        padding-right: 10px;*/

    }

    #boton1:hover {
        background-color: #B0D0F5;
        color: #031251;
        cursor: pointer;
    }

    .boton2 {
        display: block;
        border-radius: 10px;
        background-color: #FFFFFF;
        color: #031251;
        padding: 10px;
        text-align: center;
        
        
    }

    .boton2:hover {
        background-color: #D4FF00;
        color: #031251;
        cursor: pointer;
    }


.v-line3 { 

    display: none;
}

.form-container {
    display: block;
    color:#031251;
    font-size: large;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  
    
}

.form-info {
    /*padding: 50px;*/
    background-color: #FFFFFF;
   
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;

    
    
}

.form-diseno {
    margin-bottom: 20px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    
    background-color: #FFFFFF;
}

.form-diseno2 {

    margin-top: 20px;
    margin-bottom: 20px;
}

.wrapper-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.checkbox-design {

    margin: 10px;
    padding: 10px;

}

.buttonService {

    margin-left: 10px;
}


/*EDIT EDDLO ITEMS*/
.edit-embark, .edit-disembark, .edit-deliver, .edit-land {
    display: none;
    /*background-color: #AACA43;*/
    background-color: #D4FF00;
    padding: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.add-embark, .add-disembark, .add-deliver, .add-land  {
    display: none;
    /*background-color: #AACA43; */
    background-color: #D4FF00;
    padding: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}


button {

    border-radius: 10px;
    border-style: none;
    padding: 10px;
    cursor: pointer;
    
}

input {
    padding: 4px;
    margin: 4px;
    background-color: #e2ffe5;
    border-radius: 10px;

}

select {
    background-color: #e2ffe5;
    padding: 7px;
    margin: 4px;
    border-radius: 10px;
}



#savembrk, #savedsmbrk, #savedeliver, #saveland {

    margin-top: 15px;
}



/* Style the tab */
.tab {
    overflow: hidden;
    color: #031251;
    /*background-color: #AACA43;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);*/
    background-color: #D4FF00;
  }
  
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    /*background-color: #87a428;*/
    background-color: #D4FF00;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #f6fff7;
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #f6fff7;
    background-color: #f6fff7;
    border-top: none;
    padding: 30px;
  }

  .tabcontent {
    animation: fadeEffect 1s; /* Fading effect takes 1 second */
  }


  
  
  /* Go from zero to full opacity */
  @keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
  }

  .textos {
    border-radius: 10px;
    border-style: none;


  }

  /* EDITAR REFERENCIA*/

  /*  */

  /* GENERAR TICKET */
.ticket-design {
    display: block;
    
    width: 100%;
    height: 100%;

    

    /*border: #000000 2px solid; ADD*/

}
.ticket-design div{
    text-align: center;

}

.ticket-header {
    display: flex;
    justify-content: start;
    align-items: center;

}

/*.ticket-header div {

    padding-left: 30px;
    padding-right: 30px;
}*/

.ticket-information {
    display: flex;
    justify-content: start;


}
/*
.ticket-information div {
    width: 30%;
    text-align: left;

}
*/

.information-pacific {
    width: 900px;
   
}

.information-pacific p {
    line-height: .75em;
    margin-bottom: 10px;
    padding: 0px;
    text-align: left;
    font-family: Calibri, sans-serif;
}

.information-client {
    display: flex;
    justify-content: end;
    /*width: 620px;*/
    width: 870px;
   
}

.cliente-description {
    /*padding-right: 5px;*/
    width: 175px;
}

.cliente-description p {
    text-align:right;
    font-weight: bold;
    line-height: .75em;
    margin-bottom: 0px;
    padding: 0px;
    justify-content: end;
}
.cliente-info {
    width: 460px;
    padding-left: 5px;
}

.cliente-info p {
    text-align: left;
    line-height: .75em;
    margin-bottom: 0px;
    padding:0px;
    

}
.ticket-number-color {
    color: red;
    font-size: medium;

}

.ticket-information2 {
    display: block;
    
}

.sub-total {
    display: flex;
    /*margin-right: 20px;*/
    

}

.sub-total div{  
    text-align: right;
    

}



.invoice-subtotal {
    text-align: right;
    width: 75%;
    border-style: solid;
    border-color:  #000000;
    border-width: 0 0 0 0;
    padding-right: 50px;
}
.invoice-subtotal2 {
    text-align: right;
    width: 25%;
    border-style: solid;
    border-color:  #000000;
    border-width: 0 0 0 0;
    
}

.total {
    display: flex;
    background-color: #9CC2E6;
   /* margin-right: 20px;*/
}

.total div{
    
    text-align: right;

}

.invoice-total {
    text-align: right;
    width: 75%;
    border-style: solid;
    border-color:  #000000;
    border-width: 0 0 0 0;
    padding-right: 50px;
}

.invoice-total2 {
    text-align: right;
    width: 25%;

}

.board {

    display: flex;
    justify-content: center;
    
    padding: 10px;

}

.text-general {
    font-family:  Calibri, sans-serif;
}

.board div {
    align-items: center;
    
}

.board-title {
   text-align: center;
   

}

.board-title p{
  
    margin-bottom: 0px;
 
 }
 

.board-title-1 {
    font-size: 30pt;

}

.board-invoice-number {
    align-self: end;

}


.board-information {

    display: flex;
    justify-content: space-between;
    font-family: Calibri, sans-serif;
    
    width: 1350px;
    

}

.board-client-info {
    display: flex;
    justify-content: start;
    margin-top: 10px;
    width: 850px;

}

.board-client-info2 {
    display: flex;
    justify-content: start;
    
    width: 630px;
    

}

.board-info-left p{
    line-height: .75em;
    /*margin-bottom: 10px;*/
    font-weight: bold;
    font-family: Calibri, sans-serif;
}



.board-client-data {

    padding-left: 0px;
   

}

.board-client-data p{

   
    line-height: .75em;
    margin-bottom: 0px;

}

.board-client-data p span{


   font-family: Calibri, sans-serif;

}

.board-client-data2 {
    margin-top: 10px;
    padding-left: 10px;
   

}

.board-client-data2 p{

   
    line-height: .75em;
    margin-bottom: 0px;

}

.board-client-data2 p span{

  font-family: Calibri, sans-serif;
}

.board-client-data2 p input{

    font-family: Calibri, sans-serif;
  }

.board-info-description {
    margin-top: 10px;
    margin-left: 5px;
}
.board-info-description p {

    text-align: left;
    line-height: .75em;
    margin-bottom: 10px;
    font-weight: bold;
    font-family: Calibri, sans-serif;
    
    
}

.description-title {

    
    font-weight: bold;
}
.description-title p{
    margin-bottom: 0px;
}



.ticket-principal {

    width: 1710px;
    height: 2120px;
    padding: 40px;
    border: #000000 2px solid;
    /*padding-bottom: 40px;*/

}

.ticket-boarding {
    
    border: #000000 2px solid;
}


.ticket-contain {

    display: none;
   

}

.mostrar{

    display: none;
}

.fondo-azul {
    display: block;
    background-color: #9CC2E6;
    width: 100%;
    height: 310px;
    padding: 0px;

}

.editar-des {

    display: none;
    justify-content: center;
    align-items: center;
    padding: 70px;

}

.editar-ser {

    display: none;
    justify-content: center;
    align-items: center;
    padding: 70px;

}

#button-edit-eddlo {
    display: block;
    background-color: #9CC2E6;
    border:none; 
    width: 100%;
    padding: 0px;
    transition-duration: 0.4s;
    height: 310px;
   
    

}



.modal-backdrop {
    z-index: 1;
  }

/*#button-edit-eddlo:hover {
    background-color: #0b5e77;
    cursor: pointer;}*/




#addServices {

    display: block;
    background-color: #FFFFFF;
    border:none; 
    width: 100%;
    padding: 0px;
    transition-duration: 0.4s;
    
  
}



.firmas {

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.firmas div {
    display: block;
}


.generar {

    border-radius: 30px;
    padding: 20px;
}

.info-ticket {

    display: none;
}


/*BARQUITO ANIMADO */
.ship-move {
    display: none;
}



/* DATABASE ADMIN */

.idnt-00 {
    display: block;
    width: 100%;
    padding: 20px;
}

.idnt-0 {
    display: flex;
    width: 100%;
}
.idnt-1 {

    display: flex;
    justify-content: start;
    width: 100%;
}

.idnt-2 {
   display: block;
   width: 100%;
}

.idnt-2-1 {
    display: flex;
    justify-content: start;
    margin-top: 20px;
    width: 100%;
}

.idnt-2-1-1 {
    display: block;
    margin-top: 10px;
    width: 100%;
}

 .idnt-3 {
    display: block;
    width: 70%;
   
 }

 .idnt-3-1 {
    display: flex;
    width: 100%;
    justify-content: space-between;
 }

 .idnt-3-2 {
    display: block;
    width: 100%;
    
 }

 .idnt-3-2-1 {
    display: flex;
    width: 100%;
    justify-content: start;
    flex-wrap: wrap;
    margin-top: 20px;
 }

 .entradas{

    margin-left: 10px;
 }

 .label-center {

    height: 50px; 
    line-height: 50px; 
    padding: 0;
 }


 /* PROGRAM A TRIP*/
 .flexible {

    width: 30%; 
    padding: 40px; 
    padding-right: 0px; 
    padding-left: 20px;
    padding-top: 40px;  
    padding-bottom: 2px;

 }

 .flexible2 {
    
    width: 30%; 
    padding: 40px; 
    padding-right: 20px; 
    padding-left: 0px;
    height: 100%; 
    padding-top: 40px; 
    padding-bottom: 2px;

 }

 .elma{

    visibility: collapse;
 }
 


}