/*---------------------------------------------
Template Name: Juraexamensplan 6 Monate
Author: Hafiz Shehroz``11
Version: 1.0.0


--------------------------------------------*/
/*=======================================================================
 Default Styles
=========================================================================*/
@import url("https://fonts.googleapis.com/css2?family=Poly&family=Poppins:wght@400;500;600;700;800&display=swap");
/*-------------------------
    Variables
-------------------------*/
:root {
  --color-primary: #FFBA52;
  --color-orange: Orange;
  --color-violet: violet;
  --color-slate-blue: slateblue;
  --color-dodger-blue: dodgerblue;
  --color-brown: #FF8565;
  --color-yellow: yellow;
  --color-gold: gold;
  --color-red: #FF1616;
  --color-red-light: #FD565C;
  --color-light-blue: #00C2CB;
  --color-blue: #5B9BD5;
  --color-darkBlue: #6B7DE8;
  --color-darker-blue: #4F8DA7;
  --color-darked-blue: #156082;
  --color-green: #008037;
  --color-green-light: #48CA80;
  --color-white: #ffffff;
  --color-black: #040606;
  --color-black-light: #3B3B3B;
  --color-grey-light: #EDECED;
  --color-semi-grey: #F4F4F4;
  --color-grey: #A4A4A4;
  --color-medium-grey: #999999;
  --color-dark-grey: #616161;
  --color-darker-grey: #D9D9D9;
  --color-grey-normal: #868686;
  --font-primary: "Poppins", sans-serif;
  --transition: all 0.3s ease-in-out;
  --dark-shadow: 24px 24px 10px rgba(24, 25, 27, 0.01), 15px 15px 9px rgba(24, 25, 27, 0.09), 9px 9px 7px rgba(24, 25, 27, 0.3), 4px 4px 5px rgba(24, 25, 27, 0.51), 1px 1px 3px rgba(24, 25, 27, 0.59), 0px 0px 0px rgba(24, 25, 27, 0.6);
}
/*-------------------------
    Typography
-------------------------*/
body{
  padding: 0;
  margin: 0;
}
*{
  box-sizing: border-box;
}
/*-------------------------
    Table
-------------------------*/

table {
  width: 100%;
  border-collapse: collapse;
}

table, th, td {
  /* border: 1px solid black; */
  text-align: center;
}
.table-block{
  width: 100%;
  overflow: auto;
}


.table-block table thead tr{
  background: var(--color-blue);
}
.table-block table th{
 padding: 6px 8px;
 font-weight: 600;
 font-size: 18px;
 color: var(--color-black);
 line-height: 1.4;
 font-family: var(--font-primary);
 text-align: center;
}
.table-block table td{
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 500;
  line-height: 120%;
  margin-bottom: 0;
  padding: 6px 8px;
  text-align: center;
  color: var(--color-black);
}

.table-block table thead th {
  color: var(--color-light);
}
.table-block table tbody th {
  font-size: 19px;
}
.table-block table tbody tr td:nth-of-type(2),
.table-block table tbody tr td:nth-of-type(4),
.table-block table tbody tr td:nth-of-type(5){
  text-align: left;
}
.table-block table .jw-input{
  border-radius: 8px;
  padding: 8px 12px;
  border-color: var(--color-black);
  color: var(--color-black-light);
}
.table-block table select{
  width: 100%;
  box-shadow: none;
  background: transparent;
  padding: 6px 8px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.02em;
  position: relative;
  margin-bottom: 0;
  color: var(--color-black);
  box-sizing: border-box;
  border: 1px solid var(--color-black);
}
tr.bg-orange,
tr.bg-orange td,
tr.bg-orange:hover td,
.table-hover>tbody>tr.bg-orange:hover>*{
  background: var(--color-orange)!important;
  color: var(--color-white);
  font-weight: bold;
}



/*-------------------------
    Forms Styles
-------------------------*/
.form-block{
  width: 100%;
  padding:  50px 30px;
  box-sizing: border-box;
}
.form-block .input-block{
  width: 200px;
}
.label-block label{
  font-size: 16px;
  color: var(--color-white);
  line-height: 1;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: 500;
}
.input-block{
  width: 250px;
}
.jw-selector,
.jw-input{
  width: 100%;
  box-shadow: none;
  background: transparent;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0.02em;
  position: relative;
  margin-bottom: 0;
  color: var(--color-black);
  box-sizing: border-box;
  border: 1px solid var(--color-black);
}
.jw-selector:focus,
.jw-input:focus{
  outline: 0;
}

.jw-input.dark,
.jw-selector.dark{
  border-color: var(--color-black);
  color: var(--color-black);
} 

.input-block.prepend-input{
  display: flex;
  align-items: stretch;
}
.input-block.prepend-input .jw-input{
  border-right: none;
  border-radius: 10px 0 0 10px;
  padding-right: 0;
}
.input-block.prepend-input .jw-input:focus{
  outline: 0;
}
.input-block.prepend-input span{
  border: 1px solid var(--color-black);
  border-left: none;
  border-radius: 0 10px 10px 0;
  padding: 8px 12px;
  font-size: 18px;
  font-weight: 600;
  line-height: 150%;
}

.jw-input.w-250{
  width: 250px!important;
}
 
.jw-input.w-120{
  width: 120px!important;
}
.jw-input.st-2{
  border: 1px solid var(--color-black);
  color: var(--color-black);
  background: var(--color-grey-light);
}
textarea{
  width: 100%;
  height: 220px;
  border: none;
  border-radius: 15px;
  background: var(--color-darker-grey);
  color: var(--color-black);
  padding: 15px;
  font-size: 16px;
  font-weight: 500;
}
textarea:focus{
  outline: 0;
}

/*-------------------------
  Helper Classes
-------------------------*/


.bg-black-light{
  background: var(--color-black-light)!important;
}
.dark-shadow{
  box-shadow: var(--dark-shadow)!important;
}
.radius-15{
  border-radius: 15px;
}
.radius-20{
  border-radius: 20px;
}


.bg-grey-light{
  background: var(--color-grey-light)!important;
}
.bg-darker-grey{
  background: var(--color-darker-grey)!important;
}
.bg-blue{
  background: var(--color-blue)!important;
}
.bg-primary{
  background: var(--color-primary)!important;
}
.bg-orange{
  background: var(--color-orange)!important;
}
.bg-violet{
  background: var(--color-violet)!important;
}
.bg-slate-blue{
  background: var(--color-slate-blue)!important;
}
.bg-dodger-blue{
  background: var(--color-dodger-blue)!important;
}

.bg-yellow{
  background: var(--color-yellow)!important;
}
.bg-gold{
  background: var(--color-gold)!important;
}
.bg-white{
  background: var(--color-white)!important;
}
.bg-red{
  background: var(--color-red)!important;
}
.bg-red-light{
  background: var(--color-red-light)!important;
}
.bg-light-blue{
  background: var(--color-light-blue)!important;
}
.bg-darkBlue{
  background: var(--color-darkBlue)!important;
}
.bg-darker-blue{
  background: var(--color-darker-blue)!important;
}
.bg-darked-blue{
  background: var(--color-darked-blue)!important;
}
.bg-green{
  background: var(--color-green)!important;
}
.bg-green-light{
  background: var(--color-green-light)!important;
}
.bg-dark-grey{
  background: var(--color-dark-grey)!important;
}
.bg-brown{
  background: var(--color-brown);
}


/* /////////////// */
.text-grey-light{
  color: var(--color-grey-light)!important;
}
.text-darker-grey{
  color: var(--color-darker-grey)!important;
}
.text-blue{
  color: var(--color-blue)!important;
}
.text-primary{
  color: var(--color-primary)!important;
}
.text-yellow{
  color: var(--color-yellow)!important;
}
.text-slate-blue{
  color: var(--color-slate-blue)!important;
}
.text-dodger-blue{
  color: var(--color-dodger-blue)!important;
}
.text-gold{
  color: var(--color-gold)!important;
}
.text-white{
  color: var(--color-white)!important;
}
.text-red{
  color: var(--color-red)!important;
}
.text-red-light{
  color: var(--color-red-light)!important;
}
.text-light-blue{
  color: var(--color-light-blue)!important;
}
.text-darkBlue{
  color: var(--color-darkBlue)!important;
}
.text-darker-blue{
  color: var(--color-darker-blue)!important;
}
.text-darked-blue{
  color: var(--color-darked-blue)!important;
}
.text-green{
  color: var(--color-green)!important;
}
.text-green-light{
  color: var(--color-green-light)!important;
}
.text-dark-grey{
  color: var(--color-dark-grey)!important;
}
.text-brown{
  color: var(--color-brown);
}

.fill-green{
  fill: var(--color-green)!important;
}
.fill-red{
  fill: var(--color-red)!important;
}
.fill-yellow{
  fill: var(--color-primary)!important;
}
/* ////////////////// */
.p-10{
  padding: 10px;
}
.p-10-15{
  padding: 10px 15px;
}
.p-15-10{
  padding: 15px 10px;
}
.mb-8{
  margin-bottom: 8px!important;
}
.mb-9{
  margin-bottom: 9px;
}
.mb-16{
  margin-bottom: 16px!important;
}
.mb-32{
  margin-bottom: 32px!important;
}
.mb-48{
  margin-bottom: 48px!important;
}
.w-5{
  width: 5%!important;
}
.w-20{
  width: 20%!important;
}
.w-30{
  width: 30%!important;
}
.w-40{
  width: 40%!important;
}
.w-60{
  width: 60%!important;
}
.w-70{
  width: 70%!important;
}
.w-80{
  width: 80%!important;
}
.w-90{
  width: 90%!important;
}
.w-120{
  width: 120px!important;
}
.w_120{
  width: 120%!important;
}
.w-150{
  width: 150%!important;
}
.w-30{
  width: 30%!important;
}
.w-10{
  width: 10%!important;
}
.w-15{
  width: 15%!important;
}
.flex{
  display: flex!important;
  align-items: center!important;
  justify-content: space-betwee!important;
}
.sticky-header{
  position: sticky;
  top: 0;
  z-index: 1000;
}

.reset {
  all: revert;
}
/*=========================================================================
2. Elements Styles
=========================================================================*/
.back-to-top {
  position: fixed;
  bottom: 0px;
  right: 20px;
  display: block;
  width: 150px;
  height: 150px;
  line-height: 50px;
  font-size: 100px;
  padding: 20px 0;
  background: var(--color-primary);
  color: var(--color-white);
  text-align: center;
  opacity: 0;
  display: none;
  text-decoration: none;
  border-radius: 50%;
  -webkit-transform: scale(0.3);
  -ms-transform: scale(0.3);
  transform: scale(0.3);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 999;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;

  
}
.back-to-top.show{
  opacity: 1;
  display: block;
}
.back-to-top:hover{
  background: var(--color-black);
  color: var(--color-white);
}

/*-------------------------
    Tabs style
-------------------------*/
.tabs {
  border-radius: 0.25rem;
  position: relative;
}
.tab-nav{
  background: var(--color-black);
  padding: 30px 20px ;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  width: 17%;
}
.tab-nav .icon{
  display: none;
  
}
.tab-nav .icon{
  margin: 0;
  background: white;
  color: #0B0B45;
  font-size: 16px;
  padding: 12px 25px;
  border: 1px solid #0B0B45;
  border-radius: 5px;
  cursor: pointer;
  box-sizing: border-box;
}
.tab-nav .icon:hover{
  background: #181855;
  color: white;
  border-color: white;
}
.tabs__nav {
  
}
.tabs_btn,
.tabs__btn {
  position: relative;
  padding: 5px 0px;
  cursor: pointer;
  margin: 5px 0;
  display: block;
  color: white;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  background: transparent;
  border: none;
  text-align: left;
}
.tabs_btn.is-active, 
.tabs__btn.is-active { 
  color: var(--color-primary);
}

.tabs_btn:hover,
.tabs__btn:hover{
  color: var(--color-primary);
}
.tabs__content{
  box-sizing: border-box;
  width: calc(100% - 17%);
  margin-left: auto;
}
.tabs__pane {
  /* display: none; */
  padding: 20px 20px 10px;
  /* background-color: #EEEEEE; */
}
.tabs__pane.is-visible {
  display: block !important;
}
.sub-menu{
  display: none;
  /* transition: var(--transition); */
}
.sub-menu li{
  padding-left: 15px;
  position: relative;
}
.sub-menu li .tabs__btn{
  font-size: 14px;
  font-weight: 400;
  padding: 0;
}
.sub-menu li::before{
  position: absolute;
  content: '';
  width: 5px;
  height: 5px;
  left: 0;
  border-radius: 5px;
  top: 9px;
  background: var(--color-primary);
  z-index: 100;
}
/*-------------------------
    Button
-------------------------*/

/* -----------------------
  Heading Styles 
--------------------------*/
 
.title{
  padding: 20px 15px;
  border-radius: 20px;
  background: var(--color-grey-light);
  margin-bottom: 8px;
  position: relative;
}
.title h2{
  font-size: 24px;
  font-weight: 500;
  color: var(--color-black);
  margin: 0;
  /* text-transform: uppercase; */
  line-height: 1.4;
  font-family: var(--font-primary);

}
.title .company-logo-title{
  position: absolute;
  right: 20px;
  top: 5px;
  display: flex;
  /* flex-direction: column; */
  align-items: center;
  justify-content: center;
}
.title .company-logo-title h2{
  font-size: 14px;
  margin: 0 10px;
  
}
.title .company-logo-title img{
  width: 75px;
}
.sec-title h2{
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--color-black-light);
  margin-bottom: 4px;
}
.sec-title p{
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-black-light);
  margin-bottom: 0px;
  text-transform: uppercase;
}
.sec-title.light h2,
.sec-title.light p{
  color: var(--color-white);
}
.sec-heading h4{
  font-size: 18px;
  font-weight: 500;
  color: var(--color-black);
  margin: 0;
  line-height: 1.4;
  font-family: var(--font-primary);
}
.sec-heading.light h4{
  color: var(--color-white);
}

.sec-heading h5{
  font-size: 14px;
  font-weight: 500;
  color: var(--color-black);
  margin: 0;
  line-height: 1.4;
  font-family: var(--font-primary);
}
.bold-text{
  font-size: 20px;
  font-weight: bold;
  line-height: 1.4;
  color: var(--color-black);
}
.solid-text{
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-primary);
  line-height: 1.4;
  padding: 6px 5px;
}
.rotate-heading{
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.rotate-heading h4{
  transform: rotate(-90deg);
  font-size: 38px;
  font-weight: 600;
  color: var(--color-white);
  margin: 0;
  line-height: 1.6;
}
.small-text p{
  font-size: 14px;
  font-weight: 600;
  color: var(--color-black);
  margin: 0;
  line-height: 1.4;
}
/* -----------------------
  Charts Styles 
--------------------------*/
.chartjs-block canvas {
  width: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 100;
}
.dounght-chart{
  position: relative;
}
.heading-chart{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: grid;
  place-content: center;
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  text-transform: capitalize;
  background: var(--color-black);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  font-family: var(--font-primary);
}

/*=======================================================================
3.Blocks Styles 
=========================================================================*/
.date-block{
  padding: 10px;
}
.heading-group{
  display: flex;
  position: sticky;
  top: 0;
  z-index: 1000;
  align-items: center;
}
.overflow{
  /* position: relative; */
  overflow-y: auto;
}
.heading-group li{
  /* width: calc(100% / 9); */
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white);
  margin: 0;
  line-height: 1.4;
  font-family: var(--font-primary);
  text-align: center;
  padding: 10px 5px;
}
.heading-group.st-2 li{
  width: calc(100% / 5);

} 
.item-group{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.item-group .item{
  /* width: calc(100% / 9); */
  margin: 0;
  text-align: left;
  padding: 10px 5px;
  box-sizing: border-box;
  display: grid;
  place-items: left;
}
.item-group.st-2 .item{
  width: calc(100% / 5);

}

.item-group .item .jw-selector,
.item-group .item input{
  width: 100%;
  border-color: var(--color-black);
  padding: 6px 8px;
  line-height: 1.2;
  border-radius: 5px;
  color: var(--color-black);
  font-size: 16px;
  font-weight: 400;
  /* margin: 0 10px; */
}
.item-group .item span{
  font-size: 14px;
  display: block;
  font-weight: 500;
  color: var(--color-black);
  margin: 0;
  line-height: 1.4;
  font-family: var(--font-primary);
  text-align: center;
}
.item-group:first-child .item:first-child,
.item-group:first-child .item:last-child{
  border-radius: 20px 20px 0 0;
}
.item-group:last-child .item:first-child,
.item-group:last-child .item:last-child{
  border-radius: 0 0 20px 20px;
}
.belief-block{
  padding: 20px 40px;
}

.belief-block .sec-heading h4{
  font-size: 29px;
  color: var(--color-black-light);
  font-weight: 400;
}
.belief-block .content-block{
  padding: 30px;
}
.belief-block .content-block .count-block{
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
}
.belief-block .content-block .count-block .count{
  width: 70px;
  height: 70px;
  border-radius: 50px;
  color: var(--color-white);
  font-size: 24px;
  font-weight: 500;

  display: grid;
  place-content: center;
}
.belief-block .content-block .count-block .count.st-1{
  background: var(--color-primary);
}
.belief-block .content-block .count-block .count.st-2{
  background: #6B7DE8;
}
.belief-block .content-block .text-block p{
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-black);
  font-family: var(--font-primary);
  margin: 0;
}
.contract-block {
  margin-top: 8px;
  padding: 20px;
}
.contract-block .sec-title h4{
  color: var(--color-white);
  font-weight: 600;
  font-size: 28px;
  margin-bottom: 20px;
}
.contract-block .light-text{
  font-size: 16px;
  font-weight: 500;
  color: var(--color-white);
  margin-bottom: 16px;
  line-height: 1.4;
}
.motivation-block .sec-title h4{
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-black);

}
.motivation-block .input-block{
  width: 100%;
}
.motivation-block .input-block .jw-input{
  border: 1px solid var(--color-black);

}
.examplaning-block .sec-title h4{
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-black);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.examplaning-block .sec-title p{
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--color-black-light);
  margin-bottom: 0px;
  text-transform: uppercase;
}
.examplaning-block .sec-heading h2{
  font-size: 32px;
  font-weight: 600;
  color: var(--color-white);
  margin-bottom: 8px;
  line-height: 1.4;
  text-transform: uppercase;
}
.examplaning-block .sec-heading p{
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-white);
  margin-bottom: 0px;
  text-transform: uppercase;
}
.drop-down-selector{
  border: 1px solid var(--color-black);
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 5px;
}
.drop-down-selector li{
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.drop-down-selector li span{
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-black);
  margin: 0;

}
.drop-down-selector.light li span{
  color: var(--color-white);
}


.drop-down-selector li a{
  font-size: 20px;
  color: var(--color-black);
  transition: var(--transition)
}
.drop-down-selector.light li a{
  color: var(--color-white);
}
.drop-down-selector li a.custom_select.active{
  transform: rotate(-180deg);
}
.drop-down-selector li .select-menu{
  position: absolute;
  display: none;
  left: 0;
  top: 38px;
  z-index: 100;
  width: 100%;
  padding: 0;
  border-radius: 0 0 20px 20px;
  background: var(--color-grey-light);
  overflow: hidden;
  max-height: 300px;
  overflow-y: auto;
  padding-bottom: 10px;
  border: 1px solid var(--color-black);
  border-top: 0;
}
.drop-down-selector li .select-menu li{
  font-size: 24px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-black);
  margin: 0;
  padding: 5px 10px;
  cursor: pointer;
  transition: var(--transition);
}
.drop-down-selector.light li .select-menu li{
  color: white;
}

.drop-down-selector li .select-menu li:hover{
  background: var(--color-dark-grey);
  color: var(--color-white);
}
.drop-down-selector.light li .select-menu li:hover{
  background: white;
  color: var(--color-black);
}

.strategic-block .light-text{
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-black);
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.strategic-block .light-text.st-1{
  padding: 4px ;
}

.strategic-block .sec-heading h4{
  font-size: 28px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
}


.table-borderless td, .table-borderless th {
  border: none;
}

.table-custom-align th,
.table-custom-align td{
  text-align: center;
}
.table-custom-align th:first-child,
.table-custom-align td:first-child{
  text-align: left;
}

.list-group-item{
  cursor: pointer;
}
.list-group-item-active{
  background-color: var(--color-orange);
  color: var(--color-white);
  font-weight: bold;
}
#option-chart tr td{
  cursor: pointer;
}
#option-chart tr td:hover:not(.active-option){
  outline: 1px solid var(--color-orange) !important;
  color: var(--color-orange) !important;
}
#option-chart tr td.active-option{
  background-color: var(--color-orange);
  color: var(--color-white);
  /* font-weight: bold; */
}

/* .print-action .hidden{
  display: blo!important;
} */
.print-action .pdf-page{
  height: 0 !important;
  overflow: hidden;
  visibility: hidden;
  padding: 0 !important;
  /* display: block !important; */
}

.print-action .item-group .item{
  padding: 5px !important;
}

.print-action br{
  display: none !important;
}
.hidden{
  display: none;
}

#pdf-view{
  height: 0 !important;
  overflow: hidden;
  visibility: hidden;
  padding: 0 !important
}

@media print {
  .print-page-break-before{
    page-break-before: always;
  }
  body *{
      visibility: hidden;
  }
  #report-area .tabs__pane{
    visibility: hidden;
    height: 0;
  }
  #report-area .tabs__pane.pdf-page{
    visibility: visible;
    height: unset;
  }
  #report-area,.pdf-page, #report-area .pdf-page * {
      visibility: visible;
  }
  #report-area {
      position: absolute;
      left: 0;
      top: 0;
  }
  .pdf-page.hidden{
    display: block;
  }
  .pdf-page br,
  .title .company-logo-title h2,
  .heading-group{
    display: none;
  }
}