/* Full-width input fields */
input[type=text],
input[type=password] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

/* Set a style for all buttons */
button {
    background-color: #04AA6D;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;
}

button:hover {
    opacity: 0.8;
}

/* Extra styles for the cancel button */
.cancelbtn {
    width: auto;
    padding: 10px 18px;
    background-color: #f44336;
}

/* Center the image and position the close button */
.imgcontainer {
    text-align: center;
    margin: 24px 0 12px 0;
    position: relative;
}

img.avatar {
    width: 10%;
    border-radius: 50%;
}

.container {
    padding: 16px;
}

span.psw {
    float: right;
    padding-top: 16px;
}

/* The Modal (background) */
.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 1;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
    padding-top: 60px;
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 5% auto 15% auto;
    /* 5% from the top, 15% from the bottom and centered */
    border: 1px solid #888;
    width: 80%;
    /* Could be more or less, depending on screen size */
}

/* The Close Button (x) */
.close {
    position: absolute;
    right: 25px;
    top: 0;
    color: #000;
    font-size: 35px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: red;
    cursor: pointer;
}

/* Add Zoom Animation */
.animate {
    -webkit-animation: animatezoom 0.6s;
    animation: animatezoom 0.6s
}

@-webkit-keyframes animatezoom {
    from {
        -webkit-transform: scale(0)
    }

    to {
        -webkit-transform: scale(1)
    }
}

@keyframes animatezoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
    span.psw {
        display: block;
        float: none;
    }

    .cancelbtn {
        width: 100%;
    }
}



html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -0.25em
}

sup {
    top: -0.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button
}

body {
    overflow-wrap: break-word;
    word-break: break-word;
    word-wrap: break-word
}

.container:after,
.float-container:after {
    clear: both;
    content: "";
    display: table
}

.clearboth {
    clear: both
}

#main {
    outline: none
}

.centered-top-placeholder {
    display: none
}

.sidebar-container {
    background-color: #ffffff;
    max-width: 284px;
    width: 284px;
}

body {
    background-color: #f4f4f4;
    color: #757575;
    font: 15px Roboto, sans-serif;
    margin: 0;
    min-height: 100vh
}

img {
    max-width: 100%
}

h3 {
    color: #757575;
    font-size: 16px
}

a {
    text-decoration: none;
    color: #2196f3
}

a:visited {
    color: #2196f3
}

a:hover {
    color: #2196f3
}

blockquote {
    color: #444444;
    font: italic 300 15px Roboto, sans-serif;
    font-size: x-large;
    text-align: center
}

.page_body {
    position: relative;
    float: left;
}

.page_body .widget {
    margin-bottom: 16px
}

.page_body .centered {
    box-sizing: border-box;
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    margin: 0 auto;
    max-width: 922px;
    width: 750px;
    min-height: 100vh;
}

.page-name {
    margin: 32px 0 16px
}

.centered-bottom,
.centered-top-container,
.centered-top-placeholder {
    padding: 0 20px
}

.Header h1 {
    font: bold 45px Roboto, sans-serif;
    line-height: normal;
    margin: 0 0 13px;
    text-align: center;
    width: 100%
}

.Header h1,
.Header h1 a,
.Header h1 a:hover,
.Header h1 a:visited {
    color: #424242
}

.Header h2 {
    text-align: center;
}

article {
    background: #ffffff;
    min-height: 40px;
    padding: 30px 40px;
    width: auto;
    box-shadow: 0 1px 4px 0 rgb(60 64 67 / 30%);
}

.sidebar-container {
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .1);
    float: left;
    height: 100%;
  /*  position: fixed; */
}

* {
    box-sizing: border-box;
  }