* {
    margin: 0;
    padding: 0;
    transition: .3s;
}

:root {
    --primary-color: #B39CD0;
    --secondary-color: #89CFF0;
    --accent-color: #F5F5F5;
    --text-color: #4A4A6A;
    --light-text: #8A8AAC;
    --background: #f9f7ff;
    --card-bg: rgba(255, 255, 255, 0.9);
    --shadow: 0 5px 15px rgba(179, 156, 208, 0.15);
    --border-color: rgba(179, 156, 208, 0.2);
    --white : #fff;
    --radius-lg : 20px;
    --radius : 6px;
    --gray: #6c757d;
    --lightgray: #909399;
    --dark: #606266;
    --danger: #f56c6c;
    --danger-light: rgba(245, 108, 108, 0.1);
    --warning: #e6a23c;
    --warning-light: rgba(230, 162, 60, 0.1);
    --info: #409eff;
    --info-light: rgba(64, 158, 255, 0.1);
    --success: #67c23a;
    --success-light: rgba(103, 194, 58, 0.1);
    --muted-text: #6c757d;
}
a {
    color: var(--primary-color);
    text-decoration: none;
}
a:hover {
    opacity: .9;
}
.inputComponent {
    margin: 10px 0 20px 0;
}
.block {
    display: block;
}

.label {
    font-size: 1em;
    margin-bottom: 8px;
    margin-top: 6px;
    color: var(--text-color);
}
.input {
    /*height: 36px;*/
    font-size: 1.1em;
    border-radius: var(--radius);
    width: 100%;
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 12px 16px;
    /*border: 2px solid transparent;*/
}

.input:focus {
    outline: none;
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(179, 156, 208, 0.1);
}
.btn {
    color: var(--primary-color);
    background-color: var(--background);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius);
    cursor: pointer;
    
}
.btn:hover {
    color: var(--background);
    background-color: var(--primary-color);
    opacity: .9;
}
.blockBtn {
    width: 100%;
    padding: 12px 20px;
    font-size: 1.2em;
    margin: 10px 0 20px 0;
}
/*.blockBtn:disabled {*/
/*    opacity: .7;*/
/*    cursor: not-allowed;*/
/*    transform: none;*/
/*    box-shadow: none;*/
/*}*/
/*.btn-loading {*/
/*    color: var(--primary-color);*/
/*}*/

/*.btn-loading::after {*/
/*    content: "";*/
/*    position: absolute;*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    top: 0;*/
/*    left: 0;*/
/*    right: 0;*/
/*    bottom: 0;*/
/*    margin: auto;*/
/*    border: 2px solid transparent;*/
/*    border-top-color: white;*/
/*    border-radius: 50%;*/
/*    animation: button-loading-spinner 1s ease infinite;*/
/*}*/

/*@keyframes button-loading-spinner {*/
/*    from {*/
/*        transform: rotate(0turn);*/
/*    }*/
/*    to {*/
/*        transform: rotate(1turn);*/
/*    }*/
/*}*/




.tip {
    padding: 17px 22px;
    border-radius: var(--radius);
    font-size: .9em;
    display: flex;
    align-items: flex-start;
    margin-bottom: 6px;
}
.tipIcon {
    width: 1.6em;
    margin-right: .4em;
    align-self: center;
}
.tipContent p{
    margin-bottom: 4px;
}
.dangerTip {
    background-color: var(--danger-light);
    color: var(--danger);
    border: 1px solid var(--danger);
    
}
.dangerTip i {
    color: var(--warning);
    font-size: .9em;
}

.infoTip {
    background-color: var(--info-light);
    color: var(--info);
    border: 1px solid var(--info);
    
}
.infoTip i {
    color: var(--info);
    font-size: .9em;
}
.successTip {
    background-color: var(--success-light);
    color: var(--success);
    border: 1px solid var(--success);
}
.successTip i {
    color: var(--success);
    font-size: .9em;
}














.loginWrapper {
    background-color: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: 20px 30px 40px 30px;
}
.appInfo {
    width: 100%;
    padding: 12px 0;
    margin-bottom: 12px;
}
.appName {
    font-size: 2em;
    width: 100%;
    text-align: center;
    color: var(--text-color);
    padding: 12px 0;
}
.appDesc {
    font-size: 1em;
    width: 100%;
    text-align: center;
    color: var(--text-color);
}

.goToRegist {
    width: 100%;
    text-align: center;
    color: var(--muted-text);
    margin: 16px 0 0 0 ;
}