.float-right {
    float: right !important;
    padding-left: 10px;
}

.float-left {
    float: left !important;
    padding-right: 10px;
}

.justify-content-md-end {
    justify-content: inherit !important;
    margin-top: 10px;
}

@keyframes sceneBalloon1 {
    0% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(0, -10px)
    }

    100% {
        transform: translate(0, 0)
    }
}

@keyframes sceneBalloon2 {
    0% {
        transform: translate(0, 0)
    }

    50% {
        transform: translate(-100px, 0)
    }

    100% {
        transform: translate(0, 0)
    }
}

@keyframes sceneWave1 {
    0% {
        -webkit-transform: rotateZ(0) translate3d(0, 5px, 0) rotateZ(0);
        -moz-transform: rotateZ(0) translate3d(0, 5px, 0) rotateZ(0);
        transform: rotateZ(0) translate3d(0, 5px, 0) rotateZ(0)
    }

    100% {
        -webkit-transform: rotateZ(360deg) translate3d(0, 5px, 0) rotateZ(-360deg);
        -moz-transform: rotateZ(360deg) translate3d(0, 5px, 0) rotateZ(-360deg);
        transform: rotateZ(360deg) translate3d(0, 5px, 0) rotateZ(-360deg)
    }
}

@keyframes sceneWave2 {
    0% {
        -webkit-transform: rotateZ(0) translate3d(0, 10px, 0) rotateZ(0);
        -moz-transform: rotateZ(0) translate3d(0, 10px, 0) rotateZ(0);
        transform: rotateZ(0) translate3d(0, 10px, 0) rotateZ(0)
    }

    100% {
        -webkit-transform: rotateZ(-360deg) translate3d(0, 10px, 0) rotateZ(360deg);
        -moz-transform: rotateZ(-360deg) translate3d(0, 10px, 0) rotateZ(360deg);
        transform: rotateZ(-360deg) translate3d(0, 10px, 0) rotateZ(360deg)
    }
}

@keyframes blink {
    10% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.full-page-content-right-border {
    width: 100%;
    min-height: 100vh;
    padding: 0 !important;
    background: 0 !important;
}

.full-page-content-single-border {
    border-radius: initial !important;
    border-bottom-left-radius: var(--border-radius-lg) !important;
    border-bottom-right-radius: var(--border-radius-lg) !important;
}

.filled .form-control {
    min-height: 48px;
    border: 1px solid #00000017;
    background: #f2f2f2;
    padding-left: 45px;
}


.login100-form {
    text-align: center;
}

    .login100-form .cta-1 {
        font-size: 3em;
        font-family: 'Nunito Sans';
        font-weight: bold;
        color: #242222 !important
    }

    .login100-form .mb-5 p {
        font-size: 30px;
    }

    .login100-form .sh-11 a {
        float: left;
        width: calc(50% - 20px);
        margin: 0 10px;
        text-align: center;
        display: none
    }

    .login100-form .sh-11 img {
        width: 70%;
        display: inline-block;
    }

    .login100-form .tooltip-end-bottom {
        width: 520px;
        border-radius: 10px;
        overflow: hidden;
        background: #ffffffdb;
        padding: 60px 30px;
        display: inline-block;
    }

    .login100-form .form-group {
        margin-bottom: 30px !important
    }

    .login100-form .filled .form-control:focus {
        border: 1px solid #0000002e;
        background: #f2f2f2;
    }

    .login100-form .pull-left input {
        width: 24px;
        height: 24px;
        margin-top: -1px;
        vertical-align: top;
    }

    .login100-form .pull-left label {
        color: var(--body);
        margin-left: 4px
    }

    .login100-form .pull-left {
        float: left
    }

    .login100-form .pull-right {
        float: right
    }

    .login100-form .btn-primary {
        background-color: #c83425;
    }


        .login100-form .btn-primary:hover {
            background-color: #b32314;
        }

.fixed-background {
    background: url("../img/background/STM_Login_background_2.jpg") no-repeat center center fixed;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

    .fixed-background span {
        background: url(../img/illustration/box-pos1.svg) no-repeat;
        width: 400px;
        height: 400px;
        position: absolute;
        top: -120px;
        left: -72px;
        background-size: 100%;
        opacity: .2;
    }

        .fixed-background span:nth-child(2) {
            background: url(../img/illustration/box-pos1.svg) no-repeat;
            width: 100px;
            height: 100px;
            animation: sceneBalloon2 40s .3s infinite linear;
            top: 160px;
            left: 150px;
            opacity: .1;
        }

        .fixed-background span:nth-child(3) {
            background: url(../img/illustration/box-pos2.svg) no-repeat;
            width: 400px;
            height: 400px;
            animation: sceneBalloon2 10s .3s infinite linear;
            bottom: -200px;
            top: initial;
            left: initial;
            right: 150px;
            opacity: .2;
        }

        .fixed-background span:nth-child(4) {
            background: url(../img/illustration/box-pos2.svg) no-repeat;
            width: 100px;
            height: 100px;
            animation: sceneBalloon2 20s .2s infinite linear;
            bottom: 40px;
            top: initial;
            left: initial;
            right: 400px;
            opacity: .1;
        }

    .fixed-background:after {
        content: "";
        background: linear-gradient(0deg, rgba(255,255,255,0.4738270308123249) 0%, rgba(255,255,255,1) 100%);
        width: 100%;
        height: 100%;
        display: inline-block;
    }

@media (max-width: 575.98px) {
    .card .card-top-buttons {
        padding: 0.35rem;
    }

    .login100-form .tooltip-end-bottom {
        width: 100%;
    }

    .login100-form .cta-1 {
        font-size: 24px;
    }

    .login100-form .mb-5 p {
        font-size: 13px;
    }

    .login100-form .sh-11 a {
        display: block
    }

    .fixed-background span {
        width: 300px;
        height: 300px;
        top: -200px;
        left: -100px;
    }

        .fixed-background span:nth-child(2) {
            width: 50px;
            height: 50px;
            top: 18px;
            left: 112px;
        }

        .fixed-background span:nth-child(3) {
            width: 150px;
            height: 150px;
            bottom: -74px;
            right: 24px;
        }

        .fixed-background span:nth-child(4) {
            width: 50px;
            height: 50px;
            bottom: 14px;
            right: 110px;
            opacity: .2;
        }

    .login100-form {
        padding: 40px;
    }
}

.bootstrap-select > .dropdown-toggle.bs-placeholder, .bootstrap-select > .dropdown-toggle.bs-placeholder:active, .bootstrap-select > .dropdown-toggle.bs-placeholder:focus, .bootstrap-select > .dropdown-toggle.bs-placeholder:hover, .bootstrap-select > .btn.btn-light:hover {
    background: #ffffff;
    border: 1px solid #ced4da
}


.btn-light, .btn-light:not(:disabled):not(.disabled):focus, .btn-light:not(:disabled):not(.disabled).focus {
    background: #ffffff;
    border: 1px solid #ced4da;
    color: var(--dark-text) !important
}

/*    .btn-light:hover, .btn-light:not(:disabled):not(.disabled):focus:hover, .btn-light:not(:disabled):not(.disabled).focus:hover {
        background-color: #42424229;
        border: 1px solid #ced4da
    }
*/

.modal-header, .modal-body, .modal-footer {
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-bottom: 10px !important;
    overflow-x: auto;
}

.modal-header, .modal-footer {
    padding-top: 10px !important;
}

/*thêm tạm để test*/
/* cấu hình cho icon hiệu chỉnh khi freeze column*/
.k-pager-md .k-pager-info, .k-pager-sm .k-pager-info, .k-pager-sm .k-pager-sizes, .k-pager-sm .k-pager-numbers {
    display: inherit !important;
}

.k-grid-pager {
    display: flex !important;
}

/*.k-pdf-viewer .k-toolbar {
    display: none;
}*/