.btn{
  margin: 5px;
}

.fa, .fas, .far {
  color: #b30d0d;
}


.ukupno{
  font-size: 80%;
  font-style: italic;
}

.wrapper2 {
      display: grid;
      grid-gap: 5px;
      grid-template-columns: 100px 100px 100px;
      background-color: #fff;
      color: #444;
      text-align: center;
      vertical-align: middle;
      margin: 10px 0 10px 0;
      font-size: 12px;
 
}

.wrapper2 a{
  text-decoration: none;
  color: black;
}
  
    .box {
      color:#444;
      border-radius: 5px;
      border: #444 1px solid;
      padding: 2px;
      font-size: 100%;
      display:flex;
      align-items:center;
      min-height: 10px;

    }
  
    .a101, .a102{
      writing-mode: vertical-rl;
      grid-column: 1;
      text-align: center;
      font-size: 16px;

    }
    .a101 {
      grid-row: 1/17;
    }
    .a102 {
      grid-row:  17 / 33; 
    }

    .a201 {
      grid-row: 1 / 9 ;
    }
    .a202 {
      grid-row: 9/17;
    }
    .a203 {
      grid-row: 17/25;
    }
    .a204 {
      grid-row: 25/33;
    }


    .a201, .a202, .a203, .a204{
    grid-column: 2/4;

    
    }
    .a301, .a302, .a303, .a304, .a305, .a306, .a307, .a308 {
      grid-column: 4/5;
    }
    .a401, .a402, .a403, .a404, .a405, .a406, .a407, .a408, .a409, .a410, .a411, .a412, .a413, .a414, .a415, .a416 {
      grid-column: 5/6;

    }


    .a301 {
      grid-row: 1 / 5 ;
    }
    .a302 {
      grid-row: 5 / 9 ;
    }
    .a303 {
      grid-row: 9 / 13 ;
    }
    .a304 {
      grid-row: 13/ 17 ;
    }

    .a305 {
      grid-row: 17 / 21 ;
    }

    .a306 {
      grid-row: 21 / 25 ;
    }

    .a307 {
      grid-row: 25 / 29 ;
    }
    .a308 {
      grid-row: 29 / 33;
    }

    .a401{
      grid-row: 1/3;
    }

    .a402{
      grid-row: 3/5;
    }

    .a403{
      grid-row: 5/7;
    }

    .a404{
      grid-row: 7/9;
    }

    .a405{
      grid-row: 9/11;
    }

    .a406{
      grid-row: 11/13;
    }

    .a407{
      grid-row: 13/15;
    }

    .a408{
      grid-row: 15/17;
    }

    .a409{
      grid-row: 17/19;
    }

    .a410{
      grid-row: 19/21;
    }

    .a411{
      grid-row: 21/23;
    }

    .a412{
      grid-row: 23/25;
    }

    .a413{
      grid-row: 25/27;
    }

    .a414{
      grid-row: 27/29;
    }

    .a415{
      grid-row: 29 / 31;
    }

    .a416{
      grid-row: 31 / 33;
    }
    .a501, .a502, .a503, .a504, .a505, .a506, .a507, .a508, .a509, .a510, .a511, .a512, .a513, .a514, .a515, .a516,
    .a517, .a518, .a519, .a520, .a521, .a522, .a523, .a524, .a525, .a526, .a527, .a528, .a529, .a530, .a531, .a532 {
      grid-column:6;
      min-height:20px;
    
    }

    .a101, .a201, .a203, .a301, .a303, .a305, .a307, .a401, .a403, .a405, .a407, .a409, .a411, .a413, .a415,
    .a501, .a503, .a505, .a507, .a509, .a511, .a513, .a515, .a517, .a519, .a521, .a523, .a525, .a527, .a529, .a531
      {
      background-color: rgb(223, 234, 253);
      color:blue;

    }

    .a102, .a202, .a204, .a302, .a304, .a306, .a308, .a402, .a404, .a406, .a408, .a410, .a412, .a414, .a416,
    .a502, .a504, .a506, .a508, .a510, .a512, .a514, .a516, .a518, .a520, .a522, .a524, .a526, .a528, .a530, .a532 {
      background-color: rgb(254, 211, 230);
      color: red;

    }

    .detalji{
      border: 1px solid #999;
      border-radius: 5px;
      padding: 10px;
      margin: 10px 0 10px 0;
    }
    .detalji-linije{
      border-top: 1px solid #999;
      border-bottom: 1px solid #999;
      padding: 10px 0;
      margin: 10px 0 10px 0;
    }
    .detalji-blok{
      border: 1px solid #999;
      border-radius: 5px;
      padding: 10px;
      margin: 10px 0 10px 0;
      background-color: oldlace;
    }

    .detalji-centar{
      border: 1px solid #999;
      border-radius: 5px;
      padding: 10px;
      margin:30px;
      text-align: center;
    }

    #id_naziv, #id_eng, #id_boja, #id_name{
      width: 100%;
    }

    .ikone{
      column-width: 100px;
      text-align: right;
    }

    .konji, .table-sm, .table{
      font-size: smaller;
    }

    .rodovnik-ime{
      font-weight: bold;
      font-size: larger;
      display: block;
    }

    .rodovnik-rod{
      font-style: italic;
      font-size: smaller;
    }


    .naslov{
      width: 100%;
      font-weight: bold;
      padding: 5px;
    }

    .polje{
      width: 100%;
      text-align: left;
      border: 1px solid rgb(0, 161, 247);
      border-radius: 5px;
      padding: 5px;
    }
  
    .img-thumbnail-100{
      max-width: 100px;
      height: auto;
    }

    .img-thumbnail-rodovnik{
      max-width: 300px;
      border: #444 1px solid;
      padding: 5px;
      height: auto;
    }