/*
 * Copyright © CHITA FLEX, Lda. 2020
 */

/**
 * CSS Styles for login and password change pages.
 * @author JF
 */

    * {
        box-sizing: border-box;
    }
    .formContainer {
        border-radius: 10px 25px; background-color: #f2f2f2; padding: 20px;
    }
    .container {
        width: 50%; border: 3px solid purple; border-radius: 10px 25px; 
        margin: auto; padding: 10px;
        background-color: rgba(256,256,256,0.9);
    }
    .container2 {
        width: 80%; border: none; margin: auto; padding: 0px;
    }
    input[type=text], input[type=password], select, textarea {
        width: 100%; padding: 12px; border: 1px solid #ccc;
        border-radius: 4px; resize: vertical;
    }
    input[type=checkbox] {
        zoom: 1.5; vertical-align: middle;
    }
    label {
        padding: 12px 12px 12px 0; display: inline-block;
    }
    .labelError {
        padding: 12px 12px 12px 0; display: inline-block; color: red;
    }
    input[type=submit] {
        background-color: rgb(128,0,128); color: white; padding: 12px 30px;
        border: none; border-radius: 4px; cursor: pointer; float: right;
    }
    input[type=submit]:hover {
        background-color: rgb(164,0,164);
    }
    .col-25 {
        float: left; width: 25%; margin-top: 6px;
    }
    .col-75 {
        float: left; width: 75%; margin-top: 6px;
    }
    .GroupInput {
        float: left; width: 75%; margin-top: 6px;  
        padding: 12px; border: 1px solid #ccc; border-radius: 4px;  
    }
    .GroupOutput {
        float: left; width: 100%; margin-top: 6px;  
        padding: 12px; border: 1px solid #ccc; border-radius: 4px;  
    }
/* Clear floats after the columns */
    .row:after {
        content: ""; display: table; clear: both;
    }
    .LinkCancel {
        background-color: lightgrey; color: white; padding: 12px 30px;
        text-align: center; text-decoration: none; border: none; 
        border-radius: 4px; display: inline-block;
    }
    .LinkCancel:hover{
        background-color: #FFDFFF;
    }
    .DescriptionParagraph{
        text-align: justify;
    }
/* 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, .GroupInput, input[type=submit] {
            width: 100%;
        }
        .container {
            width: 95%;
        }
        .container2 {
            width: 100%;
        }
        .LinkCancel {
            display: none
        }
        .DescriptionParagraph {
            display: none;
        }
    }