:root {
   --albastru-inchis: #2C4157;
   --albastru-deschis: #6596CA;
   --alb: #ffffff;
   --gri-deschis: #f2f2f2;
   --gri: #7A7A7A; 
   --negru: #333333;
   --rosu: #DC4239; 
}

a{
   text-decoration: none;
}

body{
   font-family: "Roboto";
   font-size:16px;
   color: var(--albastru-inchis)
}


/* globale */
a.btn-alb-rosu,
a.btn-rosu-rosu:hover{
   border-radius: 4px;
   border: 1px solid var(--rosu);
   background: var(--alb);
   color: var(--rosu);
   font-size: 15px;
   font-style: normal;
   font-weight: 400;
   text-transform: uppercase;
}

a.btn-rosu-rosu,
a.btn-alb-rosu:hover{ 
   border-radius: 4px;
   border: 1px solid var(--rosu);
   color: var(--alb);
   background: var(--rosu);
   font-size: 15px;
   font-style: normal;
   font-weight: 400;
   text-transform: uppercase;
}

a.btn-alb-alb{
   border-radius: 4px;
   border: 1px solid var(--alb);
   background: transparent;
   color: var(--alb);
   font-size: 15px;
   font-style: normal;
   font-weight: 400;
   text-transform: uppercase;
   padding:15px 20px
}

.text-lower{
   text-transform: none !important;
}

.btn-albastru{
   border-radius: 4px;
   background: var(--albastru-deschis);
   color: var(--alb);
   font-size: 15px;
   font-style: normal;
   font-weight: 400;
   text-transform: uppercase;
}

.btn-albastru:hover, .btn-albastru.active{
   background: var(--albastru-inchis);
   color:  var(--alb);
}

.openDetaliiStatii.active .text-albastru-deschis, .text-albastru-deschis.active{
   color: var(--albastru-inchis);;
}

.titlu-albastru{
   color: var(--albastru-inchis);
   font-family: "Roboto Flex";
   font-size: 18px;
   font-style: normal;
   font-weight: 600;
   line-height: 22px; /* 21.294px */
   text-transform: uppercase;
}

.titlu-albastru-deschis{
   color: var(--albastru-deschis);
   font-family: "Roboto Flex";
   font-size: 18px;
   font-style: normal;
   font-weight: 600;
   line-height: 22px; /* 21.294px */
   text-transform: uppercase;
}

.hero-titlu-mic{
   color:var(--alb);
   color: #FFF;
   font-family: "Roboto Flex";
   font-size: 20px;
   font-style: normal;
   font-weight: 400;
   line-height: 41px;  
}


.hero-titlu-mare{
   color:var(--alb);
   font-family: "Roboto Serif";
   font-size: 50px; 
   font-style: normal;
   font-weight: 600;
   line-height: 45px; /* 90% */
}


/* header */
.text-logo{
   color: var(--albastru-inchis);
   font-family: "Roboto Flex";
   font-size: 18px;
   font-style: normal;
   font-weight: 600;
   line-height: 22px; /* 21.294px */
   text-transform: uppercase;
   max-width:300px;
}

.text-logo a{
   color: var(--albastru-inchis);
}

.link-header{
   color: var(--gri);
   margin-right:15px;
   font-size: 15px;
   font-style: normal;
   font-weight: 400;
}

.link-header:hover{
   text-decoration: none;
   color: var(--albastru-inchis);
}

.link-boton-header{
   gap: 10px;
}

.link-boton-header a{
   height: 54px;
   padding: 10px 18px;
   background-color: var(--albastru-deschis);
   color: var(--alb);
   border-radius:4px;
   font-family: Roboto;
   font-size: 15px;
   font-style: normal;
   font-weight: 500;
   line-height: 51px; /* 340% */
   text-transform: uppercase;
}

.link-boton-header a:hover{
   background-color: var(--albastru-inchis);
   text-decoration: none;
} 

.link-boton-header a.active{
   background-color: var(--albastru-inchis);
}

.link-boton-header i{
   margin-right:3px;
}

.text-gri{
   color: var(--gri);
   font-size: 16px;
   font-family: "Roboto Flex";
}

.text-gri li{
   line-height: 1.8;
   margin-bottom: 12px;
}

.text-bold{
   font-weight: 600;
}




/* footer */
footer{
   border-top: solid 2px var(--rosu);
   margin-top: 60px;
}


#footer-el1{
   background:silver url('/imagini/autobuz-footer.jpg');
   background-size:cover;
   background-position:center bottom;
   padding:70px 0;
   border-top:solid 3px var(--rosu);
}


#footer-el2{
   background:silver;
   padding:10px 0;
   color: var(--alb);
   background-color: var(--albastru-inchis);
}


#footer-el1>div div{
   max-width:330px;
}

#footer-col2,
#footer-col3 a{
   color:var(--gri);
}

footer i{
   margin-right:10px;
   color:var(--albastru-deschis);
}


/* container continut principal */
#continut{
   margin:-27px 0 0 0; 
   padding:0;
   min-height:300px;
}

#content-interior{
   padding: 35px;
   border-radius: 20px;
   background: #FFF;
   box-shadow: 8px 11px 21px 0px rgba(0, 0, 0, 0.08);
   min-height: 200px;
   margin-top: -70px;
   margin-bottom: 150px;
   position: relative;
   white-space: normal;
   word-wrap: break-word;
}

#content-interior-separat{
   min-height: 200px;
   margin-top: -70px;
   margin-bottom: 150px;
   position: relative;
   white-space: normal;
   word-wrap: break-word;
}


/* specifice */
#hero-acasa{
   min-height:560px;
   background: url('/imagini/hero-mersul-autobuzelor.jpg');
   background-position: center center;
   background-size: cover;
}

#hero-acasa .container{
   padding:200px 0;
}

#box-cautare{
   border-radius: 20px;
   background: #FFF;
   box-shadow: 8px 11px 21px 0px rgba(0, 0, 0, 0.08);
   min-height:200px;
   margin-top:-70px;
   margin-bottom:150px;
   position:relative;
}

.step{
   padding:33px 28px;
}


#box-cautare .step{
   border-right: solid 1px var(--gri-deschis);
}

#box-cautare #step4{
   border-right:0 !important;
}

.step .step-titlu{
   color: var(--albastru-deschis);
   font-family: "Roboto Serif";
   font-size: 50px;
   font-style: normal;
   font-weight: 600;
   line-height: 45px; /* 90% */
}

.step .titlu-albastru{
   margin-left:20px;
   font-size:17px;
   line-height: 22px;
}

.step{
   flex:1;
}

.step .step-bottom{
   border: solid 1px var(--gri-deschis);
   border-radius: 20px;
   margin-top:20px;
   padding: 25px;
}

.step input[type='text']{
   border:none;
   background:var(--gri-deschis);
   border-radius:10px;
   padding:10px 10px;
   color:var(--albastru-inchis);
   margin-top:5px;
   width:100%;
   font-size:12px;
}

.step .selection .select2-selection{
   border:none;
   background:var(--gri-deschis);
   border-radius:10px;
   color:var(--albastru-inchis);
   margin-top:5px;
   width:100%;
   font-size:12px;
   height: 34px;
}

.step .select2-container--default .select2-selection--single .select2-selection__arrow{
   height: 34px;
}

.step .select2-container--default .select2-selection--single .select2-selection__rendered{
   line-height: 34px;
}

.step .select2-container--default .select2-selection--single .select2-selection__arrow b{
   margin-top: 0;
}

.select2-container--default .select2-results>.select2-results__options{
   font-size: 12px;
}

#step-cauta{
   position:absolute;
   bottom:-50px;
   right:30px;
   padding:0 50px;
   line-height: 50px;
   background-color: var(--albastru-deschis);
   color:white;
   border:none;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
}

.step-bottom{
   color:var(--gri);
}

.step-bottom i{
   margin-right:5px;
}


ul#rezultateCautare li {
   line-height: 20px; 
   padding: 5px 5px;
   font-size:13px;
   border-bottom: solid 1px #f2f2f2;
   cursor: pointer;
}

ul#rezultateCautare li:hover{
   background: var(--albastru-deschis);
   color: var(--alb);
}

ul#rezultateCautare { 
   position: absolute;
   background: white;
   box-shadow: 0 0 7px #ddd;
   border-radius: 10px;
   list-style-type: none;
   padding: 0 0px;
   margin: 0;
   max-height: 300px;
   overflow-y: auto;
   z-index:99;
   min-width:250px;
}

.toggle-detalii, .toggle-harta{
   display: none;
}

.toggle-harta [id^="map-"], #map{
   height: 700px;
   width: 100%;
}


[id^="map-traseu-"]{
   height: 230px;
   width: 100%;
}

/* pagina noutati */
.boxSingle{
   padding: 20px;
   border-radius: 20px;
   background: #FFF;
   box-shadow: 5px 4px 17px 1px rgba(0, 0, 0, 0.07);
   position:relative;
}

.noutati .boxSingle{
   height:280px;
}

.boxSingle img{
   width:100%;
   height:150px;
   object-fit:cover;
   margin-bottom: 10px;
}


/* HARTI */
.modal_detalii_statie .localitate{
   font-size: 14px;
   font-weight: bold;
   margin-bottom: 3px;
}

.modal_detalii_statie .statie{
   font-size: 12px;
   margin-bottom: 3px;
}

.modal_detalii_statie hr{
   margin: 5px 0 5px 0;
}

.modal_detalii_statie .coordonate{
   font-size: 12px;
   color:  var(--gri);;
}

.modal_detalii_statie .trasee a{
   display: inline-block;
}

.linie_traseu a{
   font-size: 14px;
}

/* operatori */
.boxTitluOperator{
   padding: 20px;
   border-radius: 20px 20px 0 0;
   background: #FFF;
   box-shadow: 0px 0px 21px 2px rgba(0, 0, 0, 0.08);
}

.boxOperator{
   padding: 20px;
   border-radius: 0 0 20px 20px;
   background: #FFF;
   box-shadow: 8px 11px 21px 0px rgba(0, 0, 0, 0.08);
   margin-bottom: 40px;
}

.divMargineNegativa{
   margin-top: -70px
}

/* harti */

.info-window-content {
   font-family: 'Arial', sans-serif;
   padding: 2px;
   background-color: #fff;
   border-radius: 8px;
   max-width: 200px;
}

.gm-style-iw-c{
   padding:0;

}

.gm-style-iw-ch{
   padding-top:0
}

.gm-style-iw-chr button{
   width: 26px !important;
   height: 26px !important;
}

.gm-style-iw-chr span{
   width: 18px !important;
   height: 18px !important;
   margin: 0px 6px !important;
}

.text-bold{
   font-weight:bold
}
   
.info-window-title {
   font-size: 12px;
   color: #333;
   margin: 0;
   text-align: center;
}

.bold{
   font-weight: 600;
}

.rand_tabel{
   border-bottom: 1px solid #f2f2f2;
   padding: 10px;
}

.rand_tabel:last-child{
   border-bottom:0
}


/* rezultate */
.rezultat-cursa{
   padding:20px 0;
   margin:10px 0;
   border-top: solid 3px #f2f2f2;
   page-break-inside: avoid;

}

.rezultat-cursa:last-child{
   border-bottom:none;
}

.rezultat-cursa .rezultat-ora{
   font-size:35px;
   color:var(--albastru-inchis);
   text-align:center;
}

.rezultat-cursa .rezultat-statie{
    font-size: 17px;
    color: var(--gri);
    text-align:center;
}

.rezultat-cursa .rezultat-timp-km,
.rezultat-cursa .rezultat-escale
{
    font-size: 14px;
    color: var(--gri);
    text-align:center;
}

.arrow {
    position:relative;
    width:100%;
    margin:10px auto;
    height:0;
    border-bottom:5px solid var(--albastru-deschis);
}

.arrow::after { 
    content: '';
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 15px solid var(--albastru-deschis);
    position: absolute;
    right: -5px;
    top: -7.5px;
}


/* ---------- HOME ----------- */
.bg-rosu{
   background-image: url('/imagini/bg-nr.png');
   background-color: var(--rosu);
}

.divNumere{
   border-radius: 5px;
   color: var(--alb);
   padding-top: 30px;
   padding-bottom: 30px;
}

.divNumere .divNr {
   padding: 0 80px;
   display: flex;
   justify-content: center;
   column-gap: 25px;
   align-items: center;
}

.divNumere .divNr h2{
   font-size: 48px;
   font-weight: 500;
   line-height: 51px;
   margin-bottom: 0;
   font-family: "Roboto Serif";
}

.divNumere .divNr h4{
   font-size: 18px;
   font-weight: 500;
   font-family: "Roboto Serif";
   margin-bottom: 0;
}

.titlu-sectiune{
   font-family: "Roboto Serif";
   font-size: 35px;
   font-style: normal;
   font-weight: 600;
   line-height: 37px;
}

.subtitlu-sectiune {
   font-family: "Roboto Flex";
   font-size: 30px;
   font-style: normal;
   font-weight: 300;
   margin-bottom: 40px;
}

.text-albastru{
   color: var(--albastru-inchis);
}

.text-albastru-deschis{
   color: var(--albastru-deschis);
}

.text-alb{
   color: var(--alb);
}

.divider{
   position: relative;
   margin-top: 30px;
   margin-bottom: 30px;
}

.divider hr{
   height: 2px;
   margin: 0;
   opacity: 1;
}

.divider .gri{
   background: rgba(236, 236, 236, 0.8);
}

.divider .rosu{
   background-color: var(--rosu);
   position: absolute;
   top: 0;
   width: 15%;
}

.divAtributiiCji{
   margin-top: 100px;
   margin-bottom: 100px;
}

.divAtributiiCji img{
   width: 100%;
   object-fit: cover;
   padding-right: 50px;
   height: 100%;
}

.divAtributiiAjtp{
   padding-top: 70px;
   padding-bottom: 70px;
   color: var(--alb);
   position: relative;
   background-repeat: no-repeat;
   background-size: cover;
   margin-bottom: 100px;
}

.overlay{
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(44, 65, 87, 0.80);
   z-index: 2;
}

.divAtributiiAjtp .container{
   z-index: 3;
   position: relative
}

.two-columns{
   color: var(--alb);
   margin-top: 40px;
}

.two-columns ul{
   columns: 2;
   column-gap: 130px;
}

.noutati h6{
   color: var(--albastru-inchis);
   font-family: "Roboto Serif";
   font-size: 15px;
   font-style: normal;
   font-weight: 500;
   line-height: 22px;
}

.divLegislatie .bg-rosu{
   padding: 40px;
   height: 100%;
}

.divLegislatie{
   margin-top: 100px;
}

.divLegislatie hr{
   width: 20%;
   height: 3px;
   background: rgb(255, 255, 255);
   opacity: 0.8;
   margin-top: 30px;
   margin-bottom: 30px;
}

.font-light{
   font-weight: 300;
}

.divLegislatie img{
   height: 100%;
   width: 100%;
   object-fit: cover;
   object-position: 0%;
}

.divLicitatii{
   margin-top: 120px;
   margin-bottom: 120px;
   box-shadow: 5px 4px 17px 1px rgba(0, 0, 0, 0.07);
   padding: 30px;
   border-radius: 5px;
}

.divLicitatii a{
   padding: 15px 20px;
}

.divLicitatii .text-gri{
   padding: 0px 0 0 45px;
}

.divLicitatii .text-gri p{
   margin-bottom: 0;
}

.divLicitatii .col-text{
   border-left: 3px solid var(--rosu);
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{
   font-size: 12px;
   font-weight: 400;
}

.ui-datepicker th{
   font-size: 12px;
}

.ui-datepicker .ui-datepicker-title select{
   font-size: 12px;
}

.bg-albastru{
   background-image: url('/imagini/bg-nr.png');
   background-color: var(--albastru-deschis);
}

.divProgramTransport .bg-albastru{
   padding: 40px;
   height: 100%;
}

.divProgramTransport{
   margin-top: 100px;
}

.divProgramTransport hr{
   width: 20%;
   height: 3px;
   background: rgb(255, 255, 255);
   opacity: 0.8;
   margin-top: 30px;
   margin-bottom: 30px;
}

.divProgramTransport img{
   height: 100%;
   width: 100%;
   object-fit: cover;
   object-position: 0%;
}

.copii_pg a{
   display: block;
   color: var(--albastru-deschis);
}

.rand-rezultat-cursa{
   display: flex !important;
   flex-wrap: nowrap;
   flex-direction: row;
   justify-content: flex-start;
   column-gap: 20px;
   position: initial;
}

.rand-rezultat-cursa.statie_stop{
   margin-top: -4px;
}

.border-vertical{
   border-left: 2px solid #000000;
   position: relative;
   width: 100%;
}

.dotStatieStart{
   position: absolute;
   top: 0;
   left: -8px;
   background: var(--alb);
}

.dotStatieStop{
   position: absolute;
   top: 4px;
   left: -7px;
   background: var(--alb);
}

.dotStatieFinal{
   position: absolute;
   bottom: 0px;
   left: -8px;
   background: var(--alb);
}

.div-detalii-traseu{
   display: none;
}

.div-detalii-statii{
   display: none;
   position: relative;
   margin-top:-20px;
   background-color: var(--alb);
}

.div-detalii-pret{
   display: none;
}

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

.reverse{
   position: absolute;
   top: calc(55%);
   left: -17px;
   padding: 10px;
   background: var(--alb);
   border: 1px solid #f2f2f2;
   border-radius: 50%;
   cursor: pointer;
}

.reverse:hover{
   background: var(--gri-deschis);
}

.img_noutate{
   height: 400px;
   object-fit: cover;
}


/* modificare latime container din default */
@media (min-width: 1200px) {
    .container {
        max-width: 1280px !important;
        padding-left:0;
        padding-right:0;
    }
}


/* ------------------ MOBILE --------------- */
/* Small devices (landscape phones, 576px and up) */
@media (max-width: 767px) {
   #box-cautare{
      flex-wrap: wrap;
   }

   #continut{
      margin-top: 0;
   }

   footer .divColoane{
      flex-wrap: wrap;
      gap: 20px;
   }

   .text-logo{
      font-size: 16px;
   }

   #footer-el1{
      padding: 30px 0;
   }
}

@media (min-width: 560px) and (max-width: 900px) {
   footer .divColoane{
      flex-wrap: wrap;
      gap: 20px;
   }

   #footer-el1>div div{
      max-width: none;
   }

   #footer-col1 {
      flex: 1 1 100%; /* Ocupă întregul rând */
   }
   
   #footer-col2, #footer-col3 {
      flex: 1 1 calc(50% - 10px); /* Ocupă 50% din lățime */
   }
}

@media (min-width: 768px) and (max-width: 820px) {
   #box-cautare{
      flex-wrap: wrap;
   }
   #box-cautare .step{
      padding: 20px;
      gap: 2px;
      flex: 1 1 calc(50% - 10px);
   }
}

@media (max-width: 1023px) {
   #continut{
      margin-top: 0;
   }
   
   .btn-meniu{
      background-color: var(--gri-deschis);
   }

   .content-meniu{
      position: absolute;
      background: var(--alb);
      width: 100%;
      left: 0;
      padding: 15px;
      top: 91px;
      border-top: 2px solid var(--rosu);
   }

   .content-meniu .d-flex{
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
   }


   .meniu-mobile{
      text-align: right;
      margin-top: -55px;
   }

   .meniu-mobile .link-boton-header{
      display: block;
      text-align: left;
      width: 100%;
   }

   .meniu-mobile .link-boton-header a{
      width: 100%;
      line-height: 16px;
      display: block;
      height: auto;
   }
   
}

@media (max-width: 1200px) {
   .link-boton-header a{
      font-size: 12px;
   }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {  }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {  }

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

/*  XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { }