/* 01.Base */
html                                                                        { width: 100%; height: 100%; background: #f8f8f8; }

body                                                                        { font-family: 'Lato', sans-serif !important;}

#maincard                                                                   { display: flex; align-items: center; justify-content: center; margin: auto;}
#maincard .input-field                                                      { margin-bottom:20px;}
#shadow_card                                                                { background: #FFFFFF; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25); border-radius: 21px;}
#imgpanel                                                                   { background: url(../img/greenland.jpg); background-size: cover; background-repeat: no-repeat; background-position: top; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25); border-radius: 0px 21px 21px 0px; padding: 0 20px; display:flex; align-items: center;}
#formpanel                                                                  { width: auto; padding: 60px;}
.inner_card_img                                                             { text-align: center;}
.inner_card_img  img                                                        { width: 400px;}
.inner_card_img p                                                           { padding-top:10px; font-family: 'Lato', sans-serif; color: #fff; line-height: 19px;}
.toptext                                                                    { text-align: center;}
.toptext p                                                                  { font-size: 16px; margin-bottom: 45px;}
.toptext h4                                                                 { text-transform: uppercase; font-family: 'Lato', sans-serif; font-weight: 800;}
.logintext                                                                  { font-weight: 900; background: linear-gradient(to right, #104978 30%, #3693ce 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 15px; font-size: 60px;}
.formcard input                                                             { transition: all .2s ease;}
.formcard .inputs                                                           { font-family: 'Lato', sans-serif; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25); border: 1px solid #ccc; border-radius: 30px; margin: 10px auto;}
.form-style                                                                 { border-radius: 30px; font-size: 12px; color: #104978; display: inline-block; letter-spacing: .8px; border:none; padding: 15px 15px 15px 20px; width: 280px;}
.form-style:focus                                                           { opacity: 1; border:none; outline: 0;}
.inputs:hover                                                               { border: 1px solid #104978;}
.inputs:hover i                                                             { border-right: 1px solid #104978;}
.form-style::placeholder                                                    { color: #ccc; padding-left: 5px; opacity: 0.9; letter-spacing: .8px; font-size: 13px;}
.logicon                                                                    { font-size:16px; font-weight: 900 !important; position: relative; right: 0; top: 0; padding: 9px 12px; border-right: 1px solid #ccc; color: #104978; transition: 0.3s; padding-left:20px;}
.btn-formbottom                                                             { text-align: center; margin-top:40px;}
.loginbtn                                                                   { border: 1px solid #104978; background-image: linear-gradient(to right,#3693ce, #104978, #104978, #104978); background-size: 300% 100%; box-sizing: border-box; border-radius: 35px; color: white; width: 28vh;  moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; font-size: 18px !important; font-weight: 600; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}
.loginbtn:hover                                                             { background-position: 100% 0;  moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out; background: #104978; color:#fff; border: 1px solid #104978;}
.remembersection                                                            { padding: 20px 0;}
.remembersection p                                                          { text-align: right; font-size: 12px;}
.remembersection p a                                                        { color: #104978;}
.remembersection p a:hover                                                  { text-decoration: underline;}
.btnalign2 ,  .btnalign1                                                    { border: 1px solid #104978;}
.uploadbtns                                                                 { cursor: pointer; background: #104978!important; color:#fff; padding: 10px 15px!important; font-size: 13px !important; font-weight: 200; border-radius: 4px;}
/* Create a custom checkbox */
.chekinput                                                                  { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.rmember                                                                    { position: relative; padding: 0 10px 0 20px; margin-bottom: 12px; cursor: pointer; font-size: 12px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; float: left;}
.remembermark                                                               { position: absolute; top: 0; left: 0; height: 15px; width: 15px; border: 2px solid #873380; } 

/* On mouse-over, add a grey background color */
.rmember:hover input ~ .remembermark                                        { background-color: #fff;}
  
/* When the checkbox is checked, add a blue background */
.rmember input:checked ~ .remembermark                                      { background-color: #873380;}
  
/* Create the checkmark/indicator (hidden when not checked) */
.remembermark:after                                                         { content: "";  position: absolute; display: none; }
  
/* Show the checkmark when checked */
.rmember input:checked ~ .remembermark:after                                { display: block; }
  
/* Style the checkmark/indicator */
.rmember .remembermark:after                                                { left: 3px; top: 0px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}

@media only screen and (max-width: 750px){
  #lav_background                                                           { background: url(../img/mainbg.jpg) no-repeat fixed;}
  #contentwrap                                                              { max-width: 100%;}
  #formpanel                                                                { padding:20px;}
}

.success_m {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
#success_tic .page-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

#success_tic .page-body .head {
    text-align: center;
}

#success_tic .close {
    opacity: 1;
    position: absolute;
    right: 0px;
    font-size: 30px;
    padding: 3px 15px;
    margin-bottom: 10px;
    color: #104978;
}

#success_tic .checkmark-circle {
    width: 130px;
    height: 130px;
    position: relative;
    display: inline-block;
    vertical-align: top;
}

.checkmark-circle .background {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #1ab394;
    position: absolute;
}

#success_tic .checkmark-circle .checksuccess {
    border-radius: 5px;
}

#success_tic .checkmark-circle .checksuccess.draw:after {
    -webkit-animation-delay: 400ms;
    -moz-animation-delay: 400ms;
    animation-delay: 400ms;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-timing-function: ease;
    -moz-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-name: checkmark;
    -moz-animation-name: checkmark;
    animation-name: checkmark;
    -webkit-transform: scaleX(-1) rotate(135deg);
    -moz-transform: scaleX(-1) rotate(135deg);
    -ms-transform: scaleX(-1) rotate(135deg);
    -o-transform: scaleX(-1) rotate(135deg);
    transform: scaleX(-1) rotate(135deg);
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

#success_tic .checkmark-circle .checksuccess:after {
    opacity: 1;
    height: 75px;
    width: 37.5px;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    border-right: 15px solid #fff;
    border-top: 15px solid #fff;
    border-radius: 2.5px !important;
    content: '';
    left: 30px;
    top: 72px;
    position: absolute;
}        

@-webkit-keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
    }

    20% {
        height: 0;
        width: 37.5px;
        opacity: 1;
    }

    40% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }

    100% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }
}

@-moz-keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
    }

    20% {
        height: 0;
        width: 37.5px;
        opacity: 1;
    }

    40% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }

    100% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }
}

@keyframes checkmark {
    0% {
        height: 0;
        width: 0;
        opacity: 1;
    }

    20% {
        height: 0;
        width: 37.5px;
        opacity: 1;
    }

    40% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }

    100% {
        height: 75px;
        width: 37.5px;
        opacity: 1;
    }
}

/*
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 : Feb 12, 2019, 11:59:23 AM
    Author     : achini_a
*/
.body{
    font-family: "Lato", sans-serif;

}

.form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    width: 75vh;
    margin: 0 auto 100px;
    padding: 45px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
    top: 16vh;
}
/*.form input {
    
}*/
/*noinspection ALL*/
.form button {
    font-family: "Roboto", sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: linear-gradient(90deg, #8F3685 0.03%, #501E5C 80.06%);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    width: 100%;
    border: 0;
    padding: 15px;
    color: #FFFFFF;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
}

.form .message {
    margin: 15px 0 0;
    color: #b3b3b3;
    font-size: 12px;
}
.form .message a {
    color: #4CAF50;
    text-decoration: none;
}
.form .register-form {
    display: none;
}

.backg{
    background: url("../img/background.jpg") no-repeat;
    background-size: cover;
    height: 100vh;
    box-shadow: 0px 4px 33px rgba(0, 0, 0, 0.25);
}

.emblem{
    margin-top: 10vh;
    height: 28vh;
}
.txt{
    padding: 52px 89px;
    color: white;
    font-size: 19px;
    text-align: justify;
}

.mcard{
    background: #FFFFFF;
    box-shadow: 0px 27px 18px rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    width: auto;
    height: auto;
    /*height: 554px;*/
    top: 10vh;
}

.tf{
    background: #FFFFFF;
    border: 1px solid rgba(129, 129, 129, 0.56);
    box-sizing: border-box;
    position: absolute;
    width: 25vh;
}



.title{
    font-size: 34px;
    font-family: Lato;
    font-style: normal;
    font-weight: bold;
    text-transform: uppercase;
    background: linear-gradient(to right, #8F3685 0%, #501E5C 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

.tfstyles{
    text-align: unset;
    font-family: "Roboto", sans-serif;
    outline: 0;
    background: #ffffff;
    width: 100%;
    /*border: 1px solid;*/
    border: 1px solid rgba(129, 129, 129, 0.56);
    box-sizing: border-box;
    margin: 0 0 15px;
    padding: 10px;
    box-sizing: border-box;
    font-size: 14px;
}

/*.txtalign{
    font-size: 12px;
}*/

.styled-checkbox {
    position: absolute;
    opacity: 0;
}
.styled-checkbox + label {
    position: relative;
    cursor: pointer;
    padding: 0;
}
.styled-checkbox + label:before {
    content: '';
    margin-right: 10px;
    display: inline-block;
    vertical-align: text-top;
    width: 20px;
    height: 20px;
    /*background: #693B8D;*/
    border: 0.5px solid #8D3B8A;
}
.styled-checkbox:hover + label:before {
    background: #693B8D;
}
.styled-checkbox:focus + label:before {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.styled-checkbox:checked + label:before {
    background: #693B8D;
}
.styled-checkbox:disabled + label {
    color: #b8b8b8;
    cursor: auto;
}
.styled-checkbox:disabled + label:before {
    box-shadow: none;
    background: #ddd;
}
.styled-checkbox:checked + label:after {
    content: '';
    position: absolute;
    left: 5px;
    top: 9px;
    background: white;
    width: 2px;
    height: 2px;
    box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.gap{
    margin-bottom: 6vh;
}
.ui{
    position: absolute;
    display: block;
    color: #BB80D4;
    left: 8vh;
    top: 25vh;
    font-size: 16px;
    border-right: 1px solid #DADADA;
    padding: 3px 11px 0 4px;
}

.ul{
    position: absolute;
    display: block;
    color: #BB80D4;
    left: 8vh;
    top: 34vh;
    font-size: 16px;
    border-right: 1px solid #DADADA;
    padding: 3px 10px 0 5px;
}
.btop{
    margin-top: 11vh;
}

.itop{
    margin-top: 3vh;
}

section button {
    margin: 0 auto;
    font-size: 2.0rem;
    padding: 1.25rem 2.5rem;
    display: block;
    background-color: #009ac9;
    border: 1px solid transparent;
    color: #ffffff;
    font-weight: 300;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

section button:hover {
    background: #ffffff;
    border: 1px solid;
    color: #A0399C;
    border-color: #A0399C;
}

.shortbtn {
    padding: 5px 0 !important;
}

/*--------------------------responsive-----------------------*/

@media only screen and (max-width: 750px){
    .form{
        top: 7vh;
        width: 51vh;
    }
    .backg{
        height: auto;    
    }
    .emblem{
        height: 21vh;
    }
    .ui{
        top: 23vh;
    }
    .ul{
        top: 31vh;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .form{
        width: 31vh;
        margin-right: 28px;
    }
    .ui{
        left: 4vh;
        top: 12.2vh;

    }
    .ul{
        left: 4vh;
        top: 16.5vh;
    }
    .emblem{
        height: 15vh;
    }
    .backg{
        height: 100vh;
    }
    .btop{
        margin-top: 7vh;
    }
    .gap{
        margin-bottom: 3vh;
    }
}