* {
  box-sizing: border-box;
}

input[name="entry.1769286398"] {
  width: 50px;
  height:50px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  color: #438DAF;
   font-weight: bold;
   font-size: 20px;  
}


input[type=text], select{
  width: 100%;
  height:50px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  color: black;
   font-weight: bold;
   font-size: 20px;
   background-color: white;
}

input[type=radio] > label{
  color: #424242;
}



#logo {
position:absolute;


}

textarea {
  width: 100%;
  height:100px;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  color: #438DAF;
   font-weight: bold;
   font-size: 15px;

}

#bootstrapForm > input[type="radio"] {
  background-color: green;
  color: #424242;
  padding: 0px 0px;
}


label {
  padding: 5px 5px 5px 0;
  display: inline-block;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float: right;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  text-align: center;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .col-25, .col-75, input[type=submit] {
    width: 100%;
    margin-top: 0;
  }
}

#html5-qrcode-button-camera-start, #html5-qrcode-button-camera-permission, #html5-qrcode-button-camera-stop, #html5-qrcode-select-camera {
  width: 80%;
  padding: 12px;
  border: 1px solid #80bdff;
  border-radius: 42px;
  resize: vertical;
  font-size:28px;
  background-color:#80bdff;
  color:white;
}

#html5-qrcode-select-camera {
  width: 80%;
height:44px;
  font-size:15px;
 background-color: #fff2e6;
  color:black;
  border-radius: 0px;
   border: 1px solid #cccccc;
}

#bootstrapForm > fieldset {
  width: 100%;
  padding-left: 5px;
  border: 0px solid #ccc;
  border-radius: 12px;
  resize: vertical;
  font-size:18px;
  margin-top: 15px;
}

#bootstrapForm > fieldset > legend {
  color: black;
  padding: 0px 0px;
}

#reader__scan_region {
 min-height: 50px;
}


#bootstrapForm > input[type=submit] {
  width:100%;
  background-color: #5eba63;
  color: white;
margin-bottom:30px;
  border: none;
  border-radius: 0px;
  cursor: pointer;
  float: right;
font-size:28px;

}

#bootstrapForm > input[type=submit]:hover {
  background-color: #3d8f41;
  font-size:28px;
}

#reader__dashboard {
 min-height: 20px;
 height: 20px;
}



input[type="date"] {
    width: 200px;
    height: 30px;
    vertical-align: bottom;
      margin: 2px 0  40px;
      font-size:20px;
      background-color:white;
}

select {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 12px;
  resize: vertical;
  font-size:18px;   
  background-color:white;
}

#info {
    display:none;
}

#fbCheck {
    display:none;
}
#fbCheck:not(:checked) ~ .sidebar-follow-button
{
    display:none;
}
#fbCheck:checked ~ .sidebar-follow-button
{
    text-align: center;
}
#search
{
    border: 1px solid #ccc;
    text-align: center;
      font-size:25;
      color:green;
}
.sidebar-follow {
    position-top:0px;
}

.sidebar-follow-icon {
    font-size:25;
}

#reader__dashboard_section {
    background-color:white;
}

#reader2__dashboard_section {
    background-color:white;
}

#html5-qrcode-button-camera-start {
    margin-top:10px;
}


#contframe { 


        width: 100%;
        text-align: center;
        padding-bottom:100px;
}
#container {
        border-radius: 25px;
        width:100%;
        display: inline-block;
        margin: 0 auto;
        padding: 10px;
        background-color:#e6e6e6;
        text-align: left;
}

#qr-shaded-region {


}



#reader2 {
    display:none;
}

video {
    object-fit: none;
}

#reader__dashboard_section {
    background-color: white;
}

#qr-shaded-region {
   
}

#resetButton {
    visibility: none;
}

.hidden {
  display: none;
}

#reader__dashboard_section {
    z-index:999;
}


/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding-left: 4px;
  height: 275px; /* Should be removed. Only for demonstration */
}
/* Create two equal columns that floats next to each other */
.column2 {
  float: right;
    width: 50%;
  padding: 0px;
  height: 275px; /* Should be removed. Only for demonstration */
}
/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
.row {
background-color:white;
}


input[type=checkbox] {
    padding-right: 10px;
}

.column > label {
  color:#1a75ff;
  font-size:17px;
 
  font-family: 'Noto Emoji', sans-serif;
}
.column2 > label {
  color:#1a75ff;
  font-size:17px;
  font-family: 'Noto Emoji', sans-serif;
}
.column3 > label {
  color:#1a75ff;
  font-size:17px;
  font-weight:bold;
  font-family: 'Noto Emoji', sans-serif;
}

/* Create two equal columns that floats next to each other */
.column3 {
  float: left;
  width: 20%;
  padding: 5px;
  height: 50px; /* Should be removed. Only for demonstration */
}

/* Clear floats after the columns */
.row3:after {
  content: "";
  display: table;
  clear: both;
}
.row3 {
  width:100%;
  background-color:#f2f2f2;
  padding-left:10px;
  padding-right:10px;

}
#customText {
  width: 270px;
  height:20px;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
  color: #1a75ff;
   font-size: 18px;
    font-weight: normal;
}
#customcheckmark {
    margin-left:5px;
}
#customdiv{
background-color:white;
height:50px;
padding-top: 8px;
padding-left: 3px;
}
::placeholder {
  color: #1a75ff;
  opacity: 1; /* Firefox */
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
 color: #1a75ff;
}
::-ms-input-placeholder { /* Microsoft Edge */
 color:#1a75ff;
}
  /* Media Query for Mobile Devices */
        @media (max-width: 480px) {
            body {
            }
        }

        /* Media Query for low resolution  Tablets, Ipads */
        @media (min-width: 481px) and (max-width: 767px) {
            body {
            }
        }

        /* Media Query for Tablets Ipads portrait mode */
        @media (min-width: 768px) and (max-width: 1024px){
            body {
                
            }
            #html5-qrcode-select-camera {
             width:80%;
             
            }

            #html5-qrcode-button-camera-start, #html5-qrcode-button-camera-permission, #html5-qrcode-button-camera-stop {
                      width: 80%;
                      padding: 12px;
                      border: 1px solid #80bdff;
                      border-radius: 42px;
                      resize: vertical;
                      font-size:28px;
                      color:white;
                    }
                    #container {
                        
                            width:80%;
                            display: inline-block;
                            margin: 0 auto;
                            padding: 3px;
                            background-color: #e6e6e6;
                            text-align: left;
                    }


        }

        /* Media Query for Laptops and Desktops */
        @media (min-width: 1025px) and (max-width: 1920px){
                body {
                     }
            #html5-qrcode-button-camera-start, #html5-qrcode-button-camera-permission, #html5-qrcode-button-camera-stop {
                      width: 80%;
                      padding: 12px;
                      border: 1px solid #80bdff;
                      border-radius: 42px;
                      resize: vertical;
                      font-size:28px;
                      color:white;
                    }
            #html5-qrcode-select-camera {
                                         width:80%;
                                         }
            #container {
                        
                            width:80%;
                            display: inline-block;
                            margin: 0 auto;
                            padding: 3px;
                            background-color:#e6e6e6;
                            text-align: left;
                    }
            }
            
        /* Media Query for Large screens */
        @media (min-width: 1281px) {
            body {
                 }
             #html5-qrcode-button-camera-start, #html5-qrcode-button-camera-permission, #html5-qrcode-button-camera-stop {
                      width: 80%;
                      padding: 12px;
                      border: 1px solid #80bdff;
                      border-radius: 42px;
                      resize: vertical;
                      font-size:28px;
                      color:white;
                         }
                    #container {
                        
                            width:80%;
                            display: inline-block;
                            margin: 0 auto;
                            padding: 3px;
                            background-color: #e6e6e6;
                            text-align: left;
                    }
            }
        
        
        
 /* Night - Day theme */       
body {
  --text-color: black;
  --bkg-color: #fff;
  --inputtext-color: white;
  --bkg-colorlight: #e6e6e6;
  --logurl: url('https://sluggish-cruiser.000webhostapp.com/mcps1.png');
}
body.dark-theme {
  --text-color: white;
  --bkg-color: black;
    --bkg-colorlight: #404040;
    --logurl: url('https://sluggish-cruiser.000webhostapp.com/mcps2.png');
}

@media (prefers-color-scheme: dark) {
  /* defaults to dark theme */
  body   {
    --text-color: black;
    --bkg-color: #121212;
    --bkg-colorlight: #ccc;
    --logurl: url('https://sluggish-cruiser.000webhostapp.com/mcps2.png');
         }
  body.light-theme {
    --text-color: white;
    --bkg-color: black;
    --bkg-colorlight: #ccc;
    --logurl: url(https://sluggish-cruiser.000webhostapp.com/'mcps1.png');
    
         }
    }

* {
  font-family: Arial, Helvetica, sans-serif;
}
:root {
  --logurl: url("https://static-cdn.jtvnw.net/ttv-boxart/Apex%20Legends-300x400.jpg");
}

#logoin
{
  background: var(--logurl);
}
body {
  background: var(--bkg-color);
}
#reader__dashboard_section 
{
 background: var(--bkg-color); 
}
#container
 {
 background: var(--bkg-colorlight); 
}
h1, p 
{
  color: var(--text-color);
}
#container > input[type=text], fieldset, legend
{
  color: var(--text-color);
}
#container > input[type=text], fieldset, legend
{
  color: var(--text-color);
}
 #bootstrapForm > fieldset > legend 
 {
   color: var(--text-color);    
 }
.dn-toggle {
    border:none;
    padding:0;
    position: relative;
  left: -4px;
  top:-5px;
}
 
#logoin {

 background-size: 120px;
 background-repeat: no-repeat;
 background-position: center;
 width:190px;
 height:70px;
  padding:50px;
    margin: 0 auto;
}