html{
    width:100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

body{
    width:100%;
    height: 100%;
    padding: 0;
    margin: 0;

    font-family: 'Roboto', sans-serif;
    font-weight: 500;

    background: linear-gradient(45deg, #e3e1fb, #e0defa) ;

    overflow: hidden;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

.background-svg{
    position: fixed;
    top: -200px;
    opacity: 0.5;
    right: -120px;
}

.panel{
    box-shadow: 0px 3px 6px rgba(0,0,0,0.10), 0 10px 20px rgba(0,0,0,0.15);
    background-color: #FFF;
    display: flex;
    border-radius: 5px;
}

.panel.hidden{
    display: none;
}

.side-panel{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.side-panel.left{
    padding : 60px;
    color: #FFF;
    background: linear-gradient(45deg, #7355AF,#6A73DC) ;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.side-panel.right{
    padding : 60px;
    color: #5A51DE;
    background: #FFF;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 25px;
}

.subtitle {
    font-size: 12px;
    font-weight: 400;
    flex: 1;
}

.form {
    margin-top: 10px;
}

.form-input{
    border-bottom: 2px solid #5A51DE;
    padding: 10px;
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.form-input.error{
    border-bottom: 2px solid #F23C2F;
}

.form-input input{
    border: none;
    font-size: 16px;
    font-weight: 400;
    color: #5A51DE;
    padding: 10px;
    flex: 1;
}

.kr{
    color: #D9D9D9;
    font-size: 35px;
    margin-right: 10px;
}

.button {
    background-color: #5A51DE;
    color:#FFF;
    height: 40px;
    border-radius: 20px;
    padding: 0 25px;
    font-size: 12px;
    cursor: pointer;
    font-weight: 500;
    white-space: nowrap;
    transition: color .15s ease-in-out, background-color .15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 12px;
}

.button.red{
    background-color: #F23C2F;
}

#login_form.hidden{
    display: none;
}

#saml_button.hidden{
    display: none;
}

.button > a{
    text-decoration: none;
    color: #FFF;
    width: 100%;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form .message{
    margin-top: 30px;
    font-size: 12px;
    font-weight: 400;
    color: #F23C2F;
    display: flex;
}


/*****
ANIMATIONS
 */
/***
animated
 */

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated-mid {
    -webkit-animation-duration: 0.35s;
    animation-duration: 0.35s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.animated-fast {
    -webkit-animation-duration: 0.2s;
    animation-duration: 0.2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes fadeInDown{
    0%{ opacity:0;}
    15%{ opacity:0;  -webkit-transform:translate3d(0,-50px,0);transform:translate3d(0,-50px,0)}
    to{ opacity:1;  -webkit-transform:none;transform:none}
}
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}

@keyframes fadeInDown-mid-opacity{
    0%{ opacity:0;}
    15%{ opacity:0;  -webkit-transform:translate3d(0,-50px,0);transform:translate3d(0,-50px,0)}
    to{ opacity:0.25;  -webkit-transform:none;transform:none}
}
.fadeInDown-mid-opacity{-webkit-animation-name:fadeInDown-mid-opacity;animation-name:fadeInDown-mid-opacity}

@keyframes fadeInTop{
    0%{ opacity:0;}
    15%{ opacity:0; -webkit-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0)}
    to{ opacity:1;  -webkit-transform:none;transform:none}
}
.fadeInTop{-webkit-animation-name:fadeInTop;animation-name:fadeInTop}

@keyframes fadeInTop-mid-opacity{
    0%{ opacity:0;}
    15%{ opacity:0; -webkit-transform:translate3d(0,50px,0);transform:translate3d(0,50px,0)}
    to{ opacity:0.25;  -webkit-transform:none;transform:none}
}
.fadeInTop-mid-opacity{-webkit-animation-name:fadeInTop-mid-opacity;animation-name:fadeInTop-mid-opacity}

@keyframes fadeOutTop{
    0%{ opacity:1;}
    15%{ opacity:1; -webkit-transform:none;transform:none}
    to{ opacity:0;  -webkit-transform:translate3d(0,-50px,0);transform:translate3d(0,-50px,0) }
}
.fadeOutTop{-webkit-animation-name:fadeOutTop;animation-name:fadeOutTop}

@keyframes fadeOutTopMidOpacity{
    0%{ opacity:0.25;}
    15%{ opacity:0.25; -webkit-transform:none;transform:none}
    to{ opacity:0;  -webkit-transform:translate3d(0,-50px,0);transform:translate3d(0,-50px,0) }
}
.fadeOutTopMidOpacity{-webkit-animation-name:fadeOutTopMidOpacity;animation-name:fadeOutTopMidOpacity}

@keyframes fadeOutDownMidOpacity{
    0%{ opacity:0.25;}
    15%{ opacity:0.25; -webkit-transform:none;transform:none}
    to{ opacity:0;  -webkit-transform:translate3d(0,+50px,0);transform:translate3d(0,+50px,0) }
}
.fadeOutDownMidOpacity{-webkit-animation-name:fadeOutDownMidOpacity;animation-name:fadeOutDownMidOpacity}

@keyframes fadeInLeft{
    0%{ opacity:0;}
    15%{ opacity:0; -webkit-transform:translate3d(-30px,0,0);transform:translate3d(-30px,0,0)}
    to{opacity:1; -webkit-transform:none;transform:none}
}
.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}

@keyframes fadeInRight{
    0%{ opacity:0;}
    15%{ opacity:0; -webkit-transform:translate3d(30px,0,0);transform:translate3d(30px,0,0)}
    to{opacity:1; -webkit-transform:none;transform:none}
}
.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}

@keyframes fadeOutLeft{
    0%{ opacity:1;}
    15%{ opacity:1; -webkit-transform:none;transform:none}
    to{opacity:0; -webkit-transform:translate3d(-30px,0,0);transform:translate3d(-30px,0,0)}
}
.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}

@keyframes fadeOutRight{
    0%{ opacity:1;}
    15%{ opacity:1; -webkit-transform:none;transform:none}
    to{opacity:0; -webkit-transform:translate3d(+30px,0,0);transform:translate3d(+30px,0,0)}
}
.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}

@keyframes fadeOutDown{
    0%{ opacity:1;}
    15%{ opacity:1; -webkit-transform:none;transform:none}
    to{ opacity:0; -webkit-transform:translate3d(0,-50px,0);transform:translate3d(0,-50px,0)}
}
.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}