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

@media (min-width: 500px) {
    /* desktop */
    body {
        font-size: 15px;
        padding: 5px;
    }
}

#header {
    width: 100%;
    margin-bottom: 20px;
}
#header img {
    width: 30px;
    height: 30px;
    cursor: pointer;
}
#header:nth-child(2) {
    text-align: center;
}

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

.modems {
    border-collapse: collapse;
    min-width: 70%;
    max-width: 100%;
    text-align: center;
}

.modems, .modems th, .modems td {
    border: 1px solid black;
    padding: 1px;
}

.modems tr img {
    /* desktop */
	height: 22px;
	cursor: pointer;
    margin: 1px;
    vertical-align: middle;
}

@media (max-width: 499px) {
    .modems tr img {
        /* mobile */
        height:  24px;
        margin-left: 3px;
        margin-right: 3px;
    }
    .modems{
        min-width: 100%;
        margin-top: 10px;
    }
}

.modems td {
    font-size: 12px;
}

.modems th {
    font-size: 15px;
}

.nested-table {
    border-collapse: collapse;
	width: 100%;
}

.nested-table, .nested-table td {
    border: 1px solid lightgray; 
    text-align: left;
    padding: 0px;
}

.left_table_1st_column {
    width: 30%;
    background-color: #eee;
}
.left_table_2nd_column {
    width: 70%;
}

td.nested-table-container {
    vertical-align: top;
    text-align: left;
} 

.Nick {
  font-size: 120%;
}

.statusMessage {
    max-width: 400px;      
    color: white;
    background: orange;
    margin: 1px 1px;
    padding-left: 15px;
}

.license_status {
    border: 1px dashed black;
    padding: 10px;
    text-align: left;
    float: left
}

.accordion-header {
    padding: 10px;
    cursor: pointer;
    background: lightgray;
}

.accordion-content {
    height: 0;
    overflow-y: hidden;
}
.accordion-content.active {
    height: inherit;
}
.highlight-row:hover {
    background-color: #ffffb0;
}
.highlight-row2:hover {
    background-color: #ffff80;
}

.P_public_ssh_key, .machine_data {
    font-family: monospace;   /* Use monospace font */
    background-color: #eee;   /* Gray background color */
    max-width: 50%;
    padding: 10px;            /* Optional padding for content inside the div */
    overflow-wrap: break-word;
    word-wrap: break-word;
    font-size: 10px;
}

@media (max-width: 499px) {
    /* mobile */
    .P_public_ssh_key, .machine_data, .accordion-header {
        max-width: 95%; 
    }
}

.flash_error{
    color:red;
}
.flash_, .flash_info{
    color:blue;
}

.main_warning{
    color:red;
    font-size: 26px;
}

.flat_button {
    background-color: blue ; 
    border: none;
    color: white;
    padding: 5px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 110%;
    margin: 1px 1px;
    cursor: pointer;
}

@media (max-width: 499px) {
    /* mobile */
    .flat_button {
        padding: 10px;
    }
}

.lightblue {
    background-color: lightblue ;
    color: black;
}

.delete_modem, .delete_port{
    background-color: #8b0000 ; 
    color: white;
}


.ModemsNotes2 {
  /* used in /conf */
  font-size: 120%;
  word-wrap: break-word;
  white-space: normal;
  max-width: 200px;
}

.PortsList {
    /* default desktop */
    margin: 0px;
    padding-left: 0px;
}

@media (max-width: 499px) {
    /* mobile */
    .PortsList {
        margin: 5px;
        padding-left: 10px;
    }
}

.Next_Rotation{
    font-size: 70%;
    margin: 3px 0px;
}

.Modem_status{
    font-size: 80%;
    font-family: monospace;
    margin: 20px 50px;
}

.margin2px{
    margin: 1px 1px;
}

.Port_normal{
    /*nothing*/
}

.Port_locked{
    background-color: #ffd0e0;
}

.ModemsNotes {
    color: #605F1D;
}

.PHONE_NUMBER{
    font-family: monospace;
    color: Purple;
}

@media (min-width: 500px) {
    /* desktop */
    .settings-TR{
        display: flex; 
        padding: 5px;
        border: 1px solid lightgray;
    }
    .settings-1column{
        width: 30%;
        border: 0px solid lightgray;
    }
    .settings-2column{
        width: 20%;
        border: 0px solid lightgray;
    }
    .settings-3column{
        width: 30%;
        border: 0px solid lightgray;
    }
}

@media (max-width: 499px) {
    /* mobile */
    .settings-TR{
        display: block; 
        border: 1px solid lightgray;
        padding: 5px;
        margin-bottom: 9px;
    }
    .settings-1column{
        border: 0px solid lightgray;
    }
    .settings-2column{
        border: 0px solid lightgray;
    }
    .settings-3tcolumn{
        border: 0px solid lightgray;
    }
    .settings-header{
        margin-top:    50px;
        margin-bottom: 50px;
    }
}


/*          CRUD start          */

p{
    margin-block-start: 5px;
    margin-block-end:   5px;
}

.crud {
	height: 20px;
	padding: 1px;
    margin: 1px;
    display: inline-block;
    text-align: left;
}

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

.MyCheckbox{
    width: 20px;
}

.icon-button{
    text-align: center;
    width:  25px;
    height: 25px;
    font-size: 15px;
    font-weight: bold;
    border: none;
}

@media (max-width: 767px) {
    /* mobile */
    .icon-button{
        width:  22px;
        height: 22px;
        font-size: 12px;
    }
    label{
        width: 350px;
    }
}

.minus{
    color: white;
    background-color: brown;
}

.plus{
    color: white;
    background-color: green;
    margin-top: 10px;
    margin-bottom: 10px;
}


.border{
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin-top:     10px;
    margin-bottom:  10px;
}

@media (min-width: 500px) {
    /* desktop */
    .border{
        max-width: 900px;
    }
}

.ext_ipv6{
    margin: 5px 0px;
}

@media (min-width: 500px) {
    /* desktop */
    .ext_ipv6{
        overflow-wrap: break-word;
        word-wrap: break-word;
        max-width: 10em;
    }
}


/*          CRUD end          */


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

/* Для mobile (столбик) */
@media (max-width: 767px) {
    .Acontainer {
        flex-direction: column; /* столбик */
        /* border: 1px solid gray ; */
        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: 5px;
}


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


/* HTOP */

img.Htop_icon {
    height: 18px;
    cursor: pointer;
    margin: 1px;
    vertical-align: middle;
    margin-right: 5px;
}

/* Для mobile (столбик) */
@media (max-width: 767px) {
    img.Htop_icon {
        height: 16px;
        cursor: pointer;
        margin-right: 0px;
    }
}

.Htop_container{
    display: flex;
    flex-direction: row;
    /* border: 1px solid #ccc;  */
}


.Htop_block{
  display: inline-block;
  font-size: 15px;
  white-space: normal;
  word-wrap: break-word;
  text-overflow: clip;
}

.Htop_table{
    border: 1px solid gray;
    border-collapse: collapse;
    width: 80%;
}

.Htop_table td, .Htop_table tr {
    border-collapse: collapse;
    padding: 2px;
}
@media (max-width: 767px) {
/* Для mobile  */
    .Htop_table{
    }
    .Htop_block{
        font-size: 12px;
    }
    .Htop_container{
        max-width: 60px;
        flex-direction: column;
    }
}

@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-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-200px { max-width: 200px; min-width: 200px; }
    .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; }
    .tr_1_level {
        margin-top: 1px;
        border: 1px solid #b0b0b0;
        padding: 0px 0px;
    }
}

@media (max-width: 499px) {
    /* mobile */
    .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: 5px 0px;
    }
}

.w30px  { width: 30px; }
.w40px  { width: 40px; }
.w50px  { width: 50px; }
.w70px  { width: 70px; }
.w100px { width: 100px; }
.w120px { width: 120px; }
.w150px { width: 150px; }

input[type="text"], input[type="password"], 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 ; */
}

@media (max-width: 499px) {
    /* mobile */
    input[type="text"], 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 */
    }
}

input[type="text"]:focus, input[type="tel"]: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 ;
}

.Settings_Item_Name{

}

@media (max-width: 499px) {
    /* mobile */
    .Settings_Item_Name{
        font-weight: bold;
    }
    .PortsSection{
        background-color:   #f9f9f0;
    }
}


@media (min-width: 500px) {
    /* desktop */
    .only_mobile{
        display: none;
    }
}

.CGP_scale{
}

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