body{
        background-color: #F4F6F9;
        font-family: 'Prompt', sans-serif;
        padding: 0;
        margin: 0;
    }

    .bgcolor_white{
        background-color: rgb(255, 255, 255);
    }

    .bgcolor_topic{
        background-color: rgb(255, 255, 255);
    }

    hr.style15 {
        border-top: 4px double #8c8b8b;
        text-align: center;
    }
    hr.style15:after {
        content: '\002665';
        display: inline-block;
        position: relative;
        top: -15px;
        padding: 0 10px;
        background: #f0f0f0;
        color: #8c8b8b;
        font-size: 18px;
    }

    .error{
        color: #F00;
    }
    .error.true{
        color: #208A59;
    }

    .shabox{
        box-shadow: 1px 1px 5px #696969;
    }
    
    .notification {
        /* background-color: #555; */
        color: #555;
        text-decoration: none;
        padding: 5px 12px;
        position: relative;
        /* display: inline-block; */
        /* border-radius: 2px; */
        font-size: 25px;
    }
    
    .notification .badge {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        right: 0;
        min-width: 25px;
        height: 25px;
        padding: 0 8px;
        border-radius: 18px;
        /* background-color: #e60323; */
        animation: color-change 1s infinite;
        color: #fff;
        font-size: 15px;
    }

    .notification1{
        animation: color-change 1s infinite;
    }

    .animate_p {
        animation: color-change 1s infinite;
    }
    
    @keyframes color-change {
        0% { background-color: red; }
        50% { background-color: rgb(131, 0, 0); }
        100% { background-color: red; }
    }

    .centered {  
        position: fixed;  
        top: 50%;  
        left: 50%;  
        transform: translate(-50%, -50%);  
    }
    
/* register */
    .img_upload_size{
        width: 400px;
    }
    @media (max-width: 480px ){
        .img_upload_size{
            width: 340px;
        }
    }
    @media (max-width: 400px ){
        .img_upload_size{
            width: 315px;
        }
    }
    @media (max-width: 385px ){
        .img_upload_size{
            width: 300px;
        }
    }
    @media (max-width: 350px ){
        .img_upload_size{
            width: 250px;
        }
    }
    .img_upload_size_2{
        width: 450px;
    }
    @media (max-width: 1200px ){
        .img_upload_size_2{
            width: 400px;
        }
    }
    @media (max-width: 992px ){
        .img_upload_size_2{
            width: 370px;
        }
    }
    @media (max-width: 992px ){
        .img_upload_size_2{
            width: 300px;
        }
    }
    @media (max-width: 320px ){
        .img_upload_size_2{
            width: 260px;
        }
    }

/* navbar */

    .logo_navbar{
        width: 80px;
        height: 80px;
    }

    .title_nav{
        font-size: 25px;
        top: 0;
        position: absolute;
        left: 95px; 
        margin-top: 5px;
    }

    @media (max-width: 447px ){
        .title_nav{
            font-size: 22px;
        }
    }

    @media (max-width: 414px ){
        .title_nav{
            font-size: 20px;
        }
    }

    @media (max-width: 405px ){
        .title_nav{
            font-size: 18px;
            top: 6px;
        }
    }

    @media (max-width: 378px ){
        .title_nav{
            font-size: 16px;
            top: 10px;
        }
    }

    @media (max-width: 320px ){
        .title_nav{
            font-size: 14px;
            top: 10px;
        }
    }

    li > a{
        text-decoration: none;
        color: black;
    }

    .rotate {
        animation: rotation 2s infinite linear;
    }

    @keyframes rotation {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(359deg);
        }
    }

/* footer */

    .footer{
        background-color: rgb(216, 216, 216);
        padding: 2px;
    }

    .text-footer-size{
        font-size: 15px;
    }

    @media (max-width: 500px ){
        .text-footer-size{
            font-size: 12px;
        }
    }


/* login */
    .icon_login{
        position: absolute;
        right: 4px;
        top: 30px;
    }

    .icon_login2{
        position: absolute;
        right: 4px;
        top: 32px;
    }

    .icon_login_span{
        background-color: #fff; 
        border-radius: 0.25em; 
        padding: 0.2em;
    }
    .login_form_width{
        width: 30%!important;
    }

    @media (max-width: 1199px ){
        .login_form_width{
            width: 35%!important;
        }
    }
    @media (max-width: 991px ){
        .login_form_width{
            width: 45%!important;
        }
    }
    @media (max-width: 767px ){
        .login_form_width{
            width: 55%!important;
        }
    }
    @media (max-width: 575px ){
        .login_form_width{
            width: 65%!important;
        }
    }
    @media (max-width: 460px ){
        .login_form_width{
            width: 100%!important;
        }
    }

/* form_question */
    .detail_question{
        width: 80%;
    }


    @media (max-width: 995px ){
        .detail_question{
            width: 100%;
        }
    }

    th > a {
        /* text-decoration: none; */
        font-weight: normal;
    }

    .colorbg_formQuestion{
        background-color: #eeeeee;
    }