/*****************************************
* Login Form
*****************************************/
#login-form {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

    #login-form .login-form-wrapper {
        width: 450px;
        padding: 20px;
    }

        #login-form .login-form-wrapper.large-form {
            width: 800px;
        }

        #login-form .login-form-wrapper .login-title {
            color: #e74e25;
            font-size: 55px;
            margin-bottom: 40px;
        }

        #login-form .login-form-wrapper .login-logo {
            text-align: center;
        }

            #login-form .login-form-wrapper .login-logo img {
                width: 50%;
            }


        #login-form .login-form-wrapper .login-system-name {
            font-size: 18px;
            font-weight: 400;
            color: #ffffff;
            margin-bottom: 40px;
            text-align: center;
            text-transform: uppercase;
        }

        #login-form .login-form-wrapper .login-footer-text {
            font-size: 18px;
            font-weight: 400;
            color: #ffffff;
            margin-top: 30px;
            text-transform: uppercase;
        }

            #login-form .login-form-wrapper .login-footer-text a,
            #login-form .login-form-wrapper .login-footer-text a:hover {
                color: #e74e25;
                text-decoration: none;
            }



/*****************************************
* Main Backend
*****************************************/
#main-backend {
    padding: 40px 0px 40px 0px;
}


    #main-backend .backpage {
        margin-bottom: 20px;
    }

        #main-backend .backpage .button-action, #main-backend .backpage .button-action:hover {
            justify-content: flex-start;
            transform: scale(1);
        }

            #main-backend .backpage .button-action .button-text {
                padding-left: 10px;
            }

            #main-backend .backpage .button-action .button-icon .button-icon-icon {
                transform: rotate(180deg);
            }

    #main-backend .title-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-transform: uppercase;
        margin-bottom: 15px;
    }

        #main-backend .title-header .title {
            font-size: 40px;
            line-height: 44px;
            color: #29771a;
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        #main-backend .title-header .button-link {
            color: #ffffff;
            font-size: 16px;
            font-weight: 400;
            line-height: 16px;
            background: #cb2d2d;
            border: #a32323;
            border-radius: 0px;
            transition: all 0.2s ease-in-out;
            display: block;
            text-align: center;
            text-decoration: none;
            outline: none;
            margin-top: 15px;
            padding: 12px 30px 10px 30px;
        }

@media (max-width: 460px) {
    #main-backend .title-header {
        margin-bottom: 5px;
    }


        #main-backend .title-header .title {
            font-size: 26px;
            line-height: 26px;
        }
}

#main-backend .backend-lists {
    border: 1px solid #5f5f5f;
    background: #2d2d2d;
}




/*****************************************
* Main Dashboard
*****************************************/
#main-dashboard {
    display: flex;
    justify-content: flex-start;
}

    #main-dashboard .dashboard-menu {
        width: 300px;
        padding: 40px 20px;
    }

        #main-dashboard .dashboard-menu .menu-logo {
            margin-bottom: 20px;
        }

            #main-dashboard .dashboard-menu .menu-logo img {
                width: 60%;
            }



        #main-dashboard .dashboard-menu .user-profile {
            color: #26224b;
            font-size: 16px;
            line-height: 16px;
            font-weight: 600;
            margin-bottom: 20px;
            background: #ffffff;
            padding: 10px 15px;
        }



        #main-dashboard .dashboard-menu a.single-menu, #main-dashboard .dashboard-menu a.single-menu:hover {
            color: #67b1e3;
            font-size: 20px;
            font-weight: 600;
            text-transform: uppercase;
            text-decoration: none;
        }

    #main-dashboard .dashboard-content {
        width: calc(100% - 300px);
        height: 100vh;
        padding: 40px 40px 100px 40px;
        /*background: linear-gradient(to right, #002454, #010c1e);*/
        background: #ffffff;
        overflow: auto;
        overflow-y: scroll;
        overflow-x: hidden;
    }


.sidemenu {
    margin-bottom: 20px;
}

    .sidemenu .title {
        color: #67b1e3;
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .sidemenu .sidemenu-lists {
        padding: 5px 15px;
        /*background: #bcc6ff;
        border-radius: 5px;*/
    }

    .sidemenu ul {
        list-style: none;
        padding-left: 0px;
        font-size: 18px;
        margin-bottom: 0px;
    }

        .sidemenu ul li {
            font-size: 14px;
        }

            .sidemenu ul li a,
            .sidemenu ul li a:hover {
                color: #fbf5e4;
                text-decoration: none;
            }


.content-box {
    color: #000000;
    font-size:14px;
}

    .content-box .title-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-transform: uppercase;
        margin-bottom: 20px;
    }

        .content-box .title-header .title {
            font-size: 30px;
            line-height: 36px;
            font-weight: 600;
            text-transform: uppercase;
        }

        .content-box .title-header .button-link {
            font-size: 16px;
            font-weight: 600;
            line-height: normal;
            color: #ffffff;
            background: #cb2d2d;
            border: #a32323;
            transition: all 0.2s ease-in-out;
            display: block;
            text-align: center;
            text-decoration: none;
            outline: none;
            padding: 10px 30px 10px 30px;
            border-radius: 20px;
        }


.table-data {
    width: 100%;
    background: #ffffff;
    font-size: 16px;
}

    .table-data thead tr th {
        background: #e6e7e8;
        font-weight: 500;
        color: #000000;
        padding: 5px 10px;
    }

    .table-data tbody tr td {
        border: 1px solid #ededed;
        padding: 5px 10px;
        vertical-align: top;
        font-size: 14px;
        font-weight: 500;
    }

        .table-data tbody tr td a,
        .table-data tbody tr td a:hover {
            color: #000000;
        }

            .table-data tbody tr td a.icon-link,
            .table-data tbody tr td a.icon-link:hover {
                color: #000000;
                background: #f9d835;
                padding: 2px 8px;
                margin: 0px 3px;
                display: inline-block;
            }

        .table-data tbody tr td .view-icon {
            display: inline-block;
            width: 26px;
            height: 26px;
            background: url('/frontend-assets/images/icons/view.png');
            background-size: 100% auto;
            background-position: top center;
            background-repeat: no-repeat;
            margin: 0px;
        }

        .table-data tbody tr td .video-icon {
            display: inline-block;
            width: 26px;
            height: 26px;
            background: url('/frontend-assets/images/icons/youtube.png');
            background-size: 100% auto;
            background-position: top center;
            background-repeat: no-repeat;
            margin: 0px;
        }

        .table-data tbody tr td .edit-icon {
            display: inline-block;
            width: 26px;
            height: 26px;
            background: url('/frontend-assets/images/icons/editing.png');
            background-size: 100% auto;
            background-position: top center;
            background-repeat: no-repeat;
            margin: 0px;
        }

        .table-data tbody tr td .delete-icon {
            display: inline-block;
            width: 24px;
            height: 26px;
            background: url('/frontend-assets/images/icons/deleteing.png');
            background-size: 100% auto;
            background-position: top center;
            background-repeat: no-repeat;
            margin: 0px;
        }

        .table-data tbody tr td .exam-icon {
            display: inline-block;
            width: 26px;
            height: 26px;
            background: url('/frontend-assets/images/icons/tutorial.png');
            background-size: 100% auto;
            background-position: top center;
            background-repeat: no-repeat;
            margin: 0px;
        }

        .table-data tbody tr td .schedule-icon {
            display: inline-block;
            width: 26px;
            height: 26px;
            background: url('/frontend-assets/images/icons/schedule.png');
            background-size: 100% auto;
            background-position: top center;
            background-repeat: no-repeat;
            margin: 0px;
        }

        .table-data tbody tr td .view-button {
            background: #262b2e;
            border: 1px solid #262b2e;
            color: #ffffff;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }

        .table-data tbody tr td .video-button {
            background: #cb2d2d;
            border: #a32323;
            color: #ffffff;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }



        .table-data tbody tr td .status-checkbox {
            pointer-events: none;
            width: 18px;
            height: 18px;
        }


form .form-title {
    font-size: 26px;
    font-weight: 600;
    line-height: 26px;
    color: #ffffff;
    text-transform: uppercase;
    border-bottom: 1px solid #2c4d76;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

form .form-subtitle {
    font-size: 14px;
    line-height: 16px;
    color: #000000;
    margin-bottom: 20px;
}



form .form-wrapper {
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
    background: #f8f8f8;
}

form .form-group label {
    font-size: 18px;
    font-weight: 600;
    line-height: 20px;
}

form input,
form textarea,
form select {
    font-size: 16px;
    width: 100%;
    background: #ffffff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 5px 15px;
    color: #000000;
    outline: none;
    transition: border-color 0.3s ease;
}

    form input.datepicker {
        padding: 10px 15px;
    }

    form input:read-only {
        background: #ffffff;
        border: 1px solid #ffffff;
    }

    form input::placeholder,
    form textarea::placeholder {
        color: #8b9db1;
    }

    form input:focus,
    form textarea:focus {
        border-color: #35b4fd;
    }

    form select option {
        font-size: 16px;
    }



form .form-group.form-checkbox {
    height: 36px;
    display: flex;
    justify-content: flex-start;
    align-items: inherit;
}


    form .form-group.form-checkbox .checkbox-wrapper {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        width: 100%;
        font-size: 16px;
    }

        form .form-group.form-checkbox .checkbox-wrapper input[type=checkbox] {
            box-sizing: border-box;
            padding: 0;
            height: 20px;
            width: 30px;
            margin-right:5px;
        }


        form .form-group.form-checkbox .checkbox-wrapper .label-checkbox {
           
        }



form .btn-primary, form .btn-primary:hover {
    font-size: 18px;
    line-height: 18px;
    font-weight: 600;
    color: #ffffff;
    background: #67b1e3;
    padding: 14px 40px;
    border: 1px solid #67b1e3;
    margin: 0px 10px;
    display: inline-block;
    text-transform: uppercase;
    border-radius: 10px;
}

form .btn-secondary, form .btn-secondary:hover {
    font-size: 18px;
    line-height: 18px;
    font-weight: 600;
    color: #000000;
    background: #ffffff;
    border-radius: 30px;
    padding: 14px 40px;
    border: 1px solid #ffffff;
    margin-right: 10px;
    display: inline-block;
}


form .btn-back {
    font-size: 18px;
    line-height: 18px;
    font-weight: 600;
    color: #ffffff;
    border-radius: 30px;
    padding: 13px 40px;
    margin-right: 10px;
    display: inline-block;
}


.form-tab {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 20px;
}

    .form-tab .form-tab-item {
        /*border: 1px solid #0a214e;*/
        padding: 10px 40px;
        text-transform: uppercase;
        font-size: 18px;
        font-weight: 400;
        cursor: pointer;
        letter-spacing: 2px;
    }

        .form-tab .form-tab-item.active {
            color: #000000;
            background: #f8f8f8;
            font-weight: 600;
        }

.form-panel {
    margin-bottom: 40px;
}

    .form-panel .form-panel-item {
        display: none;
    }

        .form-panel .form-panel-item.active {
            display: block;
            background: #f8f8f8;
            padding: 20px;
        }



.video-url-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.video-youtube-format {
    width: 370px;
}

#video_url {
    width: 200px;
}