/* desktop */
body {
  font-size: 17px;
  padding: 5px;
}


@media (max-width: 767px) {
    /* mobile */
    body {
        font-size: 12px;
    }
}

label{
    width:200px;
    display: inline-block;
}

@media (max-width: 767px) {
    /* mobile */
    label {
        width: 350px;
    }
}

#MachineData {
    width:40em;
}
@media (max-width: 767px) {
    /* mobile */
    #MachineData {
        width:12em;
    }
}

.Server_notes {
    color: olive;
}

a:visited {
    color: #0000FF; /* Set the same color as the unvisited link */
}

button {
    background-color: lightblue  ;
    border: none;
    color: black;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 100%;
    margin: 1px 1px;
    cursor: pointer;
    min-width: 66px; 
}

@media (max-width: 767px) {
    /* mobile */
    button {
        padding: 2px 2px;
        min-width: 60px; 
        min-height: 30px;
    }
}

table {
    border-spacing: 0px 0px ;
    border: 1px solid lightgray;
}
td, th {
    padding-top:      0px;
    padding-bottom:   0px;
    padding-left:     10px;
    padding-right:    10px;
    border: 1px solid lightgray;
}

@media (max-width: 767px) {
    /* mobile */
    td,th {
      padding-left:     1px;
      padding-right:    1px;
    }
}

@media (max-width: 767px) {
    /* mobile */
    .MachineData{
        max-width: 14em;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

.FixedWidth {
    display: inline-block; 
    margin-left: 1em;
    margin-right: 1em;
}

.w-4em {
    width:  4em ;
}

.w-200px {
    width:  200px ;
}

@media (max-width: 767px) {
    /* mobile */
    .UnameCell {
        max-width: 14em;
        overflow-wrap: break-word;
        word-wrap: break-word;
        width:  80px ;
    }
}

.info-popup {
  visibility: hidden;
  position: absolute;
  top:  10px;
  left: 10px;
  background: #f9f9f9;
  border: 2px solid gray ;
  padding: 8px;
  border-radius: 4px;
}
.info-popup.visible {
  visibility: visible;
}

img.icon {
    height: 22px;
    cursor: pointer;
    margin: 1px;
}

.flash_message{
   border: 1px solid blue ;
   background: lightcyan;
   padding: 8px;
   border-radius: 4px;
}


/* Сначала для desktop (строка) */
.Acontainer {
    display: flex;
    flex-direction: row; /* строка */
    gap: 0px;
    font-size: 14px;
    border: 1px solid #ffffff;
    max-width: 1400px;
}

/* Для mobile (столбик) */
@media (max-width: 500px) {
    .Acontainer {
        flex-direction: column; /* столбик */
        margin-top:     10px;
        margin-bottom:  10px;
        font-size: 11px;
    }
}



.Ablock {
  display: inline-block;
  border: 1px solid #f0f0f0;
  overflow: hidden;
  vertical-align: middle;
  white-space: normal;
  word-wrap: break-word;
  text-overflow: clip;
  max-width: 200px;
  min-width: 200px;
  text-align: left;
  margin-top: 0px;
  padding: 0px;
}


/* Для mobile (столбик) */
@media (max-width: 500px) {
    .Ablock {
        flex-direction: column; /* столбик */
        max-width: 100%;
        min-width: 100%;
        padding: 0px 0px;
    }
}



@media (min-width: 500px) {
    /* desktop */
    .desktop-w-30px { max-width: 30px; min-width: 30px; }
    .desktop-w-50px { max-width: 50px; min-width: 50px; }
    .desktop-w-70px { max-width: 70px; min-width: 70px; }
    .desktop-w-100px { max-width: 100px; min-width: 100px; }
    .desktop-w-120px { max-width: 120px; min-width: 120px; }
    .desktop-w-150px { max-width: 150px; min-width: 150px; }
    .desktop-w-180px { max-width: 180px; min-width: 180px; }
    .desktop-w-200px { max-width: 200px; min-width: 200px; }
    .desktop-w-225px { max-width: 225px; min-width: 225px; }
    .desktop-w-250px { max-width: 250px; min-width: 250px; }
    .desktop-w-300px { max-width: 300px; min-width: 300px; }
    .desktop-w-400px { max-width: 400px; min-width: 400px; }
    .desktop-w-500px { max-width: 500px; min-width: 500px; }
    .desktop-w-600px { max-width: 600px; min-width: 600px; }
    .desktop-w-700px { max-width: 700px; min-width: 700px; }
    .desktop-w-800px { max-width: 800px; min-width: 800px; }
    .desktop-w-900px { max-width: 900px; min-width: 900px; }
    .desktop-w-1000px { max-width: 1000px; min-width: 1000px; }
    .desktop-w-1050px { max-width: 1050px; min-width: 1050px; }
    .desktop-w-1150px { max-width: 1150px; min-width: 1150px; }
    .desktop-w-1100px { max-width: 1100px; min-width: 1100px; }
    .desktop-w-1200px { max-width: 1200px; min-width: 1200px; }
    .desktop-w-1500px { max-width: 1500px; min-width: 1500px; }
    .desktop-w-1600px { max-width: 1600px; min-width: 1600px; }
    .desktop-w-1650px { max-width: 1650px; min-width: 1650px; }
    .desktop-w-1700px { max-width: 1700px; min-width: 1700px; }

    .tr_1_level {
        margin-top: 0px;
        border: 1px solid #b0b0b0;
        padding: 10px 0px;
    }
}


@media (max-width: 499px) {
    /* mobile */
    .mobile-w-50px  { max-width: 50px; min-width: 50px; }
    .mobile-w-100px { max-width: 100px; min-width: 100px; }
    .mobile-w-120px { max-width: 120px; min-width: 120px; }
    .mobile-w-150px { max-width: 150px; min-width: 150px; }
    .tr_1_level {
        margin-top: 10px;
        border: 0px solid black;
        padding: 10px 0px;
    }
}

@media (max-width: 499px) {
    /* mobile */
    .CGP_scale{
        transform: scale(0.90);
        transform-origin: top left;
    }
    .mob-margin-left-20px{
        margin-left: 20px;
    }
}


input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="datetime-local"],
    select, textarea, .Shop_stats_button {
  /* Basic styling */
  width: 250px; /* Sets the width of the input field */
  padding: 2px; /* Adds space inside the input field */
  margin-bottom: 2px; /* Adds space below the input field */
  border: 1px solid #ccc; /* Defines a solid border */
  border-radius: 5px; /* Rounds the corners of the border */
  /*font-family: Arial, sans-serif;  */
  /* Focus and hover effects */
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transitions for effects */
  margin-right: 4px;
  vertical-align: top;
  font-size: 15px;
  /* background-color: #F9F9F9 ; */
        min-height: 25px;
}

@media (max-width: 499px) {
    /* mobile */
    input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="datetime-local"],
    select, textarea, .Shop_stats_button  {
        width:     200px;
        font-size: 12px; /* Sets the font size */
        min-height: 25px;
    }
}

input[type="text"]:focus, input[type="tel"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="datetime-local"]:focus, textarea:focus   {
  border-color: #007bff; /* Changes border color on focus */
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* Adds a subtle shadow on focus */
  outline: none; /* Removes the default browser outline */
}

input:disabled{
    background-color: #D9D9D9 ;
}