body {
    position: relative
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{
    margin: 0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
    display: block;
}
ol,ul{
    list-style:none;
    margin:0px;
    padding:0px;
}
blockquote,q{
    quotes:none;
}
blockquote:before,blockquote:after,q:before,q:after{
    content:'';
    content:none;
}
table{
    border-collapse:collapse;
    border-spacing:0;
}
/* start editing from here */
a{
    text-decoration:none;
}
.txt-rt{
    text-align:right;
}/* text align right */
.txt-lt{
    text-align:left;
}/* text align left */
.txt-center{
    text-align:center;
}/* text align center */
.float-rt{
    float:right;
}/* float right */
.float-lt{
    float:left;
}/* float left */
.clear{
    clear:both;
}/* clear float */
.pos-relative{
    position:relative;
}/* Position Relative */
.pos-absolute{
    position:absolute;
}/* Position Absolute */
.vertical-base{
    vertical-align:baseline;
}/* vertical align baseline */
.vertical-top{
    vertical-align:top;
}/* vertical align top */
nav.vertical ul li{
    display:block;
}/* vertical menu */
nav.horizontal ul li{
    display: inline-block;
}/* horizontal menu */
img{
    max-width:95%;
}
/*end reset*/
/****-----start-body----****/
body{
    background:rgba(31, 64, 108, 1);/*:#F7DA55;*/
    font-family: 'Open Sans', sans-serif;

}

.login-form {
    background:#fff;
    width: 26%;
    padding-left: 0%;
    position: relative;
    -webkit-border-radius: 0.4em;
    -o-border-radius: 0.4em;
    -moz-border-radius: 0.4em;
    display: block;
}




.align-start {
    align-items: flex-start;
}
.layout.column {
    flex-direction: column;
}

.container.fill-height {
    align-items: center;
    display: flex;
}
.container.fluid {
    max-width: 100%;
}
.v-card__title {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    padding: 16px;
}

.pa-3 {
    padding: 16px!important;
}
.container {
    flex: 1 1 100%;
    margin: auto;
    padding: 24px;
    width: 100%;
}
@media only screen and (max-width: 959px) {
    .container {
        padding: 16px;
    }
}
.justify-center {
    justify-content: center;
}

.theme--light.v-sheet {
    background-color: #fff;
    border-color: #fff;
    color: rgba(0,0,0,.87);
}
.v-card {

    text-decoration: none;
    border-radius:5px;
}




.head img {
    padding-left : 5%;
}
img {
    padding-top:0.8%;
    margin-left:0.8%;
}

.footer
{
    font-size:16px;
    color:#fff;
}
.main{
    position:relative;
}
.main h1{
    font-size:25px;
    color:#676767;
    font-family: 'Open Sans', sans-serif;
    font-weight:400;
    padding-top: 19%;
    text-align: center;
}
.login {
    width: 80%;
    margin: 0 auto;
    padding: 6% 0 9% 0;
}
.main p {
    text-align: center;
}
.login p a {
    color: #888;
    font-family: 'Open Sans', sans-serif;
}
login p a:hover {
    color:#21A957;
}
input[id="user"], input[id="password"]{
    text-align:left;
    position: relative;
    width:92%;
    padding:3%;
    background:#D3D3D3;
    margin-bottom: 6%;
    font-family: 'Open Sans', sans-serif;
    color: #676767;
    font-weight:600;
    font-size: 16px;
    outline: none;
    border: none;
    border-radius: 5px;
    border:1px solid #DED6D6;
    -webkit-appearance:none;
    height: 0%;
}
input[id="user"]:hover, input[id="password"]:hover{
    border:1px solid #949494;
    transition:0.5s;
    -webkit-transition:0.5s;
    -moz-transition:0.5s;
    -o-transition:0.5s;
    -ms-transition:	0.5s;
    height: 0%;
}
/*Botao do Login da pagina de Login*/
button[id="btnLogin"]{
    width: 99%;
    padding: 3%;
    margin-bottom: 8%;
    background:rgba(31, 64, 108, 1); /*#21A957;*/
    font-family: 'Open Sans', sans-serif;
    color: #ECECEC;
    box-shadow: inset 0px 0px 10px #666464;
    -webkit-text-shadow: 0px 0px 3px #000;
    -moz-text-shadow: 0px 0px 3px #000;
    -o-text-shadow: 0px 0px 3px #000;
    -ms-text-shadow: 0px 0px 3px #000;
    font-size: 16px;
    outline: none;
    border: none;
    cursor: pointer;
    font-weight:500;
    border-radius: 5px;
    transition: 0.5s;
    -webkit-appearance:none;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    height: 0%;
}
button[id="btnLogin"]:hover{
    background:#312E2B;
    color:#fff;
}
/*Botao do registar da pagina de Login*/
button[id="btnexperimente"]{
    width: 99%;
    padding: 3%;
    margin-bottom: 8%;
    background:#449d44; /*#21A957;*/
    font-family: 'Open Sans', sans-serif;
    color: #fff;
    font-size: 16px;
    outline: none;
    border: none;
    cursor: pointer;
    font-weight:500;
    border-radius: 5px;
    transition: 0.5s;
    -webkit-appearance:none;
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    -o-transition: 0.5s;
    -ms-transition: 0.5s;
    height: 0%;
}
.remember {
    text-align: right;
}
/****************/
.copy-right {
    position: absolute;
    bottom:-19%;
    left: 43.7%;
}
.copy-right p {
    color: #fff;
    font-size: 1em;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
}
.copy-right p a {
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    color:#21A957;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.copy-right p a:hover{
    color:#fff;
}
.checkbox_label{
    margin-left: -7%;
    font-size: 13px;
}

.control-label{
    padding-top: 5%
}


/*-----start-responsive-design------*/
@media only screen and  (max-width:1440px){

    .Logotipo{
        width: 22%;
        padding-left:38%;
        padding-top:8%;

    }
    .login-form {
        width:34%;

    }
    .main h1 {
        padding-top: 23%;
    }
    .copy-right {
        bottom: -26%;
    }


}
@media only screen and  (max-width:1366px){

    .Logotipo{
        width: 30%;
        padding-left:33%;
        padding-top:8%;

    }


}
@media only screen and  (max-width:1280px){

    .Logotipo{
        width: 30%;
        padding-left:33%;
        padding-top:8%;

    }
    .copy-right {
        left: 41%;
        bottom:-18%;
    }
}
@media only screen and  (max-width:1024px){
    .Logotipo{
        width: 38%;
        padding-left:30%;
        padding-top:8%;
        display: none;
    }
    .copy-right {
        left: 41%;
        bottom:-18%;
    }

}
@media only screen and (min-width: 768px) {
    .Logotipo{
        width: 25%;
        margin-left: 37%;
    }

}
@media only screen and  (max-width:768px){
    .Logotipo{
        width: 40%;
        padding-left:30%;
        padding-top:8%;
        display: none;
    }
    .footer
    {
        font-size:12px;
        color:#fff;
    }

    .copy-right {
        left:38%;
        bottom:-14%;
    }
    .checkbox_label{
        margin-left: 0%;
        font-size: 13px;
    }

}
@media only screen and (max-width:640px){

    .Logotipo{
        width: 50%;
        padding-left:23%;
        padding-top:8%;
    }
    .login-form {
      
        width: 100%;
    }
    .copy-right {
        left:36%;
        bottom:-18%;
    }
    .checkbox_label{
        margin-left: 0%;
        font-size: 13px;
    }
}
@media only screen and  (max-width:425){
    .login-form {
        margin-left: 0%;
        width: 100%;
    }
}



@media (max-width:320px){
    .login-form {
        margin: 20% auto 0;
        width: 100%;
    }
    .footer{

    }
    .main h1 {
        padding-top: 20%;
        font-size: 20px;
    }
    .head img {
        width: 60%;
        border: 5px solid rgba(221, 218, 215, 0.23);
    }
    .head {
        top: -15%;
        left: 36%;
    }
    input[id="user"], input[id="password"],button[type="submit"] {
        font-weight:600;
        font-size: 15px;
    }
    .main login p a {
        font-size: 15px;
    }
    button[type="submit"] {
        padding: 4%;
    }

}


.material-switch > input[type="checkbox"] {
    display: none;
}

.material-switch > label {
    cursor: pointer;
    height: 0px;
    position: relative;
    width: 40px;
}

.material-switch > label::before {
    background: grey;
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -6px;
    position:absolute;
    opacity: 1.8;
    transition: all 0.4s ease-in-out;
    width: 40px;
}
.material-switch > label::after {
    background: rgb(255, 255, 255);
    border-radius: 58px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 13px;
    left: 2px;
    margin-top: -5px;
    position: absolute;
    transition: all 0.3s ease-in-out;
    width: 13px;
}
/*      caso esteja checkbox aplica o css after*/
.material-switch > input[type="checkbox"]:checked + label::before {
    background: inherit;

}
.material-switch > input[type="checkbox"]:checked + label::after {
    background: white;
    left: 26px;
}