/* From https://stackoverflow.com/questions/9174669/best-practice-font-size-for-mobile  */

/*Makes fonts very small on larger screen - might work with some adjustments*/

/*@media (min-width: 858px) { html {  font-size: 12px;    }}*/
/*@media (min-width: 780px) { html {  font-size: 11px;    }}*/
/*@media (min-width: 702px) { html {  font-size: 10px;    }}*/
/*@media (min-width: 724px) { html {  font-size: 9px;     }}*/
/*@media (max-width: 623px) { html {  font-size: 8px;     }}*/


.row-bordered {
    position: relative;
    /*height: 100px;*/
    margin-bottom: 2em;    /* 50px; */
    margin-top: 1em;
}


a.nevbutton {
    background-color: blue;
 /*   border: none; */
    color: white;
    padding: 10px 10px;         /* top&bottom=15, left&right=32 : see https://www.w3schools.com/css/css_padding.asp  */
/*    margin: 1px 10px;  */
    text-align: center;
 /*   text-decoration: none;  */
    width : 120px;
    height: 45px;
    /*margin-right: 10px;*/
    cursor: pointer;
/*    display: inline-block; */
    font-size: 16px;
    font-weight: bold;
}

button.nevbutton {
    background-color: blue;
 /*   border: none; */
    color: white;
    padding: 10px 10px;         /* top&bottom=15, left&right=32 : see https://www.w3schools.com/css/css_padding.asp  */
/*    margin: 1px 10px;  */
    text-align: center;
 /*   text-decoration: none;  */
    width : 120px;
    height: 48px;
    /*margin-right: 10px;*/
    cursor: pointer;
/*    display: inline-block; */
    font-size: 16px;
    font-weight: bold;
}




a.nevbutton:hover { color: yellow; } /* CSS link hover */


a.offbutton {
    background-color: blue;
 /*   border: none; */
    color: white;
    padding: 10px 10px;         /* top&bottom=15, left&right=32 : see https://www.w3schools.com/css/css_padding.asp  */
/*    margin: 1px 10px;  */
    text-align: center;
 /*   text-decoration: none;  */
    width : 200px;
    height: 40px;
    /*margin-right: 10px;*/
    cursor: pointer;
/*    display: inline-block; */
    font-size: 16px;
}


/*a.evsignout {*/
/*    background-color: #4CAF50; !* Green *!*/
/*    color: white;*/
/*!*    padding: 15px 32px;         !* top&bottom=15, left&right=32 : see https://www.w3schools.com/css/css_padding.asp  *!*/
/* !*   margin-bottom: 1px;  XXXXXXXXXXXXXXXXX *!*/
/*    text-align: center;*/
/*    width : 100px;*/
/*    height: 20px;*/
/*    cursor: pointer;*/
/*    font-size: 12px;*/
/*}*/

button.evsignout {
    background-color: #4CAF50; /* Green */
    color: white;
    padding: 0;
/*    padding: 15px 32px;         /* top&bottom=15, left&right=32 : see https://www.w3schools.com/css/css_padding.asp  */
 /*   margin-bottom: 1px;  XXXXXXXXXXXXXXXXX */
 /*   text-align: center;*/
 /*   width : 100px;*/
    height: 18px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

a.evsignout {
    background-color: #4CAF50; /* Green */
    color: white;
    padding: 0;
/*    padding: 15px 32px;         /* top&bottom=15, left&right=32 : see https://www.w3schools.com/css/css_padding.asp  */
 /*   margin-bottom: 1px;  XXXXXXXXXXXXXXXXX */
 /*   text-align: center;*/
 /*   width : 100px;*/
    height: 18px;
    cursor: pointer;
    font-size: 12px;
    font-weight: bold;
}

a.evbutton {
    background-color: #4CAF50; /* Green */
    color: white !important;
    padding: 15px 32px;         /* top&bottom=15, left&right=32 : see https://www.w3schools.com/css/css_padding.asp  */
    margin-bottom: 19px;
    text-align: center;
    font-weight: bold;
    width : 500px;
    /*height: 50px;*/
    cursor: pointer;
    font-size: 16px;
}

a.kiosk_main {
    background-color: blue;
    color: white;
    margin-left: 10px;
    height: 45px;
}

a.kiosk_main:hover { color: yellow; } /* CSS link hover */

button.evbutton {
    background-color: #4CAF50; /* Green */
    color: white !important;
    padding: 15px 32px;         /* top&bottom=15, left&right=32 : see https://www.w3schools.com/css/css_padding.asp  */
    margin-bottom: 19px;
    text-align: center;
    font-weight: bold;
    width : 500px;
    /*height: 50px;*/
    cursor: pointer;
    font-size: 16px;
    border-radius: 16px;
}

a.evbutton.p {
    color: white;
}

a.nevbutton:hover   { background-color: darkblue;}

.attgrid {
    display: grid;
    /*border: #003366;*/
    /*border-width: 2px;*/
    /*border-style: double;*/
    height: 100%;
    padding: 15px 15px;
    margin-bottom: 20px;
    margin-right: 40px;
    margin-left: 20px;
    border: 1px solid green;
    /*margin-right: 10px;*/
    /*margin-left: 10px;*/
/*    grid-gap: 3px; */
    grid-template-columns: 80px 220px 100px;
    grid-template-rows: auto auto 22px; /* auto;     /* 25px; XXXXXXXXXXXXXXXXXXXXXXXXXX */
}

.attgrid.row {    border: 1px solid green;}         /* has no effect?? */


.evname     {   grid-column: 1 / -1;    grid-row: 1 / 2;    justify-content: center; display: flex; }  /* font-size: 36px; */
.evOIC      {   grid-column: 1 / -1;    grid-row: 2 / 3;    justify-content: center; display: flex; }
.evmlist    {   grid-column: 1 / -1;    grid-row: 3 / 4;    justify-content: center; display: flex;}

.evname > p    { margin-bottom: 2px; }
.evOIC > p     { margin-bottom: 2px; }

.evintime   {   grid-column: 1 / 2;   justify-content: right;   display: flex; height: 20px; margin-bottom: 5px; }
.evmemb     {   grid-column: 2 / 3;                             display: flex; height: 20px; margin-bottom: 5px; }
.evouttime  {   grid-column: 3 / 4;   justify-content: left;    display: flex; height: 20px; margin-bottom: 5px; }


/* ******* vehicle_form.html ************************************** */

h3.vehheader        { justify-content: left; }       /* Same width as vehbutton justify-content: center; */

/*#availNow > div:nth-child(2) > button*/

a.vehbutton {      /* a.vehbutton */
    background-color: #4CAF50; /* Green */
    color: white;
    padding: 15px 32px;         /* top&bottom=15, left&right=32 : see https://www.w3schools.com/css/css_padding.asp  */
    margin-bottom: 20px;
    text-align: center;
    width : 500px;
    cursor: pointer;
    font-size: 16px;
    float: inside;
}

button.vehbutton {      /* a.vehbutton */
    background-color: #4CAF50; /* Green */
    color: white;
    padding: 15px 32px;         /* top&bottom=15, left&right=32 : see https://www.w3schools.com/css/css_padding.asp  */
    margin-bottom: 20px;
    text-align: center;
    width : 500px;
    cursor: pointer;
    font-size: 16px;
    float: inside;
    border-radius: 16px;
}

a.vehbutton:hover   { background-color: #3e8e41;}

.modal-content {
    background-color: Blue; /* Green */
    color: white;
    padding: 15px 32px;         /* top&bottom=15, left&right=32 : see https://www.w3schools.com/css/css_padding.asp  */
    margin-bottom: 20px;
    text-align: center;
    width : 1000px;
}

.addAtt {
    background-color: #4CAF50; /* Green */
    color: white;
    padding: 15px 32px;         /* top&bottom=15, left&right=32 : see https://www.w3schools.com/css/css_padding.asp  */
    margin-bottom: 19px;
    text-align: center;
    width : 800px;
    height: 100px;
    cursor: pointer;
    font-size: 16px;
}

#OfficerFormSetView_table  { width: 50%; }

/* Experimental sticky heading used in officer_formset.html */
.header {  padding: 10px 16px; }

/* Page content */
.content {  padding: 16px; }

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;       /* 100px; */
  width: 100%
}

/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {  padding-top: 102px; }