


/* general settings */
html { position:relative; min-height:100%; overflow-w: hidden }
body { background: #fff; font-family: 'Poppins', sans-serif; font-size: 14px; color: #000; overflow-x: hidden; margin:0 0 64px; }
a:hover { text-decoration: none }

.grey-content { color:#cdcdcd !important; }
.grey-border { border:1px solid #cdcdcd }
.green-content { color:#53d591; }
.green-btn { background:#53d591; transition:0.3s; color:#fff;border:1px solid #53d591; }
.green-background { background:#07c565; }
.green-btn:hover { background:transparent; border:1px solid #53d591; color:#53d591!important }
.red-btn { transition:0.3s; color:#fff; }
.red-btn:hover { background:#ed1c24; border:1px solid #ed1c24; color:#fff!important}
button:focus, select:focus{ box-shadow: none!important; }
button:hover { text-decoration:none!important; }
button:focus{ text-decoration:none!important; }
/* validation errors */
.input-validation-error { border:1px solid #dc3545!important; }
.field-validation-error { padding:10px 0; color:#dc3545;!important; }

/* login page */
.fixed-content{float: left; width: 100vw; height: 100vh;}
.login-container { font-family: 'Poppins', sans-serif; float:left; width:100%; border:1px solid #cdcdcd; padding: 60px; text-align:center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.login-container h5 { font-size:18px; line-height:23px; font-weight:500; margin-top:45px; margin-bottom:65px; }
.login-container form { margin:10px 0; height:100%; }
.login-container form input { color:#000;border:none; border-radius:0;font-family:'Source Sans Pro', sans-serif;  font-size: 14px; line-height:23px; padding:14px 15px}
.login-container form input:focus { box-shadow:none;}
.login-container form input:nth-child(1){ border-bottom:1px solid #f2f2f2 }
.login-container form input:nth-child(5){ border-bottom:1px solid #f2f2f2 }
.login-container form input:nth-child(7){ border-bottom:1px solid #f2f2f2 }
.login-container .form-check, .login-container a { margin: 25px 0; color:#000;font-family: 'Source Sans Pro', sans-serif;font-size:14px; }
.login-container .form-check, .login-container a:hover { text-decoration:none; color:#262626; padding:0;font-weight:600 }
.login-container .form-check .form-check-input{ display:none }
.login-container .form-check label{ cursor:pointer;margin:0; padding:0; font-family: 'Source Sans Pro', sans-serif;font-size:14px; font-weight: 400;color:#575962; float:left }
.login-container .form-check label::before{ content: "\f0c8"; font-family: 'Font Awesome 5 Pro', sans-serif; font-weight: 500; font-size: 15px; position: relative;float: left;width: 30px; text-align:left }
.login-container .form-check input[type=checkbox]:checked + label:before { content: "\f14a"; color:#000; font-weight:500;}
.login-container .send{ width:100%; float:left; font-family: 'Source Sans Pro', sans-serif; padding:35px 0 }
.login-container .send .btn-submit{ padding: 14px 48px;background:#000;color:#fff; border: 1px solid #fff;border-radius:5px }
.login-container .send .btn-submit:hover{ background:#fff; border:1px solid #000; color:#000;border-radius:5px }
.login-container .send .btn-submit:focus{ box-shadow: none }

/* remind page */
.remind-container { font-family: 'Poppins', sans-serif; float:left; width:100%; border:1px solid #cdcdcd; padding: 60px; text-align:center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.remind-container h5 { font-size:18px; line-height:23px; font-weight:500; margin-top:45px; }
.remind-container p {margin-bottom:65px; color:#9e9e9e; font-size:14px;font-family: 'Source Sans Pro', sans-serif; font-weight:300;  }
.remind-container form { margin:10px 0; height:100%; }
.remind-container form input { color:#000;border:none; border-radius:0;font-family:'Source Sans Pro', sans-serif;  font-size: 14px; line-height:23px; padding:8px 0}
.remind-container form input:focus { box-shadow:none; }
.remind-container form input:nth-child(1){ border-bottom:1px solid #f2f2f2 }
.remind-container .send{ width:100%; float:left; font-family: 'Source Sans Pro', sans-serif; padding:35px 0 }
.remind-container .send .btn-submit{ padding: 14px 50px;background:#000;color:#fff; border: 1px solid #fff;border-radius:5px}
.remind-container .send .btn-submit:hover{ background:#fff; border:1px solid #000; color:#000; }
.remind-container .send .btn-submit:focus{ box-shadow:none }
.remind-container .send a.btn-cancel{ padding:1px 48px;background:#fff; border:1px solid #000; transition: 0.3s; color:#000; margin:0; border-radius:5px;line-height:50px; font-weight:600;}
.remind-container .send a.btn-cancel:hover{ background:#000;color:#fff; border: 1px solid #fff; }
.remind-container .send a.btn-cancel:focus{ box-shadow:none }

/* header background-color:#2e3192; */
header {  padding:28px 0; color:#fff }
header .header-logo a{ padding-right:20px;border-right: 2px solid #fff; }
header .header-logo p { font-size:18px;padding:15px 20px; height:100%; margin:0 }
header .header-txt span {display:block; font-size:12px; }
header .header-txt span.data { font-size:11px; opacity: 0.2 }
header .header-txt span.deadline { font-size:11px; }
header .header-button .btn-logout { background:transparent; color:#fff; border: 1px solid #fff;font-size:12px; }

header .header-button .btn-logout:focus { box-shadow:none; }
header .hamburger { background:transparent; border:none; color:#fff; }
header .hamburger:focus { outline: none }

/* menu  background-color: #212482;  */
.menu { position:relative; z-index:100 }
.menu nav { width:100% }
.menu ul { list-style-type: none; display:flex; justify-content: space-around ;padding:0; margin:0 auto; }

.menu ul li:nth-child(n-1) { border-right:none; }
.menu ul li a { color:#fff; font-size:16px; font-weight:600; position:relative; }
.menu ul li a:hover { text-decoration: none; }
.menu ul li button { color:#fff; font-size:16px; font-weight:600; position:relative;background:transparent;border:none; }
.menu ul li.active:after { content: ''; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent; position: absolute; left: 50%; bottom:-14px; margin-left: -15px; }
.menu ul li:hover::after { content: ''; width: 0; height: 0; border-left: 15px solid transparent; border-right: 15px solid transparent;  position: absolute; left: 50%; bottom:-14px; margin-left: -15px; }

/* main - profile */
main .main-menu { padding:50px 15px }
main .main-menu ul { list-style-type: none; border-bottom:1px solid #c6c6c6;margin:0; padding:0}
main .main-menu ul li { display: inline-block; padding:20px 10px }
/*main .main-menu ul li.active a{ color:#212482 }*/
main .main-menu ul li a { font-size:18px; color:#c6c6c6; transition:0.3s }
/*main .main-menu ul li a:hover { color:#212482 }*/

/* user adress - profile */
main .user-adress h4 { font-size: 18px; font-weight:600; padding:25px 0}
main .user-adress { /*border-bottom:1px solid #9e9e9e;*/ padding-bottom:30px;}
main .user-adress form .form-group { padding: 17px 0; margin-bottom:0 }
main .user-adress form .form-group label { font-size:18px; }
main .user-adress form .form-group input { border-radius: 0 }
main .user-adress form .form-group input:focus { box-shadow:none }
main .user-adress form button.btn-save { float:right;margin:20px 0;padding:10px 25px; font-size:12px;}

main .user-mail-address h4 {
    font-size: 18px;
    font-weight: 600;
    padding: 25px 0
}
/* user school - profile */
main .user-school {
    padding: 40px 15px 120px 15px
}
main .user-school h4 { font-size: 18px; font-weight:600; padding:25px 0}
main .user-school form .form-group { padding: 17px 0; margin-bottom:0 }
main .user-school form .form-group label { font-size:18px; }
main .user-school form .form-group input { border-radius: 0 }
main .user-school form .form-group input:focus { box-shadow:none }
main .user-school form .form-group select { border-radius: 0; font-size:1rem}
main .user-school .btn-edit { float:right;margin:20px 0; ;padding:10px 25px; font-size:12px;}

/* image-section tutorial */
main .tab-content { position: relative }
main .tab-content input { border-radius:0; }

main .tab-content .select2 .selection span .select2-selection:focus { outline:none!important; }
main .tab-content .select2 .selection span .select2-selection__rendered { line-height:37px; }
main .tab-content .select2 .select2-selection__arrow { top: 50%;transform: translatey(-50%); }

main .tab-pane .img-section { padding: 105px 15px 15px 15px; text-align:center; background:#f7f7f7;}
main .tab-pane .img-section img {width:100%; height:100%; margin:0 auto;}
main .tab-pane .tab-navi { padding:30px 0; }
main .tab-pane label { font-size: 18px; }

/* tabs section tutorial */
main .tab-pane .dots-section { background:#f7f7f7; padding:30px 0 26px 0;}
main .tab-pane .dots-section .dot { position:relative;height: 18px;width:18px;border-radius:50%;background-color: #e1e1e1;display: inline-block; margin:0 6px;}
main .tab-pane .dots-section .active::after { content:''; position:absolute; width:9px; height:9px; border-radius:50%; top:50%; left:50%; transform:translate(-50%,-50%); background: #f90000 }

/* txt-section tutorial*/
main .tab-pane .txt-section h4 { font-size:18px;font-weight:500;padding:30px 0; }
main .tab-pane .txt-section ol { padding: 20px 0 0 70px; }
main .tab-pane .txt-section li { padding: 15px 0; }

/* nav-section tutorial */
main .nav-section { padding:30px 0  60px 0}
main .nav-section .nav { border:none }
main .nav-section .nav a { display:inline-block; font-size:12px;font-weight: 500;transition: 0.3s; margin: 0 10px;  }
main .nav-section .nav a:focus { box-shadow:none }
main .nav-section .nav .btn-exit { border:1px solid #ed1c24;color:#ed1c24;padding:7px 30px; margin:0 10px; }
main .nav-section .nav .btn-prev { color:#fff; padding-top:8px; }
main .nav-section .nav .btn-next { color:#fff; padding-top:8px;}

/* timeline */
.timeline-date-picker button { display:inline-block; font-size:12px;font-weight: 500;transition: 0.3s; margin: 0 10px; }
.timeline-date-picker button.btn-last-month { font-size:12px;color:#fff }
.timeline-date-picker button.btn-month { font-size:12px;color:#fff }
.timeline-date-picker select { width:100px;cursor:pointer; font-size:12px;font-weight: 600;transition: 0.3s; margin: 0 10px;border:none; padding:0 5px }
.timeline-date-picker select::before {content:none }
.timeline:before { content:''; position:absolute; top:0; bottom:0; left: 50%;width:6px; background:#f8f8f8;  }
.timeline { list-style-type:none; margin:40px 0; position:relative;width:100%;padding:0; }
.timeline li { float:left; width:100%; position:relative; }
.timeline li:before { content:''; position:absolute; top:50%; bottom:0; left:49.9%; background:red; width:10px; height:10px; border-radius:50%; }
.timeline-panel { position:relative; width: 46%; padding:30px 0;}
.timeline-panel.normal .date { font-size: 12px; text-align:right; }
.timeline-panel.normal .content { background:#f8f8f8;padding:15px 20px; position:relative;font-size:12px;text-align:right; }
.timeline-panel.normal .content::after{ content: '';width: 0;height: 0;border-left: 20px solid #f8f8f8;border-top: 20px solid transparent;border-bottom: 20px solid transparent;position: absolute;right: 0;top: 44%; transform:translateY(-50%);margin-right: -15px; }
.timeline-panel.normal .content i { float:left; }
.timeline-panel.inverse { float:right }
.timeline-panel.inverse .date { font-size: 12px; }
.timeline-panel.inverse .content { background:#f8f8f8;padding:15px 20px; position:relative;font-size:12px }
.timeline-panel.inverse .content::after {content: '';width: 0;height: 0;border-right: 20px solid #f8f8f8;border-top: 20px solid transparent;border-bottom: 20px solid transparent;position: absolute;left: 0;top: 44%; transform:translateY(-50%);margin-left: -15px; }
.timeline-panel.inverse .content i { margin-right:15px; }
main .more-panels { padding:80px 0; }
main .more-panels .btn-more { font-size: 12px; color:#fff; padding:12px 20px; }

/* program */

.program .fa-check { color:#07c565}
.program .fa-times {
    color: #9b9b9b
}
.program .program-list .table1 { padding: 20px 0; }
.program .program-list .table2 {
    padding: 40px 0;
    border-top: 2px solid #9b9b9b
}
.program .program-list .table3 { padding: 20px 0}
.program .program-sections ul { list-style-type: none;display:block;float:left;padding-left:0;margin:0 auto; }
.program .program-sections ul li { float:left; width:100%; padding:20px 0 ; text-align:center;   }
.program .program-sections ul li a { transition:0.3s; }

    .program .program-sections ul li a {
        border: 15px solid #9b9b9b;
        border-radius: 50px;
        margin: 0 auto;
        background: #9b9b9b;
        width: 57px;
        color: #fff;
        height: 57px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 18px;
    }
.program .program-sections .average { padding:75px 0 }
.program .program-sections .average p { font-size:14px;font-weight: 600 }
.program .program-sections .average span { color:#07c565; font-size:16px }
.program .program-sections  p { font-size:14px; font-weight: 600 }

.program .program-list .accordion .card { border:none; }
.program .program-list .accordion .card button { padding:0; }

.program .program-list ul { list-style-type: none; padding:13px 0px 13px 54px; margin:0; }
.program .program-list ul li { display:inline-block }
.program .program-list ul li i { margin-right:18px; }
.program .program-list .program-exams h5 { color:#07c565 }
.program .program-list .program-exams .points { color:#07c565 }

.program .program-list .inactive li h5 {
    color: #888888 !important;
}
.inactiveGr {
    color: #888888 !important;
}
.actualGr {
    color: #2e3192 ;
}

.program .program-list .header2 h5 {
    color: #9b9b9b
}
.program .bar { position:relative;float:left; width:100%; }
.program .program-progress .progress { margin:30px 0; border-radius:50px; height:12px; }

.program .program-deadline { margin:40px -15px;}
.program .program-deadline .progress { margin:30px 0; border-radius:50px; height:12px; }


/* quiz */
.quiz { padding-bottom:40px; }
.quiz .quiz-header { float:left; }
.quiz .quiz-header div { float:none; }
.quiz .quiz-header-icon { float:left!important; }
.quiz .quiz-header-title { width:100%; padding:20px 0;float:left!important; }
.quiz .quiz-header-points { float:right!important; }
.quiz .quiz-header-points div p { margin-bottom:0; }
.quiz .quiz-header-check { float:right!important; }
.quiz .quiz-buttons { padding:80px 0 }
.quiz .quiz-buttons #next { float:right; }
.exam-deadline { font-size:22px; }
.quiz .quiz-deadline { height:100%; padding:15px 0; font-size:15px;  }
.quiz .main-menu { padding:30px 0 15px 0; }
.quiz .quiz-buttons {margin-bottom:30px!important;}

/* footer background: #2e3192;*/
footer { padding:22px 0;  color:#fff; position:absolute; bottom: 0; left:0; height:64px; width:100%; overflow:hidden; }
footer .social-media a { padding:0 8%; color:#fff; }
footer .social-media a:last-child { padding-right:0; }
footer .social-media a i { transition:0.3s }
footer a img { transition:0.3s }
footer .social-media { padding:0; }
footer .social-media a:hover i{ transform:scale(2) }
footer  a:hover img { transform(2)}
footer .footer-logo a { transition: 0.3s }
footer .footer-logo a:hover img { transform: scale(1.2)}

.actual-exam {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-between;
    align-items: center;
}
