/*
Author: Shiraj Rafeek (AKA Sheej)
Purpose: Form Design
*/    

    /*START - AUOT COMPLETE*/
        .autocomplete {
            /*the container must be positioned relative:*/
            position: relative;
            display: inline-block;
        }
        .autocomplete-items {
            position: absolute;
            border: 1px solid #d4d4d4;
            border-bottom: none;
            border-top: none;
            z-index: 99;
            /*position the autocomplete items to be the same width as the container:*/
            top: 100%;
            left: 0;
            right: 0;
        }
        .autocomplete-items div {
            padding: 10px;
            cursor: pointer;
            background-color: #fff; 
            border-bottom: 1px solid #d4d4d4; 
        }
        .autocomplete-items div:hover {
            /*when hovering an item:*/
            background-color: #e9e9e9; 
        }
        .autocomplete-active {
            /*when navigating through the items using the arrow keys:*/
            background-color: DodgerBlue !important; 
            color: #ffffff; 
        }
    /*END - AUOT COMPLETE*/

    /* START - SUBMIT BUTTON, BUTTON */
        input[type=submit],input[type=button]{
            border: 1px solid;
            padding: 12px 32px;
            text-decoration: none;
            margin: 2px 2px;
            cursor: pointer;
            float: left;
            font-size: 18px;
            border-radius: 4px;
            height:45px;
            width:auto;
            text-align: center;
            background-color: rgb(123, 175, 124);
            color:#eeee;
            margin-top: 10px;
        }
        input[type=submit]:hover, input[type=button]:hover{
            background-color: #4CAF50;
            color:#eeee;
        }
    /* END - SUBMIT BUTTON, BUTTON */
    /* START - FORM */
        /* Mark input boxes that gets an error on validation: */
        .form-container {
            font-family: Arial;
            font-size: 15px;
            border-radius: 5px;
            background-color: #c0c0c0;
            padding: 20px;
            display:block;
            margin-left:20px;
            margin-right:20px;
        }
        /* Form Process Steps - i.e. Registration Form, CI Template, CI issuance etc. */    
        .form-text, .form-number, .form-tel {
            width: 100%;
            height:42px;
            font-size: 12px;
            padding: 12px 10px 10px 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
        }
        .form-textarea {
            width: 100%;
            height:150px;
            font-size: 12px;
            padding: 12px 10px 10px 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            resize: vertical;
        }
        .form-radio, .form-check  {
            height:42px;
            font-size: 12px;
            padding: 12px 10px 10px 10px;
            border: 1px solid #ccc;
            border-radius: 6px;
            resize: vertical;
        }
        .form-select{
            width: 33.3%;
            height:42px;
            padding: 5px 5px 5px 5px;
            font-size: 16px;
            border: 1px solid #9E2B23;
            background-color: #9E2B23;
            color: #ffffff;
            border-radius: 4px;
            resize: vertical;
            float:left;
        }
        .form-textarea {
            height:100px;
            font-size: 18px;
        }
        .form-label {
            padding: 12px 12px 12px 0;
            display: inline-block;
            color: #527257;
            letter-spacing: 1px;
        }
        .form-col-10 {
            float: left;
            width: 10%;
            margin-top: 6px;
            margin-bottom: 6px;
        }
        .form-col-20 {
            float: left;
            width: 20%;
            margin-top: 6px;
            margin-bottom: 6px;
        }
        .form-col-25 {
            float: left;
            width: 25%;
            margin-top: 6px;
            margin-bottom: 6px;
        }
        .form-col-30 {
            float: left;
            width: 30%;
            margin-top: 6px;
            margin-bottom: 6px;
        }
        .form-col-40 {
            float: left;
            width: 40%;
            margin-top: 6px;
            margin-bottom: 6px;
        }
        .form-col-50 {
            float: left;
            width: 50%;
            margin-top: 6px;
            margin-bottom: 6px;
        }
        .form-col-60 {
            float: left;
            width: 60%;
            margin-top: 6px;
            margin-bottom: 6px;
        }
        .form-col-70 {
            float: left;
            width: 70%;
            margin-top: 6px;
            margin-bottom: 6px;
        }
        .form-col-80 {
            float: left;
            width: 80%;
            margin-top: 6px;
            margin-bottom: 6px;
        }
        .form-col-90 {
            float: left;
            width: 90%;
            margin-top: 6px;
            margin-bottom: 6px;
        }
        .form-col-100 {
            float: left;
            width: 100%;
            margin-top: 6px;
            margin-bottom: 6px;
        }
        /* Clear floats after the columns */
        .form-row:after {
            content: "";
            display: table;
            clear: both;
            margin-bottom: 6px;
        }
        
        .form_btnAnimate{
            -webkit-animation-name: animsubmit; /* Safari 4.0 - 8.0 */
            /* -webkit-animation-duration: 4s;  Safari 4.0 - 8.0 */
            /* -webkit-animation-count: infinite;  Safari 4.0 - 8.0 */
            animation-name: animsubmit;
            /*animation-duration: 4s;*/
            /*animation-iteration-count: infinite;*/
            animation: 5s infinite;
        }
        /* Safari 4.0 - 8.0 
            @-webkit-keyframes animsubmit {
                0%   {background-color: #45a043; }
                50%  {background-color:#8fa18f; }

            }*/
        /* Standard syntax 
            @keyframes animsubmit {
                0%   {background-color: #45a043; }
                50%  {background-color:#8fa18f; }
            }*/
        /* Mark input boxes that gets an error on validation: */
        .form-invalid {
            background-color: #f39b9b;
            color: #000;
        }
        .form-valid {
            background-color: #ffffff;
            color: #000;
        }
    /* END - FORM */
    /* 
    The dynamic message box 
    i.e. password creation
    can be used for warning, error, info messages with context guidance to user  
    */
        #message {
            display:none;
            background: #f1f1f1;
            color: #000;
            position: relative;
            padding: 20px;
        }

        #message p {
            font-size: 17px;
        }

        /* Add a green text color and a checkmark when the requirements are right */
        .valid {
            color: green;
        }

        .valid:before {
            /*position: relative;*/
            left: -35px;
            content: "✔";
        }
    /* Add a red text color and an "x" when the requirements are wrong */
        .invalid {
            color: red;
        }
        .invalid:before {
            /*position: relative;*/
            left: -35px;
            content: "✖";
        }
/* END - FORM */
/* START responsive Form */ 

    @media screen and (max-width: 800px) {
        .form-col-10, .form-col-20, .form-col-25, .form-col-30, .form-col-40, .form-col-50, .form-col-60, .form-col-70, .form-col-80, .form-col-90, .form-col-100, input[type=submit], input[type=button] {
            width: 100%;
            display: block;
        }
    }
    @media screen and (max-width: 400px) {
        .form-col-10, .form-col-20, .form-col-25, .form-col-30, .form-col-40, .form-col-50, .form-col-60, .form-col-70, .form-col-80, .form-col-90, .form-col-100, input[type=submit], input[type=button] {
            width: 100%;
            display: block;
        }
    }
    @media screen and (max-width: 200px) {
        .form-col-10, .form-col-20, .form-col-25, .form-col-30, .form-col-40, .form-col-50, .form-col-60, .form-col-70, .form-col-80, .form-col-90, .form-col-100, input[type=submit], input[type=button] {
            width: 100%;
            display: block;
        }
    }
/* END responsive Form */