@import url("https://fonts.googleapis.com/css?family=Cuprum:400,700|Lato:300,400,700");

html, body { font-family: "Lato", sans-serif; letter-spacing: 0.5px; width: 100%; height: 100%; }

body { background: #f2f4f6; font-size: 14px; color: #5c5c5c; margin: 0; padding: 0; }

* { box-sizing: border-box; list-style: none; margin: 0; padding: 0; }
table { margin: auto; }
.view-link:hover { text-decoration: none !important; }
input[type=file]:focus, input[type=checkbox]:focus, input[type=radio]:focus { outline: none !important; }

.custom-control-input:focus ~ .custom-control-label:before { box-shadow: none !important; }

button { cursor: pointer; }
th.chk-boxs {text-align: center !important;}
td.chk-boxs {text-align: center !important;}

*:focus, *:visited, *:focus:visited, *:focus:active { outline: none !important; }

.bootstrap-select .dropdown-toggle:focus { outline: none !important; box-shadow: none !important; }

textarea:focus, input:focus { outline: none !important; }

img { border: none; max-width: 100%; }

input, select, textarea, button { font-family: "Lato", sans-serif; color: #5c5c5c; }

input[type=checkbox], input[type=radio] { box-sizing: border-box; padding: 0; }

::-moz-selection { background: #59cbcb; color: #fff; }
::selection { background: #59cbcb; color: #fff; }

.layoutMain { width: 100%; }

.containerMain { width: 100%; padding: 25px; }
.containerMain-last{padding: 0 25px;margin-bottom: 30px;}

/* header */
header { background: #fff; display: flex; flex-direction: column; width: 100%; }
header .topBar { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 10px 20px; box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.05); position: relative; z-index: 1; }
header .topBar .logo svg { width: 175px; height: 45px; }
header .topBar .logo svg path { fill: #465362; }

header .topBar .logo .white-logo-img { width: 175px !important; height: 35px; margin: 0 auto; background-size: cover; background-image: url(../../images/logo/sp-logo-white.png);}
header .topBar .logo .black-logo-img { width: 175px !important; height: 35px; margin: 9px auto; background-size: cover; background-image: url(../../images/logo/sp-logo-black.png);}


header .topBar .userRight { display: flex; flex-direction: column; width: 210px; position: relative; }
header .topBar .userRight .userDtl { display: flex; flex-direction: row; align-items: center; justify-content: space-between; cursor: pointer; }
header .topBar .userRight .userDtl .user-ic svg { width: 30px; height: 30px; }
header .topBar .userRight .userDtl .user-ic svg path { fill: #465362; }
header .topBar .userRight .userDtl .name-email { flex: 2; margin: 0 10px; }
header .topBar .userRight .userDtl .name-email h3 { font-family: 'Lato', sans-serif; font-size: 14px; color: #465362; font-weight: 400; white-space: nowrap; margin: 0; overflow: hidden; text-overflow: ellipsis; width: 144px; }
header .topBar .userRight .userDtl .name-email p { font-family: 'Lato', sans-serif; font-size: 12px; color: #a3aeba; font-weight: 400; white-space: nowrap; margin: 0; overflow: hidden; text-overflow: ellipsis; width: 144px; }
header .topBar .userRight .userDtl .down-arrow svg { width: 10px; height: 7px; }
header .topBar .userRight .userDtl .down-arrow svg path { fill: #465362; }
header .topBar .userRight .userDD { display: none; position: absolute; right: 0; top: 100%; background: #fff; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); z-index: 10; border-radius: 5px; min-width: 180px; padding: 5px 0; }
header .topBar .userRight .userDD:before { content: ''; display: block; position: absolute; height: 0; width: 0; border-bottom: 10px solid #eeeeee; border-left: 5px solid transparent; border-right: 5px solid transparent; right: 12px; top: -10px; }
header .topBar .userRight .userDD ul { margin: 0; }
header .topBar .userRight .userDD ul li a { display: flex; flex-direction: row; align-items: center; justify-content: space-around; padding: 8px 13px; font-family: 'Lato', sans-serif; font-size: 11px; color: #5c5c5c; font-weight: 700; text-transform: uppercase; }
header .topBar .userRight .userDD ul li a:hover { text-decoration: none; background: #f2f2f2; }
header .topBar .userRight .userDD ul li a i svg { width: 15px; height: 15px; }
header .topBar .userRight .userDD ul li a i svg path { fill: #5c5c5c; }
header .topBar .userRight .userDD ul li a span { flex: 2; margin-left: 10px; }
header .navbar { width: 100%; display: flex; background: #59cbcb; padding: 0 20px; border-radius: 0; margin-bottom: 0; border: none; min-height: 1px; }

.navbar * { transition: all ease .2s; }
.navbar ul { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin: 0; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.navbar ul li { border-right: 1px solid rgba(255, 255, 255, 0.1); }
.navbar ul li a { display: flex; flex-direction: row; align-items: center; justify-content: space-between; font-family: "Cuprum", sans-serif; font-size: 16px; color: #fff; font-weight: 400; padding: 15px 20px; }
.navbar ul li a:hover { text-decoration: none; background: rgba(0, 0, 0, 0.05); }
.navbar ul li a i svg { width: 20px; height: 20px; }
.navbar ul li a i svg path { fill: #fff; }

.navbar ul li a .white-logo { width: 20px; height: 20px; background-size: cover; background-image: url(../../images/logo/symmetry-white.png); }

.navbar ul li a span { margin-left: 6px; display: block; }
.navbar ul li a.active { position: relative;
    /* background: rgba(0, 0, 0, 0.05); */
    color: #fff !important;
    background: rgb(84, 193, 193) !important;
 }
/* .navbar ul li a.active:after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 1px; background: #465362;} */

.mobileNav { display: none; background: #59cbcb; padding: 12px 15px; }
.mobileNav .page-indicator { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.mobileNav .page-indicator i svg { width: 20px; height: 20px; }
.mobileNav .page-indicator i svg path { fill: #fff; }
.mobileNav .page-indicator span { flex: 2; font-family: "Cuprum", sans-serif; font-size: 18px; color: #fff; font-weight: 400; padding: 0px 10px; }
.mobileNav .menu-toggle { width: 30px; height: 20px; position: relative; display: block; background: transparent; border-top: 2px solid; border-bottom: 2px solid; color: #fff; font-size: 0; transition: all .25s ease-in-out; }
.mobileNav .menu-toggle:before, .mobileNav .menu-toggle:after { content: ''; width: 100%; height: 2px; display: block; position: absolute; top: 50%; left: 50%; background: currentColor; transform: translate(-50%, -50%); transition: transform .25s ease-in-out; }
.mobileNav button:hover { color: #fff; }
.mobileNav button.is-active { border-color: transparent; }
.mobileNav button.is-active:before { transform: translate(-50%, -50%) rotate(45deg); }
.mobileNav button.is-active:after { transform: translate(-50%, -50%) rotate(-45deg); }
.mobileNav button { border: none; cursor: pointer; outline: none; }

.loginMain { width: 100%; height: 100%; background: #e7f3f3; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.loginMain .loginShape { background-image: url("../../images/companyPanel/login-bg-shape.png"); background-repeat: no-repeat; background-position: right center; background-color: transparent; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-size: cover; z-index: 1; opacity: .7; }
.loginMain .loginCard { width: 650px; height: auto; position: relative; z-index: 0; border-radius: 15px; background-color: #fff; box-shadow: 0px 0px 17px 0px rgba(89, 203, 203, 0.25); min-height: 400px; display: flex; flex-direction: row; justify-content: space-between; overflow: hidden; margin: 20px; }
.loginMain .loginCard .cardLeft { position: relative; background-image: url("../../images/companyPanel/login-shape.png"); background-repeat: no-repeat; background-position: right center; background-color: transparent; background-size: cover; flex: 2; display: flex; flex-direction: column; }
.loginMain .loginCard .cardLeft h2 { font-family: "Cuprum", sans-serif; font-size: 40px; color: rgba(255, 255, 255, 0.5); font-weight: 700; transform: rotate(90deg); transform-origin: top left; margin: 30px 0 0 67px; letter-spacing: 1px; }
.loginMain .loginCard .cardLeft .logo { flex: 2; display: flex; flex-direction: column; padding-left: 30px; justify-content: flex-end; text-align: center; }
.loginMain .loginCard .cardLeft .logo svg { width: 250px; height: 60px; margin: 0 auto; }
.loginMain .loginCard .cardLeft .logo svg path { fill: #fff; }

.loginMain .loginCard .cardLeft .logo .white-logo-img { width: 250px !important; height: 50px; margin: 0 auto; background-size: cover; background-image: url(../../images/logo/sp-logo-white.png);}
.loginMain .loginCard .cardLeft .logo .black-logo-img { width: 250px !important; height: 50px; margin: 0 auto; background-size: cover; background-image: url(../../images/logo/sp-logo-black.png);}

.loginMain .loginCard .cardLeft .intro { font-size: 10px; color: #fff; font-weight: 400; text-transform: uppercase; padding: 30px 60px 30px 30px; }
.loginMain .loginCard .cardRight { width: 50%; padding: 30px; }
.loginMain .loginCard .cardRight h1 { font-family: "Cuprum", sans-serif; font-size: 40px; color: #59cbcb; font-weight: 700; }
.loginMain .loginCard .cardRight .loginForm { width: 100%; margin-top: 25px; }
.loginMain .loginCard .cardRight .loginForm .form-group { position: relative; }
.loginMain .loginCard .cardRight .loginForm .form-group i { position: absolute; top: 13px; right: 0; }
.loginMain .loginCard .cardRight .loginForm .form-group i svg { width: 16px; height: 16px; }
.loginMain .loginCard .cardRight .loginForm .form-group i svg path { fill: #c2c2c2; }
.loginMain .loginCard .cardRight .loginForm .form-group .form-input { padding-right: 25px; }
.loginMain .loginCard .cardRight .loginForm .form-group.focused i svg path { fill: #59cbcb; }
.loginMain .loginCard .cardRight .loginForm .btn { display: inline-block; border-radius: 50px; padding: 10px 15px; }
.loginMain .loginCard .cardRight .bottomLink { position: absolute; right: 30px; bottom: 20px; }
.loginMain .loginCard .cardRight .bottomLink a { font-size: 14px; color: #59cbcb; font-weight: 400; text-decoration: none; }
.loginMain .loginCard .cardRight .bottomLink a:hover { text-decoration: underline; }

.login-error { font-size: 13px; color: red; font-weight: 400; }
.login-link { font-family: "Lato", sans-serif; color: #fff;font-weight: 400;background-color: #465362;border-color: #465362; display: inline-block; border-radius: 50px !important; padding: 10px 15px !important;}

.reset-steps { padding-top: 20px; }
.reset-steps h3 { font-size: 17px; color: #2d2d2d; font-weight: 500; }
.reset-steps ul li { position: relative; font-size: 12px; color: #6c6c6c; font-weight: 400; padding-left: 15px; }
.reset-steps ul li:before { content: ''; width: 5px; height: 5px; position: absolute; top: 6px; left: 0; background: #59cbcb; border-radius: 50%; }

/* breadcrubs */
.breadcrumbs { background: #fff; border-radius: 3px; margin-top: 5px; padding: 0 7px; }
.breadcrumbs ul { margin: 0; display: flex; flex-direction: row; align-items: center; }
.breadcrumbs ul li { font-family: 'Cuprum', sans-serif; font-size: 17px; color: #afafaf; font-weight: 400; padding: 8px 15px 8px 22px; }
.breadcrumbs ul li + li { position: relative; }
.breadcrumbs ul li + li:before { content: ''; width: 6px; height: 10px; position: absolute; left: 0; top: 50%; transform: translateY(-50%); background: url(../../images/companyPanel/breadcrumb-arrow.png) no-repeat center; }
.breadcrumbs ul li a { color: #465362; }
.breadcrumbs ul li a svg { width: 18px; height: 18px; }
.breadcrumbs ul li a svg path { fill: #59cbcb; }

/* common */
.pageContent { width: 100%; margin-top: 25px; }

.shadowCard { border-radius: 10px; background-color: #fff; box-shadow: 0px 0px 10px 0px rgba(147, 147, 147, 0.1); }
.shadowCard .boxTitle { border-bottom: 1px solid #e7e7e7; padding: 15px 20px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.shadowCard .boxTitle h2 { flex: 2; font-family: 'Cuprum', sans-serif; font-size: 20px; color: #465362; font-weight: 400; margin: 0; }
.shadowCard .boxTitle .rightSelection { display: block; white-space: nowrap; }
.shadowCard .boxTitle .rightSelection .form-control { font-family: 'Lato', sans-serif; font-size: 13px; color: #7d7c7c; font-weight: 400; height: 32px; padding: 0 20px 0 7px; display: inline-block; }
.shadowCard .boxTitle .rightSelection .form-control + .form-control { margin-left: 10px; }
.shadowCard .boxContent { padding: 15px 20px; min-height: 150px; }

.width160 { width: 150px; }
.width100 { width: 100px; }

.mt-4 { margin-top: 30px; }

.pageTitle { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.pageTitle h1 { font-family: 'Cuprum', sans-serif; font-size: 26px; color: #465362; font-weight: 700; }
.pageTitle .right-btn { display: inline; }
.sub-privew-bnt{margin-top: 30px;}




/* form controls */
select::-ms-expand { display: none; }
select { padding-right: 15px; background: url(../../images/companyPanel/select-arrow.png) no-repeat 98% #fff !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; }
.custom-select { border-radius: 2px; border-color: #e7e7e7; }
.custom-select:focus { border-color: #bae9e9; box-shadow: none; }

.form-control { font-family: 'Lato', sans-serif; font-size: 15px; color: #5c5c5c; border-radius: 2px; border-color: #e7e7e7; box-shadow: none; height: 40px; line-height: normal; padding: 3px 12px 6px 12px; box-sizing: border-box; margin-bottom: 10px !important; }
.form-control:focus { border-color: #aee4e4; box-shadow: none; }

.custom-control { position: relative; display: block; min-height: 1.5rem; padding-left: 24px; line-height: 22px; }
.custom-control-input:active ~ .custom-control-label:before { background-color: #71dd8a; }
.custom-control-input:focus ~ .custom-control-label:before { box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(220, 53, 69, 0.25); }

.custom-control-label { position: relative; margin-bottom: 0; }
.custom-control-label::before { background-color: #bae9e9; position: absolute; top: .25rem; left: -24px; display: block; width: 16px; height: 16px; pointer-events: none; content: ""; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #dee2e6; }
.custom-control-label::after { position: absolute; top: .25rem; left: -24px; display: block; width: 16px; height: 16px; content: ""; background-repeat: no-repeat; background-position: center center; background-size: 50% 50%; }
.custom-control-label::before, .custom-file-label, .custom-select { transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; }

.custom-checkbox .custom-control-label:before { border-radius: 2px; }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label:before, .custom-radio .custom-control-input:checked~.custom-control-label:before { background-color: #59cbcb; }
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"); }
.custom-checkbox .custom-control-label::before { border-radius: .25rem; }

.custom-radio .custom-control-input:checked ~ .custom-control-label::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E"); }
.custom-radio .custom-control-label::before { border-radius: 50%; }
.custom-control-input { position: absolute; z-index: -1; opacity: 0; }

.form-group { position: relative; }
.form-group .form-label { position: absolute; top: 4px; left: 0; font-size: 16px; color: #6c6c6c; font-weight: 400; background-color: #fff; z-index: 10; transition: transform 150ms ease-out, font-size 150ms ease-out; }
.form-group .form-input { position: relative; width: 100%; padding: 12px 0px 8px 0; outline: 0; border: 0; box-shadow: 0 1px 0 0 #e5e5e5; transition: box-shadow 150ms ease-out; font-size: 16px; }
.form-group .form-input:focus { box-shadow: 0 1px 0 0 #59cbcb; }
.form-group .form-input.filled { box-shadow: 0 1px 0 0 #59cbcb; }
.form-group.focused .form-label { font-size: .75em; color: #59cbcb; font-weight: 400; transform: translateY(-125%); }

/* buttons */
.btn {
    border-radius: 2px;
    font-size: 13px;
    padding: 6px 8px;
    min-width: 90px;
    letter-spacing: .5px;
    /* display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -moz-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    display:-webkit-inline-flex;
    display: -webkit-inline-box; */
 }

.btn + .btn { margin-left: 10px; }

.Course-superadmin .col-xs-12 input.btn.btn-lg { display: inline-block; }

.btn.focus, .btn:focus, .btn:hover { color: #fff !important; }

.ic-btn i svg { width: 14px; height: 14px; margin-right: 5px;  margin: -3px 0px -3px 0px; position: relative; top: 2px;}
.ic-btn i svg path { fill: #fff; }
.ic-btn span { margin-left: 5px; }

.btn-primary { font-family: "Lato", sans-serif; color: #fff; font-weight: 400; background-color: #59cbcb; border-color: #59cbcb; }
.btn-primary:hover { background-color: #51c9c9; border-color: #51c9c9; }

.btn-primary.focus, .btn-primary:focus, .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover { background-color: #51c9c9; border-color: #51c9c9; }
.btn-secondary { font-family: "Lato", sans-serif; color: #fff; font-weight: 400; background-color: #465362; border-color: #465362; }
/*.btn-secondary:hover { background-color: #424e5c; }*/

/* data tables */
.dataTables_wrapper { width: 100%; font-family: "Lato", sans-serif; font-size: 14px; color: #5d5d5d; font-weight: 400; letter-spacing: 0.2px; }
.dataTables_wrapper select, .dataTables_wrapper input[type="search"] { height: 28px; border: 1px solid #e7e7e7; padding: 0px 25px 0 6px; box-sizing: border-box; }
.dataTables_wrapper input[type="checkbox"], .dataTables_wrapper input[type="radio"] { margin-top: 0; }
.dataTables_wrapper select { width: 80px; }
.dataTables_wrapper table.dataTable { border: 1px solid #e3e3e3 !important; border-radius: 2px; }
.dataTables_wrapper table.dataTable thead { background: #f5f5f5; }
.dataTables_wrapper table.dataTable thead tr th, .dataTables_wrapper table.dataTable thead tr td { border-color: #cecece; font-size: 15px; color: #242424; padding: 12px 12px; }
.dataTables_wrapper table.dataTable thead tr .sorting { background-image: url("../../images/companyPanel/sort_both.png"); }
.dataTables_wrapper table.dataTable thead tr .sorting_asc { background-image: url("../../images/companyPanel/sort_asc.png"); }
.dataTables_wrapper table.dataTable thead tr .sorting_desc { background-image: url("../../images/companyPanel/sort_desc.png"); }
.dataTables_wrapper table.dataTable thead tr .sorting_asc_disabled { background-image: url("../../images/companyPanel/sort_asc_disabled.png"); }
.dataTables_wrapper table.dataTable thead tr .sorting_desc_disabled { background-image: url("../../images/companyPanel/sort_desc_disabled.png"); }
.dataTables_wrapper table.dataTable thead tr:last-child th { padding-top: 5px; padding-bottom: 5px; font-family: "Lato", sans-serif; font-size: 13px; color: #242424; font-weight: 600; border: none; padding: 12px 12px; border-bottom: 1px solid #cecece; }
.dataTables_wrapper table.dataTable tbody tr td { border: none; font-size: 14px; padding: 10px; }
.dataTables_wrapper table.dataTable tbody tr .wd {float: left; width: 270px;  border: none; font-size: 14px; padding: 12px 12px; }
.dataTables_wrapper table.dataTable tbody tr td a:hover { text-decoration: none; }
.dataTables_wrapper table.dataTable tbody tr td svg { width: 16px; height: 16px; margin: 0 5px; }
.drg-ic i{float: left;margin-top: 3px;margin-right: 5px;}
.dataTables_wrapper table.dataTable tbody tr td svg path { fill: #465362; }
.dataTables_wrapper table.dataTable tbody tr td svg.red-ic path { fill: #b76262; }
.dataTables_wrapper table.dataTable tbody tr td .datatable-span { display: none; }
.dataTables_wrapper table.dataTable tbody tr.odd { background: #fff; }
.dataTables_wrapper table.dataTable tbody tr.odd td.sorting_1 { background: #fff; }
.dataTables_wrapper table.dataTable tbody tr.odd:hover { background: #eaf0f0; }
.dataTables_wrapper table.dataTable tbody tr.odd:hover td.sorting_1 { background: #eaf0f0; }
.dataTables_wrapper table.dataTable tbody tr.even { background: #eff4f4; }
.dataTables_wrapper table.dataTable tbody tr.even td.sorting_1 { background: #eff4f4; }
.dataTables_wrapper table.dataTable tbody tr.even:hover { background: #eaf0f0; }
.dataTables_wrapper table.dataTable tbody tr.even:hover td.sorting_1 { background: #eaf0f0; }
/*.dataTables_wrapper table.dataTable tfoot { display: none; }*/
.dataTables_wrapper .dataTables_info { font-size: 12px; color: #a4a4a4; }
.dataTables_wrapper .dataTables_paginate .paginate_button { padding: 2px 8px; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: #465362; border-color: #465362; color: #fff !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: #59cbcb; border-color: #59cbcb; color: #fff !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: #59cbcb; border-color: #59cbcb; color: #fff !important; }

.row.chipBoxParent { margin-left: -10px; margin-right: -10px; }
a.tbl-link-css { color: #014f73; text-decoration: underline !important; }
.row.chipBoxParent>[class*="col-"] { padding-left: 10px; padding-right: 10px; }

.chipBox { display: flex; justify-content: space-between; border: 1px solid; padding: 20px 20px 0px 20px; position: relative; border-radius: 2px; background: #fff;}
.chipBox .leftCnt { width: 80%; margin-right: -20%; flex: 1; min-width: 0; }
.chipBox .leftCnt h3 { font-family: "Cuprum", sans-serif; font-size: 20px; color: #a8a7a7; font-weight: 400; margin: 0; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chipBox .leftCnt h2 { font-family: "Lato", sans-serif; font-size: 42px; color: #465362; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chipBox .leftCnt h4 { font-family: "Lato", sans-serif; font-size: 30px; color: #465362; font-weight: 700; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chipBox .rightCnt { position: relative; right: -20px; bottom: 0px; width: 105px; height: 105px; display: flex; flex-direction: row; align-items: center; justify-content: center; border-radius: 100% 0 0 0; }
.chipBox .rightCnt i { margin: 20px 0 0 20px; }
.chipBox .rightCnt i svg { width: 45px; height: 45px; }

.chipBox .circle-data { width: 70%; margin-left: 5px; }
.chipBox .circle-data h3 { font-family: "Cuprum", sans-serif; font-size: 18px; font-weight: 700; }
.chipBox .circle-data h5 { font-size: 12px; color: #5c5c5c; }
.chipBox .circle-data .due-date { display: flex; flex-direction: row; align-items: center;justify-content: space-between; }
.chipBox .circle-data .due-date > i svg { width: 18px; height: 18px; }
.chipBox .circle-data .due-date > div { flex: 2; margin-left: 10px; font-size: 14px; font-weight: 500; color: #000000; line-height: 14px; }
.chipBox .circle-data .due-date > div span { display: block; font-size: 12px; color: #8c8c8c; }

.noDatafound { font-size: 28px; font-weight: 300; text-align: center; padding: 50px 0; color: #a2a2a2; }

.chipBox.lightPurple .prog-circle .fill, .chipBox.lightPurple .prog-circle .bar { border-color: #d4c0e5 !important; }
.chipBox.lightGreen .prog-circle .fill, .chipBox.lightGreen .prog-circle .bar { border-color: #b2daa8 !important; }
.chipBox.lightBlue .prog-circle .fill, .chipBox.lightBlue .prog-circle .bar { border-color: #bacae7 !important; }

.chipBox.lightPurple .circle-data h3 { color: #ae89ce; }
.chipBox.lightGreen .circle-data h3 { color: #89ab80; }
.chipBox.lightBlue .circle-data h3 { color: #8597b6; }

.chipBox.lightBlue { border-color: #dce8fe; }
.chipBox.lightBlue .rightCnt { background: #f7faff; }
.chipBox.lightBlue .rightCnt i svg path { fill: #dee9ff; }

.chipBox.lightOrange { border-color: #ffe8be; }
.chipBox.lightOrange .rightCnt { background: #fffbf2; }
.chipBox.lightOrange .rightCnt i svg path { fill: #f8e0b5; }

.chipBox.lightGreen { border-color: #caefc0; }
.chipBox.lightGreen .rightCnt { background: #f7fcf5; }
.chipBox.lightGreen .rightCnt i svg path { fill: #c9eebc; }

.chipBox.lightPurple { border-color: #eedaff; }
.chipBox.lightPurple .rightCnt { background: #fbf5ff; }
.chipBox.lightPurple .rightCnt i svg path { fill: #e3cdf6; }

.stepsUI { letter-spacing: 0.3px; }
.stepsUI ul { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; }
.stepsUI ul li { max-width: 150px; }
.stepsUI ul li a { display: block; padding: 10px; font-family: "Cuprum", sans-serif; font-size: 16px; color: #a3a3a3; font-weight: 700; text-shadow: 0px 0px 1px #fff; position: relative; }
.stepsUI ul li a > span { display: block; text-align: center; }
.stepsUI ul li a > span.step-count { width: 46px; height: 46px; background: #e0e0e0; border-radius: 50%; margin: 0 auto; box-shadow: 0px 1px 1px 0px #fff, inset 0px 1px 1px 0px rgba(0, 0, 0, 0.15); padding: 4px; }
.stepsUI ul li a > span.step-count span { display: block; font-size: 26px; line-height: 38px; border-radius: 50%; }
.stepsUI ul li a > span.step-count:before, .stepsUI ul li a>span.step-count:after { content: ''; width: 50%; height: 4px; position: absolute; top: 31px; z-index: -1; background: #e0e0e0; box-shadow: 0px 1px 1px 0px #fff, inset 0px 1px 1px 0px rgba(0, 0, 0, 0.15); }
.stepsUI ul li a > span.step-count:before { left: 0; }
.stepsUI ul li a > span.step-count:after { right: 0; }
.stepsUI ul li a > span.step-indi { padding-top: 10px; }
.stepsUI ul li a:hover { text-decoration: none; }
.stepsUI ul li a.active > span.step-count span { color: #fff; line-height: 36px; background: #59cbcb; border: 1px solid #39b8b8; box-shadow: 0px 1px 1px 0px rgba(152, 152, 152, 0.7); text-shadow: 0px 1px 1px rgba(26, 127, 123, 0.7); }
.stepsUI ul li a.active > span.step-indi { color: #59cbcb; }
.stepsUI ul li a.completed > span.step-count span { color: #465362; background: #fff; box-shadow: 0px 1px 1px 0px rgba(152, 152, 152, 0.7); }
.stepsUI ul li a.completed > span.step-indi { color: #465362; }
.stepsUI ul li:first-child a span.step-count:before { display: none; }
.stepsUI ul li:last-child a span.step-count:after { display: none; }

.infoList label { font-size: 14px; color: #1e1e1e; font-weight: 600; display: block; }
.infoList span { display: block; line-height: 22px; font-size: 16px; color: #6c6c6c; min-height: 22px; margin-bottom: 20px; }

.modal-content { border-radius: 16px; border: none; }
.modal-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; background: #59cbcb; color: #fff; border-radius: 15px 15px 0 0; font-weight: 600; }
.modal-header .modal-title { flex: 2; }
.modal-header .close { opacity: 1;color: #fff; text-shadow: 0 1px 0 #000; }
.modal-footer { text-align: center; }
.modal-content .form-control { line-height: 40px; padding: 0 10px;margin-bottom: 25px !important;}
.modal-content .error_msg{top: 44px !important;}



.action svg { width: 11px; margin: 0 3px; }

.intl-tel-input { width: 100%; }

#user_length select { width: 70px; }

.adduser-btn { text-align: center; }
.adduser-btn .btn.btn-lg { margin: 0 auto; }
.errorMsgData { position: relative !important; top: -200px !important; left: 0px !important;}
.error_msg { color: #f00; margin: 0; font-size: 12px; position: absolute; bottom: 0; line-height: 12px; top: 68px;  display: block !important; margin-top: 2px !important;}
.text_box_error { color: #f00 !important; }
.error_msg_course { margin: 0; font-size: 13px; color: #f00; position: absolute; }

.Course-superadmin { padding: 0 25px; }

.panel.panel-default { border: none; border-radius: 10px; background-color: rgb(255, 255, 255); box-shadow: 0px 0px 20px rgba(147, 147, 147, 0.2); }
.panel.panel-default .panel-heading .nav-tabs { margin: -15px -20px; }
.panel.panel-default .panel-heading { /*padding: 15px 20px;*/ border-bottom: none; color: #465362; /*text-transform: uppercase;*/ letter-spacing: 1px; font-size: 18px; }
.panel.panel-default .nav-tabs > li > a {font-size: 14px;  border: none; border-right: 1px solid #ddd; border-radius: 0; padding: 15px 5px; margin-right: 0; color: #76808c; }
.panel.panel-default .nav-tabs > li > a > i{font-size: 22px;}
.panel.panel-default .nav-tabs > li.active > a { color: #000000; }

.stepcourseoptions .form-group label { font-size: 15px; color: #1e1e1e; margin: 0; padding: 11px 0; line-height: 18px; }
.stepcourseoptions .form-group input, .stepcourseoptions .form-group textarea, .stepcourseoptions .form-group select { width: 100%; height: 40px; border: 1px solid #e3e3e3; border-radius: 3px; }
.stepcourseoptions .form-group textarea { height: 110px; }

.note-box { color: #ff6f6f; font-size: 14px; padding: 3px 0; }

.automated-note { font-size: 11px;/*font-size: 12px;*/ color: #2d2d2d; line-height: 15px !important; display: block; letter-spacing: 0; }

.course-radio .radio-control-in { display: flex; margin-right: 30px; line-height: 12px; }
.course-radio { display: flex; margin: 13px 0; }

.stepcourseoptions .form-group { margin-bottom: 20px; }

.half-control { width: 60% !important; }

/*preview funtionality */
/*#preview-color ul li a { display: flex; flex-direction: row; align-items: center; justify-content: space-between; border-radius: 4px; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.05); background: url(http://localhost:8080/symmetry/symmetry/public/images/slide-block-bg.png) repeat center #fff; padding: 0 10px; transition: all ease .2s; }*/
#preview-color .courseSlides ul li a span.slideCount {width: 50px; font-size: 86px; color: rgba(0, 0, 0, 0.1); font-weight: 900; line-height: 75px; }
#preview-color .courseSlides ul li a span.slideTitle { flex: 2; font-size: 17px; color: #5f5f5f; font-weight: 500; margin-left: 15px; margin-right: 40px; }
/*preview funtionality */

.stepcourseoptions .radio-control-in input { width: auto; height: auto; margin: 0px 8px 0 0; }

.radio-control { display: flex; }

label { font-weight: 400; }

.card h4 { font-size: 27px; color: #3a3a3a; font-weight: 300; }

.next-prev { display: flex; justify-content: space-between; margin-bottom: 40px; }
.createst a { width: auto; padding: 9px 15px; }
.next-prev a, .next-prev .btn { font-family: "Lato", sans-serif; color: #fff; font-weight: 400; background-color: #465362; border-color: #465362; border-radius: 2px; font-size: 13px; padding: 9px; letter-spacing: .5px; display: flex; justify-content: center; margin-top: 20px; align-items: center; }
.next-prev a>i, .next-prev .btn>i, .btn>i { display: inline-flex; display: -webkit-inline-box; display: -webkit-inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 32px; }
.next-prev a>i + span, .next-prev .btn>i + span, .btn>i + span { padding-left: 0; margin-left: 0; }
.next-prev a>span, .next-prev .btn>span, .btn>span { padding: 0 15px; text-align: center; }
.next-prev a.publish-btn, .next-prev .btn.publish-btn { background-color: #59cbcb; border-color: #59cbcb; cursor: pointer; }
.disabled-btn { cursor: default !important; background-color: #ade1e1 !important; }

.green-text { color: #59cbcb !important; }
.ic-alert { padding: 5px 15px !important; }
.mb30 { margin-bottom: 30px; }
.btn-link:focus, .btn-link:hover { text-decoration: none; }
.right-card-icon .btn { min-width: 10px; }
.right-card-icon .btn .glyphicon { padding: 0; }
.Course-superadmin .card-main .card h4 { color: #fff; font-size: 17px; font-weight: 400; }
.expand-collapse, .expand-collapse-drag { margin-bottom: 6px; }
.audience-grid .dataTables_wrapper .dataTables_length, .audience-grid .dataTables_wrapper .dataTables_filter { width: 50%; }
.Course-superadmin .panel { margin-bottom: 0; }
.search67width .dataTables_filter { width: 67%;}
.fild-box .con label, .click-card label { font-size: 15px !important; }
.QuestionBtn a { align-items: center; }
.QuestionBtn a>i { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.Course-superadmin .control-label { font-weight: 400; font-size: 15px; color: #1e1e1e; line-height: 40px; margin: 0; }
.due-date-label .control-label { line-height: normal; }

.date-input { position: relative; }
.date-input svg { width: 14px; height: 14px; position: absolute; top: 12px; right: 11px; }
.date-icon svg { width: 14px; height: 14px; }

#contentbgImg .form-control { height: auto; padding: 7px 12px 7px 12px; }
/*Only Fill In the Blank css*/
.mCustomScrollBox #answer6Div { height: auto !important; overflow: hidden; border: 0px !important; border-radius: 0px !important; padding: 0 0 !important;}
/*over Only Fill In the Blank css*/
.paragraph-texts { height: 120px !important; overflow: auto; border: 1px solid #e3e3e3; border-radius: 3px !important; padding: 6px 12px !important; }
.td-action { width: 10px; }
.status-box { line-height: 27px; margin-right: 15px; }
.status-fild { width: 120px !important; }

/* .ui-draggable { z-index: 9 !important; opacity: 0.8 !important; } */
.ui-draggable-dragging
{
 border: 1px dashed rgb(161, 161, 161) !important;
}
.que_note p { font-size: 13px; font-style: italic; }

.ic-btn i{color: #465362;}

/*.ic-btn i { display: inline-flex; display:-webkit-inline-flex; display:-webkit-inline-box; }*/






.logo { font-size: 22px; font-weight: 700; text-transform: uppercase; }
.p30 { padding: 30px !important; }
.import-data { display: flex; width: 100%; flex-direction: row; align-items: center; justify-content: space-between; background: #f0f8f8; border-radius: 5px; border: 1px dashed #a1a1a1; padding: 25px; }
.import-data .left-cnt { width: 70%; font-size: 16px; color: #969696; font-weight: 500; line-height: 30px; }
.import-data .left-cnt a { color: #3cc3bd; text-decoration: none; }
.import-data .left-cnt a:hover { text-decoration: underline; }
.import-data .right-upload-field { width: 30%; text-align: center; margin-left: 20px; }
.import-data .right-upload-field label { display: inline-block; width: 100%; max-width: 250px; background: #465362; border-radius: 4px; padding: 15px 20px; cursor: pointer; }
.import-data .right-upload-field label i { display: block; text-align: center; }
.import-data .right-upload-field label i svg { width: 38px; height: 38px; }
.import-data .right-upload-field label i svg path { fill: #fff; }
.import-data .right-upload-field label span { display: block; font-size: 20px; color: #fff; font-weight: 300; }
.import-data .right-upload-field input[type="file"] { display: none; }

.seprator-ui { display: block; text-align: center; margin: 30px 0; position: relative; }
.seprator-ui::before { content: ''; position: absolute; left: 0; right: 0; top: 13px; height: 1px; background: #e7e7e7; }
.seprator-ui > span { display: inline-block; font-size: 11px; color: #1e1e1e; font-weight: 600; background: #e7e7e7; height: 27px; width: 27px; line-height: 27px; text-align: center; border-radius: 50%; position: relative; }

.enter-manually { margin-top: 20px; }
.enter-manually h2 { font-size: 20px; color: #1e1e1e; font-weight: 600; text-align: center; }
.enter-manually .manually-data-grid { margin: 15px 0; }

.btm-buttons { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin-top: 30px; }
.btm-buttons > div { flex: 2; }
.btm-buttons .right { text-align: right; }
.btm-buttons .right .btn { text-align: center; }
.btm-buttons .right .btn:focus {color:#fff;}
.verify-cols { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.verify-cols .verify-cnt { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 275px; width: 35%; }
.verify-cols .verify-cnt i { display: block; }
.verify-cols .verify-cnt i svg { width: 35px; height: 35px; }
.verify-cols .verify-cnt i svg path { fill: #465362; }
.verify-cols .verify-cnt h3 { font-size: 20px; color: #465362; font-weight: 500; }
.verify-cols .verify-cnt .confirmation-buttons { margin-top: 20px; }
.verify-cols .verify-cnt .confirmation-buttons a { font-size: 18px; font-weight: 700; text-decoration: none; margin-right: 20px; }
.verify-cols .verify-cnt .confirmation-buttons a:first-child { color: #59cbcb; }
.verify-cols .verify-cnt .confirmation-buttons a:last-child { color: #6f7a87; }
.verify-cols .verify-cnt .confirmation-buttons a:hover { text-decoration: underline; }

.verify-cols .imported-preview { width: 75%; margin-left: 30px; }

.data-editing { display: block; }
.data-editing .editing-breadcrumbs { margin-left: -10px; margin-bottom: 30px; }
.data-editing .editing-breadcrumbs ul { display: flex; flex-flow: wrap; }
.data-editing .editing-breadcrumbs ul li { font-size: 18px; color: #b1b9c2; font-weight: 400; position: relative; padding: 0 20px 0 16px; }
.data-editing .editing-breadcrumbs ul li::after { content: ''; position: absolute; right: 0; top: 8px; background: url(../img/breadcrumb-arrow.png) no-repeat center; width: 6px; height: 10px; }
.data-editing .editing-breadcrumbs ul li.current { color: #465362; }
.data-editing .editing-breadcrumbs ul li.completed { color: #3cc3bd; padding-left: 35px; }
.data-editing .editing-breadcrumbs ul li.completed::before { content: ''; position: absolute; background: url(../img/complete-check.png) no-repeat center; width: 17px; height: 17px; left: 10px; top: 3px; }

.match-col-row { display: flex; flex-flow: wrap; margin-bottom: 30px; }
.match-col-row .match-grid { width: 50%; }
.match-col-row .grid-dir { width: calc(50% - 30px); margin-left: 30px; border: 1px dashed #c5cacf; border-radius: 5px; padding: 15px; }
.match-col-row .grid-dir ul { display: flex; flex-direction: column; }
.match-col-row .grid-dir ul li { width: 100%; font-size: 15px; color: #7f858b; font-weight: 400; padding-left: 25px; position: relative; margin: 7px 0; }
.match-col-row .grid-dir ul li:first-child { margin-top: 0; }
.match-col-row .grid-dir ul li::before { content: '';  position: absolute; left: 0; top: 2px; background: url(../img/complete-check.png) no-repeat center; width: 17px; height: 17px; }
.match-col-row .grid-dir .grid-dir-buttons { margin-top: 15px; }

.btn-default { color: #465362; background-color: #eff4f4; border-color: #dee7e7; }
.btn-default:hover, .btn.btn-default.focus, .btn.btn-default:focus, .btn.btn-default:hover, .btn-default.active.focus, .btn-default.active:focus, .btn-default.active:hover, .btn-default:active.focus, .btn-default:active:focus, .btn-default:active:hover, .open>.dropdown-toggle.btn-default.focus, .open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover { color: #333; background-color: #e7eded; border-color: #d8e0e0; }

.review-col-main { display: block; }
.review-col-main .review-switch { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.review-col-main .review-switch > p { flex: 2; margin: 0; margin-left: 10px; font-size: 16px; color: #747474; }
.review-col-main .review-grid { margin-top: 25px; }

.switch { position: relative; display: inline-block; width: 35px; height: 20px; margin: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; }
.slider:before { position: absolute; content: ""; height: 16px; width: 16px; left: 2px; bottom: 2px; background-color: white; -webkit-transition: .4s; transition: .4s; }
input:checked + .slider { background-color: #465362; }
input:focus + .slider { box-shadow: 0 0 1px #465362; }
input:checked + .slider:before { -webkit-transform: translateX(16px); -ms-transform: translateX(16px); transform: translateX(16px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

.courses-container { display: block; }
.courses-container .course-actions { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.courses-container .course-actions .left-btns a { font-family:Cuprum,sans-serif; display: inline-block; background: #e6e6e6; font-size: 16px; color: #757575; font-weight: 700; padding: 12px; min-width: 180px; text-align: center; text-transform: uppercase; border-radius: 3px; }
.courses-container .course-actions .left-btns a:hover { text-decoration: none; background: #d8d8d8; }
.courses-container .course-actions .left-btns a.active { background: #59cbcb; color: #fff; position: relative; }
.courses-container .course-actions .left-btns a.active::after { content: ''; position: absolute; width: 0; height: 0; border-style: solid; border-width: 6px 7px 0 7px; border-color: #59cbcb transparent transparent transparent; left: 50%; bottom: -6px; transform: translateX(-50%); }
.courses-container .course-actions .right-btns { float: right; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.courses-container .course-actions .right-btns a { width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #d9d9d9; border-radius: 3px; }
.courses-container .course-actions .right-btns a + a { margin-left: 5px; }
.courses-container .course-actions .right-btns a svg { width: 20px; height: 20px; }
.courses-container .course-actions .right-btns a:last-child svg { width: 16px; height: 16px; }
.courses-container .course-actions .right-btns a svg path { fill: #465362; }
.courses-container .course-actions .right-btns a.active { background: #465362; }
.courses-container .course-actions .right-btns a.active svg path { fill: #fff; }
.courses-container .coursesParent { display: flex; flex-flow: wrap; margin-right: -20px; }

.courseBlock { display: flex; flex-direction: column; background: #fff; border: 1px solid #e3e3e3; border-left: 3px solid #465362; padding: 12px 18px; position: relative; margin-top: 25px; transition: all ease .2s; }
.courseBlock::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 8.5px 0 8.5px 9px; border-color: transparent transparent transparent #465362; position: absolute; left: 0px; top: 20px; }
.courseBlock::after { content: ''; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 210 133" ><path d="M210.009,96.550 C210.009,99.887 208.027,102.778 205.193,104.003 C208.021,109.749 210.009,121.524 210.009,124.886 C210.009,129.367 206.459,133.000 202.095,133.000 C197.724,133.000 194.174,129.367 194.174,124.886 C194.174,121.524 196.156,109.749 198.984,104.003 C196.156,102.766 194.174,99.873 194.174,96.537 C194.174,93.347 196.013,90.640 198.635,89.316 L198.635,42.233 L105.412,79.460 C104.018,80.003 102.477,80.003 101.083,79.460 L0.947,39.489 C0.363,39.258 -0.012,38.682 -0.006,38.044 C0.001,37.401 0.398,36.832 0.985,36.620 L101.261,0.346 C102.549,-0.121 103.953,-0.121 105.234,0.346 L205.516,36.620 C206.091,36.832 206.498,37.401 206.498,38.044 C206.510,38.682 206.136,39.258 205.548,39.489 L205.548,89.323 C208.163,90.653 210.009,93.347 210.009,96.550 ZM105.406,87.072 L174.194,59.617 C174.180,71.115 174.180,84.650 174.180,86.788 C174.180,108.206 142.755,125.607 103.252,126.706 C63.741,125.607 32.321,108.193 32.321,86.788 C32.321,84.650 32.311,71.115 32.305,59.617 L101.077,87.072 C102.471,87.628 104.011,87.628 105.406,87.072 Z"/></svg>') no-repeat center; background-size: cover; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 210px; height: 133px; opacity: 0.03; max-width: 90%; }
.courseBlock:hover { box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07); margin-bottom: 5px; margin-top: 20px; transition: all ease .2s; }
.courseBlock.courseBlocknodata{width: calc(100% - 20px) !important;}
.courseBlock.courseBlocknodata::before{top: 15px;}
.courseBlock.courseBlocknodata::after{width: 65px;height: 42px;}



.courseTitle { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 7px 0; }
.courseTitle h2 { margin: 0; font-family:Cuprum,sans-serif; font-size: 20px; color: #3cc3bd; font-weight: 400; white-space: nowrap; flex: 2; width: 160px; overflow: hidden; text-overflow: ellipsis; margin-right: 10px; }
.courseTitle .right-action { position: relative; }
.courseTitle .right-action > a { display: inline-block; }
.courseTitle .right-action > a i { width: 20px; height: 20px; margin-right: 10px; }
.courseTitle .right-action > a i svg { width: 18px; height: 18px; }
.courseTitle .right-action > a i svg path { fill: #465362; }

.courseTitle .right-action > .action-dd { display: none; position: absolute; top: 100%; right: 0px; min-width: 210px; background: #f2f4f6; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.2); border-radius: 5px; z-index: 99;}
.courseTitle .right-action:hover > .action-dd { display: block; }
.courseTitle .right-action > .action-dd::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 0 8px 8px 8px; border-color: transparent transparent #f2f4f6 transparent; top: -8px; right: 10px; position: absolute; }
.courseTitle .right-action > .action-dd ul { display: flex; flex-direction: column; margin: 0; }
.courseTitle .right-action > .action-dd ul li { display: flex; flex-direction: column; width: 100%; border-bottom: 1px solid #ebebeb; }
.courseTitle .right-action > .action-dd ul li:last-child { border-bottom: none; }
.courseTitle .right-action > .action-dd ul li a { display: flex; flex-direction: row; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 500; color: #3a3a3a; text-decoration: none; padding: 10px 14px; }
.courseTitle .right-action > .action-dd ul li a:hover { background: #ebeced; text-decoration: none; color: #000; }
.courseTitle .right-action > .action-dd ul li a > i { width: 20px; height: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.courseTitle .right-action > .action-dd ul li a > i svg { width: 17px; height: 17px; }
.courseTitle .right-action > .action-dd ul li a > i svg path { fill: #59cbcb; }
.courseTitle .right-action > .action-dd ul li a > div { flex: 2; margin-left: 10px; }
.courseTitle .right-action > .action-dd ul li a > div span { display: block; font-size: 10px; }

.courseDtl { display: flex; flex-direction: column; margin-top: 15px; }
.courseDtl .dtl-row { display: flex; flex-direction: row; margin-bottom: 12px; }
.courseDtl .dtl-row > i { width: 25px; margin-top: 7px; }
.courseDtl .dtl-row > i svg { width: 18px; height: 18px; }
.courseDtl .dtl-row > i svg path { fill: #465362; }
.courseDtl .dtl-row > div { flex: 2; margin-left: 10px; font-size: 16px; color: #9a9a9a; line-height: 26px; }
.courseDtl .dtl-row.due-date > div { font-size: 16px; color: #000; line-height: 16px; font-weight: 500; }
.courseDtl .dtl-row.due-date > div span { display: block; font-size: 12px; color: #8c8c8c; line-height: 12px; }
.courseDtl .dtl-row .overflow-cnt { position: relative; overflow: hidden; }
.courseDtl .dtl-row .overflow-cnt::after { content: ''; position: absolute; left: 0; bottom: 0; background-image: -moz-linear-gradient( 90deg, rgb(255,255,255) 0%, rgba(255,255,255,0.70196) 100%); background-image: -webkit-linear-gradient( 90deg, rgb(255,255,255) 0%, rgba(255,255,255,0.70196) 100%); background-image: -ms-linear-gradient( 90deg, rgb(255,255,255) 0%, rgba(255,255,255,0.70196) 100%); width: 100%; height: 59px; }
.courseDtl .dtl-row .overflow-cnt > p { margin: 0; }
.courseDtl .dtl-row .overflow-cnt > a { font-size: 12px; color: #fff; font-weight: 500; text-transform: uppercase; display: inline-block; padding: 5px 8px; border-radius: 2px; background: #465362; line-height: normal; position: absolute; bottom: 0; left: 0; z-index: 10; }
.courseDtl .dtl-row .overflow-cnt > a:hover { text-decoration: none; background: #35404d; }

.courseBlock.ListView { width: calc(100% - 20px); }
.courseBlock.ListView .courseDtl .dtl-row .overflow-cnt { height: 80px; }

.courseBlock.GridView { width: calc(33.33% - 20px); margin-right: 20px; }
.courseBlock.GridView .courseDtl .dtl-row .overflow-cnt { height: 108px; }

.courseDetailsMain { display: flex; flex-direction: row; padding: 0; }
.courseDetailsMain .course-sidebar { width: 260px; background: #fff; box-shadow: 2px 0px 15px 0px rgba(0, 0, 0, 0.05); }
.courseDetailsMain .course-sidebar ul { margin: 1px 0; }
.courseDetailsMain .course-sidebar ul li { display: block; }
.courseDetailsMain .course-sidebar ul li a { display: block; padding: 12px 20px; font-size: 14px; color: #424242; font-weight: 500; }
.courseDetailsMain .course-sidebar ul li a:hover { text-decoration: none; background: #ededed; color: #000; }
.courseDetailsMain .course-sidebar ul li a.active { background: #465362; color: #fff; position: relative; }
.courseDetailsMain .course-sidebar ul li a.active::after { content: ''; background: url(http://localhost:8080/symmetry/symmetry/public/images/companyPanel/active-arrow.png) no-repeat center; background-size: cover; width: 22px; height: 17px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.courseDetailsMain .course-details { flex: 2; margin: 0 30px; }

.courseDetailsMain .courseTitle h2 { min-height: 50px; font-size: 20px; font-weight: 700; color: #465362; position: relative; padding-left: 60px;display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.courseDetailsMain .courseTitle h2::before { content: ''; position: absolute; left: 0; width: 50px; height: 50px; background: url(http://localhost:8080/symmetry/symmetry/public/images/companyPanel/course-ic.png) no-repeat center #465362; border-radius: 50%; }
.courseDetailsMain .courseTitle .due-date { display: flex; flex-direction: row; margin-right: 25px; }
.courseDetailsMain .courseTitle .due-date > i { width: 25px; margin-top: 7px; }
.courseDetailsMain .courseTitle .due-date > i svg { width: 18px; height: 18px; }
.courseDetailsMain .courseTitle .due-date > i svg path { fill: #465362; }
.courseDetailsMain .courseTitle .due-date > div { font-size: 16px; color: #000; line-height: 16px; font-weight: 500; }
.courseDetailsMain .courseTitle .due-date > div span { display: block; font-size: 12px; color: #8c8c8c; line-height: 12px; }

.courseDetailsMain .course-content { display: block; margin-bottom: 15px; }
.courseDetailsMain .course-content p { font-size: 16px; color: #9a9a9a; line-height: 26px; margin-bottom: 15px; }

.courseDetailsMain .courseSlides { display: block; margin-bottom: 25px; }
.courseDetailsMain .courseSlides ul { margin: 0; display: flex; flex-flow: wrap; margin-right: -15px; }
.courseDetailsMain .courseSlides ul li { width: calc(100%/2 - 15px); margin-right: 15px; margin-bottom: 10px; }
.courseDetailsMain .courseSlides ul li a { display: flex; flex-direction: row; align-items: center; justify-content: space-between; border-radius: 4px; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.05); background: url(http://localhost:8080/symmetry/symmetry/public/images/slide-block-bg.png) repeat center #fff; padding: 0 10px; transition: all ease .2s; }
.courseDetailsMain .courseSlides ul li a:hover { text-decoration: none; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2); transition: all ease .2s; }
.courseDetailsMain .courseSlides ul li a span.slideCount { width: 50px; font-size: 86px; color: rgba(0, 0, 0, 0.1); font-weight: 900; line-height: 75px; }
.courseDetailsMain .courseSlides ul li a span.slideTitle { flex: 2; font-size: 17px; color: #5f5f5f; font-weight: 500; margin-left: 15px; margin-right: 40px; }
.courseDetailsMain .courseSlides ul li a.completed { background: #465362; position: relative; }
.courseDetailsMain .courseSlides ul li a.completed::after { content: ''; position: absolute; right: 0; top: 0; width: 22px; height: 22px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 23px 18"><path fill="#ffffff" d="M0.254,10.338 C0.085,10.167 -0.000,9.912 -0.000,9.741 C-0.000,9.571 0.085,9.316 0.254,9.145 L1.438,7.954 C1.777,7.613 2.285,7.613 2.623,7.954 L2.708,8.039 L7.361,13.062 C7.531,13.232 7.784,13.232 7.954,13.062 L19.292,1.228 L19.377,1.228 L19.377,1.228 L19.377,1.228 C19.715,0.887 20.223,0.887 20.561,1.228 L21.746,2.420 C22.084,2.760 22.084,3.271 21.746,3.612 L21.746,3.612 L21.746,3.612 L8.207,17.744 C8.038,17.915 7.869,18.000 7.615,18.000 C7.361,18.000 7.192,17.915 7.023,17.744 L0.423,10.593 L0.254,10.338 Z"/></svg>') no-repeat center; background-size: cover; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.courseDetailsMain .courseSlides ul li a.completed span.slideCount { color: rgba(255, 255, 255, 0.1); }
.courseDetailsMain .courseSlides ul li a.completed span.slideTitle { color: rgba(255, 255, 255, 1); }
/* .svg-bg { background: url(data:image/svg+xml;utf8,<svg></svg>); } */

.meter { height: 12px; position: relative; background: #e9ebec; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; -webkit-box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.9),inset 0px 1px 1px 0px rgba(165, 165, 165, 0.5); -moz-box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.9),inset 0px 1px 1px 0px rgba(165, 165, 165, 0.5); box-shadow: 0px 1px 1px 0px rgba(255, 255, 255, 0.9),inset 0px 1px 1px 0px rgba(165, 165, 165, 0.5); }
.meter > span { display: block; height: 100%; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background-color: rgb(89, 203, 203); background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(89, 203, 203)), color-stop(1, rgb(89, 203, 203))); background-image: -moz-linear-gradient(center bottom, rgb(89, 203, 203) 37%, rgb(89, 203, 203) 69%); -webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.1), inset 0 -2px 6px rgba(0, 0, 0, 0.2); -moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.1), inset 0 -2px 6px rgba(0, 0, 0, 0.2); box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.1), inset 0 -2px 6px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden;border-radius: 5px;}
.meter > span:after, .animate > span > span { content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent)); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); z-index: 1; -webkit-background-size: 50px 50px; -moz-background-size: 50px 50px; -webkit-animation: move 2s linear infinite; -webkit-border-top-right-radius: 8px; -webkit-border-bottom-right-radius: 8px; -moz-border-radius-topright: 8px; -moz-border-radius-bottomright: 8px; border-top-right-radius: 8px; border-bottom-right-radius: 8px; -webkit-border-top-left-radius: 20px; -webkit-border-bottom-left-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-bottomleft: 20px; border-top-left-radius: 20px; border-bottom-left-radius: 20px; overflow: hidden; }
.animate > span:after { display: none; }
#myChart1-license-text { display: none; }
#myChart-license-text { display: none; }
#myChartStaff-license-text {display: none;}

@-webkit-keyframes move {
    0% { background-position: 0 0; }
    100% { background-position: 50px 50px; }
}

.chart-sorting { display: block; white-space: nowrap; text-align: right; }
.chart-sorting .form-control { font-family: 'Lato', sans-serif; font-size: 13px; color: #7d7c7c; font-weight: 400; height: 32px; padding: 0 20px 0 7px; display: inline-block; }
.chart-sorting .form-control + .form-control { margin-left: 10px; }
.squareCustom { height: 10px; width: 10px; background-color: #555; }
.slidesControls { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.slidesControls a.controls-arrow { width: 35px; height: 35px; background: #465362; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; }
.slidesControls a.controls-arrow svg { width: 14px; height: 14px; }
.slidesControls a.controls-arrow svg path { fill: #fff; }
.slidesControls .slideProcess { width: 85%; max-width: 320px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.slidesControls .slideProcess .meter.animate { flex: 2; }
.slidesControls .slideProcess .slide-info { white-space: nowrap; font-size: 13px; color: #acacac; margin-left: 10px; }

.slideContent { background-color: #fff !important; box-shadow: 0 0 10px 0 rgba(147,147,147,.1); border-radius: 15px; padding: 25px; margin: 20px 0; min-height: 300px; }
.slideContent h2 { margin: 0; font-size: 28px; color: #465362; font-weight: 300; margin-bottom: 25px; }
.slideContent p { margin: 0; font-size: 16px; color: #8f8f8f; line-height: 26px; margin-bottom: 12px; }

.quizMain { padding: 0; }
.quiz-wrapper { width: 90%; max-width: 970px; margin: 30px auto; }
.quiz-title { text-align: center; padding: 20px; background: #fff; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); width: 100%; }
.quiz-title h2 { margin: 0; font-family:Cuprum,sans-serif; font-size: 26px; color: #465362; font-weight: 700; }

.quiz-container { display: block; }
.quiz-container .quiz-que { display: flex; flex-direction: row; align-items: center; justify-content: space-between; margin: 20px 0; }
.quiz-container .quiz-que .quiz-count { width: 50px; height: 60px; line-height: 60px; margin-right: 15px; position: relative; font-size: 40px; color: #465362; font-weight: 700; text-align: center; }
.quiz-container .quiz-que .quiz-count > span { position: absolute; left: 0; bottom: 0; width: 50px; height: 30px; background: #59cbcb; overflow: hidden; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.quiz-container .quiz-que .que-text { flex: 2; font-family: Cuprum,sans-serif; font-size: 22px; color: #465362; font-weight: 400; }
/*.quiz-container .quiz-options { display: block; margin: 50px 70px; }*/
/*.quiz-container .quiz-options { display: block; margin: 20px 70px; }*/
.quiz-container .quiz-options { display: block; margin: 20px 110px; }
.quiz-container .quiz-options ul.optn-listing { display: block; padding: 0;}
/*.quiz-container .quiz-options ul.optn-listing li { display: block; margin: 12px 0; font-size: 16px; color: #727272; }*/
.quiz-container .quiz-options ul.optn-listing li {
    font-size: 15px;
    background: #59cbcb3b;
    width: 100%;
    padding: 10px 0 10px 10px;
    margin: 5px 0;
    border-radius: 4px;
    /*display: block; margin: 12px 0; color: #727272;*/
}


/*** devang***/
.quiz-options ul li .custom-control-label::before,
.quiz-options ul li .custom-control-label::after{
  height: 22px;
  width: 22px;
}
.quiz-options ul li .custom-control-label::before{
  background: #fff;
  top: 0px;
  left: 0px;
}
.quiz-options ul li .custom-control-label::after{
  top: 0px;
  left: 0px;
}
/*** devang end***/


.quiz-container .quiz-options ul.optn-listing li label { font-weight: normal; padding: 0 0 0 30px; }

.quiz-wrapper .que-info { display: block; text-align: right; font-size: 14px; color: #727272; margin-top: 30px; }

.quizMain .wrapper { max-width: 1024px; width: 96%;  margin: 0 auto; }

.quiz-wrapper .result-score { padding: 50px 0; text-align: center; }
.quiz-wrapper .result-score > i { display: block; margin-bottom: 20px; }
.quiz-wrapper .result-score > i svg { width: 70px; height: 70px; }
.quiz-wrapper .result-score.success > i svg path { fill: #59cbcb; }
.quiz-wrapper .result-score.fail > i svg path { fill: #fb5e5f; }
.quiz-wrapper .result-score h3 { font-family: Cuprum,sans-serif; font-size: 25px; font-weight: 400; margin: 10px 0; }
.quiz-wrapper .result-score.success h3 { color: #465362; }
.quiz-wrapper .result-score.fail h3 { color: #fb5e5f; }
.quiz-wrapper .result-score p { font-size: 17px; color: #9d9d9d; line-height: 24px; }
.quiz-wrapper .results-btns { margin-top: 40px; }
.quizNote { color: #f00; }

.reviewBlock { display: block; padding: 30px 0; background: #fff; }
.reviewBlock .results-grid { display: block; }
.reviewBlock .results-grid h3 { font-size: 28px; color: #465362; font-weight: 300; margin: 0; margin-bottom: 25px; text-align: center; }

.uitable { border: 1px solid #e3e3e3; font-size: 14px; color: #5d5d5d; }
.uitable th, td { padding: 12px 15px; }
.uitable thead { border-bottom: 1px solid #cecece; background: #f5f5f5; color: #242424; font-size: 15px; font-weight: 500; }
.uitable tbody tr:nth-child(odd) { background: #fff; }
.uitable tbody tr:nth-child(even) { background: #f6f6f6; }

.incorrect-text { color: #db5656 !important; }
.correct-text { color: #3cc3bd !important; }
.partially-text { color: #21a267 !important; }
.question-text {width: 410px;}
.sidebarmobile { display: none; }

.table.responsive-table { display: block; overflow: auto; }

/*Free Choice Start*/
.quiz-container .paragraph-texts { border: 1px solid #e3e3e3; border-radius: 3px; padding: 15px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; display: block; width: 100%;min-height: 140px;
    overflow: inherit;height: auto; }
.paragraph-texts-select { width: 100px; border-bottom: 1px dashed #000; display: inline-block; height: 17px; position: relative; }
.paragraph-texts-select ul { position: absolute; width: 130px; margin: 0; border: 1px solid #f0f0f0; top: 17px; cursor: pointer; display: none; box-shadow: 0px 0px 3px 0 rgba(0,0,0,0.3); background: #ffffff; }
.paragraph-texts-select li{font-size: 13px;padding: 7px 8px;border-bottom: 1px solid #f0f0f0;line-height: 13px;color: #000;}
.paragraph-texts-select li:hover { background: #59cbcb;color: #fff; }
.after-select svg{width: 8px;height: 8px;}
.after-select { border-bottom: 1px dashed #000; color: #59cbcb; }
.after-select a { background: #59cbcb; border-radius: 50%; width: 20px; height: 20px; display: inline-block; text-align: center; cursor: pointer; line-height: 18px; }
.after-select svg path { fill: #ffffff; }
.blank-space-box { width: 100px; border-bottom: 1px dashed #000; display: inline-block; height: 23px; }
/*Free Choice End*/

/*Sorting Choice Start*/
.sorting-choice-box { border: 1px solid #e9e9e9; border-radius: 2px; padding: 0 10px; background: #fff; }
.sorting-choice-dd { background: #ecf9f9; margin: 10px 0; padding: 8px 15px; border-radius: 2px; overflow: hidden; border: 1px dashed #a1a1a1; font-size: 16px; display: flex; color: #9b9b9b; cursor: pointer; }
.sorting-choice-dd svg { width: 14px; height: 14px; margin-right: 12px; }
.sorting-choice-dd p { margin-bottom: 0px; }
/*Sorting Choice End*/

/*Matrix Sorting Start*/
.matrix-sorting-left{display: inline-block;border: 1px solid #e9e9e9;border-radius: 2px;padding:10px;background: #fff;width: 1067px;}
.matrix-sorting-center{display: inline-block;border: 1px solid #e9e9e9;border-radius: 2px;padding:10px;background: #fff;width: 80%;}
/*.matrix-sorting-left-main, .matrix-sorting-right-main{background: #ecf9f9;padding: 10px;border-radius: 2px;overflow: hidden;border: 1px solid #dedede;font-size: 16px;display: flex;color: #6f6f6f;min-height: 193px;flex-direction: column;line-height: 20px;justify-content: center;text-align: center;width: 100%;float: left;margin-bottom: 15px;}*/
.matrix-sorting-left-main span img{
  height: 210px;
  background-size: 100%;
  max-width: 100%;
 width: 100%;
}
.matrix-sorting-right-main_text ul li{
  display: block;
  /*margin: 0 auto !important;*/
  text-align: center !important;
  width: 100% !important;
}
.matrix-sorting-right-main ul li{
  display: block;
  /*margin: 0 auto !important;*/
  text-align: center !important;
  width: 100% !important;
}
.matrix-sorting-left-main
{background: #ecf9f9;padding: 0px;border-radius: 2px;overflow: hidden;border: 1px solid #dedede;font-size: 16px;display: flex;color: #6f6f6f;/*min-height: 130px;*/flex-direction: column;line-height: 20px;justify-content: center;text-align: center;width: 100%;float: left;margin-bottom: 15px;     height: 210px/*130px*/ !important;}
.matrix-sorting-right-main{background: #ecf9f9;padding: 10px;border-radius: 2px;overflow: hidden;border: 1px solid #dedede;font-size: 16px;display: flex;color: #6f6f6f;flex-direction: column;line-height: 20px;justify-content: center;text-align: center;width: 100%;float: left;margin-bottom: 10px;height: 100px /*auto*/ !important; min-height: 40px;}
.matrix-sorting-left-main_text, .matrix-sorting-right-main_text{background: #ecf9f9;padding: 10px;border-radius: 2px;overflow: hidden;border: 1px solid #dedede;font-size: 16px;display: flex;color: #6f6f6f;flex-direction: column;line-height: 20px;justify-content: center;text-align: center;width: 100%;float: left;margin-bottom:10px; height: 100px !important; min-height: 40px;}
.matrix-sorting-left-main_text span
{
  padding: 0px 0;
  text-align: left;
  line-height: 20px;
  min-height: 90px;
}
#answerDiv ul li
{
  padding:10px;
}

.modal-body .matrix-sorting-left-main, .modal-body .matrix-sorting-right-main { width:48%; }
.matrix-sorting-left-main {margin-right: 15px;}
.matrix-sorting-right .matrix-sorting-left-main{border: 1px dashed #a1a1a1;}
/*.matrix-sorting-left-main {margin-right: 15px;flex: 1;}
.matrix-sorting-right-main {flex: 1;}*/
.matrix-sorting-left-main, .matrix-sorting-right-main img{height: 170px;}
#questionDiv .matrix-sorting-left-main, #questionDiv .matrix-sorting-right-main img{height: 170px;}
.matrix-sorting-right-main ul{height: auto !important;margin: 0;}
#answerDiv{border: 1px solid #e4e4e4;border-radius: 2px;padding: 10px 10px 0px 10px;background: #ededed;display: inline-block;margin-bottom: 20px;width: 100%;}
.dragDropSmallBox{border: 1px dashed #a1a1a1;background: #ecf9f9;padding: 6px;border-radius: 2px;height: 135px;display: flex;flex-direction: column;line-height: 20px;justify-content: center;text-align: center;font-size: 15px;width: 24%;float: left;margin: 5px 10px 5px 0;}
.dragDropSmallBox:nth-child(4n){margin-right: 0px;}
.dragDropSmallBox img {width: 100%;height: 100%;object-fit: cover;}
.matrix-sorting-main-loop img {width: 200px;height: 150px;object-fit: cover;margin: 0 auto;}
.matrix-sorting-left .dragDropSmallBox, .matrix-sorting-left .destinationBox{background: #ecf9f9;padding: 10px;border-radius: 2px;overflow: hidden;border: 1px solid #dedede;font-size: 16px;display: flex;color: #6f6f6f;min-height: 172px;flex-direction: column;line-height: 20px;justify-content: center;text-align: center;width: 49%;margin: 0 15px 15px 0;}
.matrix-sorting-left .dragDropSmallBox img, .matrix-sorting-left .destinationBox img{width: 200px;height: 150px;object-fit: cover;margin: 0 auto;}
.destinationBox .dragDropSmallBox{margin: 0px; padding: 0; border: 0; width: auto; min-height: auto;}
#dragContent{   position:absolute;width:150px;height:198px;display:none;margin:0px; padding:0px; z-index:2000;}
#dragDropIndicator{ position:absolute;width:7px;height:10px; display:none;z-index:1000;margin:0px; padding:0px; }
/*Matrix Sorting End*/

.paragraph-texts-input input{border: 0px;border-bottom: 1px dashed #000;height: 17px; width:100px;}

.glyphicon.glyphicon-question-sign { color: #72849c; font-size: 16px; }
.glyphicon.glyphicon-question-sign:hover { color: #23527c; }

.next-prev a, .next-prev .btn { width: auto; }

svg.info-svg-ic { width: 12px; height: 12px; }
svg.info-svg-ic path { fill: #59cbcb; }
/*Help Start*/
.help-category h3{font-size: 22px;color: #59cbcb;margin: 0 0 15px 0;font-family: Cuprum,sans-serif;}
.help-category ul{margin-bottom: 20px;}
.help-category li a{font-size: 16px;color: #465362;padding: 5px 0;display: inline-block;position: relative;padding-left: 18px;}
.help-category li a::after{position: absolute;top: 15px;left: 0px;width: 6px; height: 6px;background: #59cbcb;border-radius: 50%;content: "";}
.help-category li a:hover{text-decoration: none;}
.help-article-box p{font-size: 16px;color: #465366;line-height: 25px;margin-bottom: 25px;}
/*Help End*/


.Cancelling-text p {font-size: 15px;}
.validation .erorMsg{top: 69px;white-space: normal;left: 15px;}
.course-checkBox form:last-child .error_msg{position: relative;top: 0;}

.mt-8 { margin-top: 8px; }
.loginMain .cardRight .error_msg{position: relative;top: 0;}

td.added-row { position: relative; }
td.added-row > i.fa { position: absolute; right: -12px; top: 20px;background: red;width: 20px;height: 20px;line-height: 20px;text-align: center;color: #fff;border-radius: 50%;}
th.added-col { position: relative; }
th.added-col > i.fa { position: absolute; right: 0px; top: 20px;background: red;width: 20px;height: 20px;line-height: 20px;text-align: center;color: #fff;border-radius: 50%;}

.opti-box-main ul { margin: 0px; }
.opti-box-main li { width: 24%; float: left; border: 1px dashed #a1a1a1; background: #ecf9f9; padding: 6px; border-radius: 2px; height: 135px; display: flex; flex-direction: column; line-height: 20px; justify-content: center; text-align: center; font-size: 15px; margin-right: 10px; margin-bottom: 10px; }
.opti-box-main li:nth-child(4n) { margin-right: 0px; }
.opti-box-main li img { width: 100%; height: 100%; object-fit: cover; }
.ui-sortable-handle { cursor: pointer; }

.courses-time-select .multiselect-container { border-style: solid; border-width: 1px; border-color: rgb(231, 231, 231) !important; background-color: rgb(255, 255, 255); box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.18); border-radius: 0px; }
.courses-time-select .multiselect-container > li > a > label { padding: 5px 20px 5px 30px; }
/*
.course_dd1 a { background: #c1cfea !important; }
.course_dd2 a { background: #ead1a4 !important; }
.course_dd3 a { background: #b4dea9 !important; }
.course_dd4 a { background: #d4bae9 !important; }
.course_dd5 a { background: #bae8e9 !important; }
*/

.course_dd1 a { background: #fff; }
.course_dd2 a { background: #fff; }
.course_dd3 a { background: #fff; }
.course_dd4 a { background: #fff; }
.course_dd5 a { background: #fff; }

.courses-time-select .multiselect-container > li a{border-bottom: 1px solid #fff;}
.courses-time-select .multiselect-container > li > a > label{color: #000;}
.courses-time-select .multiselect-container > li:last-child a{border: 0px;}

.contentImg .upload-label { width: 100%; float: left; display: flex; justify-content: center; }
.contentImg .inputfile + label svg { width: 45px; height: 47px; margin-right: 0; color: #fff; background: rgba(0, 0, 0, 0.7); padding: 10px; margin-top: 0px !important; }
.contentImg .upload-label span { float: left; margin-left: 3px; }

.subscription-error { display: flex; flex-direction: column; justify-content: center; padding: 35px 40px; }
.subscription-error p { font-size: 20px; line-height: 27px; color: #000; text-align: center; }
.subscription-error h6 { font-size: 45px; color: #f00; font-weight: 600; margin: 0 0 25px 0; text-align: center; }
.subscription-error-header .logo svg { width: 250px;height: 60px; margin: 0 auto; }
.subscription-error-header .logo svg path { fill: #fff; }
.subscription-error-header { width: 100%; background: #58caca; text-align: center; padding: 20px; box-shadow: 0px 0px 17px 0px rgba(89, 203, 203, 0.25); position: absolute; top: 0; }
.subscription-card { min-height: 210px !important; }
.main-loader-top { position: absolute; z-index: 9; top: 50%; right: 50%; transform: translateY(-50%); }
.courseList-add-btn { display: flex; }
.courseList-add-btn i{display: inherit;}
/*.erorMsg { color: red; position: initial;}*/
.erorMsg { color: #F00000; position: initial;}
#Loginloading {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  background-color: rgba(192, 192, 192, 0.5);
  background-image: url(../../images/loading.gif);
  background-repeat: no-repeat;
  background-position: center;
}


.courseLastBtn{justify-content: inherit;}
.courseLastBtn-row{flex: 1;display: inline-flex;}
.courseLastBtn-row a{display: initial;}
.courseLastBtn .btn{margin-right: 15px;}

.success-cnt { text-align: center; padding-top: 140px !important; }
.success-cnt .pass-success-msg > img { margin-bottom: 15px; }
.success-cnt .pass-success-msg a { display: inline-block; margin-top: 10px; color: #ffffff; }
.success-cnt .pass-success-msg a:hover { text-decoration: none; }

/*dROP dOWN sTART*/
.dropdown-submenu > .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none !important;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0 !important;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc !important;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
.dropdown-submenu > .dropdown-menus {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none !important;
    float: left;
    min-width: 200px;
    padding: 5px 0;
    margin: 2px 0 0 !important;
    font-size: 14px;
    text-align: left;
    list-style: none;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc !important;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175);
}
    .open > .dropdown-menu {
    display: block !important;
}
.dropdown-submenu.open {
    position: relative;
}
.dropdown-menu a {
    color: #000 !important;
    padding: 10px 20px !important;
    border-bottom: 1px solid #efefef;
}
ul.dropdown-menu {
    padding: 0px;
}

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menus {
  top: 0;
  left: 100%;
  height: 60vh !important;
  overflow-y: auto !important;
}

.dropdown-submenu:hover > .dropdown-menus {
    display: block !important;
    height: max-content !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
}
.dropdown-menus::-webkit-scrollbar { 
	width: 2px; 
}
.dropdown-menus::-moz-scrollbar { 
	width: 2px; 
}
.dropdown-menus::-webkit-scrollbar-thumb {
 	-webkit-border-radius: 10px; 
 	border-radius: 20px;
 	background: rgba(211,211,211);  
 }
.dropdown-menus::-moz-scrollbar-thumb { 
	-moz-border-radius: 10px; 
	border-radius: 20px;
	background: rgba(211,211,211);  
}

.dropdown-submenus .dropdown-toggle:after{
  content: "";
  margin-top: 6px;
  margin-right: 0px;
  float: right;
  /*border-left: 4px solid;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;*/
}
/* .dropdown-submenu > .dropdown-menus li a:hover{
	background: #5e8a8a;
} */
/*DropDown Over*/

.chipBox .leftCnt h4 {
    font-family: "Lato", sans-serif;
    font-size: 30px;
    color: #465362;
    font-weight: 700;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.permi-bdr{border-left:2px solid #797676;}




.label-block label{
	display: block !important;
	text-align: left;;
}

.btn-mr-bt{margin-top: 25px;}



.caret-right{
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid transparent;
    border-top: 4px solid\9;
    border-right: 4px solid transparent;
    border-left: 4px dashed;
    border-bottom: 4px solid transparent;
}
/* Add css 03-10- */

.st-question-type{

}


.st-question-type .nav-tabs{border-bottom: 1px solid transparent;}

.st-question-type input{
	margin: 0px;
}


.board{
width: 100%;
margin: 0px auto;
/*height: 500px;*/
background: #fff;
/*box-shadow: 10px 10px #ccc,-10px 20px #ddd;*/
}
.board .nav-tabs {
    position: relative;
    /* border-bottom: 0; */
    width: 100%;
    margin: 0px auto;
    margin-bottom: 0;
    box-sizing: border-box;
     display: flex;
    justify-content: space-between;
}

p.narrow{
    width: 60%;
    margin: 10px auto;
}


.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
    color: #555555;
    cursor: default;
    /* background-color: #ffffff; */
    border: 0;
    border-bottom-color: transparent;
}


.round-tabs-iiner{
    display: flex;
    align-items: center;
    flex-direction: column;
}


.round-tabs-iiner img{
    margin-bottom: 10px;
}

.round-tabs-iiner span{
    font-size: 14px;
    color: #1e1e1e;

}

span.round-tabs{
    width: 100%;
    height: 100px;
    /* line-height: 70px; */
    display: inline-block;
    border-radius: 5px;
    background: white;
    z-index: 2;
    position: absolute;
    left: 0;
    text-align: center;
    font-size: 25px;
    border: 1px solid #59cbcb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #1e1e1e;
}

span.round-tabs.one{
    color: rgb(34, 194, 34);border: 2px solid rgb(34, 194, 34);
}

li.active span.round-tabs.one{
    background: #fff !important;
    border: 2px solid #ddd;
    color: rgb(34, 194, 34);
}

span.round-tabs.two{
    color: #febe29;border: 2px solid #febe29;
}

li.active span.round-tabs.two{
    background: #fff !important;
    border: 2px solid #ddd;
    color: #febe29;
}

span.round-tabs.three{
    color: #3e5e9a;border: 2px solid #3e5e9a;
}

li.active span.round-tabs.three{
    background: #fff !important;
    border: 2px solid #ddd;
    color: #3e5e9a;
}

span.round-tabs.four{
    color: #f1685e;border: 2px solid #f1685e;
}

li.active span.round-tabs.four{
    background: #fff !important;
    border: 2px solid #ddd;
    color: #f1685e;
}

span.round-tabs.five{
    color: #999;border: 2px solid #999;
}

li.active span.round-tabs.five{
    background: #fff !important;
    border: 2px solid #ddd;
    color: #999;
}

.st-question-type .nav-tabs > li.active > a span.round-tabs{
    /* background: #fafafa; */
    border: 2px solid #59cbcb;
}
.st-question-type .nav-tabs > li {
    width: 14%;
    width: 13%;
    margin-right: 18.5px;
}

.st-question-type .nav-tabs > li:last-child{
    margin-right: 0px;
}



.st-question-type .nav-tabs > li:after {
    content: " ";
    position: absolute;
    left: 45%;
   opacity:0;
    margin: 0 auto;
    bottom: 0px;
    border: 5px solid transparent;
    border-bottom-color: #ddd;
    transition:0.1s ease-in-out;

}
.st-question-type .nav-tabs > li.active:after {
    content: " ";
    position: absolute;
    left: 44%;
   opacity:1;
    margin: 0 auto;
    bottom: 0px;
    border: 10px solid transparent;
    border-top-color: #59cbcb;

}
.st-question-type .nav-tabs > li a{
   width: 100%;
   height: 100px;
   margin: 20px auto;
   border-radius: 100%;
   padding: 0;
}
.st-question-type .nav-tabs > li a:hover{
    background: transparent;
}

.tab-content{
    border: 2px  solid #59cbcb;
    border-radius: 5px;
    padding: 20px;
    background: #fff;
}
.st-question-type .tab-pane{
   position: relative;
   /* padding-top: 50px; */
}
.tab-content .head{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 25px;
    text-transform: uppercase;
    padding-bottom: 10px;
}
.btn-outline-rounded{
    padding: 10px 40px;
    margin: 20px 0;
    border: 2px solid transparent;
    border-radius: 25px;
}

.btn.green{
    background-color:#5cb85c;
    /*border: 2px solid #5cb85c;*/
    color: #ffffff;
}





@media( max-width : 585px ){

    .board {
width: 90%;
height:auto !important;
}
    span.round-tabs {
        font-size:16px;
width: 50px;
height: 50px;
line-height: 50px;
    }
    .tab-content .head{
        font-size:20px;
        }
.st-question-type .nav-tabs > li a {
width: 50px;
height: 50px;
line-height:50px;
}

.st-question-type .nav-tabs > li.active:after {
content: " ";
position: absolute;
left: 35%;
}

.btn-outline-rounded {
    padding:12px 20px;
    }
}


.add-pls {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(89, 203, 203);
    border-radius: 3px;
    background-color: rgb(255, 255, 255);
    width: 40px;
    height: 40px;
    color: #000;
}


.add-pluse .fa-plus::before {
    color: #59CBCB;
}

.add-pluse {
    float: left;
    width: 100%;
}

.que-feedback-like{
    background: #24c960;
    padding: 10px 20px;
    display: flex;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
}

.que-feedback-dislike{
    background: #ff745b;
    padding: 10px 20px;
    display: flex;
    border-radius: 5px;
    align-items: center;
    justify-content: center;
}




.que-delete svg {
    width: 17px;
    height: 17px;
    margin: 0 3px;
    cursor: pointer;
}
.que-delete svg path {
    fill: #b76262;
}


.content-image{
	margin-top: 20px;
}


.courseQuestion-rdo{
	text-align: center;
	margin: -6px 0px;
}

.que-switch .switch{
	margin: 15px 0px 0px 0px
}


.add-btn-que {
    border-style: solid;
    border-width: 1px;
    border-color: rgb(60, 195, 189);
    border-radius: 3px;
    background-color: rgb(255, 255, 255);
    box-shadow: 0px 0px 1.8px 0.2px rgba(153, 153, 153, 0.004);
    padding: 10px 15px;
    height: 40px;
    color: #1e1e1e;
    font-size: 14px;
    font-family: "Lato", sans-serif;
    font-weight: 400;
    margin: 14px 10px 0px 0px;
    display: inline-block;
    cursor: pointer !important;
}


.que-matrix-radio{
	margin-left: 20px;
	padding: 10px 0px;
}


.image-upload > input
{
    display: none;
}

.image-upload{
    position: relative;
}

.image-upload label{
	height: 110px;
 	border:1px solid #e7e7e7;
    border-radius: 2px;
    background: #e7ffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    background-size: cover;
    background-repeat: no-repeat;
}

.image-upload img
{
    width:30px;
    cursor: pointer;
}


.que-add-delete{
	width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-que{
	padding-bottom:15px;
}

.add-que a{
	margin-top: 6px;
}

.que-modal-radio{
	margin: -6px 25px;
}

.st-question-type span.blank_ans {
    border: 1px solid gray;
}
.st-question-type a.disabled {
  pointer-events: none;
  cursor: default;
  color: black;
  background: #e2e2e2;
}

.removeThis {
    border-top: 1px solid #959595;
    border-right: 1px solid #959595;
    border-bottom: 1px solid #959595;
    padding: 0px 5px;
}
.removeThis img{
  width: 8px;
  margin: 0px 0px 3px 0px;
}
.editThis {
    border-top: 1px solid #959595;
    border-right: 1px solid #959595;
    border-bottom: 1px solid #959595;
    padding: 0px 5px;
}
.editThis img{
  width: 16px;
  margin: 0px 0px 3px 0px;
}
#preview6Div .removeThis
{
  display:none;
}
#preview6Div .editThis
{
  display:none;
}

#preview6Div .blank_ans
{
  display:none;
}
#preview6Div .fill_blank:before{

  content:"__________" !important;
}


.st-question-type span.blank_ans {
    border: 1px solid #959595;
}

.upload-img-btn{ display: flex;
    align-items: center;
}

#video_file_preview {
    margin-top: 15px;
}

.contentvideo_filename{
    color: #51abc9;
    margin-left: 20px;
}

#hotspotcontent_file_name{
    color: #51abc9;
    margin-left: 20px;
}

#hotspotque_file_name {
    color: #51abc9;
    margin-left: 20px;
}




@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .loginMain .loginCard { height: 400px; }
}


/* responsive classes */
@media only screen and (max-width: 991px) {
    .navbar ul li a { padding: 10px 15px; }
    .courseBlock.GridView { width: calc(50% - 20px); }
    .courseDetailsMain .course-sidebar { width: 230px; }
    .courseDetailsMain .course-sidebar ul li a { padding: 10px 16px; font-size: 13px; }
    .breadcrumbs ul li { font-size: 15px; padding: 8px 10px 8px 17px; }
    .courseDetailsMain .courseTitle h2::before { width: 40px; height: 40px; }
    .courseDetailsMain .courseTitle h2 { font-size: 18px; min-height: 40px; padding-left: 50px; }
    .courseDetailsMain .course-content p { font-size: 15px; line-height: 23px; }
    .courseDetailsMain .courseSlides ul li a { padding: 0 5px; }
    .courseDetailsMain .courseSlides ul li a span.slideCount { width: 35px; line-height: 65px; font-size: 76px; letter-spacing: -1px; }
    .courseDetailsMain .courseSlides ul li a span.slideTitle { font-size: 15px; }
    .slidesControls .slideProcess .slide-info { font-size: 12px; }
    .slideContent h2 { font-size: 24px; }
    .slideContent p { font-size: 14px; line-height: 22px; margin-bottom: 10px; }
    .quiz-container .quiz-que .quiz-count { width: 40px; height: 50px; line-height: 50px; font-size: 37px; }
    .quiz-container .quiz-que .quiz-count > span { width: 40px; height: 25px; }
    .quiz-container .quiz-que .que-text { font-size: 18px; }
    .quiz-container .quiz-options { margin: 35px 50px; }
    .quiz-wrapper .que-info { font-size: 13px; }
    .quiz-wrapper .result-score > i svg { width: 60px; height: 60px; }
    .quiz-wrapper .result-score h3 { font-size: 22px; }
    .quiz-wrapper .result-score p { font-size: 14px; line-height: 20px; }
    .quiz-wrapper .results-btns { margin-top: 25px; }
    .quiz-title h2 { font-size: 21px; }
    .reviewBlock .results-grid h3 { font-size: 21px; }
     .btn-mr-bt {
    margin-top: 0px;
    margin-bottom: 15px;
    text-align: left;
}

}

@media only screen and (max-width: 800px) {
    body { font-size: 14px; }
}

@media only screen and (max-width: 767px) {
    .containerMain { padding: 16px; }
    .navbar { display: none; padding: 0; background: #39b8b8; }
    header .navbar { padding: 0; display: none; }
    .navbar ul { flex-direction: column; border-left: none; width: 100%; }
    .navbar ul li { width: 100%; }
    .navbar ul li a.active:after { right: auto; top: 0; width: 3px; height: 100%; }
    .mobileNav { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dt-buttons, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate { width: 100%; }
    .dataTables_wrapper .dataTables_paginate { text-align: center; }
    .pageTitle h1 { font-size: 22px; margin-top: 5px; }
    .pageContent { margin-top: 15px; }
    .breadcrumbs ul li { font-size: 12px; }
    .breadcrumbs ul li { padding: 8px 9px 8px 16px; }
    .Course-superadmin { padding: 0 15px; }
    .card h4, .panel-body-title h3 { font-size: 23px; }
    .Course-superadmin .control-label { font-size: 13px; line-height: normal; margin-bottom: 3px; }
    .form-group { margin-bottom: 20px; }
    textarea.form-control { height: 140px; }
    .note-box { font-size: 12px; }
    .sub-pagedir { font-size: 18px; padding: 12px 15px; }
    .expand-collapse a, .expand-collapse-drag a { font-size: 12px; }
    .Course-superadmin .card-main .card h4 { font-size: 15px; }
    .search-box input { font-size: 13px; }
    .fild-box .con label, .click-card label { font-size: 13px !important; }
    .drop-icon { width: 24px; height: 24px; }
    .drop-icon::before { font-size: 12px; }
    .drop-icon .drop-icon-open { height: 24px; }
    .drop-icon-open a { width: 24px; }
    .fild-box .con label { line-height: 24px; }
    .card-main .card { padding: 3px; margin-bottom: 10px; }
    .hoverpencil-edit input { height: 24px; padding: 0 6px; font-size: 12px; }
    .hoverpencil-edit a { width: 24px; height: 24px; }
    .hoverpencil-edit a .glyphicon { font-size: 12px; }
    .form-control { font-size: 13px; }
    .mt-4 { margin-top: 20px; }
    .chipBox { margin-bottom: 12px; }
    .table-responsive { margin-top: 15px; }
    .course-overview-head { flex-direction: column; padding: 0 10px; }
    .sitemap-in h1 { margin-bottom: 10px; }
    .top-course-title>a { margin-bottom: 20px; }
    .shadowCard .boxContent { padding: 12px; }
    .sitemap-left-in { margin-left: 20px; }
    .sitemap-right-in>.col-xs-12 { padding: 0 10px; }
    .sitemap-in h1 { font-size: 14px; }
    .sub-section-list li { font-size: 13px; padding-left: 12px; }
    .sub-section-list li::before { width: 4px; height: 4px; top: 7px; }
    .btn { font-size: 12px; min-width: 80px; }
    .dataTables_wrapper table.dataTable tbody tr td { font-size: 12px; padding: 9px 10px; }
    .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { font-size: 12px; padding: 4px 10px; }

    .import-data { flex-direction: column; }
    .import-data .left-cnt { width: 100%; font-size: 15px; line-height: 26px; }
    .import-data .right-upload-field { width: 100%; margin-top: 20px; }
    .enter-manually h2 { font-size: 17px; }
    .breadcrumbs ul { flex-direction: unset; flex-flow: wrap; }
    .verify-cols { flex-direction: column; }
    .verify-cols .verify-cnt { width: 100%; text-align: center; }
    .verify-cols .imported-preview { width: 100%; }
    .match-col-row .match-grid { width: 100%; }
    .match-col-row .grid-dir { width: 100%; margin-left: 0; margin-top: 20px; }
    .review-col-main .review-switch > p { font-size: 13px; }

    .card-header h4 { font-size: 15px; }
    .label-right { text-align: left; }
    .Quiz { position: static; margin-bottom: 15px; }
    .Quiz > a { display: block; text-align: left; }
    /* .custom-control-label { padding-left: 24px; }
    .custom-control-label::before, .custom-control-label::after { left: 0; top: 0; } */
    .audience-grid .dataTables_wrapper .dataTables_length, .audience-grid .dataTables_wrapper .dataTables_filter { width: 100%; }
    .pageTitle { flex-direction: column; }
    .table-responsive { border: none; }
    .courseQuestion-rdo { margin-left: 25px; margin-bottom: 10px; }
    .btm-buttons { flex-direction: column !important; }
    .btm-buttons .right { text-align: center !important; }
    .ic-btn i svg { width: 15px; height: 15px;  margin-right: 13px; margin-bottom: 0px;}
    .btn-mr-bt {margin-top: 0px;margin-bottom: 15px;text-align: left;}




}

@media only screen and (max-width: 650px) {
    body { font-size: 12px; }
    /* .loginMain { height: auto; } */
    .loginMain .loginShape { z-index: 0; }
    .loginMain .loginCard { width: 90%; flex-direction: column; }
    .loginMain .loginCard .cardLeft { width: 100%; background: none; text-align: center; padding-top: 30px; display: block; }
    .loginMain .loginCard .cardLeft h2 { display: none; }
    .loginMain .loginCard .cardLeft .logo { height: auto; display: block; padding-left: 0; }
    .loginMain .loginCard .cardLeft .logo svg path { fill: #59cbcb; }
    .loginMain .loginCard .cardLeft .logo svg circle { fill: #59cbcb; }

    .loginMain .loginCard .cardLeft .logo .white-logo-img { max-width: 250px !important; width: auto; height: 50px; margin: 0 auto; background-size: cover; background-image: url(../../images/logo/sp-logo-black.png);}
    .loginMain .loginCard .cardLeft .logo .black-logo-img { max-width: 250px !important; width: auto; height: 50px; margin: 0 auto; background-size: cover; background-image: url(../../images/logo/sp-logo-white.png);}

    .loginMain .loginCard .cardLeft .intro { color: #59cbcb; padding: 20px 0 20px 20px; }
    .loginMain .loginCard .cardRight { width: 100%; padding-top: 0;overflow: auto; }
    .stepsUI ul li a > span.step-count { padding: 3px; width: 36px; height: 36px; }
    .stepsUI ul li a > span.step-count span { font-size: 22px; line-height: 30px; }
    .stepsUI ul li a > span.step-count:before, .stepsUI ul li a > span.step-count:after { height: 3px; top: 27px; }
    .stepsUI ul li a > span.step-indi { display: none; }
    .stepsUI ul li a.active > span.step-count span { line-height: 28px; }
    header .topBar .userRight { width: auto; margin-left: 15px; }
    header .topBar .userRight .userDtl .name-email { display: none; }
    header .topBar .userRight .userDtl .user-ic { margin-right: 10px; }
    .custom-control { margin-bottom: 0px; }
    .half-control { width: 100% !important; }
    .p30 { padding: 16px !important; }
    .import-data { padding: 16px; }
    .import-data .left-cnt { font-size: 14px; line-height: 22px; }
    .import-data .right-upload-field label i svg { width: 30px; height: 30px; }
    .import-data .right-upload-field label span { font-size: 16px; }
    .match-col-row .grid-dir .grid-dir-buttons .btn { font-size: 12px; padding: 4px 6px; min-width: 50px; }
    .btn + .btn, .shadowCard .boxTitle .rightSelection .form-control + .form-control { margin-left: 5px; }
    #assign, #removeAssignment { margin-top: 5px; margin-left: 0; margin-right: 5px; display: inline-flex; }
    .next-prev a > i, .next-prev .btn > i, .btn > i { width: 24px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; }
    .next-prev a > span, .next-prev .btn > span, .btn > span { padding: 0; }
    .reset-m-mbl { margin: 0; }
}

@media only screen and (max-width: 600px) {
    .courses-container .coursesParent { margin-right: 0px; }
    .courseBlock.GridView { width: 100%; }
    .pageTitle h1 { margin: 0px; margin-bottom: 15px; font-size: 20px; }
    .breadcrumbs ul li { font-size: 13px; padding: 8px 7px 8px 12px; }
    .breadcrumbs ul li:first-child { padding-left: 0; }
    .courses-container .course-actions .left-btns a { font-size: 13px; min-width: 70px; padding: 7px 10px; }
    .courses-container .course-actions .right-btns { display: none; }
    .courseBlock.ListView { width: 100%; }
    .courseBlock { margin-top: 16px; }
    .courseBlock:hover { margin-top: 16px; margin-bottom: 0; }
    .courseTitle h2 { font-size: 18px; }
    .courseDtl .dtl-row.due-date > div { font-size: 14px; }
    .courseDtl .dtl-row > div { font-size: 14px; line-height: 20px; }
    .courseBlock.ListView .courseDtl .dtl-row .overflow-cnt, .courseBlock.GridView .courseDtl .dtl-row .overflow-cnt { height: 98px; }
    .courseBlock { padding: 10px 15px; }
    .courseDtl .dtl-row > i { width: 20px; }
    .courseDtl .dtl-row > i svg { width: 15px; height: 15px; }
    .courseDtl .dtl-row > div { margin-left: 6px; }
    .courseDtl .dtl-row .overflow-cnt > a { font-size: 11px; }
    .courseDetailsMain .course-sidebar { display: none; }
    .sidebarmobile { display: block; background: #fff; box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2); padding: 15px; }
    .sidebarmobile > select { width: 100%; height: 35px; border: 1px solid #eee; border-radius: 3px; font-size: 14px; font-weight: 500; padding: 5px 10px; }
    .courseDetailsMain { flex-direction: column; }
    .courseDetailsMain .course-details { margin: 20px 15px; }
    .courseTitle { flex-direction: unset; align-items: unset; justify-content: unset; flex-flow: wrap; }
    .courseDetailsMain .courseTitle h2 { width: 100%; flex: none; margin: 0; margin-bottom: 10px; }
    .courseDetailsMain .courseTitle .due-date { width: 80%; margin: 0; }
    .courseDetailsMain .courseTitle .due-date > div { font-size: 14px; }
    .courseTitle .right-action { width: 20%; text-align: right; }
    .courseDetailsMain .courseSlides { margin-bottom: 0; }
    .courseDetailsMain .courseSlides ul { margin: 0; }
    .courseDetailsMain .courseSlides ul li { width: 100%; margin-right: 0; }
    .quiz-container .quiz-que .que-text { font-size: 16px; }
    .quiz-container .quiz-options ul.optn-listing li { font-size: 14px; }
    .slidesControls { align-items: flex-start; }
    .slidesControls .slideProcess { margin-top: 50px; }
    .quiz-container .quiz-que { flex-direction: column; }
    .quiz-container .quiz-que .quiz-count { margin: 0; margin-bottom: 15px; }
    .quiz-container .quiz-options { margin: 20px 0; }
    .quiz-wrapper .que-info { font-size: 12px; margin-top: 20px; }
    .quiz-wrapper { margin-top: 20px; margin-bottom: 20px; }
    .uitable { font-size: 12px; }
    .uitable th, td { padding: 5px 8px; }
    .uitable thead { font-size: 13px; }
    .table.responsive-table { margin-bottom: 0; }
    .quiz-title h2 { font-size: 18px; }
    .reviewBlock .results-grid h3 { font-size: 18px; }
    .quiz-wrapper .results-btns .btn { margin: 5px; }
    .emailDemo p { display: block; }
    .status-box { display: block; }
    .status-fild { width: 100% !important; }
    .match-grid .select2-container{width: 150px !important;}

    .navbar ul li a{
        justify-content: flex-start;
    }
}

@media only screen and (max-height: 450px) {
    .loginMain { justify-content: flex-start; height: auto; position: relative; }
}

@media only screen and (max-width: 400) {
    .loginMain .loginCard .cardRight .bottomLink { position: static; padding-top: 20px; }
    .navbar ul li a{
        justify-content: flex-start !important;
    }

}
/*.display .tb-width{
	float: left !important;
	width: 355px !important;
}*/
/*.tb-width{
	white-space: nowrap;
  width: 50px;
  overflow: hidden;
  text-overflow: clip;
}
*/
.box-tb{
	float: left;
	width: 100%;
}
/*menu icon css*/
.menu_icon {
  display: inline-block;
  cursor: pointer;
  position: absolute;
  left: -50px;
}

/*.multiselect-container>li>a>label.checkbox{
margin: 10px 0 !important;
}
.multiselect-native-select .multiselect-container a{
padding-top: 0 !important;
}
.bar1, .bar2, .bar3 {
  width: 35px;
  height: 3px;
  background-color: #333;
  margin: 7px 0;
  transition: 0.4s;
}

.multiselect-native-select .multiselect-container>li>a{
padding-right: 20px !important;
padding-left: 20px !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-6px, 6px);
  transform: rotate(-45deg) translate(-6px, 6px);
}
.multiselect-container>li>a>label>input[type=checkbox] {
margin-bottom: 5px;
position: absolute;
left: 5px;
z-index: 1;
white-space: nowrap;
width: 15px;
height: 15px;
top: -2px;
}*/


/*.stepcourseoptions1 .form-group label{
width: auto;
float: left;
padding: 0 0 0 10px !important;
}*/
/*.stepcourseoptions1 .form-group label{
padding: 0 0 0 10px !important;
}*/

.change .bar2 {opacity: 0;}

.dj-end{
    display: flex !important;
    justify-content: flex-end !important;
}

.accrod-remove-arrow{
	background: transparent;
	border: none;
	position: absolute;
    right: 20px;
    top: 18px;
}
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.p-position{
	position: relative;
}

#matrix-sorting-left {
    display: block;
    text-align: center;
}
.data-mt{
	margin-top: 30px !important;
}
.valid{
	border-color:#59cbcb !important;
}