/* Bendri stiliai */
/* <weight>: Use a value from 100 to 800 */
/* <uniquifier>: Use a unique and descriptive class name */



a {
  color: #193259; 
  text-decoration: underline;
  font-family: "Ubuntu Sans", sans-serif;
  font-size: 18px;
}

a:hover {
  text-decoration: none;
  font-family: "Ubuntu Sans", sans-serif;
  font-size: 18px;
}

a:active {
  color: #444444; 
}

a:visited {
  color:#193259; 
  text-decoration: underline;
  font-family: "Ubuntu Sans", sans-serif;
  font-size: 18px;
}

ul {
  column-count: 3;
  text-align: left;
  list-style-type: none;
  padding: 0;
  margin: 0;
  list-style: none;
}

li {
  margin-bottom: 10px; /* Prideda tarpą po kiekvienu elementu */

}

.highlight {
    background-color: yellow; /* Paryškinimo spalva */
    color: red; /* Teksto spalva */
    font-weight: bold; /* Paryškintas tekstas */
}

.valid {
  width: auto;
  height: 50px;
}


input, button, select {
  font-family: "Ubuntu Sans", sans-serif;
  font-size: 18px;
  border: 1px solid #ccc;
  outline: none;
  box-sizing: border-box;
  background-color: white;
  color: #666666;
}

input[type=number] {
  box-sizing: border-box;
  border: 1px solid #ccc; 
  transition: 0.5s;
  outline: none;
  height: 28px;
  padding: 0 5px; /* 5px tarpas nuo kairio krašto abiem elementams */
  vertical-align: middle;
  background-color: white;
  color: #666666;
  text-align: left; /* Priverstinis lygiavimas kairėje */
}

input[type=number]:focus {
  border: 1px solid #555;

}

input[type="text"] {
    box-sizing: border-box;
    border: 1px solid #ccc;
    transition: 0.5s;
    outline: none;
}

input[type="text"]:focus {
    border: 1px solid #555;
}

input[type="select"] {
    box-sizing: border-box;
    border: 1px solid #ccc;
    transition: 0.5s;
    outline: none;
}

input[type="select"]:focus {
    border: 1px solid #555;
}

.rating .star {
        cursor: pointer;
        font-size: 16px;
    }
    
.rating .star.active {
        color: rgb(236, 110, 6);
        font-size: 16px;
    }


body {
    background-color: #F7F7F7; 
    color: #666666; 
    margin: 0px;
    height: 100vh; /* Visas ekranas */
    display: flex; /* Flexbox */
    flex-direction: column; /* Stulpelis */
}

.header {
    background-color: #d1e3ed; 
    border: 1px solid #adbdc7; 
    /*box-shadow: 1px 1px 1px #ced3db;*/
    color: #333333; 
    padding: 5px;
    text-align: left;
    margin: 5px;
}

.main-content {
    max-width: 800px;
    margin-left: 0; /* Prigludęs prie kairiojo krašto */
    padding: 20px; /* Pradinis padding */
    flex: 1 0 auto;
}

.footer {
  font-family: "Ubuntu Sans", sans-serif;
  font-size: 14px;
  border: 1px solid #adbdc7;
  background-color: #d1e3ed;
  color: #666666;
  padding: 5px;
  margin: 5px;
  text-align: left;
  flex-shrink: 0; /* Neleidžia footer'iui susitraukti */
}

.footer a {
    font-size: 13px; /* Nustatykite norimą teksto dydį */
    text-decoration: underline;
    font-family: "Ubuntu Sans", sans-serif;
}

.footer a:hover {
    font-size: 13px; /* Nustatykite norimą teksto dydį */
    text-decoration: none;
    font-family: "Ubuntu Sans", sans-serif;
}

.footer a:visited {
    font-size: 13px; /* Nustatykite norimą teksto dydį */
    color:#193259; 
    text-decoration: underline;
    font-family: "Ubuntu Sans", sans-serif;
}

div.blueTable {


  font-size: 20px;
  border: 0px dashed #1C6EA4;
  background-color: #F2F2F2; 
  width: 100%;
  text-align: left;
  border-collapse: collapse; 
  margin-right: 3px;
  margin-bottom: 3px;
}

.divTable.blueTable .divTableCell, .divTable.blueTable {
  border: 1px dashed #999999; 
  padding: 3px;
  box-sizing: border-box;
  
}

.divTableCell {
height: 24px;
font-family: "Ubuntu Sans", sans-serif;
}

.divTable.blueTable .divTableBody .divTableCell {
  font-size: 18px;
  color: #333333;


}

.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableCell { display: table-cell;}
.divTableBody { display: table-row-group; }

.container {
  display: flex;
  flex-wrap: wrap; /* Leidžia elementams persikelti į naują eilutę */
  gap: 0px; /* Pridedame tarpus tarp elementų */
  flex-direction: row;
  align-content: stretch;
  
}

.item {
  flex-grow: 1; /* Užtikrina, kad visi item div'ai dalinsis plotį vienodai */
  flex-basis: calc(25% - 1px); /* Tikslus ketvirtadalio plotis su tarpu */
  border: 1px dashed #bcbcbc; /* Rėmelis visiems item div'ams */
  box-sizing: border-box;
  padding: 3px; /* Pridedame šiek tiek vidinio užpildo */
  
  font-family: "Ubuntu Sans", sans-serif;
}

.item:nth-child(5) {
  flex-grow: 3; /* Užima trijų div'ų plotį */
  flex-basis: calc(75% - 1px); /* Tikslus trijų ketvirtadalių plotis su tarpu */
  margin-bottom: 15px; /* Pridedame tarpą po paskutiniu elementu */
  padding: 3px;
  font-family: "Ubuntu Sans", sans-serif;
}

.item:nth-child(6) {
  flex-grow: 1; /* Užima vieno div'o plotį */
  flex-basis: calc(25% - 1px); /* Tikslus ketvirtadalio plotis su tarpu */
  margin-bottom: 15px; /* Pridedame tarpą po paskutiniu elementu */
  padding: 3px;
  font-family: "Ubuntu Sans", sans-serif;
}

.item:nth-child(-n+4) {
  background-color: #e0e4e7; /* Nauja fono spalva pirmiems keturiems elementams */
  color: #212121; /* Nauja teksto spalva pirmiems keturiems elementams */
}

.container_model {
  display: flex;
  flex-wrap: wrap; /* Leidžia elementams persikelti į naują eilutę */
  gap: 0px; /* Pridedame tarpus tarp elementų */
  flex-direction: row;
  align-content: stretch;
  margin: 0;
  padding: 0;
}

.item_model {
  flex-grow: 1; /* Užtikrina, kad visi item div'ai dalinsis plotį vienodai */
  flex-basis: calc(33.3333% - 0px); /* Tikslus trečdalio plotis su tarpu */
  border: 1px dashed #bcbcbc; /* Rėmelis visiems item div'ams */
  box-sizing: border-box;
  padding: 3px; /* Pridedame šiek tiek vidinio užpildo */
  font-family: "Ubuntu Sans", sans-serif;
}

.item_model:nth-child(4) {
  flex-grow: 2; /* Užima dviejų trečdalių plotį */
  flex-basis: calc(66.666% - 0px); /* Tikslus dviejų trečdalių plotis su tarpu */
  margin-bottom: 15px; /* Pridedame tarpą po paskutiniu elementu */
  padding: 3px;
  font-family: "Ubuntu Sans", sans-serif;
}

.item_model:nth-child(5) {
  flex-grow: 1; /* Užima vieno trečdalio plotį */
  flex-basis: calc(33.3333% - 0px); /* Tikslus vieno trečdalio plotis su tarpu */
  margin-bottom: 15px; /* Pridedame tarpą po paskutiniu elementu */
  padding: 3px;
  font-family: "Ubuntu Sans", sans-serif;
}

.item_model:nth-child(-n+3) {
  background-color: #e0e4e7; /* Nauja fono spalva pirmiems keturiems elementams */
  color: #212121; /* Nauja teksto spalva pirmiems keturiems elementams */
}



/* Mobiliojo dizaino pritaikymas */

@media only screen and (max-width: 600px) {
  
    .main-content {
        padding: 5px;
    }
    .section {
        margin-bottom: 5px;
    }
        /* Input elementų stiliai mobiliesiems */
        input[type="text"],
        input[type="number"],
        input[type="select"],
        select {
            width: 90% !important; /* !important kad perrašytų inline stilius */
            max-width: 100%;
            box-sizing: border-box;
            margin: 2px 0;
        }
        .divTable.blueTable .divTableCell:first-child {
          width: 60%;
      }
    
      .divTable.blueTable .divTableCell:last-child {
          width: 40%;
      }
}

/* Planšetės dizaino pritaikymas */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    .main-content {
        padding: 5px;
    }
    .section {
        margin-bottom: 5px;
    }
}

/* Stalinių kompiuterių dizaino pritaikymas */
@media only screen and (min-width: 1025px) {
  .main-content {
      max-width: 100%;
      margin: 5px;
      padding: 5px;
      width: calc(100% - 10px);
      box-sizing: border-box;
  }

  .container, .container_model {
      width: 100%;
      margin: 0;
  }

  .divTable.blueTable {
      width: 100%;
      margin: 0;
  }

    /* Pridedame naujus stilius divTableCell elementams tik desktopui */
    .divTable.blueTable .divTableCell:first-child {
      width: 20%;
  }

  .divTable.blueTable .divTableCell:last-child {
      width: 80%;
  }

  .item, .item_model {
      box-sizing: border-box;
  }

  .section {
      margin-bottom: 5px;
      width: 100%;
  }


}

/* Stilius laukeliams, kurių negalima redaguoti (readonly) */
input[readonly] {
    background-color: #e9e9e9; /* Švelniai pilkas fonas */
    color: #555555; /* Šiek tiek tamsesnis tekstas geresniam skaitomumui */
    cursor: default; /* Pelytė nesikeičia į žymeklį, parodo, kad negalima rašyti */
    border-color: #ccc; /* Išlaikome rėmelį */
}