/* google font */
@import url('https://fonts.googleapis.com/css2?family=Poppins');

*{
box-sizing: border-box;
font-family: 'Poppings', sans-serif;
}



@media (max-width: 738px) {
#levelForm select {
    font-size: 8px;
    text-align: center;
    width: 70px;
    height: 20px;
}
}

@media (min-width: 738px) {
  #levelForm select {
      font-size: 12px;
      text-align: center;
      width: 120px;
      height: 25px;
  }
  }





#viewport {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 50vh; 
  width: 100%;
  border:1px solid black;
  border-radius: 5px;
  box-sizing: border-box; 
}


  #mainDiv {
    border-radius: 5px;
    border: 1px solid black;
    background: rgb(255, 250, 238,0.5);
    margin-top: 2px;
    height: 99.0%;
    margin-bottom: 0px ;
  }


  @media (max-width: 738px) {
  .view100 {
    height: 73%;
    }
  }

  @media (min-width: 738px) {
    .view100 {
      height: 83%;
      }
    }



  #sign {
    background: rgb(255, 250, 238,0.8);
    border-radius: 5px;
    border: 4px solid rgba(0, 0, 0, 0.3);
  }

    #ust {
      border-radius: 5px;
      border: 1px solid black;
      background: rgb(255, 250, 238,.8);
    }
     
     #ust2 {
      background-color: rgb(233, 221, 180);
    }

  #headRowSub1B{
    font-weight: bold;
    color: black;  
    
  }

#headRowSub1B span{
  /*color:rgb(233, 221, 180);*/
  color:blue;
  padding-right: 10px;
  font-size: 12px;
}

#headRowSub1B span:hover{
  color:orange;
  
  
  pointer-events: auto;
  cursor: pointer;
}


@media (max-width: 738px) {
  .headRowSub2{
    font-size: 12px;
    font-weight: bold;
  }
  .headRowSub3{
    font-size: 8px;
  }
  #headRowSub1 img{
  height : 40px;
  }
  #headRowSub1B{
    font-size: 10px;
    text-align: right;
    
  }
  
  #headRowSub1B span{
      padding-right: 5px;
  }

}

@media (min-width: 738px) {
  .headRowSub2{
    font-size: 14px;
    font-weight: bold;
  }
  .headRowSub3{
    font-size: 10px;
  }
  #headRowSub1 img{
  height : 50px;
  }
  #headRowSub1B{
    font-size: 12px;
    padding-top: 10px;
    
    }
}



.modal_foot{
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgb(0,0,0,0.8);
  padding: 20px 20px 20px 20px;
  width: 350px;
  max-width: 100%;
  position: relative;
  }

  .footRow {
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(192, 121, 14, 0.363);
  position: fixed;
  top:0;
  left:0;
  height: 100vh;
  width: 100vw;
  transition: opacity 0.5s ease-in-out;
  }
  
  
  .footRow.goster {
  pointer-events: auto;
  opacity: 1;
  }

  .closeButton {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    display: flex;
    flex-direction: center;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-size: 16px;
    background-color: rgba(192, 14, 14, 0.87);
    color: #fff;
    border-radius: 10px;
    border: 2px solid #3d0404;
  }

    


  

table {
  margin-left: auto;
  margin-right: auto;
  background-color: #f6f6f6;
  width: 90%;
  font-size: 12px;
}

td, th {
  border: 1px solid #a80c0c0e;
  border-radius: 5px;
  padding: 5px 5px;
}

th {
  border-radius: 5px;
  background: brown;
  color: white;
  position: sticky;
  top: 0;
  padding: 10px;
}

tfoot > tr  {
  background: black;
  color: white;
}

tbody > tr:hover {
  background-color: #ffc107;
}

.tile-container {
  border: 1;
  width: 100%;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffff;
  border-radius: 7px;
}

.tile-container span{
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 750;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  border-radius: 12px;
  background-color: #fff;
}

.tile-container span.Num{
  background-color:#fff;
  min-width: 52px;
  max-width: 100px;
  font-size: 18px;
  padding-left: 10px;
  padding-right: 10px;
  border-radius: 0px;
  border-right: 1px solid rgba(0,0,0,0.1);
  border-left: 1px solid rgba(0,0,0,0.1);
}


.aciklama {
opacity: 0;
pointer-events: none;
background-color: rgba(87, 59, 7, 0.65);
}

.aciklama.goster {
pointer-events: auto;
opacity: 1;
}

.searchButton {

  opacity: 1;
  background-color: #a5500a;
  color: #f6f6f6;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgb(0,0,0,0.8);
  border: .3;
  cursor: pointer;
}



.searchButton.goster{
  opacity: 0;
}

#roomNameInput {
  margin-left: 0px; 
  padding-left:10px ;
  width: 100%;
  height: 50px;
  border-radius: 5px;
  font-size: 14px;
  color: #3d0404;
}

.list {
  width: 100%;
  height: 300px;
  overflow-y: auto; /* Yatay scroll bar kullan */
  }
  
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  li {
    padding: 10px;
    border-bottom: 1px solid #ccc;
  }
  
  li:last-child {
    border-bottom: none; /* Son öğenin alt kenarlığı olmasın */
  }
  
  ul >li:hover {
    background-color: #c5d12257;
    transform:translate(-5px, 0px);
  }
  


  
  

  .form-signin {
    width: 100%;
    max-width: 330px;
    padding: 15px;
    margin: auto;
  }
  
  .form-signin .checkbox {
    font-weight: 400;
  }
  
  .form-signin .form-floating:focus-within {
    z-index: 2;
  }
  
  .form-signin input[type="email"] {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
  }
  
  .form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  

#signInPage {
  opacity: 0;
  pointer-events: none;
}

#signInPage.goster {
  opacity: 1;
  pointer-events: auto;
}
  

#signInPageArka {
  opacity: 0;
  
  pointer-events: none;
}

#signInPageArka.goster {
  opacity: 1;
  background-color: #fff5e7ef;
  pointer-events: auto;
}

.foto {
height:125px;
width: 100px;
}

@media (max-width: 738px) {
.linkYazi {
  font-size: 12px;
  font-weight: bold;
  text-align: left;
  
  text-shadow: rgb(187, 183, 173) 3px 3px 2px;
  height: 75px;
  align-items: center;
}
}
@media (min-width: 738px) {
  .linkYazi {
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    
    text-shadow: rgb(187, 183, 173) 3px 3px 2px;
    height: 75px;
    align-items: center;
  }
  }
  
  .linkYazi:hover {
    
    color: green;
    cursor: pointer;
  }


  #modal{
    background-color:rgb(255, 250, 238,.7);
    border-radius: 10px;
    border:2px solid #a5500a;
    box-shadow: 8px 8px 2px rgb(0,0,0,0.95);
  }
  
  
  #mahalAdi{
    background-color:rgb(255, 250, 238,.5);
    border-radius: 10px;
    border:3px solid #a5500a9c;
    box-shadow: 2px 2px 2px rgb(0,0,0,0.5);
  }
  


  .aciklamaSatiri{
    background-color:whitesmoke;
    
  }
  .aciklamaSatiri:hover{
    background-color:#a5500a9c;
  }


  @media (min-width: 738px) {  
    .aciklamaYazi {
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
    }}

    
  @media (max-width: 738px) {  
    .aciklamaYazi {
      font-size: 12px;
      cursor: pointer;
      font-weight: 800;
    }
  }


  @media (min-width: 738px) {  
  .aciklamaYaziBaslik {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Poppins-SemiBold;      
    font-weight: 800;
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 10px 0px;
    background-color:rgb(255, 250, 238,.8);
    border-radius: 8px;
    height: 15px;
    border:1px solid #a5500a;
    box-shadow: 2px 2px 4px rgb(0,0,0,0.8);  
  }
  }

  @media (max-width: 738px) {  
    .aciklamaYaziBaslik {
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: Poppins-SemiBold;      
      font-weight: 800;
      font-size: 10px;
      margin-top: 5px;
      margin-bottom: 5px;
      padding: 10px 0px;
      background-color:rgb(255, 250, 238,.8);
      border-radius: 8px;
      height: 15px;
      border:1px solid #a5500a;
      box-shadow: 2px 2px 4px rgb(0,0,0,0.8);  
    }
    }



.FLOOR{
  background-color:rgba(9, 129, 25, 0.8);
  color: whitesmoke;
}

.WALL{
  background-color:rgba(163, 116, 13, 0.8);
  color: whitesmoke;
}
.BASEBOARD{
  background-color:rgba(19, 105, 155, 0.8);
  color: whitesmoke;
}
.CEILING{
  background-color:rgba(88, 8, 75, 0.8);
  color: whitesmoke;
}



  .aciklamaYaziMaterial{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
  }



  .girisButtons{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top:100px;
    height: 150px;
    background-color:rgb(255, 250, 238,.8);
    border-radius: 10px;
    border:2px solid #a5500a;
    box-shadow: 8px 8px 2px rgb(0,0,0,0.8);  
  
  }
    


  #notesMain.goster {
    opacity: 1;
    pointer-events: auto;
    }
    
    #notesMain {
      opacity: 0;
      pointer-events: none;
      background-color: rgba(192, 121, 14, 0.363);
    }
    
    
    #notesindiv {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 410px;
      background-color:rgb(255, 250, 238,.8);
      border-radius: 10px;
      border:2px solid #a5500a;
      box-shadow: 8px 8px 2px rgb(0,0,0,0.8);  
    }
    


    #punchlistMain.goster {
      pointer-events: auto;
      opacity: 1;
      background-color: rgba(214, 155, 65, 0.9);
    }


    #punchlistMain {
      opacity: 0;
      pointer-events: none;
      background-color: rgba(214, 155, 65, 0.9);
    }

    .notesBaslik{
      background-color:rgba(223, 201, 150, 0.288);
      border-radius: 10px;
      border:3px solid #a5500a9c;
      box-shadow: 2px 2px 2px rgb(0,0,0,0.5);
      
    }


    .punchBaslik{
      background-color:rgb(211, 122, 7);
      color: #fff;
      border-radius: 10px;
      border:3px solid #a5500a9c;
      box-shadow: 2px 2px 2px rgb(0,0,0,0.5);
    }
    

    .closeButton_notes {
      cursor: pointer;
      font-size: 16px;
      background-color: rgba(170, 97, 14, 0.87);
      color: #fff;
      border-radius: 10px;
      border: 2px solid #3d0404;
    }
    
    textarea {
      
      min-height:250px;
      max-height:250px;

      padding: 20px;
      font-size: 14px;
      
      background-color:rgba(250, 247, 239, 0.774);
      border-radius: 10px;
      border:1px solid #a5500a9c;
      box-shadow: 2px 2px 2px rgb(0,0,0,0.5);

    }
    
      textarea:focus {
      outline: none;
      border-color: blue;
      box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
    }
    
    
    textarea::placeholder {
      color: #999;
      font-style: italic;
    }


    @media (max-width: 738px) {  
    input[type="range"] {
            width: 100%;
            opacity: 0.7;
            transition: opacity 0.2s;
            border-radius: 5px;
        }}

      @media (min-width: 738px) {  
        input[type="range"] {
          width: 50%;
          opacity: 0.7;
            transition: opacity 0.2s;
          border-radius: 5px;
          }
        }

       input[type="range"]:hover {
            opacity: 1;

       }

        @media (min-width: 738px) {     
          #Codes_Floor,#Codes_Wall,#Codes_Baseboard,#Codes_Ceiling {
          font-weight: 800;
          font-size: 16px;
          }}
        @media (max-width: 738px) {     
          #Codes_Floor,#Codes_Wall,#Codes_Baseboard,#Codes_Ceiling {
          font-weight: 800;
          font-size: 12px;
        }}


        
      @media (max-width: 738px) { 
      .worklog{
      font-size: 8px;
      height: 85%;
      overflow-y: auto;
      
      }}
      
      @media (min-width: 738px) { 
      .worklog{
      font-size: 14px;
      height: 85%;
      overflow-y: auto;      
      }}

      

      @media (min-width: 738px) { 
    .worklogbutton {
      font-size:12px;
      font-weight:400;
    }}

    @media (max-width: 738px) { 
      .worklogbutton{
        font-size:6px;
        font-weight:400;
      }}

      @media (min-width: 738px) { 
        .todayButton {
          font-size:12px;
          font-weight:400;
          height:30px;
        }}
    
      @media (max-width: 738px) { 
         .todayButton{
            font-size:6px;
            font-weight:400;
            height:20px;
        }}




@media (min-width: 738px) {           

  .workLogTeam {
  min-height: 50px;
  }

  .workLogTeam div{
  font-size: 14px;
  background-color:  rgb(202, 157, 72);
  }

.workLogSubTeam div{
  font-size: 12px;
  background-color: rgb(214, 199, 148);
}

.workLogWorkers {
display: flex;
padding-top: 2px;
margin: 0;
}

.workLogWorkers div{
  font-size: 11px;
  background-color: rgb(236, 231, 213);
  margin-right:2px;
}

.HR {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 35px;
  max-height: 25px;
}

#workLogDesc {
  font-size: 0.9rem;
  font-weight: bolder;
  max-height: 75px;
  overflow-y: auto;

}
}

@media (max-width: 738px) {   
  .workLogTeam {
    min-height: 30px;
    }

  .workLogTeam div{
    font-size: 8px;
    background-color:  rgb(202, 157, 72);
    padding: 2px 0px 2px 2px;
  }
  
  .workLogSubTeam div{
    font-size: 7px;
    background-color: rgb(214, 199, 148);
  }
  
  .workLogWorkers {
  display: flex;
  padding-top: 2px;
  margin: 0;
  }
  
  .workLogWorkers div{
    font-size: 6px;
    padding: 2px 2px 2px 2px;
    background-color: rgb(236, 231, 213);
    
    
  }
  
  .HR {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 20px;
    height: 15px;
  }
  
  #workLogDesc {
    font-size: 9px;
    max-height: 75px;
    overflow-y: auto;
  }
  }

  
  .workLogSubTeam{
    display: none;
  }
  
  .workLogWorkers{
    display: none;
  }

  
  #teamDivSub{
    margin-top:100px;
    max-height: 75%;
    overflow-y: auto;
    padding-right: 20px; /* Değiştirebileceğiniz bir değer */
    background-color: rgb(255, 250, 235);
  }

  .teamDiv {
    opacity: 0;
    pointer-events: none;    
    
  }
  
  .teamDiv.goster {
    opacity: 1;
    pointer-events: auto;
    background-color: rgba(99, 84, 40, 0.7);
  }



  .exportDiv {
    opacity: 0;
    pointer-events: none;
    
  }
  
  .exportDiv.goster {
    opacity: 1;
    pointer-events: auto;
    background-color: rgba(99, 84, 40, 0.7);
  }

  #exportDivSub{
    margin-top:100px;
    max-height: 75%;
    overflow-y: auto;
    padding-right: 20px; /* Değiştirebileceğiniz bir değer */
    background-color: rgb(255, 250, 235);
  }





@media (max-width: 738px) {   
  .workerCaption{
    font-size: 8px;
    font-weight: bold;
  }
  .workerAdder{
    font-size: 7px;
    height:18px;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  #mainTeamNameSelector select,#subTeamNameSelector select,#workerSelector select,#workerNameSelector select {
      width: 100%;
    height: 100%;
    font-size: 6px;
}

  #mainTeamName{
    width: 100%;
    height: 100%;
    font-size: 7px;
  }
  #subTeamDescription{
    resize: none;
    height: 50px;
    font-size: 7px;
  }
  #addexistingworker{
    height: 20px;
  }

}



@media (min-width: 738px) {   
  .workerCaption{
    font-size: 14px;
    font-weight: bold;
  }
  .workerAdder{
    font-size: 14px;
  }
  #mainTeamNameSelector select,#subTeamNameSelector select,#workerSelector select,#workerNameSelector select {
    width: 100%;
    height: 100%;
    font-size: 14px;
  }
  
  
  #mainTeamName{
    width: 100%;
    height: 100%;
    font-size: 14px;
  }

  #subTeamDescription{
    resize: none;
    height: 75px;
    font-size: 14px;
  }

  #addexistingworker{
  height: 30px;
}

}

#workerInfos{
  display: none;
}




@media print {
 
  .workLog {
    position: absolute;
    overflow-y:visible !important;
    
  
  }
  
  
  .col-print-12{
    flex:0 0 auto;
    width:100%;
    justify-content: center;
    align-items: center;
    text-align: center;
 
  }

  .noPrint {
    display: none !important;
  }
  
  @page{
    size: A4;
    margin: 2mm 10mm 2mm 10mm;
    
  }

  .justPrint {
    display: block !important;
  }
  

}


.justPrint {
  display: none;
  justify-content: center;
  align-items: center;
  text-align: right;
  font-size: 12px;
  font-weight: 400;
  font-family: 'Poppings', sans-serif;

}


#free{
  display: none;
}


#filterName{
  background-color:rgb(255, 250, 238,.5);
  border-radius: 10px;
  border:3px solid #a5500a9c;
  box-shadow: 2px 2px 2px rgb(0,0,0,0.5);
}

#filitreMain{
  background-color:rgb(255, 250, 238,.7);
  border-radius: 10px;
  border:2px solid #a5500a;
  box-shadow: 8px 8px 2px rgb(0,0,0,0.95);
}

#filitreDiv{
  opacity: 0;
  pointer-events: none;
  background-color: rgba(87, 59, 7, 0.65);
}

#filitreDiv.goster{
  opacity: 1;
  pointer-events: auto;
}

.codeNameSelector select {
  text-align: center;
  font-size: 14px;
  font-weight: bold;
  width: 100%;
}


.codeNameSelector option {
  text-align: left;
}


.filterButton {
  background-color: #046310;
  color: #f6f6f6;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgb(0,0,0,0.8);
  border: .3;
  cursor: pointer;
}


@media (min-width: 738px) {
.filterText{
  font-size: 14px;
}
.codeNameSelector select {
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  width: 100%;
}
}

@media (max-width: 738px) {
  .filterText{
    font-size: 11px;
  }

  .codeNameSelector select {
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    width: 100%;
  }
  }

  .colorDiv {
    cursor: pointer;
    pointer-events: auto;
  }


.legends{
  opacity: 0;
  pointer-events: none; 
}


.legends.goster {
  opacity: 100;
  background: rgba(230, 215, 181, 0.76);  
  pointer-events: auto; 
}


.legand{
  border:2px solid rgb(77, 21, 4);
  border-radius: 15px;
  box-sizing: border-box; 
}


.mainContour{
  pointer-events: none;
  
}


.square-input {
  width: 50px; /* İstediğiniz genişlik */
  height: 50px; /* İstediğiniz yükseklik */
  box-sizing: border-box; /* Kenarlık ve dolgu boyutlarını dahil et */
  border: 1px solid #ccc; /* Kenarlık ekleyebilirsiniz */
  border-radius: 0; /* Köşeleri kare yapmak için */
}

.qrBorder{
  width: 300px;
  border-radius: 10px;

  box-shadow: 2px 4px 4px rgb(0,0,0,0.8);

}


.qrcodeBorder2{
  
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

}


.qrcodeBorder{

  display: flex;
  justify-content: center;
  align-items: center;

  height: 150px;
  width: 150px;
  
  border:2px solid rgb(77, 21, 4);
  
  background: rgba(230, 215, 181, 0.76);  

}

#qrcodeMain {
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

#qrcodeMain.goster {
  text-align: center;
  opacity: 1;
  pointer-events: auto;
}


.checkbox-container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: left;
      padding-top: 10px;
      padding-left: 10px;
      border:1px solid black;
      border-radius: 5px;
      box-sizing: border-box;    
      max-height: 200px;   
      overflow-y: auto; /* Yatay scroll bar kullan */
      overflow-y:visible;
    
    }

  /* Her label için genişlik ayarı */
  .checkbox-container label {
  display: flex;
  justify-content: left;
  align-items: center;
  text-align:left;
  width: calc(50% - 10px); /* Maksimum 4 eleman sığsın, 10px boşluk bırak */
  margin-bottom: 10px; /* Alt tarafta boşluk bırak */
  font-weight: bold;
  }

  .checkbox-container input[type="checkbox"] {
    width: 17px; /* Genişlik ayarı */
    height: 17px; /* Yükseklik ayarı */
    margin-right: 10px;
}



@media (max-width: 738px) {

  #dateRange {
    font-size: 10px;
  }
}



/* Toggle container */
.toggle-container {
  display: flex;
  align-items: center;
  gap: 10px; /* Y ve N arasında boşluk */
}

/* Toggle labels */
.toggle-label {
  font-weight: bold;
  font-size: 14px;
}

/* Toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 20px;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}

input:checked + .slider {
  background-color: #4caf50;
}

input:checked + .slider:before {
  transform: translateX(20px);
}


.scroll-container {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  border: 0px solid #ccc;
}

.scroll-item {
  flex: 0 0 auto; /* Elemanların yan yana sıralanmasını sağlar */
  border: 1px solid #ccc;
  margin-right: 10px;
  padding: 10px;
  font-size: 14px;
  font-weight: 10;
  cursor: pointer;
  transition: background-color 0.3s;
}

.scroll-item.active {
  background-color: red;
  color: white;
  font-weight: bold; /* Font ağırlığını artır */
}


@media (min-width: 738px) {
  .scrollable {
    overflow-y: auto;
    height: 520px; 
  } 
    #punchlistindiv {
      display: flex;
      align-items: center;
      justify-content: center;
      
      height: 90%;
            
      background-color:rgb(255, 250, 238,.8);
      border-radius: 10px;
      border:2px solid #a5500a;
      box-shadow: 8px 8px 2px rgb(0,0,0,0.8);  
    }
 
   
}

@media (max-width: 738px) {
  .scrollable {
    overflow-y: auto;
    height: 390px; 
  }  

  #punchlistindiv {
    display: flex;
    align-items: center;
    justify-content: center;
    
    height: 650px;
          
    background-color:rgb(255, 250, 238,.8);
    border-radius: 10px;
    border:2px solid #a5500a;
    box-shadow: 8px 8px 2px rgb(0,0,0,0.8);  
  }

}