:root {
    --color-light: white;
    --color-dark: black;

    --card-size: 220px;
    --color-select-box: rgba(0,0,0,0.5);
    --color-back: #3CAEA3;
    --color-forward: black;
    --color-box:  #93912B;
    --color-spare2: #ED553B;
    --color-spare3:  #F6D55C;
    --color-spare4:  #3CAEA3;
    --color-hover: grey;
    --box-bg-color: #fcf7f7;
    --color-dark-bg: #2F2234;
    --color-highlighted: #604959;    

}

body * {
    font-family:'Karla','Play',  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell,sans-serif;
    /*font-size: 0.85rem;*/
}

.navbar-collapse {max-height: fit-content !important;} 

.table td {white-space:nowrap;}



/* product pages CSS */

.public_content {padding: 10px;}
.public_content * { font-family: 'Roboto',  sans-serif; }
    
.public_content_container {     
        display: grid; 
        grid-template-columns: 1fr  ;
        grid-gap: 0.5rem;
       }

.public_content_container   .product-block {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0.5rem;
}

.m .learn-more {
	display: none;
	padding: 0.2rem 0.8rem;
	color: #0043a2;
	border: 1px solid #0043a2;
	transition-duration: 0.5s;
}

.card-face-container {
    display: grid; 
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 0.5rem;
}

.public_content_container  .select-region {     
    display: grid; 
    grid-template-columns: 1fr 1fr ;
    /*
    grid-template-areas:
    "i c"
    "m m";
*/
    grid-gap: 0.5rem;
    align-self: start;
		margin-bottom: 0;
   }

.m { margin-top: auto; }

   .product .i { padding-right: 0.5rem; }
   .public_content_container  .product  .c {line-height: 1.3;}
   .product .c > h3 { font-size: 1.3rem; color: #0043a2; font-weight: 400; margin-bottom: 0.8rem; transition-duration: 1s; }

   .c .rich-text > p { font-size:0.85rem; line-height: 1.4; margin-bottom: 1rem; }
   .c .rich-text br { line-height: 1.8; }
   /* .public_content_container  .product .i {align-self:center;} */
   .public_content_container  .product  .m {text-align: center;}



.product, .package, .myinfo-choice {
    background-color: var(--box-bg-color);
    color: black;
    padding: 5px;
    /* height: max-content; */
    transition-duration: 1s;
}

.product { display: flex; flex-direction: column; padding: 1rem; }

.product .features { display: none; }
.product .features-mobile { display: block; }

.package .rich-text {font-size:0.85rem;line-height: 1; margin-top:0.5rem;}

.product a , .card-face-container a {color: grey;}

.package h4 , .myinfo-choice h4 {background-color: var(--color-dark-bg); text-align: center; color:white;}
.package .card-img-container {
    display:flex;  
    align-items: center;
    justify-content: center;
    margin: 0 -5px;
}
.package .card-img {flex:auto; text-align: center; padding:0 5px;}

.public_content_container   .package-container {
    display: grid; 
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;
}

.package-container .card-img-container { margin-bottom: 1.2rem; }


.product-btn-primary, .product-btn-primary:active {background-color: var(--color-highlighted) !important; color:white !important;}
.product-btn-secondary, .product-btn-secondary:active {background-color: black !important; color:white !important;}

.product-btn-primary, .product-btn-secondary { cursor: pointer; }
.product-btn-primary > a { color: inherit; }

.myinfo-container {
    display: grid; 
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;


}

.dimmed {opacity: 0.5;}

.clicked {background-color: var(--color-highlighted);  color: white; transition-duration: 1s;}    
.clicked a {color:var(--box-bg-color);transition-duration: 1s;}
.clicked .c > h3 { color: white; }
/* product pages CSS */



.data * {
    font-family: 'PT Mono', monospace;
}

.checkbox-row { display: flex;}
.checkbox-row .form-check { flex:1;}

td.action,  th.action {  text-align: center;}

.btn-shift-left {margin-left: 0px;}
.btn-circle {
    
    width: 25px;
    height: 25px;
    
    padding: 0px  !important;
    margin: 0px 0px 5px 0px!important;
    border-radius: 15px;
    text-align: center;

}
.btn-sq {
    

    width: 50px;
    height: 50px;
 

    padding: 0px  !important;
    margin: 0px 0px 0px 0px!important;
    border-radius: 0px;
    text-align: center;


}
.btn-sq:hover {    border: 1px solid white;}



.small_icon {width:75%;}
/* 
a[rel='page'] {color: grey; margin:2px;}
*/

small { font-size: 0.7rem;}
.error ul {
    list-style-type: none;
    padding: 0px;
  }

.user_inactive {

    background-color:darkgrey;
    color: white;
    padding: 0px 5px 0px 5px;

}

.select-style{ border: 1px solid darkgrey; }
.select-style select{ border: 0px }

.doc_upload {background-color:var(--box-bg-color) }
.comment-box {background-color:var(--box-bg-color) ; padding:5px;}
.comment-item-box #comments_div > div  {
    
     display: grid; 
    grid-template-columns: 3fr 30px auto ;
    grid-template-rows:  auto minmax(0px, 1fr); 
    grid-template-areas:
    "c i n"
    "c t t";
    grid-column-gap: 5px;
    font-size: 0.85rem;
    padding-block-end: 0.5rem;
    
}
.comment-item-box #comments_div > div  .c {grid-area:c}
.comment-item-box #comments_div >div  .i {grid-area:i}
.comment-item-box #comments_div >div  .n {grid-area:n; text-align: right;}
.comment-item-box #comments_div >div   .t {grid-area:t}
/**** grid templates ****/

.page-wrapper {
    display:grid;
    grid-column-gap: 0px;
    grid-template-columns: 50px 2fr 1fr;

    /* grid-template-rows: minmax(1fr, 0px) ; */
   
 
    grid-template-areas:
        "hd hd hd"
        "nav bx1 bx3"
        "nav bx2 bx3";  
}

.page-wrapper .header { grid-area:hd; padding-left: 15px; background-color: grey; color: white;}
.page-wrapper  .menu { grid-area:nav; background-color: grey; min-height:90vh;}
.page-wrapper .bx1 {grid-area:bx1;   margin:0px 10px; }
.page-wrapper .bx2 {grid-area:bx2;  margin:0px 10px; }
.page-wrapper .bx3 {grid-area:bx3; margin:0px 10px;   }





.form-grid {
    display:grid;
    font-size: 0.8rem;
}

.form-grid label, .page-wrapper  label {
    font-weight: bold;
    font-size:0.8rem;
    margin-top: 0px;   
    margin-bottom: 0px;   
}

.form-grid .mb , .page-wrapper  .mb {
    margin: 0px;  
 

}
.form-grid input, .page-wrapper  input {
    margin: 0px;
    width: 100%;
}


/* grid templates */












@media only screen and (max-width: 992px) {

  .dropdown .dropdown-menu-right {
      left: 0!important;
      right: auto !important;
  }

/*  .navbar-collapse {overflow: visible !important ; } */
  .navbar .dropdown-menu {position: static !important;}
}
@media only screen and (max-width: 813px) {

    .page-wrapper {
        display:grid;
        grid-template-columns: 1fr; 
        grid-template-rows: minmax(1fr, 0px) 1fr;
        grid-template-areas:
            "hd"
            "nav"
            "bx1"
            "bx2"
            "bx3";  
    }

    .page-wrapper  .menu { display: inline-flex; min-height:unset;}
    /* .public_content_container { grid-template-columns: 1fr ;} */
    .public_content_container   .product-block, .public_content_container   .package-container , .myinfo-container { grid-template-columns: 1fr ;}
    .public_content_container > div {   grid-template-columns: 1fr  ;}

   /* .navbar-collapse {overflow: visible !important ; } */
    .navbar .dropdown-menu {position: static !important;}


    .product-btn-primary, .product-btn-secondary {width:100%; height: 3rem;display: block; margin: 5px 0px 5px 0px; padding: 5px 0px 5px 0px}

    .card-face-container  { grid-template-columns: 1fr 1fr 1fr ;}

    .public_content_container  .select-region {     

        grid-template-columns: 1fr 2fr ;
 
       }

}

@media only screen and (min-width: 769px) {
		.rotate-icon { display: none; }
		.m .learn-more { display: inline-block; }
		.clicked .m .learn-more { color: white; border-color: white; }
    .product .features { display: block; }
    .product .features-mobile { display: none; }
}

@media only screen and (min-width: 1550px) {
		.public_content_container .select-region { margin-bottom: 0.8rem; }
}