* {
    box-sizing: border-box;
}

html{
    height: 100%; /* to make everything relative to the window (also need to be set a body) */
    word-break: break-all;
}

body{
    margin: 0; /* reset any padding/margin to 0, MainView will set the appropriate ones */
    padding: 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex; /* We start the flex box at the body */
    flex-direction: column;

    width: 100%; /* Make sure the body take the full screen */
    height: 100%;

    /* font-family: 'OpenSans'; */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-smoothing: antialiased;
    overflow-x: hidden;
}

#appbody {
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    height: 0;
}

/* 兼容高度占满的问题 */

#appbody tbody{
        font-size: 14px;
    }
.Popup{
    position: absolute;
    top: 80px;
    opacity: 0;
    z-index: 999
}

.Popup:focus{
        outline: none;
    }

.Popup.transitioning{
        transition: transform .2s ease-in;
    }

.Popup .popup-modal{
        border: none;
        box-shadow: none;
        border: 4px solid #2477ba;
        border-radius: 4px;
    }

.Popup .popup-modal .popup-header{
            padding: 0;
            cursor: pointer;
            height: 32px;
            border: none;
            background: #2477ba;
        }

.Popup .popup-modal .popup-header .modal-title{
                position: absolute;
                top: 4px;
                left: 16px;
                right: 16px;
                max-width: 95%;
                font-size: 16px;
                font-weight: 300;
                letter-spacing: .6px;
                color: #fff;
                text-align: center;
            }

.Popup .popup-modal .popup-footer{
            margin-top: 0;
            padding: 0px 16px 16px 16px;
            height: 64px;
            border-top: none;
            background: #e6e7e8;
        }

.Popup .popup-modal .popup-footer .btn{
                position: relative;
                height: 32px;
                line-height: 16px;
                min-width: 64px;
                margin-top: 16px;
            }

.Popup .popup-modal .popup-footer .cancel{
                margin-right: 8px;
            }

.Popup .popup-modal .popup-footer .delete{
                position: relative;
                float: left;
            }

.Popup .popup-modal .popup-body{
            line-height: 32px;
            padding: 0px 16px 0 16px;
        }

.Popup-screen{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(35, 31, 32, .1);
    z-index: 98;
}
.LoginRegisterPopup{
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #f7f7f7;
    color: #999;
}
    .LoginRegisterPopup .header{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .LoginRegisterPopup .header .logo{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
        }
    .LoginRegisterPopup .header .logo img{
                width: 64px;
                height: 64px;
            }
    .LoginRegisterPopup .header .logo .name{
                font-size: 32px;
                font-weight: bold;
                color: #333;
            }
    .LoginRegisterPopup .header .spec{
            font-size: 16px;
            margin-top: 8px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            justify-content: center;
        }
    .LoginRegisterPopup .content{
        width: 420px;
        margin-top: 16px;
    }
    .LoginRegisterPopup .content .part .title{
                text-align: center;
                font-size: 24px;
                font-weight: bold;
                color: #666;
            }
    .LoginRegisterPopup .content .part .form{
                padding: 0 32px;
            }
    .LoginRegisterPopup .content .part .form .input-group{
                    height: 40px;
                    margin-top: 24px;
                }
    .LoginRegisterPopup .content .part .form .input-group input{
                        height: 40px;
                        font-size: 16px;
                    }
    .LoginRegisterPopup .content .part .form .btn{
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    flex: 1;
                    justify-content: center;
                    align-items: center;
                    height: 40px;
                    background: #336699;
                    margin: 16px 0;
                    color: #fff;
                    font-size: 18px;
                }
    .LoginRegisterPopup .content .part .form .btn:hover{
                    opacity: .9;
                }
    .LoginRegisterPopup .content .part .form .get-verify{
                    width: 120px;
                    color: #336699;
                    cursor: pointer;
                }
    .LoginRegisterPopup .content .part .form .disable{
                    cursor: not-allowed;
                }
    .LoginRegisterPopup .content .part .form .register{
                    margin-top: 32px;
                }
    .LoginRegisterPopup .content .part .tools{
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                justify-content: center;
            }
    .LoginRegisterPopup .content .part .tools .tool{
                    cursor: pointer;
                }
    .LoginRegisterPopup .content .part .tools .sp{
                    margin: 0 8px;
                }
    .LoginRegisterPopup .footer{
        width: 100%;
        position: absolute;
        bottom: 16px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
    }
.NoOrderCourse{
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background-color: #fff;
}
    .NoOrderCourse .no-course{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex: 1;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        font-size: 16px;
        font-style: italic;
        color: #FF6633;
        letter-spacing: 2px;
    }
    .NoOrderCourse .no-course a{
            font-size: 18px;
        }
    .NoOrderCourse .no-course .fa{
            font-size: 48px;
            margin-right: 16px;
        }

.NotificationView{
	position: absolute; 
	top: 56px;
	right: -250px;
	height: 400px;
    width: 250px;
	
	z-index: 1000;

}
	
	/* Note: The container here allows us to encapsulate the notif-item full height (with margin and all) without doing js computation. 
	*        Also it allows to reduce the height without forcing a relayout of the of the notif-item
	*/
	
	.NotificationView .notif-ctn{

		/* Workaround: If we do not set a border bottom, the margin-bottom of the notif-item is not computed in this nofif-ctn.offsetHeigth, 
		               which when need to set the starting point of the height animation on remove.*/
		border-bottom: solid 1px rgba(255,255,255,0);

		/* The draw out and back in animation 100% css.
			 On this animationend Javascript will set height: 0px to start the transition below
		*/
		-webkit-animation: notif-keyframes 4s;
		        animation: notif-keyframes 4s;
		
		/* This transition property will be used just before deleting the notif-ctn so that the eventual notification below will smoothly move up. */
		transition: height .5s ease-in-out;		
	}
	
	/* The notification item itself with its margin and layout rule. Because the animation and transition is on the container element above (.notif-ctn)
			  we do not have to worry about animation/transition artifact. */
	
	.NotificationView .notif-ctn .notif-item{
            box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
            0px 4px 5px 0px rgba(0, 0, 0, 0.14),
            0px 1px 10px 0px rgba(0, 0, 0, 0.12);
			transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1)
			
			/* Just for fun, probably not a good UI pattern */		
		}
	
	.NotificationView .notif-ctn .notif-item:hover{
                box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
                0px 24px 38px 3px rgba(0, 0, 0, 0.14),
                0px 9px 46px 8px rgba(0, 0, 0, 0.12);
            }
	
	.NotificationView .notif-ctn .notif-item{

			background: #E3F2FD;;
			position: relative;
			min-height: 64px;
			padding: 8px 12px;
			margin-bottom: 16px

			/* The darker bar on the left */		
		}
	
	.NotificationView .notif-ctn .notif-item:after{
				content: "";
				position: absolute;
				top: 0; left: 0; bottom: 0;
				width: 5px;
				background: #64B5F6;
			}
	
	.NotificationView .notif-ctn .notif-item.warning{
				background: #FFFDE7
			}
	
	.NotificationView .notif-ctn .notif-item.warning:after{
					background: #FFD600;
				}
	
	.NotificationView .notif-ctn .notif-item.error{
				background: #FFEBEE
			}
	
	.NotificationView .notif-ctn .notif-item.error:after{
					background: #B71C1C;
				}

/* The keyframe animation for the notif-ctn */
@-webkit-keyframes notif-keyframes{
	0%{
		transform: none;
	}
	10%,80%{
		transform: translateX(-250px);
	}
	100%{
		transform: translateX(0);
	}
}
@keyframes notif-keyframes{
	0%{
		transform: none;
	}
	10%,80%{
		transform: translateX(-250px);
	}
	100%{
		transform: translateX(0);
	}
}
.PaginationView{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: center;
    flex: 1;
}

    .PaginationView .btn{
        border: 1px solid #ccc;
        margin: 16px;
    }

    .PaginationView .btn:hover{
        color: #d43133;
        border-color: #d43133;
    }

    .PaginationView .number-info{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
    }

    .PaginationView .number-info .form-control{
            width: 40px;
            text-align: center;
        }

    .PaginationView .number-info .sep{
            margin-left: 8px;
            margin-right: 8px;
        }

    .PaginationView .total-count{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        font-size: 14px;
        letter-spacing: 4px;
    }
.PopupMessage{
 	 /* --------- /content --------- */
}
	.PopupMessage .PopupMessageDialogGlass {
        position: absolute;
        left: 0;
        top: 0;
		width: 100%;
		height: 100%;
		background: black;
		opacity: 0.3;
		z-index: 998;
	}
	/* --------- content --------- */
	.PopupMessage .PopupMessage-content{
		position: absolute;
		left: 35%;
		top: 35%;
        min-width: 30%;
        max-width: 90%;
		height: auto;
		z-index: 999;
		background: white;
	}
	/* --------- title --------- */
	.PopupMessage .PopupMessage-content .title{
			padding: 16px 16px 8px 16px;
			cursor: pointer;
			
		}
	.PopupMessage .PopupMessage-content .title .delete-icon{
				margin-right:5px;
			}
	.PopupMessage .PopupMessage-content .title .delete-icon .fa{
					font-size: 18px;
				}
	.PopupMessage .PopupMessage-content .title span{
				height: 30px;
				line-height: 30px;
				font-size: 24px;
				font-weight: 300;
				color: #989898;
				text-align: left;
				display: inline-block;
				word-break: break-all;
				overflow: hidden;
				vertical-align: middle;
			}
	/* --------- /title --------- */
	.PopupMessage .PopupMessage-content .content{
			padding: 8px 16px;
			text-align: center;
			font-weight: 300;
			color: #989898;
			min-height: 40px;
		}
	.PopupMessage .PopupMessage-content .align-left{
			text-align: left;
		}
	.PopupMessage .PopupMessage-content.note-message .title{
				padding: 4px 16px 4px 16px;
			}
	.PopupMessage .PopupMessage-content.note-message .title span{
					height: 10px;
					line-height: 10px;
				}
	.PopupMessage .PopupMessage-content.note-message .content{
				font-size: 16px;
				color: #333;
			}
	.PopupMessage .PopupMessage-content{
	  	/* --------- /btn-groups --------- */
	}
	/* --------- btn-groups --------- */
	.PopupMessage .PopupMessage-content .button-group{
			padding: 16px;
			border-top: none;
			margin-top: 0;
			text-align: right;
		}
	.PopupMessage .PopupMessage-content .button-group .btn{
				margin-left: 4px;
				width: 72px;
				height: 24px;
				padding: 1px 12px
			}
	.PopupMessage .PopupMessage-content .button-group .btn.btn-cancel{
					background: #828385;
					color: #fff;
				}
	.PopupMessage .PopupMessage-content .button-group .btn.btn-ok{
					background: #69AD44;
					color: #FFFFFF;
				}
	.PopupMessage .PopupMessage-content .button-group .btn.btn-yes{
					background: #69AD44;
					color: #FFFFFF;
				}
	.PopupMessage .PopupMessage-content .button-group .add-note-operate{
				height: 16px;
				font-size: 12px;
				cursor: pointer;
				display: inline-block;
			}
	.PopupMessage .PopupMessage-content .button-group .add-note-operate .add-Note{
					color: #9CC81C;
					font-size: 16px;
					padding-right: 4px;
				}





.Toast{
	position: fixed;
	z-index: 9999;
	border-radius: 4px;
	background: #d43133;
	left:50%;
	top:50%;
	min-width:300px;
	height: 50px;
	overflow: hidden;
	line-height: 50px;
	text-align: center;
	margin-left: -150px;
	margin-top: -25px;
	color: #fff;
	padding: 0 10px;
	opacity: 0
}
.Toast.transitioning{
		transition: opacity 2s ease-in;
	}
.Toast.transitioning-fast{
		transition: opacity 1s ease-in;
	}
.Toast.show{
		opacity: 1;
	}
.Toast.multi-line{
		height: auto;
		line-height: 20px;
		padding: 8px;
		text-align: left;
	}
.UserLoginPopup{
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
}
    .UserLoginPopup .panel{
        z-index: 99;
        width: 524px;
        background: #fff;
        color: #333;
        box-shadow: 0 5px 15px rgba(0,0,0,.5);
        border: 8px solid #0b85c7;
        padding-top: 24px;
    }
    .UserLoginPopup .panel .title{
            text-align: center;
            color: #1d77bc;
            font-size: 20px;
            font-weight: 600;
        }
    .UserLoginPopup .panel .form{
            padding: 0 32px;
        }
    .UserLoginPopup .panel .form .input-group{
                height: 48px;
                margin-top: 24px;
            }
    .UserLoginPopup .panel .form .input-group input{
                    height: 48px;
                    font-size: 16px;
                }
    .UserLoginPopup .panel .form .btn{
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                flex: 1;
                justify-content: center;
                align-items: center;
                height: 48px;
                background: #ef8400;
                margin: 16px 0;
                color: #fff;
                font-size: 18px;
                opacity: .8;
            }
    .UserLoginPopup .panel .form .btn:hover{
                opacity: 1;
            }
    .UserLoginPopup .panel .form .disable{
                cursor: not-allowed;
            }
.UserLoginPopup-screen{
    background: #cde2f9;
}