: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', 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: flex; 
        flex-wrap: wrap;

       grid-template-columns: 1fr  ;
        grid-gap: 0.5rem;
       } */

.public_content_container   .product-block {
    display: flex; 
    flex: 1;
    margin: 0 -0.5rem;
    flex-wrap: wrap;
/*    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 0.5rem;*/
}

.m { margin-top: -0.5rem; }
.m .learn-more {
	display: none;
	padding: 0.2rem 0.8rem;
	color: #0043a2;
	border: 1px solid #0043a2;
	transition-duration: 0.5s;
}
.m .mobile-learn-more {
	font-size: 0.9em;
	color: #007bff;
	cursor: pointer;
	transition: color 0.5s;
}
.product.clicked .m .mobile-learn-more {
	color: white;
}
/* .m .mobile-learn-more::before { */
/* 	content: attr(data-text); */
/* 	display: block; */
/* 	font-size: 0.9em; */
/* 	color: #007bff !important; */
/* 	cursor: pointer; */
/* } */
/* .m .mobile-learn-more.collapse::before { */
/* 	display: none; */
/* } */
/* .m .mobile-learn-more::after { */
/* 	content: 'Collapse'; */
/* 	display: none; */
/* 	font-size: 0.9em; */
/* 	color: #007bff !important; */
/* 	cursor: pointer; */
/* } */
/* .m .mobile-learn-more.collapse::after { */
/* 	display: block; */
/* } */

.modal-header {
	background-color: #f0f5fb;
	border-bottom: none;
}
.modal-header .close span {
	font-size: 1.6rem;
	font-weight: 400;
	color: #333;
}
.modal-title {
	color: #0043a2;
	font-weight: 400;
}
.card-body {
	padding-top: 0.75rem;
	padding-bottom: 0;
}
.card-body .rich-text { text-align: left; }

.card-body .rich-text h4 {
	position: relative;
	margin-top: 1.2rem;
	margin-bottom: 0.6rem;
	padding-left: 1.7rem;
	font-size: 0.95rem;
	color: #0043a2;
}
.card-body .rich-text h4:before {
	content: '\2605';
	position: absolute;
	top: 0;
	left: 0;
	font-size: 0.85rem;
	color: orange;
}
.card-body .rich-text h4:first-child {
	margin-top: 0;
}
.card-body .rich-text ul {
	padding-left: 1.7rem;
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
}
.card-body .rich-text ul li {
	margin-bottom: 0.3rem;
    line-height: 1.3;
    
}
.card-body .rich-text ol {
	padding-left: 1rem;
}
.card-body .rich-text ol li {
	margin-top: 0.2rem;
}
.card-body .rich-text p {
	font-size: 0.85rem;
	padding-left: 1.7rem;
	margin-bottom: 0;
}
.modal-content .btn {
	background-color: transparent;
	border: 1px solid #0043a2;
	color: #0043a2;
	padding: 0.5rem 1.5rem;
	letter-spacing: 1px;
	margin-bottom: 1.2rem;
	box-shadow: none;
	transition: color 300ms ease-in-out,
		background-color 300ms ease-in-out;
}
.modal-content .btn:hover {
	background-color: #0043a2;
	color: white;
}


/* Learn more modal (Desktop) section CSS */
.modal-title {
    color: #0043a2;
    font-weight: 400;
}
.modal-body h4 {
    position: relative;
    margin-top: 1.2rem;
    margin-bottom: 0.6rem;
    padding-left: 1.7rem;
    font-size: 1.3rem;
    color: #0043a2;
}
.modal-body h4:before {
    content: '\2605';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.2rem;
    color: orange;
}
.modal-body h4:first-child {
    margin-top: 0;
}
.modal-body ul {
    padding-left: 1.7rem;
    margin-bottom: 0.4rem;
}
.modal-body ul li {
    margin-bottom: 0.3rem;
    line-height: 1.3;
}
.modal-body ol {
    padding-left: 1rem;
}
.modal-body ol li {
    margin-top: 0.2rem;
}
.modal-body p {
    font-size: 0.85rem;
    padding-left: 1.7rem;
    margin-bottom: 0;
}



.card-face-container {
    display: flex;
    margin: 0 -0.5rem;
    flex-wrap: wrap;
/*    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 0.5rem;*/
}

.card-face-container > div {
    /* 6 items per row */
    flex: 1 0 13%;
    margin: 0 0.5rem;
    width: 100%;
    min-height: 1px;
}

.card-face-container  .horo {
	flex: 1 0 30% ;
}

.public_content_container  .select-region {     
    display: flex; 
/*    grid-template-columns: 1fr 1fr ;*/
    /*
    grid-template-areas:
    "i c"
    "m m";
*/
/*    grid-gap: 0.5rem;*/

    align-self: start;
    margin-left: 0.5rem;
    /* Too much padding on the right for text */

		margin-bottom: -0.5rem;
 }

.select-region > div {flex: 1 0; margin: 0 0.25rem;}

.product:first-child img { max-height: 154px; }

.product .features-mobile ul { padding-left: 1.2rem; }
.product .features-mobile li:not(:last-child) { margin-bottom: 0.4rem; }


.select-region {
    max-width: 100%;
    width: 100%;
    min-height: 1px; /* for IE11 as nested display:flex; causes issue with height calculations in IE */
	box-sizing: border-box;
}


.m { margin-top: auto; width: 100%; }
/* width: 100%; position: absolute; bottom: 1rem; } */
   .product .i { padding-right: 0.5rem; }
   .public_content_container  .product  .c {line-height: 1.3;}
   .product .c > h3, .mobile-product-name { font-size: 0.95rem; 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;
    margin: 1rem 0;
    /* height: max-content; */
    transition-duration: 1s;
}

.product {
    /* 3 Products per row */
    max-width:33%;
    flex: 1 0 25%;
    flex-wrap: wrap;
    margin: 0.25rem;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    /* align-items: center; */
    padding: 1rem 1rem 0.4rem;
    position: relative;
}
.product > div {overflow: hidden; overflow: auto}

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

/* .product a , .card-face-container a {color: grey;} */
.product.clicked .m .rich-text a {text-decoration: underline;} /* Standard Bootstrap Link colour */

.package 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: flex; 
    flex: 1;
    /* Remove additional space at the side due to flex */
    margin: 0 -0.5rem;
    flex-wrap: wrap;
/*    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem;*/
}

.package-container > div {
    /* 2 packages per row */
    flex: 1 0 45%;
}

.rotate-icon, .choose-zodiac, .choose-zodiac:hover {color: grey;}

.package-container ul { padding-left: 1.2rem; margin-top: 1rem; }
.package-container ul li { margin-bottom: 0.4rem; font-size: 1rem; line-height: 1.3; }
.package-container ul li:last-child { margin-bottom: 0; }

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

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

.mobile-product-name {padding: 0 0.75rem;}


.copy-url-btn {
    background-color: var(--color-highlighted) !important;
    color:white !important;
    margin: auto;
}

.action-page-intro { font-size: 1rem; color: white; padding-left: 0.4rem; margin-top: 1rem; }
.myinfo-container {
    /* Edit this after MyInfo page confirmed */
    /* display: grid; 
    grid-template-columns: 1fr 1fr;
    grid-gap: 0.5rem; */

    /* This is for mobile mode */
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    padding: 0.5rem;
    align-items: stretch;
}
.myinfo-choice {
    width: 100%;
    min-height: 1px;
    background-color:rgba(39, 8, 8, 0.3);
    padding: 1rem 1rem;
    border-radius: 5px;
}
.center-img{ margin: auto; margin-top: 1rem; margin-bottom: 0.4rem; max-width: 100px; }
.myinfo-choice h4 { font-size: 1.6rem; color: white; padding-bottom: 1rem; text-shadow: 1px 1px rgba(0,0,0,0.3); }
.myinfo-choice h5 { text-transform: uppercase; font-size: 0.95rem; color: #f2f285; font-weight: 300; letter-spacing: 0.3px; }
.myinfo-choice .rich-text {line-height: 1.4; color: white; font-size: 0.9375rem; margin-top: 1rem;}
.myinfo-choice .myinfo-action { padding-left: 1.25rem; padding-right: 1.75rem; }
.new-customer {padding: 0 0 2rem; position: relative;}
/* .new-customer:nth-child(2) { display: none !important; }
.existing-customer { display: none !important; } */
.existing-customer-content {padding-left: 0; padding-right: 0;}
.manual-form-btn, .manual-form-btn:active, .manual-form-btn:hover {border: 1px solid white; color: white; height: 46px;}
#action-page-bg {
    min-height: 100vh;
    /* background-image: ""; */
    background: linear-gradient(to left bottom, rgba(179, 150, 150, 0.2), rgba(202, 181, 181, 0.2));
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    background-attachment: fixed;
}

.modal-content .btn:hover {
	background-color: #0043a2;
	color: white;
}


.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, .clicked .mobile-product-name { color: white; }
.clicked .card-body .rich-text h4 { color: white; font-weight: 400; }

.acknowledge-title > h2 {font-weight: 500; margin: 0.4rem 0 1.2rem;}
.acknowledge-content {display: none;}

/* 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-columns: 50px 1fr 500px;
    /* 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 */


.footer {
	font-size: 0.9rem;
	color: #777;
	text-align: center;
	padding-bottom: 1rem;
}


/* user avatar */

.avatar-circle {
  
    
    border-radius: 25px;
    color: white;
    height: 25px;
    
    width: 25px;
    display: inline-block;
    
    
}
.avatar-circle p {
    position: relative;
    text-align:center;
    vertical-align: middle;
    display: table-cell;
    width: 25px;

}

span.username {  display: inline-block; position: relative; top: -10px; margin-left: 2px; }






@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 (min-width: 992px) {
		.action-page-intro { font-size: 1.2rem; text-align: center; }
		.myinfo-choice { padding: 2rem 1rem; }
		.myinfo-choice h4 {
			font-size: 1.8rem;
			padding-bottom: 1rem;
			padding-left: 1rem;
		}
    .myinfo-container {flex-direction: row;}
    .myinfo-choice {
        position: relative;
        flex: 0 0 45%;
        min-width: 1px;
        margin: 1rem;
    }

    .new-customer-container {display: flex; flex-direction: row; flex: 1; flex-wrap: wrap; }
    .new-customer {
        flex: 1 0 40%;
        min-width: 1px;
        display: flex;
        flex-direction: column;
        position: relative;
        flex-wrap: wrap;
        padding-left: 1rem;
        padding-right: 1rem;
				padding-top: 0;
				padding-bottom: 0;
    }
    .myinfo-container .myinfo-choice section {margin-top: auto;}
    .new-customer:first-of-type {padding: 0 1rem;}
    .line-separator::after {
        content : "";
        position: absolute;
        right    : 0;
        z-index: 100;
        top  : 10%;
        width  : 1px;
        height   : 60%;  /* or 100px */
        background: white;
				display: none;
    }

    .existing-customer {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 2rem 1rem;
    }
		.existing-customer-content {padding: 0 1rem 1rem;}
}

@media only screen and (min-width: 814px) {
    .mobile-product-name {display: none;}
		.product { padding-bottom: 1rem; }
		.public_content_container .select-region { margin-bottom: 0; }
}
@media only screen and (max-width: 813px) {

    .product {
        flex: 1 0 90%;
        max-width:100%;
    }
    .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 .package-container .package { flex: 1 0 95%;}
   .desktop-product-name {display: none; }

    /* .public_content_container > div {   flex: 1 0  ;} */

   /* .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;} */
    /* .product-btn-primary, .product-btn-secondary {display: block; margin: auto;} */

    .copy-url-btn {width:100%; height: 3rem;display: block; margin: 5px 0px 5px 0px; padding: 5px 0px 5px 0px;}

    .select-region .i { flex: 1; }
    .select-region .c { flex: 2; }
   /* .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; margin-top: 0.8rem; }
        .clicked .m .learn-more { color: white; border-color: white; }
        .features-mobile {display: none; }
        .mobile-learn-more {display: none;}

        .public_content_container .package-container .package { max-width:50%;}

}  

@media only screen and (max-width: 768px) {
   .features {display: none;}
}


@media only screen and (max-width: 500px) {
    /* To fix zodiac cards alignment in mobile view */
    /* I'm just gonna make this a set size to prevent it being too small */
    .card-face-container {justify-content: center;}
    .card-face-container > div {
        flex: 1 0 auto;
        min-width: 56px;
        max-width: 64.67px;
        min-height: 1px;
    }
}


@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {  
    /* IE10+ specific styles go here */ 
    .product, .package {background-color: #fcf7f7;}
    .package h4  {background-color: #2F2234;}
    .product-btn-primary, .product-btn-primary:active {background-color: #604959;}
    .clicked {background-color: #604959;}
    .clicked a {color: #fcf7f7;}

    /* Case management, but still putting it in anyway */
    .doc_upload {background-color: #fcf7f7;}
    .comment-box {background-color: #fcf7f7;}

    /* Override bootstrap's display: flex in modals */
    .modal-content {display: block;}
}