/*== New CSS - 16 May 25 - =============================================*/
.clg-banner{ text-align: center; background-image: url(https://www.mockers.in/frontend/rank-predictor/images/exam/exam-bannerbg.svg); background-repeat: no-repeat; background-size: 100%; border-radius: 10px; background-position: center; padding: 30px 0;}
.clg-banner img{ max-width: 100%; }
.clg-banner .banner-wrapper{ display: flex; align-items: center; justify-content: center;}
.bannerTitle{ margin: 0 50px;}
.bannerTitle h2{ font-size: 32px; color: #FFE000; font-weight: bold;}
.bannerTitle p{ font-size: 20px; color: rgba(255,255,255, .7); font-weight: 500; margin: 0;}
.clg-predictor-tabs{ margin: 20px 0; font-family: 'Manrope', sans-serif;}
.clg-predictor-tabs nav{ display: flex; align-items: center; justify-content: center; }
.clg-predictor-tabs .nav-tabs{ border: 0 }
.clg-predictor-tabs .nav-tabs .nav-link{ border: 0; font-size: 18px; color: #3C4852; display: flex; align-items: center; }
.clg-predictor-tabs .nav-tabs .nav-link span{ width: 36px; height: 36px; background-color: #EDF1F4; border: 1px solid #3C4852; margin-right: 10px; border-radius: 6px; text-align: center; color: #3C4852; line-height: 36px; display: inline-block; font-size: 18px; font-weight: bold; }
.clg-predictor-tabs .nav-tabs .nav-link.active{ border: 0; background-color: transparent; color: #2D81F7; font-weight: 600 }
.clg-predictor-tabs .nav-tabs .nav-link.active span{ background-color: #2D81F7; color: #ffffff; border-color: #2D81F7 }
.clg-predictor-tabs .nav-tabs .nav-link:after{ content: ""; width: 80px; margin-left: 25px; background-color: #3C4852; height: 1px; display: inline-block;}
.clg-predictor-tabs .nav-tabs .nav-link:last-child:after{ display: none; }
.clg-predictor-tabs .nav-tabs .nav-link em{ font-style: normal; }

.clg-predictor-tabs .tab-content{ background-color: #ffffff; border: 1px solid #E9EEF2; padding: 20px; margin-top: 10px }
.clg-predictor-tabs .tab-content h3{ font-size: 22px; color: #3C4852; font-weight: bold; }
.clg-predictor-tabs .tab-content p{ font-size: 18px; color: #7A8B94; font-weight: 600; }

.exam-courses{ display: flex; width: 100%; margin: 0 ; flex-wrap: wrap; font-family: 'Manrope', sans-serif;}
.exam-courses li{ padding: 0 5px; width: 20%; margin: 0 0 10px; transition: .5s; }
.exam-courses li:hover { margin-top: -4px; cursor: pointer;}
.exam-courses li .card{ background-color: #EDF1F4; border-radius: 10px; border: 0; align-items: center; padding: 15px }
.exam-courses li .card img{ max-width: 70px; margin-bottom: 10px }
.clg-predictor-tabs .exam-courses li h4{ font-size: 18px; color: #3C4852; font-weight: bold; }
.clg-predictor-tabs .exam-courses li p{ font-size: 16px; color: #7A8B94; margin: 0; font-weight: 500;}
.examTab .exam-courses li{ width: 16.66% }
.examTab .sample-search .searchBox{ background: #EDF1F4 }
.examTab .sample-search input{ background: #EDF1F4; font-weight: 500; }

/*-- for green color tab --------------*/
.clg-predictor-tabs .nav-tabs .nav-link.completed span{ background-color: #08BD80; color: #fff; border-color: #08BD80 }
.clg-predictor-tabs .nav-tabs .nav-link.completed{ color: #08BD80 }


/*== College Predictor form CSS -------------------------------------*/

.clg-predictor{ background: url(https://www.mockers.in/frontend/rank-predictor/images/clg-predictor-bg.png) no-repeat; font-family: 'Manrope', sans-serif; background-size: cover; position: relative; padding: 20px 50px }
.clg-predictor .row{ align-items: center;}
.form-center{ display: flex; justify-content: center;}
.clg-predictor-form{ background: #ffffff; border-radius: 10px; padding: 20px; width: 440px; }
.clg-predictor-form .form-group{ margin-bottom: 10px }
.clg-predictor-form .termsText{ font-size: 12px; text-align: center !important; margin: 10px 0 0; color: #7A8B94; font-weight: 500; }
.clg-predictor-form .termsText a{ color: #3C4852;}
.clg-predictor-form label{ font-size: 13px; font-weight: 600; color: #3C4852; margin-bottom: 5px }
.clg-predictor-form label em{ color: red; font-style: normal; }
.clg-predictor-form .form-control{ background-color: #EDF1F4; border-radius: 8px; padding: 12px 15px }
.clg-predictor-form .form-control::placeholder{ color: #B3BEC4 }
.clg-predictor-form .btn{ background: #08BD80; font-weight: 600; font-size: 20px; padding: 10px 30px; border-color: #08BD80; box-shadow: 0px 3px 0px 0px #00A751; border-radius: 8px; }
.clg-predictor-form select.form-control{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
 background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px;}
.orline{ width: 100%; text-align: center; position: relative; height: 25px; }
.orline span{ background: #ffffff; padding: 0 20px; position: relative; z-index: 1 }
.orline:after{ content: ""; position: absolute; top: 15px; background: #3C4852; height: .1px; width: 80%; left: 10% }
.orline.short:after{ width: 30%; left: 35%;}
.clg-predictor-left img{ max-width: 100% }
.mobImg{ display: none;}
.clg-predictor-left { text-align: center; padding: 0 35px;}
.clg-predictor-left  .clg-form-title{ width: 100%; display: inline-block; margin-bottom: 20px;}
.clg-predictor-left h2{ color: #FFE000; font-size: 48px; font-weight: bold; margin-bottom: 15px; text-shadow: 0px 4px 0 #00000047;}
.clg-predictor-left .clg-form-title span{ background: #FB5A01; padding: 6px 10px; border-radius: 6px; color: #fff; display: inline-block}
.clg-rank { position: relative; display: flex; justify-content: center; align-items: center; flex-direction: row;}
.clgrank-students { position: absolute; bottom: 60px; max-width: 280px;}
.rankTitle{ padding-left: 10px;}
.rankTitle h4{ color: #FFE000; font-size: 20px; font-weight: bold; margin-bottom: 5px; margin-top: 10px;}
.rankTitle p{ font-size: 16px; color: #fff; margin: 0;}
.clg-predictor-form .ts-dropdown-content .option {padding: 5px .75rem 5px 42px; position: relative; font-size: 14px; font-weight: 500; margin: 0 10px;
}
.clg-predictor-form .ts-dropdown-content .option.selected{ color: #2D81F7; background: #EAF3FF; border-radius: 4px }
.clg-predictor-form .ts-dropdown-content .option:before { content: ""; position: absolute; left: 15px; top: 9px; width: 16px; height: 16px; border: 1px solid #3C4852; border-radius: 50px;}
.clg-predictor-form .ts-dropdown-content .option.selected:before{ content: ""; position: absolute; left: 15px; top: 9px; width: 16px; height: 16px; border: 2px solid #2D81F7; border-radius: 50px;}
.clg-predictor-form .ts-dropdown-content .option.selected:after{content: ""; position: absolute; left: 20px;top: 14px; width: 6px; height: 6px; background: #2D81F7; border-radius: 50px;}
.clg-predictor-form .js-select {
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e) !important;
    background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px;
}
.clg-predictor-form .js-select .ts-control{ height: 48px }
/*== Rank Predictor CSS -------------------------------------*/

.rank-predictor-head{ text-align: center; margin: 20px 0}
.rank-predictor-head h2{ font-size: 34px; font-weight: 800; color: #422191 }
.rank-predictor{ display: flex; flex-direction: column; justify-content: center; align-items: center; margin-bottom: 20px; }
.rank-predictor-meter {display: flex; flex-direction: column; align-items: center; max-width: 375px; border-radius: 30px; padding: 15px 30px; background-image: conic-gradient(from 51deg, #2D32A3, #422191)}
.rank-predictor-meter h4{ font-size: 20px; color: #FFE000; font-weight: 600; text-align: center; margin-bottom: 0 }
.rank-predictor h5{ color: #7A8B94; font-size: 20px; font-weight: 600; }
.rank-predictor h6{ color: #3C4852; font-size: 20px }
.rank-predictor-meter span{ background: rgba(255,255,255, .1); font-size: 14px; color: #ffffff; padding: 5px 10px; border-radius: 4px; margin-top: 5px }
.scoreBox{ background: #ffffff; border-radius: 15px; padding: 10px 40px; text-align: center; margin-top: 15px }
.scoreBox h2{ font-size: 34px; font-weight: 800; color: #422191; margin: 0 }
.scoreBox p{ font-size: 14px; color: #422191; font-weight: 600; margin-bottom: 0 }

.rank-details .left-cell{ width: 25%; background: #F6F4F9; padding: 10px; text-align: left; border: 1px solid #ddd }
.rank-details .left-cell h5{ color: #3C4852; font-size: 16px; font-weight: bold; }
.rank-details .left-cell p{ color: #7A8B94; font-size: 14px; font-weight: 500; margin-bottom: 5px }
.rank-details .tag{ background: #EAE2FF; padding: 5px 10px; border-radius: 50px; color: #422191; font-size: 12px; font-weight: 600; margin-bottom: 8px; display: inline-block; }
.rank-details .tag.green{ background: #D9FCED; color: #11845E;}
.rank-details .degree{ font-size: 12px; color: #7A8B94; }
.rank-details .badge{ background: #D9FCED; font-size: 12px; color: #11845E; padding: 6px 15px; border-radius: 50px;}

.rankHead{ display: flex; flex-wrap: wrap; }
.rankHead li{ width: 25%; padding: 8px 6px; background: #422191; color: #ffffff; font-size: 13px; color: #ffffff; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; border-right: 1px solid #ffffff }
.rankHead span{font-family: 'Manrope', sans-serif !important; font-size: 13px !important}
.rankHead li div{ border-top: 1px solid #ffffff; padding-top: 8px; margin-top: 5px; display: flex; justify-content: center; width: 100% }
.rankHead li div span{ width: 50%; text-align: center; }
.rankHead li p{ margin: 0 }

.ranklist-body li.ranklist{ margin-top: 20px; border-top: 1px solid #B4BEC4 }
.ranklist-body li { width: 100%; display: flex; flex-wrap: wrap; }
.ranklist-body li span{font-family: 'Manrope', sans-serif !important; font-size: 14px}
/*.ranklist-body .left-cell{ width: 25%; height: 190px; border-top: 0; border-right: 0}*/
.show-rankData{ width: 75% }
.show-rankData li{ border-right: 1px solid #B4BEC4 }
.ranklist-body .collapse:not(.show) { display: block;}

.ranklist-body li p{ margin: 0; font-size: 15px; font-weight: 600; }
.ranklist-body li .colm{ padding: 6px 10px; width: 33.33%; font-size: 14px; font-weight: 500; text-align: center; border-width: 0 1px; border-bottom: 1px solid #B4BEC4; border-left: 1px solid #B4BEC4; }
.ranklist-body li .branch-details{ text-align: left; color: #3C4852 }
.ranklist-body li .branch-details span{ font-size: 12px; color: #7A8B94 }
.ranklist-body li .OC-rank{ display: flex; padding: 0 }
.ranklist-body li .OC-rank span{ width: 50%; border-left: 1px solid #B4BEC4; display: flex; align-items: center; justify-content: center; font-size: 11px;}
.ranklist-body li .OC-rank span:first-child{ border-left: 0 }
.ranklist-body li .OC-rank span em{ display: none; }
.ranklist-body li .action{ display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; }
.ranklist-body li .action img{ display: none; }
.roundTitle{ display: none; }
.mobSortBtn{ display: none; }

#roundwise-modal .modal-body{ padding: 0 2rem 1rem }
.roundwise-modal p{ color: #7A8B94; font-size: 14px; font-weight: 500; margin-bottom: 5px}
.roundwise-modal h4{ color: #3C4852; font-size: 18px; font-weight: 600; }
.roundwise-modal .badge, .roundwise-modal p span.badge{ background: #D9FCED; color: #11845E; border-radius: 50px; font-weight: 600; font-size: 12px !important}
.roundwise-modal p span, .roundwise-modal p span:not(.MathJax span){font-family: 'Manrope', sans-serif !important; color: #11845E; font-size: 14px !important }
.roundwise-table th{ font-size: 14px; background: #EAE2FF; color: #3C4852; font-weight: 500; text-align: center; }
.roundwise-table td{ font-size: 14px; color: #3C4852; font-weight: 500; text-align: center; }
.roundwise-table.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: #D9FCED; color: #11845E;}
#roundwise-modal .btn-close{ background: url(https://www.mockers.in/frontend/rank-predictor/images/exam/circle-xmark.svg) no-repeat}
#roundwise-modal .modal-header{ padding: 1rem 2rem;}

/* == MEDIA CSS ======================================================================== */

@media (max-width: 1440px) {
    .clg-predictor-left h2{ font-size: 40px;}
}
@media (max-width: 1140px) {
    .examTab .exam-courses li { width: 20%;}
    
}

@media (max-width: 991px) {
    .examTab .sample-search { flex-wrap: wrap; }
    .clg-predictor-left{ padding: 0;}
    .examTab .exam-courses li, .exam-courses li { width: 33.33%;}
    .clg-predictor-tabs .nav-tabs .nav-link:after{ width: 40px }
    .bannerTitle{ margin: 0; padding: 0 20px;}
    .bannerTitle h2{ font-size: 24px;}
    .bannerTitle p{ font-size: 14px;}
}

@media (max-width: 768px) {
    .rankHead{ display: none; }  
    .ranklist-body .left-cell{ background: #ffffff; width: 100%; height: auto; border: 0; border-bottom: 1px solid #B4BEC4 }
    .show-rankData{ width: 100%; }
    .ranklist-body li .branch-details{ width: 100%; }
    .ranklist-body li .action{ width: auto; }
    .ranklist-body li .OC-rank{ width: 85%; margin: 10px 0 }
    .ranklist-body li .OC-rank span{ border-left: 0; justify-content: left; color: #7A8B94 }
    .ranklist-body li .OC-rank span em{ font-style: normal; display: inline-block; padding-left: 10px }
    .ranklist-body li .colm{ border-left: 0; border-bottom: 0 }
    .show-rankData li{ border-right: 0; border-bottom: 1px solid #B4BEC4; position: relative;}
    .show-rankData li:last-child{ border-bottom: 0 }
    .ranklist-body li .action span{ display: none; }
    .ranklist-body li .action img{ display: inline-block; }
    .action-link{ font-size: 0;position: absolute; right: 15px; bottom: 40px }
    .roundTitle{ display: block; }
    .roundTitle span{ padding: 6px 15px; border-radius: 5px; background: #ECECEC; color: #7A8B94; font-weight: 500; font-size: 11px !important; }
    .ranklist-body li.ranklist{ border: 1px solid #B4BEC4; padding: 5px 10px; border-radius: 10px; box-shadow: 0 3px 0 0px #E9EEF2 }
    .mobSortBtn{ display: block; }
    .tagMain { display: flex; justify-content: space-between; align-items: center;}
    .ranklist-body .collapse:not(.show) { display: none;}
    .clg-predictor{ padding: 20px; background-size: cover; border-radius: 4px; background-position: center top; }
    .clg-predictor-form .termsText{ font-size: 11px;}
    #roundwise-modal .modal-header { padding: 1rem 1rem; border-top: 12px solid #ffffff; border-top-left-radius: calc(1rem - 1px); border-top-right-radius: calc(1rem - 1px);}
    #roundwise-modal .modal-body { padding: 0 1rem 1rem; max-height: 75vh;}
    #roundwise-modal .modal-content{ border-radius: 15px 15px 0 0;}
  }

  @media (max-width: 767px) {
    .examTab .exam-courses li, .exam-courses li { width: 50%;}
    .exam-courses li .card{ padding: 10px }
    .clg-predictor-tabs .exam-courses li h4{ margin-bottom: 4px }
    .clg-predictor-tabs .nav-tabs{ flex-wrap: nowrap; width: 100% }
    .clg-predictor-tabs .nav-tabs .nav-link{ width: 50%; flex-direction: column; position: relative; font-size: 13px; padding: 0 }
    .clg-predictor-tabs .nav-tabs .nav-link:after{ position: absolute; right: -6px; top: 12px; width: 25px; margin: 0 }
    .clg-predictor-tabs .nav-tabs .nav-link span{ width: 25px; height: 25px; line-height: 25px; font-size: 15px; margin-bottom: 6px; margin-right: 0; }
    .sample-search input { min-width: 90%;}
    .rank-predictor-meter img{ max-width: 100% }
    .rank-predictor h5{ font-size: 15px }
    .rank-table .left-cell{ width: 200px }
    .rank-table td{ vertical-align: top; }
    .clg-predictor-left h2{ font-size: 26px;}
    .clg-predictor-left .clg-form-title span{ font-size: 14px; font-weight: 500;}
    .clg-predictor-tabs .tab-content{ padding: 20px 10px}
    .clg-predictor-tabs .tab-content h3{ font-size: 18px;}
    .clg-predictor-tabs .tab-content p{ font-size: 13px;}
    .rank-predictor-head h2{ font-size: 30px;}
    .rank-predictor-meter{ max-width: 345px;}
    .rank-predictor h6{ font-size: 14px; text-align: center;}
    .rank-details .left-cell p{ font-size: 11px;}
    .roundwise-modal p{ font-size: 12px;}
    .roundwise-modal p span, .roundwise-modal p span:not(.MathJax span){ font-size: 12px !important;}
    .roundwise-table th, .roundwise-table td{ font-size: 12px;}
    .descImg{ display: none;}
    .mobImg{ display: block; max-width: 100%; margin-top: 10px;}
    .clg-banner .banner-wrapper img{ display: none;}
    .clg-banner{ border-radius: 8px; padding: 20px 0; background-position: 75%; background-size: cover;}
    .bannerTitle{ margin: 0; padding: 0 20px;}
    .bannerTitle h2{ font-size: 20px;}
    .bannerTitle p{ font-size: 12px;}
    .clg-rank{ position: absolute; bottom: 15px; width: 100%; left: 0;}
    .rankTitle h4{ color: #FFE000; font-size: 15px;}
    .rankTitle p{ font-size: 11px;}
    .clg-predictor-left img{ max-width: 300px;}
    .clgrank-students{ max-width: 225px; bottom: 45px;}
    .clg-predictor{ padding-bottom: 310px;}
    #roundwise-modal.show { display: flex !important;}
    #roundwise-modal.show .modal-dialog{margin: 0; align-items: flex-end;}
  }
  @media (max-width: 480px) {
  .clg-predictor-tabs .exam-courses li h4{ font-size: 16px }
  .clg-predictor{ margin: 0 -12px; border-radius: 0;}
  }