* {
  	box-sizing: border-box;
  	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
  	font-size: 16px;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
}
.header{
  text-align: left;
  padding: 20px;
}

.wrapper{
        min-width: 375px;
        max-width: 1026px;
        margin: 0 auto;
        clear:both;
        
}
table tr td:last-child{
    width: 120px;
}

input[type=file]{
  background-color: #ffffff;
  color: #333;
  padding: 6px 3px 3px 3px;
}
 
input[type=file]::-webkit-file-upload-button {
  display: none;
  background-color: #333;
}


input[type=submit]:hover{
  background-color: rgb(15, 116, 218);
}

.file-upload{
  background-color: #333333;
  color: #ffffff;
  padding: 10px;
  cursor: pointer;
}

.col-md-12{
   margin-bottom: 10px;
}

.mr-3{
   margin-left: 5px;
   margin-right: 5px;
}

.img {
  width: 50%;
  height: auto;
}

.btn-delete {
   cursor: pointer;
   position: relative;
   right: 2px;
   top: 2px;
}

.btn-primary {
  background-color: dodgerblue;
  color: #ffffff;
  cursor: pointer;
  width: 26%;
  border-radius: 5px;
  border: none;
  margin-top: 10px;
}
.btn-secondary {
  color: #ffffff;
  cursor: pointer;
  width: 26%;
  border-radius: 5px;
  border: none;
  margin-top: 10px;
}

.btn-danger {
  color: #ffffff;
  cursor: pointer;
  width: 26%;
  border-radius: 5px;
  border: none;
  margin-top: 10px;
}

.select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;
  margin-top: 5px;
  
}

.box {
padding-right: 0.5rem;
}

label {
  display: block;
  position: relative;
}


input {
display: inline-block;
width: 100%;
padding: 1rem;
}

input:required:invalid, input:focus:invalid {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC);
background-position: right top;
background-repeat: no-repeat;
-moz-box-shadow: none;
}

input:required:valid {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=);
background-position: right top;
background-repeat: no-repeat;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 23.5rem) 
and (max-device-width : 50.75rem) {
    /* Styles */
    .box {
    float: left;
    width: 50%;
    }


}

/* all device*/
@media screen and (min-width:50.75rem) {
    label {
    display: block;
    width: 150px;
    float: left;
    }

    .box {
    width: 50%;
    float: left;
    }

    input {
    width: 50%;
    }
}

nav-link2{
  text-align: right;
    list-style-position: inside;
    float:right;
}
