﻿
/*#region Splash */
#splash-page {
    z-index: 99999 !important;
}

    #splash-page .bar {
        width: 100%;
    }

.page-splash {
    z-index: 99999 !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #333;
    opacity: .9;
    pointer-events: auto;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}


.page-splash-message {
    text-align: center;
    margin: 20% auto 0 auto;
    font-size: 400%;
    font-family: "Segoe UI", Arial, Helvetica, sans-serif;
    font-weight: normal;
    -webkit-text-shadow: 2px 2px #000000;
    text-shadow: 2px 2px #000000;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.15);
    text-transform: uppercase;
    text-decoration: none;
    color: #F58A00;
    padding: 0;
}

    .page-splash-message.page-splash-message-subtle {
        margin: 30% auto 0 auto;
        font-size: 200%;
    }

.fa-asterisk.fa-asterisk-large {
    font-size: 180%;
    vertical-align: middle;
    color: #F58A00;
}

.fa-asterisk.fa-asterisk-alert {
    color: #F58A00;
}

.fa-asterisk-inline {
    padding: 0 4px 0 0;
}


.progress,
.page-progress-bar {
    margin: 30px 10% !important;
}

.spinner {
    margin: 20% auto 0 auto;
    left: auto;
    top: auto !important;
}
/*#endregion*/



/*#region Angular ng-show dissolve animation */
.dissolve-animation.ng-hide-remove {
    display: inline !important;
}

.dissolve-animation.ng-hide-remove,
.dissolve-animation.ng-hide-add {
    -webkit-transition: 0.8s linear all;
    -moz-transition: 0.8s linear all;
    -o-transition: 0.8s linear all;
    transition: 0.8s linear all;
}

    .dissolve-animation.ng-hide-remove.ng-hide-remove-active,
    .dissolve-animation.ng-hide-add {
        opacity: 1;
    }

        .dissolve-animation.ng-hide-add.ng-hide-add-active,
        .dissolve-animation.ng-hide-remove {
            opacity: 0;
        }
/*#endregion */

/*#region Angular ng-include, ng-view, ng-repeat shuffle animations*/

.shuffle-animation.ng-enter,
.shuffle-animation.ng-leave {
    position: relative;
}

.shuffle-animation.ng-enter {
    -moz-transition: ease-out all 0.3s 0.4s;
    -o-transition: ease-out all 0.3s 0.4s;
    -webkit-transition: ease-out all 0.3s 0.4s;
    transition: ease-out all 0.3s 0.4s;
    left: 2em;
    opacity: 0;
}

    .shuffle-animation.ng-enter.ng-enter-active {
        left: 0;
        opacity: 1;
    }

.shuffle-animation.ng-leave {
    -moz-transition: 0.3s ease-out all;
    -o-transition: 0.3s ease-out all;
    -webkit-transition: 0.3s ease-out all;
    transition: 0.3s ease-out all;
    left: 0;
    opacity: 1;
}

    .shuffle-animation.ng-leave.ng-leave-active {
        left: 2em;
        opacity: 0;
    }
/*#endregion*/


/*#region Form Login*/
form-login {
    max-width: 330px;
    padding: 0px 15px 5px 15px;
    margin: 0 auto;
}

.form-login .form-login-heading {
    margin-bottom: 10px;
}

.form-login .form-control {
    position: relative;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
}

    .form-login .form-control:focus {
        z-index: 2;
    }

.form-login input[type="password"] {
    margin-top: 5px;
    margin-bottom: 5px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
/*#endregion*/

.pointer {
    cursor: pointer;
}
/*    --------------------------------------------------
	:: Login Section
	-------------------------------------------------- */
#login {
    padding-top: 50px;
}

    #login .form-wrap {
        width: 30%;
        margin: 0 auto;
    }

    #login h1 {
        color: #1fa67b;
        font-size: 18px;
        text-align: center;
        font-weight: bold;
        padding-bottom: 20px;
    }

    #login .form-group {
        margin-bottom: 25px;
    }

    #login .checkbox {
        margin-bottom: 20px;
        position: relative;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        -o-user-select: none;
        user-select: none;
    }

        #login .checkbox.show:before {
            content: '\e013';
            color: #1fa67b;
            font-size: 17px;
            margin: 1px 0 0 3px;
            position: absolute;
            pointer-events: none;
            font-family: 'Glyphicons Halflings';
        }

        #login .checkbox .character-checkbox {
            width: 25px;
            height: 25px;
            cursor: pointer;
            border-radius: 3px;
            border: 1px solid #ccc;
            vertical-align: middle;
            display: inline-block;
        }

        #login .checkbox .label {
            color: #6d6d6d;
            font-size: 13px;
            font-weight: normal;
        }

    #login .btn.btn-custom {
        font-size: 14px;
        margin-bottom: 20px;
    }

    #login .forget {
        font-size: 13px;
        text-align: center;
        display: block;
    }

/*    --------------------------------------------------
	:: Inputs & Buttons
	-------------------------------------------------- */
.form-control {
    color: #212121;
}

.btn-custom {
    color: #fff;
    background-color: #1fa67b;
}

    .btn-custom:hover,
    .btn-custom:focus {
        color: #fff;
    }

/*    --------------------------------------------------
    :: Footer
	-------------------------------------------------- */
#footer {
    color: #6d6d6d;
    font-size: 12px;
    text-align: center;
}

    #footer p {
        margin-bottom: 0;
    }

    #footer a {
        color: inherit;
    }

.HeaderHotline {
    font-size: 23px;
    color: rgb(158, 9, 9);
    font-family: Times New Roman;
    float: left;
    margin-top: 7px;
}
.HeaderUpdate {
    font-size: 20px;
    color: #fff;
    font-family: Times New Roman;
    float: left;
    margin-top: 7px;
}
.row-number {
    color: black;
    display: inline;
}

.btn-money {
    text-align: right;
    width: 100%;
    font-weight: 400;
    color: #428bca;
    cursor: pointer;
    border-radius: 0;
    text-decoration: none;
}
.cell_green{
    background-color:green;
    color:white;
}
.cell_yellow{
    background-color:#adaf05;
    color:white;
}
.cell_red{
    background-color:red;
    color:white;
}
.grid-right-align{
    text-align:right;
    padding-right: 15px !important;
}
.grid-center-align{
    text-align:center;
}
.headerClass{
    text-align:center;
}
.attachfile {
    height: 200px;
}
.cell_white{
    color:white;
}
.websitegrid {
    height: 200px;
}

.lichthanhtoan {
    margin-top: 10px;
    height: 300px;
}

.SizeAttach {
    margin: 5px;
}

@media screen and (max-width:414px) {
    #login .form-wrap {
        width: 80%;
        margin: 0 auto;
    }
    .HeaderHotline {
        color: rgb(158, 9, 9);
        font-family: Times New Roman;
        float: left;
        margin-top: 16px;
    }
    .HeaderUpdate {
        color: rgb(158, 9, 9);
        font-family: Times New Roman;
        float: left;
        margin-top: 16px;
    }
}
