/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*===== GOOGLE FONTS =====
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap");
/*===== VARIABLES CSS =====*/
:root {

    letter-spacing: 1.6px;

    /*===== Font Weight CSS =====*/
    --ss-fw1:500;
    --ss-fw2:600;
    --ss-fw3:700;
  
    /*===== Colors CSS =====*/
    --ss-cr:#fff;
    --ss-cr1:#f0f2f5;
    --ss-cr2:#5a5a5a;
    
    --ss-cr3:#FFD700;
    --ss-cr4:#292a2d;
  
    --ss-warning:#ffaa2c;
    --ss-success:#FFD700;
    --ss-alert:#e7c9c9;
    /*--ss-cr4:linear-gradient(90deg, rgba(224,210,139,1) 0%, rgba(217,196,121,1) 50%, rgba(207,173,84,1) 100%);*/
  
    /*===== Font & Typography CSS =====*/
    --ss-bf: 'Poppins', sans-serif;
    --ss-fs6: 3rem;
    --ss-fs5: 2.5rem;
    --ss-fs4: 2rem;
    --ss-fs3: 1.25rem;
    --ss-fs2: .938rem;
    --ss-fs1: .813rem;
  
      /*===== Margenes =====*/
      --ss-mr1: .5rem;
      --ss-mr2: 1rem;
      --ss-mr3: 1.5rem;
      --ss-mr4: 2rem;
      --ss-mr5: 2.5rem;
      --ss-mr6: 3rem;
  
  
      /*===== z index =====*/
      --ss-z1:-1;
      --ss-z2: 0;
      --ss-z3: 1;
  
      /*===== padd =====*/
      --ss-pad10:10;
      --ss-pad20:20;
      --ss-pad30:30;
  
    
     /*===== border =====*/
     --ss-br1:1px solid #dadce0;
     --ss-br2:1px solid #91919130;
     --ss-br3:1px solid #91919130;
  
        
     /*===== line height =====*/
  
     --ss--lh1:1.6px;
     --ss--lh2:2.4px;
     --ss--lh3:3.2px;
  
     /*===== line height =====*/
  
  
  
  
  }
  
  
  /* pro_sidebar styles */
  .pro_sidebar {
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 80px;
      background-color: #232323;
      padding-top: 20px; /* Height of the header */
      display: block;
  }
  
  .pro_sidebar ul {
      list-style-type: none;
      padding: 0;
  }
  
  .pro_sidebar li {
      padding: 10px 0;
      text-align: center;
      text-align: -webkit-center;
      line-height: 54px;
  }
  
  .pro_sidebar li:nth-child(3){
      position: fixed;
      bottom: 10px;
      width: 80px;
      left: 0px;
  }
  
  
  .pro_sidebar a {
      text-decoration: none;
      color: #ffff;
      display: block;
  }
  
  
  .web_logo{
      width:70%;
  }
  
  .grid_logo{
  
      width: 24%;
  }
  /* Content styles */
  main {
      margin-left: 80px; /* Width of the sidebar */
    
  }
  
  
  .topbar{
  
      display: none;
  }
  
  .grid_logo_controls{display: none;}
  
  /*--===========breadcrumb============-*/
  .breadcrumb {
    --bs-breadcrumb-padding-x: 0;
    --bs-breadcrumb-padding-y: 0;
    --bs-breadcrumb-margin-bottom: 0;
    --bs-breadcrumb-bg: ;
    --bs-breadcrumb-border-radius: ;
    --bs-breadcrumb-divider-color: var(--bs-secondary-color);
    --bs-breadcrumb-item-padding-x: 0.5rem;
    --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
    margin-bottom: var(--bs-breadcrumb-margin-bottom);
    font-size: var(--bs-breadcrumb-font-size);
    list-style: none;
    background-color: var(--bs-breadcrumb-bg);
    border-radius: var(--bs-breadcrumb-border-radius);
    background-color: #232323;
  }
  
  .breadcrumb ul {
    padding-block: 16px;
      width:100%;
      list-style: none;
      max-width: 97%;
      margin: 0px auto;
     
   
  }
    .breadcrumb ul li {
      display: inline;
      font-size: 16px;
    }
    .breadcrumb ul li+li:before {
      padding: 8px;
      color: rgb(255, 255, 255);
      content: "/\00a0";
    }
    .breadcrumb ul li a {
        color: white;
      text-decoration: none;
    
    }
    .breadcrumb ul li a:hover {
      color: #f1bf63;
      
    }
  
  
  /*--===========breadcrumb============-*/
  .con_1 {
      width: 100%;
      padding: 20px 0px 20px 4px;
      height: 100%;
  }
  
    .con_2 {
      width: 96%;
      border: var(--ss-br1);
      display: -ms-grid;
      display: grid;
      -ms-grid-columns: 1fr 20px 1fr;
      grid-template-columns: 1fr 1fr;
    
  
      -webkit-column-gap: 20px;
    
  
         -moz-column-gap: 20px;
    
  
              column-gap: 20px;
      row-gap: 20px;
      margin: 0px auto;
  }
  
  .con_3 {
      width: 100%;
     
      display: -ms-grid;
     
      display: grid;
      -ms-grid-columns: 1fr 10% 1fr 10% 1fr;
      grid-template-columns: 1fr 1fr 1fr;
     
      -webkit-column-gap: 10%;
     
         -moz-column-gap: 10%;
     
              column-gap: 10%;
      row-gap: 20px;
  }
  
      input, .selectvisualizer {
      font-size: 16px;
      padding: 12px;
      border: none;
      border-bottom: 2px solid var(--ss-br1);
      color: var(--ss-cr2);
      border-radius: 6px;
      max-width: 100%;
  }
  
      input,.selectvisualizer:hover {
      font-size: 16px;
      padding: 12px;
      border: none;
      border-bottom: 2px solid var(--ss-br1);
      color: var(--ss-cr3);
      border-radius: 6px;
  }
  
  *:focus-visible {
      outline:none;/* Something to get the user's attention */
    }
  

    .search_logo {
        width: 67%;
        padding-top: 2px;
    }


    /*drop down */


    .dropdown {
        max-width:100%;
        position: relative;
        top: 0;
        
    }
    .select {
      
        color: #3d3d3d;
        display: flex;
        justify-content: space-between;
        align-items: center;
        /* border: 2px #2a2f3b solid; */
        /* border-radius: 0.5em; */
        padding-block: 10px;
        cursor: pointer;
        border-bottom: 2px solid transparent;
        font-size: 1.1rem;
        min-width: 11rem;
    
    
    }
    .select-clicked {
        border: 2px #26489a solid;
        box-shadow: 0 0 0.8em #26489a;
    }
    .select:hover {
        border-bottom: 2px solid #323741;
    }
    .caret {
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 6px solid #000000;
        transition: 0.3s;
    }
    .caret-rotate {
        transform: rotate(180deg);
    }
    .menu {
        list-style: none;
        padding: 0.2em 0.5em;
        background: #323741;
        border: 1px #363a43 solid;
        box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.2);
        border-radius: 0.5em;
        color: #9fa5b5;
        position: absolute;
        top: 4em;
        left: 50%;
        width: 100%;
        transform: translateX(-50%);
        opacity: 0;
        display: none;
        transition: 0.2s;
        z-index: 1;
    }
    .menu li {
        padding: 0.7em 0.5em;
        margin: 0.3em 0;
        border-radius: 0.5em;
        cursor: pointer;
    }
    .menu li:hover {
        background: #2a2d35;
    }
    .active {
        background: #23242a;
    }
    .menu-open {
        display: block;
        opacity: 1;
    }




/* main box visualizer */

.main_flex{
    display: flex;
    background-color: #ffff;
    flex-wrap: wrap;
    font-size: 30px;
    text-align: center;
    width: 100%;
    margin: 0px auto;
    
}

.flex_iteam{
  
    background-color: #ffffff;
    flex: 50%;
    /*height: 100%;*/
    aspect-ratio: 1 / 1;
    border: 1px solid black;
    display: flex;
    flex-direction: row;
    justify-content: start;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
 
    overflow: hidden;


}

.grid_con_1{
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    padding-inline: 1rem;
    padding-block: 0rem;
    background-color: #353535;
    color: white;
        align-items: center;
    
}

.grid_con_1 > a{
 text-decoration: none;
 padding: 1rem;
 color: white;
 font-size: 16px;
    
}

.grid_con_1 > a:hover{
     color: gold;      
   }

.large-image-container{
    position: relative;
}


.column {
    flex: 1;
    padding: 0px;
}

.tab {

    color: white;
    background-color: #353535;
    overflow: auto;
    max-width: 100%;
    display: flex;
    font-size: 16px;
    justify-content: space-between;

}

.tab li {
 padding: 1rem;
 list-style-type: none;
 cursor: pointer;
}

.tab li:hover {
   color:gold;
   }


   .thumbnails-container{
    
    display: grid;
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

}

.thumbnails-container1{
    
    display: grid;
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

}

.thumbnails-container img {
       /* width: 60%; */
       aspect-ratio: 1 / 1;
       /* margin: 5px 0; */
       cursor: pointer;
       border: 2px solid black;
       margin-bottom: 6px;
   
}

.thumbnails-container1 img {
    /* width: 60%; */
    aspect-ratio: 1 / 1;
  /* margin: 5px 0; */
  cursor: pointer;
  border: 2px solid black;
 
}

.card {
    position: relative;
    margin: 16px 10px;
    /* position: relative; */
    display: block;
    padding: 6px;
    background-color: #353535;
    color: white;
    font-size: 14px;
  

}

.thumbnails-container img:after {
    display: block;
    position: absolute;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, #000 100%);
    content: '';
    top:0;
    right:0;
    bottom:0;
    left:0;
    opacity: 0.6;

  
}

.info{
    position: relative;
    top: 1px;
    text-align: left;
    white-space: nowrap; 
     width: 80%;
    overflow: hidden;
    text-overflow: ellipsis; 
}
.more{
    position: absolute;
    right: -6px;
    bottom: 6px;
    rotate: 90deg;
    font-size: 20px;

}

.grid_con_4{
    overflow-y: auto;
}


  /* Media queries for mobile devices */
  @media only screen and (max-width: 767px) and (orientation: portrait) {
      /* Styles for mobile devices in portrait orientation */
   .pro_sidebar {
  
          display: none;
      }
  
      main {
          margin-left: 0px; /* Width of the sidebar */
          margin-top: 54px;
      }
  
      .controls {
         
          width: 100%;
          height: 60px;
          padding: 6px;
          /* padding-left: 15%; */
          color: white;
          display: -ms-grid;
          display: grid;
          -ms-grid-columns:  1fr 1fr 1.2fr 1.2fr 1fr;
          grid-template-columns:  1fr 1fr 1.2fr 1.2fr 1fr;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          /* gap: 0rem; */
          justify-items: center;
      
      }
      
      .controls button{
          background: transparent;
          border-style: none;
          max-width: 200px;
          margin-left: 0rem;
      
      }
  
      .topbar{
          position: fixed;
          top: 0px;
          height: 54px;
          width: 100%;
          background: #232323;
          z-index: 1;
          display: block;
      
          padding: 10px;
      }
      .topbar ul{
         display:-ms-grid;
         display:grid;
         -ms-grid-columns: 1fr 40px;
         grid-template-columns: 1fr 40px 40px;
         gap:10px;
      
      
      }


  
      .topbar ul li{
          width: 100%;
       
       }
  
      .website_logo{
          width:120px;
      }
   
      .website_grid{
          float: right;
          width: 30px;
          padding: 4px;
      }
  
      .grid_logo_controls{
          display:block;
          width: 1.6rem;
      }

      .breadcrumb ul {
        padding-block: 5px;
          width:100%;
          list-style: none;
          max-width: 96%;
          margin: 0px auto;
         
       
      }
        .breadcrumb ul li {
          display: inline;
          font-size: 12px;
        }
  


         .select {
            color: #3d3d3d;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* border: 2px #2a2f3b solid; */
            /* border-radius: 0.5em; */
            padding-block: 10px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            font-size: 16px;
            min-width: 9rem;
        }

        .breadcrumb {
            --bs-breadcrumb-padding-x: 0;
            --bs-breadcrumb-padding-y: 0;
            --bs-breadcrumb-margin-bottom: 0;
            --bs-breadcrumb-bg: ;
            --bs-breadcrumb-border-radius: ;
            --bs-breadcrumb-divider-color: var(--bs-secondary-color);
            --bs-breadcrumb-item-padding-x: 0.5rem;
            --bs-breadcrumb-item-active-color: var(--bs-secondary-color);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x);
            margin-bottom: var(--bs-breadcrumb-margin-bottom);
            font-size: var(--bs-breadcrumb-font-size);
            list-style: none;
            background-color: var(--bs-breadcrumb-bg);
            border-radius: var(--bs-breadcrumb-border-radius);
            background-color: rgb(87, 87, 87);
        }
        .flex_iteam {
            background-color: #ffffff;
            /* padding-inline: 10px; */
            aspect-ratio: 0 / 0;
            flex: 100%;
            height: 100%;
            border: 1px solid black;
            display: flex;
            flex-direction: row;
            justify-content: start;
            /* gap: 3rem; */
            display: flex;
            flex-direction: column;
        }

        .grid_con_1{
            display: flex;
            justify-content: space-between;
            font-size: 20px;
            padding-inline: 1rem;
            padding-block: 0rem;
            background-color: #353535;
            color: white;
        align-items: center;
            
        }
        
        .grid_con_1 > a {
            text-decoration: none;
            padding-inline: 0.1rem;
            color: white;
            font-size: 14px;
            padding-block:0.6rem ;
        }

        .thumbnails-container{
    
            display: inline-block;
            display: -webkit-inline-box;
       
        
            overflow-x: auto;
            width: 100%;
           
        
        }
        
        .thumbnails-container1{
    
            display: inline-block;
            display: -webkit-inline-box;
       
        
            overflow-x: auto;
            width: 100%;
           
        
        }
        
        .thumbnails-container img {
              /* width: 60%; */
              aspect-ratio: 1 / 1;
            /* margin: 5px 0; */
            cursor: pointer;
            border: 2px solid black;
            border-radius: 10px;
        }
        
        
        
        .card {
            margin: 16px 10px;
            /* position: relative; */
            display: block;
            padding: 2px;
            background-color: #353535;
            color: white;
            font-size: 12px;
            text-overflow: ellipsis;
            width: 160px;
        
        }
        .card img{
            width: 160px;
            margin-bottom: 6px;
            border-radius: 0px;
        }
        
    
  }
  
  /* Media queries for mobile devices in landscape orientation */
  @media only screen and (max-width: 767px) and (orientation: landscape) {
      /* Styles for mobile devices in landscape orientation */
    
  }
  
  /* Media queries for tablet devices */
  @media only screen and (min-width: 768px) and (max-width: 1024px) {
      /* Styles for tablet devices */
    
  }