/****** Confirm Dialog Box - Danger *********/
.btn_confirm_danger {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid #e5e5e5 !important;
}

    .btn_confirm_danger:hover {
        background: #ca2e1d !important;
    }

.danger_confirm_content {
    color: #fff !important;
    border-radius: 0.4rem !important;
}

.danger_confirm_header {
    display: block !important;
    background: #d33724 !important;
    border-bottom: 1px solid #ca2e1d !important;
}

.danger_confirm_body {
    background: #dd4b39 !important;
}

.danger_confirm_footer {
    background: #d33724 !important;
    border-top: 1px solid #ca2e1d !important;
}



.gallery_display {
    margin-top: 10px;
    background: rgba(255,255,0,0.2);
    border-radius: 5px;
    border: 1px solid #cecece;
    padding: 10px;
}




/******* GALLERY IMAGES ********/
.mylib_img {
    cursor: pointer;
    width: 200px;
    height: 106px;
    display: inline-block;
    margin: 5px;
    text-align: center;
    overflow: hidden;
}

    .mylib_img:hover, .mylib_img:focus {
        background: #03ff00 !important;
        border: 1px solid #cecece;
        border-radius: 10px;
        padding: 5px;
    }

    .mylib_img img {
        width: 80px;
        height: 60px;
    }

    .mylib_img span {
        font-size: 10px;
    }

[draggable=true] {
    cursor: move;
}

.modal-backdrop {
    z-index: 99 !important;
}

.modal {
    z-index: 9992 !important;
}

.ui-dialog {
    z-index: 9993 !important;
}


.img-manager-header {
    background: #04b104 !important;
    cursor: move !important;
    border-bottom: 1px solid #04b104 !important;
}

.img-manager-body {
    color: #000 !important;
    background: #bdbdbd !important;
}

.img-manager-footer {
    display: block !important;
    background: #04b104 !important;
    border-top: 1px solid #04b104 !important;
}

.div_folder {
    border: 1px solid #bdbdbd;
    padding: 5px;
    background: #fff;
    /*width: 230px;*/
    float: left;
    min-height: 490px;
    border-radius: 5px;
    /*height:500px;*/
    /*overflow:auto;*/
}

.folder-btn {
    width: 100%;
    margin-bottom: 10px;
    text-align: left;
}

.div_folder_img {
    border: 1px solid #bdbdbd;
    padding: 5px;
    background: #fff;
    float: left;
    min-height: 490px;
    border-radius: 5px;
    /*margin-left: 10px;*/
    /*width: 511px;*/
    /*height: 500px;*/
    /*overflow: auto;*/
}

.folder-img-header {
    background: #a8a8a8;
    color: #fff;
    font-weight: 700;
    padding: 0 10px;
    line-height: 32px;
    height: 32px;
}

.folder_item {
    display: block;
    margin-left: 30px;
    margin-bottom: 5px;
    background: #cecece;
    border-radius: 3px;
    padding: 5px;
    cursor: pointer;
}

    .folder_item:hover {
        background: #006dbf;
    }

.opacity-1 {
    opacity: 1 !important;
}

/***** ALIGN *******/
.overflow-auto {
    overflow: auto;
}

.overflow-hidden {
    overflow: hidden;
}

/*** COUNT ****/
.css-count {
    display: block;
    color: #007bff;
    background: #f2f2f2;
    width: 100px;
    padding: 3px 5px;
    line-height: 1.5;
    border: 1px solid #cecece;
    border-radius: 5px;
}

.display-flex {
    display: flex;
}

.admin-info {
    word-break: break-all !important;
    white-space: normal !important;
}

.mitem-ext {
    margin-left: 8px !important;
}



/* Custom Login and Register pages */
.login-back {
    background-image: url('/img/bg/bg-masthead.webp');
    background-size: cover;
}

.register-back {
    background-image: url('/img/bg/bg-masthead.webp');
    background-size: cover;
}

.gb-text {
    color: #fea713 !important;
}

.sign-in-fb {
    background: #4267b2;
    color: #fff;
}

.sign-in-gg {
    background: #4267b2;
    color: #fff;
}

.text-ms {
    color: #d77d01 !important;
}

.row-icon {
    /*padding-bottom: 5px !important;*/
    width: 32px !important;
    line-height: 38px;
    line-height: 2.2;
    margin-right: -40px !important;
    margin-left: 8px !important;
    z-index: 999;
}

.text-indent-login {
    text-indent: 24px !important;
}

.border-login {
    border: 1px solid #ced4da !important;
}

.span-ml-15 {
    margin-left: 15px !important;
}

.control-input {
    display: inline-block !important;
}

.control-btn {
    border-radius: 0.25rem !important;
}

.error-alert {
    margin-bottom: 20px !important;
}

.field-error {
    display: block !important;
    width: 100% !important;
    font-size: 13px !important;
    margin-top: 5px !important;
}

.mg-top-10 {
    margin-top: 10px !important;
}

.img-sq-size-32 {
    width: 32px;
    height: 32px;
}

.content {
    padding-top: 1.1rem;
    padding-bottom: 60px !important; /*because fixed bottom*/
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

.validation-msg-style {
    font-size: 13px;
    font-style: italic;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.version {
    font-size: 13px;
    font-style: italic;
    color: #808080;
}

.main-header {
    border-bottom: 1px solid #dee2e6 !important;
}


/* Maybe even support hover opacity shifts */
.opacity-0h5 {
    opacity: 0 !important;
    transition: opacity .25s ease-in-out !important;
    -moz-transition: opacity .25s ease-in-out !important;
    -webkit-transition: opacity .25s ease-in-out !important;
}

    .opacity-0h5:hover {
        opacity: 1 !important;
    }

.display-inline {
    display: inline-block !important;
}

.float-right {
    float: right !important;
}

.mg-l-4 {
    margin-left: 4px !important;
}

.mg-l-5 {
    margin-left: 5px !important;
}

.mg-l-10 {
    margin-left: 10px !important;
}

.mg-l-15 {
    margin-left: 15px !important;
}

.mg-b-15 {
    margin-bottom: 15px !important;
}

.mg-r-5 {
    margin-right: 5px !important;
}

.line-36 {
    line-height: 36px !important;
    vertical-align: middle !important;
}

.checkbox-w-30 {
    width: 30px !important;
}

.fc_right_menu {
    display: inline-block !important;
    float: right !important;
    margin: 0;
    padding-top: 20px;
    border: 0;
    outline: 0;
    vertical-align: baseline;
}

.fc_left_menu {
    display: inline-block !important;
    float: left !important;
}

.font-normal {
    font-weight: 400 !important;
}

/* PAGING */
.page-nummber {
    margin: 0;
}

    .page-nummber p {
        margin: 12px 0 !important;
    }

    .page-nummber a {
        color: #333;
        margin: 3px;
        font-size: 15px;
        font-weight: 600;
        text-decoration: none;
        display: inline-block;
        line-height: 28px;
        padding: 2px 12px;
        /*font-weight: 400;*/
        /*border: 1px solid #868e96;*/
    }

        .page-nummber a:hover {
            color: #fff;
            /*font-weight: 600;*/
            background: #17a2b8; /*#1d809f*/
        }

.cpage {
    color: #ffcf85 !important;
    /*font-weight: 600;*/
    background: #17a2b8; /*#1d809f*/
}

.cpage:hover {
    color: #fff !important;
    /*font-weight: 600;*/
    /*background: #17a2b8;*/ /*#1d809f*/
}

.apage {
    cursor: pointer !important;
    border: none !important;
    padding: 3px !important;
}

.page-number-border {
    border: 1px solid #bdbdbd; /*#868e96*/
    padding: 3px 12px !important;
}

.page-4 {
    background: none !important;
    color: #1d809f !important; /*153d77*/
}

    .page-4:hover {
        color: #1ab6cf !important;
    }

.page-dots {
    /*font-weight: 600;*/
    background: transparent !important;
}

.page-h5-title {
    padding-bottom: 15px !important;
}

.input-inline {
    display: inline-block !important;
    width: calc(100% - 270px) !important;
}

.dataTable-fix {
    border-left: 1px solid #dee2e6 !important;
    border-bottom: 1px solid #dee2e6 !important;
}

.btn-32 {
    width: 32px !important;
    height: 32px !important;
}

.modal-content-bold {
    font-weight: 700;
    color: #ffc107;
}

.w-100px
{
    width: 100px !important;
}

.w-150px {
    width: 150px !important;
}

.w-200px {
    width: 200px !important;
}

.w-250px {
    width: 250px !important;
}

.w-120px
{
    width: 120px !important;
}

.w-auto-210px
{
    width: calc(100% - 210px) !important;
}

.mg-t--50 {
    margin-top: -50px !important;
}

.card-footer {
    background-color: #f2f4f5 !important;
}

.object-name {
    color: #202eae !important;
}

.note-name {
    color: #bebebe !important;
    border-bottom: 1px solid #dedede;
}

.img-frame {
    max-width: 200px;
    max-height: 200px;
    overflow: hidden;
    border: 6px double #adb5bd;
    margin: 0 auto; /*auto center*/
    border-radius: 50%; /*circle*/
}

.img-max-w160 {
    /*max-width: 160px;*/
    object-fit:cover;
}

.vertical-middle {
    vertical-align: middle !important;
}

.lesson-item {
    width: 90%;
    line-height: 1.5;
    padding: 5px 0;
    border-bottom: 1px dashed #cecece;
}

/* Clear clear button for input type date */
/*IE*/
input[type="date"]::-ms-clear {
    display: none !important;
}

/*
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none !important;
    -webkit-appearance: none !important;
}
*/

/*Chrome*/
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-clear-button { display: none !important; }


.logo_wrapper a {
    color: #717171;
    text-decoration: none;
    cursor: pointer;
}

.logo_wrapper img {
    /*position: fixed;
    left: 35px;
    top: 35px;*/
    /*z-index: 2;*/
    -webkit-animation: rotate 2s linear infinite;
    -moz-animation: rotate 2s linear infinite;
    -o-animation: rotate 2s linear infinite;
    -ms-animation: rotate 2s linear infinite;
    animation: rotate 3s linear infinite;
}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotatey(360deg);
    }
}

@-moz-keyframes rotate {
    100% {
        -moz-transform: rotatey(360deg);
    }
}

@keyframes rotate {
    100% {
        transform: rotatey(360deg);
    }
}