/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 15/08/2020, 05:07:19 AM
    Author     : Ciro Solano
*/
.session{
    width:100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: end;           
}

.myButton {
    box-shadow:inset 0px 1px 0px 0px #f5978e;
    background:linear-gradient(to bottom, #f24537 5%, #c62d1f 100%);
    background-color:#f24537;
    border-radius:6px;
    border:1px solid #d02718;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    font-weight:bold;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #810e05;
}
.myButton:hover {
    background:linear-gradient(to bottom, #c62d1f 5%, #f24537 100%);
    background-color:#c62d1f;
}
.myButton:active {
    position:relative;
    top:1px;
}

.form-control {
    width: 100%;
    box-shadow:inset 0px -3px 7px 0px #29bbff;
    background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
    background-color:#2dabf9;
    border-radius:3px;
    border:1px solid #0b0e07;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:15px;
    padding:9px 23px;
    text-decoration:none;
    text-shadow:0px 1px 0px #263666;
}
.form-control:hover {
    background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
    background-color:#0688fa;
}
.form-control:active {
    position:relative;
    top:1px;
}


.box{
    width: 50%;
    float: left;
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden;
}

#box_left{
    border-right: 0.5px solid #64646438;
}

.box h2{
    text-align: center;
}

.col-md-2{
    width: 90%;
    margin: 8px auto;
    text-align: center;
}

.col-md-2 img{
    width: 250px;
    height: 250px;
    border: 0.5px solid #64646485;
}

.input-container{
    width: 33.3%;
    height: 50px;
    float: left;
    position: relative;
    margin: 15px 0px;
    padding: 0px 15px;
    box-sizing: border-box;
}

.input-container .name_input{
    position: absolute;
    top: 0px;
    left: 15px;
    font-size: 16px;
    color: #000000;	
    pointer-event: none;
    transition: all 0.5s ease-in-out;
}

.input-container input, select{ 
    text-align: end;
    border: 0;
    border-bottom: 2px solid #646464;  
    background: transparent;
    width: 100%;
    padding: 8px 0 5px 0;
    font-size: 16px;
    color: #000000;
}

.input-container input:focus, select:focus{ 
    border: none;	
    outline: none;
    border-bottom: 2px solid #2196f3;	
}

.input-container select:focus ~ .name_input,
.input-container input:focus ~ .name_input,
.input-container select:valid ~ .name_input,
.input-container input:valid ~ .name_input{
    top:2px;
    font-size:12px;

}

.botton{
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}


.myButton_car {
    margin: 0 auto;
    box-shadow:inset 0px 1px 0px 0px #cf866c;
    background:linear-gradient(to bottom, #ff3700 5%, #bc3315 100%);
    background-color:#ff3700;
    border-radius:3px;
    border:1px solid #942911;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:16px;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #854629;
}
.myButton_car:hover {
    background:linear-gradient(to bottom, #bc3315 5%, #ff3700 100%);
    background-color:#bc3315;
}
.myButton_car:active {
    position:relative;
    top:1px;
}

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

    .box{
        width: 100%;
    }

    #box_left{
        border: none;
    }

    .input-container{
        width: 100%;
    } 

}