/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
    /* @media screen and (max-width: 768px)Styles for small screens 768px*/

    @media screen and (max-width: 768px){

        .iframeMain{width: 60%; height: 100%;}  
        .iframeSub-section{width: 100%; height: 90%;}  
        
        .displayNone{display: none;}  
        .displayBlock{display: block;}  
        .alignLeft{text-align: left;}
        .alignRight{text-align: right;}
        .alignCenter{text-align: center;}
        .displayFlexColumn{display: flex;flex-direction: column;}
        
        .marginTop50 {margin-top: 50px;}

      p, strong, em, blockquote {
        max-width: 800px; /* Set a maximum width to limit line length on larger screens */
        margin-left: auto; /* Center text by pushing it to the right */
        margin-right: auto; /* Center text by pushing it to the left */
        text-align: center;
    
      }

      .textAreaHolder{

        position: relative;
    
    }
    
    
    textarea {
        border: none; /* Remove default border */
        padding: 10px; /* Add padding for better appearance */
        background-color: #f2f2f2; /* Set background color */
        resize: none; /* Disable textarea resizing */
        outline: none; /* Remove focus outline */
        border-radius: 15px;
        overflow-y: hidden;
        box-sizing: border-box;
        transition: height 0.2s;
        width: 100%;
        max-height: 200px;
    }
    
    textarea:focus {
        background-color: #d1d1d1; /* Change background color when focused */
        border: none; /* Remove default border */
    }

      .datetime {

        border-radius: 15px;
        border: solid 7px white;
    }
    
    .popup-container {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
    }
    
    .transparent-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /* Adjust the transparency here */
    }
    
    .addlogg2 {
        display: flex;
        width: 100%;
        justify-content: center;
        background-color: var(--color-background-alt);
        border-radius: 15px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }
    
    .addlogg2 > div:first-child {
        margin-top: 50px; /* Adjust the distance from the top for the first div only */
      }
    
      .addlogg2 > div:last-child {
        margin-bottom: 50px; /* Adjust the distance from the top for the first div only */
      }
    
    
    #logbookForm {
        text-align: center;
    }


      #logbookForm {
        width: 100%;
        margin: 0 20%;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    
    }
    


        .buttonHolderInside{

            display: flex;
            flex-direction: row;
            gap: 1rem;
            margin: 10px 10px;
            text-wrap: nowrap;
        }
        
        .buttonHolder{
        
            display: flex;
            justify-content: center;
            margin: 10px 10px;
        
        }


        tr.log {
        
          box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-end;
          gap: 1rem;
          padding: 0rem 1rem;
          width: 100%;
        }
        
        thead.log{
        
            display: flex;
            flex-direction: row;
            align-items: center;
            column-gap: 2rem;
            box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
            
        }
        
        
        

        
        
        td.date {
            text-align: center;
            min-width: 60px;
        }
        
        td.time {
            text-align: center;
            min-width: 60px;
        }
        
        
        td.text {
            text-align: center;
            margin-top: 15px;
            margin-bottom: 15px;
            overflow-wrap: anywhere;
            /* width: -webkit-fill-available;
            min-width: inherit; */
            /* width: 50%; */
            width: 100%
        }
        
        th.date {
            min-width: 60px;
          margin-top: 15px;
          margin-bottom: 15px;
        
        }
        
        th.time {
            min-width: 60px;
          margin-top: 15px;
          margin-bottom: 15px;
        
        }
        
        th.text {
          margin-top: 15px;
          margin-bottom: 15px;
          width: 100%;
        }
        
        .card {
            /* --skew: -5deg; */
            --skew: 0deg;
            display: flex;
            flex-direction: column;
            padding: 1.5rem 2rem;
            position: relative
        }


        .card--logbook {
            padding: 0.5rem 1rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            align-content: stretch;
            justify-content: flex-end;
            gap: 1rem;
            width: calc(90vw - 20px);
            margin: auto;
        }
        


 
              .mainContainer {
        
                  /* background-color: #fff;
                  border: 1px solid #ccc;
                  border-radius: 8px;
                  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); */
                  /* padding: 20px; */
                }
        
        
              main {
        
                  width: 100%;
                  max-width: 1200px;
        
                  top: 50px;
                  border-radius: 15px;
                  display: flex;
                  flex-direction: column;
                  align-content: center;
                  justify-content: center;
                  align-items: center;
                  flex-wrap: wrap;
                  gap: 2rem;   
                  z-index: 0;
                  }
              
                  main > div:first-child {
                    margin-top: 50px; /* Adjust the distance from the top for the first div only */
                  }
              
                  main > div:last-child {
                    margin-bottom: 50px; /* Adjust the distance from the top for the first div only */
                  }
              
                  .subtest {
              
                background-color: #ff6600;
                  }
              
                  .sub-section {
                    /* display: flex;
                    flex-direction: column;
                    gap: 10px;
                    align-content: center;
                    justify-content: center;
                    align-items: center;
                    flex-wrap: wrap;
                    margin-left: 50px;
                    margin-right: 50px; */
                    display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
                    gap: 20px;

                    
                  }

                  .sub-section, .login {
                    grid-template-columns: auto;
                    align-content: space-between;
                    align-items: center;

                    
                  }
              
                  .sub-sub-section {
                      /* background-color: #fff; 
                      border: 1px solid #ccc;
                      border-radius: 8px;
                      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
                      padding: 20px;
                    /* display: flex;
                    flex-direction: column; */
                    /* display: grid;
                    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); */
                    gap: 20px;
                    display: flex;
                    flex-direction: column;


                  }

                  .sub-sub-section, .addlogg {

                }
        
        
                .addlogg{

                    display: flex;
                    flex-direction: column;
                    align-items: center;

                }
        
        
        /* Style when the ".flex-column" class is present */
.card--logbook.flex-column {
    flex-direction: column;
    gap: 0rem;
    /* Your other styles */
  }

  .card--logbook.flex-row {
    flex-direction: row;
    /* Your other styles */
  }
        

        
        
        
            header {
              width: 100%;
              display: flex;
        
          }
        
          .logo ul {
        
            margin: 0;
            font-size: x-large;
            }
        
        
          p {
            margin-left: 20px;
            margin-right: 20px;
        }
        
          body {
            font-size: 0.6rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            height: 100vh;
            margin: 0;
            padding: 0;
            font-family: system-ui,sans-serif;
            line-height: 1.6;
            min-height: 100vh;
            text-rendering: optimizeSpeed;
            overflow-x: unset;
          }
        
        
        
          .toggle {
            background-color: #fff9f9;
            display: flex;
        
          }
          


          
          /* Styles for "X" close icon */
          .close-icon {
            display:none;
              }
              
              .close-bar {
                width: 25px;
                height: 3px;
                background-color: #333;
                position: sticky;
                top: 50%;
                left: 50%;
                transition: left 2.0s cubic-bezier(0.4, 0, 1, 1);
              }
              
              .close-bar:first-child {
                transform-origin: center center;
                transform: translate(-50%, -50%) rotate(45deg);
              }
              
              .close-bar:last-child {
                transform-origin: center center;
                transform: translate(-50%, -50%) rotate(-45deg);
              }
            
              .hidden {
                display: none;
              }



              .menu-toggle {
                display: block;
                cursor: pointer;
                padding: 5px;
                right: 5px;
                top: 5px;
                position: absolute;
              }
              
              .menu-bar {
                width: 25px;
                height: 3px;
                background-color: #333;
                margin-bottom: 5px;
              }
            
        
        
           .menu {
              position: fixed;
              top: 50px;
              left: -100%;
              height: 100%;
              width: 100%;
              background-color: var(--color-primary);
              transition: left 2.0s ease; 
              overflow-y: auto;
              display: flex;
              flex-direction: column; 
              z-index: 2;
            } 
        
        
        
        
        
          .menu.active {
            position: absolute;
            left: 0;
            height: 100%;
            width: 100%; /* Full width of the screen */
            top: 50px;
            z-index: 2;
          }
        
        
        
        
          
          .menu ul {
            position: relative;
            list-style: none;
            display: flex;
            padding: 0;
            margin: 0;
            flex-direction: column;
            gap: 10px;
            top: 30px;
            }
            
            .menu ul li {
              display: inline;
              position: relative;
        
              margin-left: 15px;
              margin-right: 15px;
              border-bottom: #333 solid 1px;
            }
        
        
            
            .menu ul li a {
              text-decoration: none;
              color: #333;
              padding: 8px 15px;
              border-radius: 5px; /* Lägger till rundade kanter för knapparna */
              transition: background-color 0.3s ease-in-out; /* Lägger till övergångseffekt för bakgrundsfärg */
              position: relative;
              margin-left: 8px;
              margin-right: 8px;
              font-size: 23px;
            }
            
        
          

        
        }



        .bar1, .bar2, .bar3 {
            width: 35px;
            height: 5px;
            background-color: #333;
            margin: 6px 0;
            transition: 0.4s;
          }
          
          .change .bar1 {
            transform: translate(0, 11px) rotate(-45deg);
          }
          
          .change .bar2 {opacity: 0;}
          
          .change .bar3 {
            transform: translate(0, -11px) rotate(45deg);
          }