*{
    box-sizing: content-box;
    margin: 0px;
    padding: 0px;
}
body{
    width: 100%;
    margin: 0;
    /*//height: 100%;*/   
    overflow: hidden;
    height: 100vh;
    background: #e0f3fa; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  hsla(196,72%,93%,1) 0%, hsla(200,86%,92%,1) 50%, hsla(199,78%,84%,1) 50%, hsla(205,95%,85%,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,hsla(196,72%,93%,1)), color-stop(50%,hsla(200,86%,92%,1)), color-stop(50%,hsla(199,78%,84%,1)), color-stop(100%,hsla(205,95%,85%,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  hsla(196,72%,93%,1) 0%,hsla(200,86%,92%,1) 50%,hsla(199,78%,84%,1) 50%,hsla(205,95%,85%,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  hsla(196,72%,93%,1) 0%,hsla(200,86%,92%,1) 50%,hsla(199,78%,84%,1) 50%,hsla(205,95%,85%,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  hsla(196,72%,93%,1) 0%,hsla(200,86%,92%,1) 50%,hsla(199,78%,84%,1) 50%,hsla(205,95%,85%,1) 100%); /* IE10+ */
    background: linear-gradient(135deg,  hsla(196,72%,93%,1) 0%,hsla(200,86%,92%,1) 50%,hsla(199,78%,84%,1) 50%,hsla(205,95%,85%,1) 100%); /* W3C */
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0f3fa', endColorstr='#b6dffd',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */  
}
.c1{ 
    float: left;
    width: 65%;
    height: 200px;               
    background: #3b679e; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  hsla(213,45%,43%,1) 0%, hsla(208,69%,50%,1) 50%, hsla(208,73%,46%,1) 50%, hsla(206,70%,70%,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,hsla(213,45%,43%,1)), color-stop(50%,hsla(208,69%,50%,1)), color-stop(50%,hsla(208,73%,46%,1)), color-stop(100%,hsla(206,70%,70%,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  hsla(213,45%,43%,1) 0%,hsla(208,69%,50%,1) 50%,hsla(208,73%,46%,1) 50%,hsla(206,70%,70%,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  hsla(213,45%,43%,1) 0%,hsla(208,69%,50%,1) 50%,hsla(208,73%,46%,1) 50%,hsla(206,70%,70%,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  hsla(213,45%,43%,1) 0%,hsla(208,69%,50%,1) 50%,hsla(208,73%,46%,1) 50%,hsla(206,70%,70%,1) 100%); /* IE10+ */
    background: linear-gradient(135deg,  hsla(213,45%,43%,1) 0%,hsla(208,69%,50%,1) 50%,hsla(208,73%,46%,1) 50%,hsla(206,70%,70%,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    height: 250px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;

    background: linear-gradient(#333 60%, #fff 30%);
}
.c2{
    height: 230px;  
    margin-left: 65%;
    width: 35%;
    padding: 10px;
    background: #ebf1f6; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  hsla(207,38%,95%,1) 0%, hsla(204,66%,80%,1) 50%, hsla(204,71%,73%,1) 50%, hsla(205,83%,91%,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,hsla(207,38%,95%,1)), color-stop(50%,hsla(204,66%,80%,1)), color-stop(50%,hsla(204,71%,73%,1)), color-stop(100%,hsla(205,83%,91%,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  hsla(207,38%,95%,1) 0%,hsla(204,66%,80%,1) 50%,hsla(204,71%,73%,1) 50%,hsla(205,83%,91%,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  hsla(207,38%,95%,1) 0%,hsla(204,66%,80%,1) 50%,hsla(204,71%,73%,1) 50%,hsla(205,83%,91%,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  hsla(207,38%,95%,1) 0%,hsla(204,66%,80%,1) 50%,hsla(204,71%,73%,1) 50%,hsla(205,83%,91%,1) 100%); /* IE10+ */
    background: linear-gradient(135deg,  hsla(207,38%,95%,1) 0%,hsla(204,66%,80%,1) 50%,hsla(204,71%,73%,1) 50%,hsla(205,83%,91%,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.ui-button{
    box-shadow: none !important;
    border: 1px solid #666;             
    border-radius: 0px;
    background: #a90329; /* Old browsers */
    background: -moz-linear-gradient(-45deg,  hsla(346,96%,34%,1) 0%, hsla(346,97%,29%,1) 44%, hsla(346,100%,22%,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,hsla(346,96%,34%,1)), color-stop(44%,hsla(346,97%,29%,1)), color-stop(100%,hsla(346,100%,22%,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg,  hsla(346,96%,34%,1) 0%,hsla(346,97%,29%,1) 44%,hsla(346,100%,22%,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg,  hsla(346,96%,34%,1) 0%,hsla(346,97%,29%,1) 44%,hsla(346,100%,22%,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg,  hsla(346,96%,34%,1) 0%,hsla(346,97%,29%,1) 44%,hsla(346,100%,22%,1) 100%); /* IE10+ */
    background: linear-gradient(135deg,  hsla(346,96%,34%,1) 0%,hsla(346,97%,29%,1) 44%,hsla(346,100%,22%,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    color: white;
    width: 99%;
}

.ui-button-text{
    font-size: 0.7em;
}

.welcome{
    text-shadow:
        0 1px 0 #790000,
        0 2px 0 #b5b5b5,
        0 3px 0 #9b9b9b,
        0 4px 0 #898989,
        0 5px 0 #7b7b7b,
        0 6px 0 #626262,
        0 7px 0 rgba(1,0,0,.5)
        ;
    /*//position: absolute;*/
    padding: 1%;
    margin: auto;
    font-size: 1em;
    color: #333;
}
.w1{
    font-size: 2em;
}

.part{              
    overflow: hidden;
    width: 100%;
}
input{
    width: 99%;
}
select{
    width: 99%;
}
input, select{
    -moz-box-shadow: 1px 1px 10px 1px #009999;
    -webkit-box-shadow: 1px 1px 10px 1px #9a0000;
    -o-box-shadow: 1px 1px 10px 1px #9a0000;
    box-shadow: 1px 1px 10px 1px #009999;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#9a0000, Direction=134, Strength=90);
    cursor: pointer;
    border-radius: 2px;
    height: 25px;
    background: white;
}
input[type='text']:hover,input[type='password']:hover, select:hover{
    -moz-box-shadow: 1px 1px 10px 1px #9a0000;
    -webkit-box-shadow: 1px 1px 10px 1px #9a0000;
    -o-box-shadow: 1px 1px 10px 1px #9a0000;
    box-shadow: 1px 1px 10px 1px #9a0000;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#9a0000, Direction=134, Strength=90);
    cursor: text;
}
.copyrith{
    font-style: italic;
    display: inline-block;
    margin-right: 10px;
}

.new-way{
    position: absolute;
    bottom: 10px;
    left: 0px;
    font-size: 0.8em;
    color: white
}

main{
    display: flex;
    align-items:center;
    justify-content:center;
    width: 100%;
    height: calc(100% - 25px);
}

main form{
    width: 400px;
    position: relative;
    background: white;    
    border-radius: 20px;
    box-shadow: -1px 1px 1px 1px rgba(0, 0, 0, 0.3) ;
    padding: 50px 50px 75px 50px;
}

main form input{
    width: 99% !important;
}

main form input, main form select{
    height: 30px;
    margin-bottom: 10px
}

main form button{
    width: 100%;
    height: 30px;
    border-radius: 10px;
    margin-top: 20px
}

main form .header{
    display: flex;
    align-items:center;
    justify-content:center;
    margin-bottom: 50px

}
main form .footer{
    float: right;
    margin-right: 10px;
    font-weight: bold;
    font-style: italic;
    position: absolute;
    bottom: 20px;
    right: 5%;
}

footer{
    display: flex;
    align-items:center;
    justify-content:space-between;
    width: 100%;
    height: 25px;
    font-size: 0.8em;
}

.disabled{
    opacity: 0.5
}

.line-through{
    text-decoration: line-through;
}

/*VERSION TABLETTE*/  
@media (min-width: 678px) and (max-width: 991px) {
    main {
        padding: 0 0.5rem;
    }
}

/*VERSION MOBILE*/  
@media (max-width: 677px) {
    body{
        width: 100%;
    }
    main{
        width: 97%;
        height: calc(100% - 50px);
        padding: 0 5px;
    }

    main form{
        width: 100%;
    }
    footer{
        flex-direction:column;
        height: 50px;
        gap:10px;
        justify-content:center;
    }
    .copyrith{
        margin-right: 0;
    }
}