@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;600;700&family=Playfair+Display:wght@500&display=swap');
:root{
    --main_color:#69D3BC;
    --sec_color:#c7d369;
    --text_dark:#232323;
    --title_font:'Karla', sans-serif;
    --main_font: 'Karla', sans-serif;
}
body{color: var(--text_dark); background-color: #f5f5f5; font-family: var(--main_font); font-weight: 400; font-size: 16px;/* --title_font:'Playfair Display', serif;*/}
header{background-color: var(--main_color); color:white; max-height: 50px; }
.container{width: 100%; max-width: 1000px;}
.tagline{padding: 10px 0;}
.logo{background-color: var(--main_color); padding: 1rem; text-align: center; border-radius: 0 0 20px 20px;}
.logo img{max-height: 120px; margin: 0 auto;}
.nav{padding: 5px 0;}
.nav .nav-link{color: white; cursor:pointer;}
.form-control, .form-select{border-radius: 0; background-color: #f9f9f9;}
h1,h2,h3{font-family: var(--title_font);}
.form-check-input:checked {
    background-color: var(--main_color);
    border-color: #559386;
}
.form-check-input:focus,.form-control:focus,.form-select:focus {
    border-color: #e1fef8;
    outline: 0;
    box-shadow: 0 0 0 .25rem rgba(105, 211, 188,0.25);
}
body .btn-primary{background-color: var(--main_color); border: none; border-radius: 0; padding-left: 2.5rem; padding-right: 2.5rem;}
body .btn-primary:hover{background-color: var(--sec_color);}

body .btn-secondary{background-color: var(--sec_color); border: none; border-radius: 0; padding-left: 2.5rem; padding-right: 2.5rem;}
body .btn-secondary:hover{background-color: var(--main_color);}

.previewReport .btnSec .btn{ color:#333; font-weight:600;font-size: 18px;}
.previewReport .btnSec .btn:hover{ opacity:0.6}
.previewReport .btnSec .col{display: flex; justify-content: center;}

.form-label{font-weight: 600; font-size: 1.05rem;}
.table tr td:first-child, .table tr th:first-child{text-align: left;}
.table tr th{font-size: .85rem;}
.wrapper{ margin: 30px auto; padding: 2rem;}

.sibInner .col{ font-size:15px; font-weight:600; margin-left:10px; padding:5px 0;}
.sibInner .col label{ padding:0 10px; width:170px;}

.sibPreview { display: flex; justify-content: center;}
.sibPreview .table h4{ text-align:center;}
.sibPreview .table td{ vertical-align:middle !important}
.sibPreview .table .btn-sm {--bs-btn-padding-y: 2px;    --bs-btn-padding-x: 15px;}
.finalReport h4{ text-align:center;}
b, strong{ font-weight:600;}

.authPage{ display:flex; justify-content: center;}
.authPage form{ width:40%;}
.authPage h4, .authPage p{ text-align:center;}
.authPage .form-label{ font-size:16px; margin-bottom:2px;}
.authPage .btn{width:100%; font-size:16px; color:#000; font-weight:600; text-transform:uppercase;}
.error{color: #a94442; font-weight: 600;margin-top: 2px;font-size:15px;}
#resDisplay .alert {padding: 10px 15px;margin-bottom: 20px;border: 1px solid transparent;border-radius: 4px;font-size: 16px;font-weight:600; text-align:center;}

.modal .modal-header{ background-color: #f5f5f5; color:#333;}
.modal .modal-header h5{ font-weight:600;}
.modal .modal-body, .modal .modal-body h6{ line-height:26px;}
.w50{ width:50%}

.tree_structure{background-image: url('../tree_bg.png'); background-position: center; background-repeat: no-repeat; background-size: contain;}
.tree_structure .card{position: relative;}
.tree_structure .t_card {
    background-color: rgba(255,255,255,0.8);
  }
.tree_structure .t_card .badge {position: absolute;top: -10px;left: calc(50% - 50px);width: 100px;}
.tree_structure .t_card h6{ font-weight:600;}
.tree_structure .t_card small{ text-align:left;}

/* @media screen and (max-width:830px) {
    header .row .col:nth-child(2){  position: absolute;
        max-width: 250px;
        left: calc(50% - 125px);
        top: 0px; z-index: 0;
      }
      header .row .col:nth-child(3){text-align: right;}
      header .row .col:nth-child(3) .nav{justify-content: flex-end;}
}
@media screen and (max-width:767px) {
    header .row .col:nth-child(1){  display: none;}
    .logo{position: relative;}
    .logo::after{position: relative; content: "Bringing depression into the light"; margin-top: 8px; display: block; font-size: 70%;}
    header .row .col:nth-child(2){left: 0; top: -10px;}
} */
@media screen and (max-width:830px){
    header{max-height:inherit ;}
    header .row .col:nth-child(1){order: 2; width: 50%; flex: 1 0 auto;align-self: center;}  
    header .row .col:nth-child(2){order: 1; width: 50%; flex: 1 0 auto;}  
    header .row .col:nth-child(3){order: 3; width: 50%; flex: 1 0 auto;} 
    header .row .col:nth-child(3) .nav{justify-content: center; border-top: 1px solid var(--sec_color);} 
    .logo {  text-align: left;}
    .logo img{ max-height: 80px; }
    main.mt-5.pt-5{margin-top: 0 !important; padding-top: 0rem !important;}
	
	.authPage form{ width:100%;}
	.w50{ width:100%}
}