/*
Project: TriDental
Version: 1.0
Author URI: http://www.internetimagineering.com/
*/

:root {
	/* CUSTOM SITE COLORS */
	--t-blue: #4f657e;
	--t-dkblue: #1c3145;
	--t-yellow: #eddf83;
    
        --t-ltblue: #7698be;

    /* STANDARD COLORS */
    --beige: #FF9900;
    --red: #459939;
    --dkred: #990000;
    --black: #000000;
    --ltblack: #000000;
    --ltgray: #DDDDDD;
    --midgray: #CCCCCC;
    --gray: #999999;
    --dkgray: #666666;
    --white: #ffffff;

}

* { box-sizing: border-box; }
html {scroll-behavior:smooth;}
@view-transition { navigation: auto; }
::view-transition-old(root),::view-transition-new(root) { animation-duration: 0.5s; }

body {
	background-color: #fff;
	margin: 0px 0px; 
	padding: 0px;
	font-family: 'Roboto', trebuchet ms, arial, verdana, sans-serif;
	color: #333;
	font-size: 14px;
}

#wpadminbar { top:auto !important; bottom:0 !important; }
.clear { clear: both;}

.imgFull {width: 100%;}
img.imgFull {width: 100%;}

.iconSpace {margin: 0 8px 0 0;}

/* iiMenu */
i.iiMenuIcon {margin: 0 0 0 5px;}
ul.iiMenu > li:hover i.iiMenuIcon { rotate: 180deg; }

ul.iiMenu {display: flex; }
ul.iiMenu li {list-style-type: none; margin: 0 20px; padding: 0;}

ul.iiMenu > li {position: relative; padding: 20px 0 10px 0; height: 54px;}
ul.iiMenu > li > a {font-size: 1rem; color: var(--white); text-decoration: none; text-transform: uppercase; font-weight: 500; } /* main menu */
ul.iiMenu > li > a:hover {color: var(--t-yellow); text-decoration: none;} /* main menu hover */

ul.iiMenu > li > ul {position: absolute; background-color: var(--t-blue); margin: 0; padding: 30px 10px; min-width: 260px; top: 54px; border-bottom: 2px solid var(--t-blue); left: -20px;}
ul.iiMenu ul {visibility: hidden; opacity: 0; transition: opacity 0.5s;}
ul.iiMenu > li:hover > ul {visibility: visible; opacity: 1;}

ul.iiMenu > li > ul a { display: block; color: var(--white); padding: 5px 0; margin: 0; font-weight: 500; font-size: 1rem; text-decoration: none;} /* subnav level 1 menu */
ul.iiMenu > li > ul a:hover {color: var(--t-yellow); text-decoration: none;}

ul.iiMenu > li > ul:before {
    content: '';
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid var(--t-blue);
    top: -10px;
    left: 25px;
    position: absolute;
}

/* FORM */
input.inputQuickFind {font-size: 1rem; padding: 6px 10px; color: var(--t-dkblue); border: 2px solid var(--t-dkblue); width: 90%;}
input[type=text],input[type=search],input[type=date],input[type=number],input[type=password],input[type="datetime-local"],input.inputText {font-size: 1rem; padding: 10px 10px; color: var(--t-dkblue); border: 1px solid var(--midgray); display:block; width: 100%;}
textarea { font-family: 'Roboto', trebuchet ms, arial, verdana, sans-serif; font-size: 1rem; padding: 10px 10px; color: var(--t-dkblue); border: 1px solid var(--midgray); display:block; width: 100%; min-height: 5em; }
select { display: block; width: 100%; padding: 10px; border: 1px solid var(--midgray); }
.inputCurrency, .inputExtra { display: flex; align-items: center; gap: 0.5em; }

/* TEXT */


/* LINKS */
a, a.linkBlue {
    color: var(--t-blue); text-decoration: none;
    &:visited {color: var(--t-blue); text-decoration: none;}
    &:hover {color: var(--dkred);}
}

.iiMenu a, a.linkWhite {
    color: var(--white); text-decoration: none;
    &:visited {color: var(--white); text-decoration: none;}
    &:hover {color: var(--t-yellow);}
}

a.current { color: var(--t-yellow) !important; border-bottom: 2px solid var(--t-yellow); } /* current page */

/* BUTTONS */
.buttonWhite {
    font-size: .8rem; color: var(--t-blue); border: 2px solid var(--t-blue); padding: 6px 20px; text-align: center; background-color: var(--white); text-transform: uppercase; 
    &:hover {background-color: var(--t-blue); color: var(--white) !important; cursor: pointer;}
}

button.buttonBlueBig {font-size: 1rem; color: var(--white); border: 2px solid var(--t-blue); padding: 6px 20px; text-align: center; background-color: var(--t-blue); text-transform: uppercase;}
button.buttonBlueBig:hover {background-color: var(--dkred); color: var(--white); cursor: pointer;}

button.buttonYellow {font-size: 1rem; color: var(--t-blue); border: 2px solid var(--t-yellow); padding: 10px 20px; text-align: center; background-color: var(--t-yellow); text-transform: uppercase;}
button.buttonYellow:hover {background-color: var(--t-ltblue); color: var(--t-dkblue); border: 2px solid var(--t-ltblue); cursor: pointer;}

button.buttonBlueSmall {font-size: .8rem; color: var(--white); border: 2px solid var(--t-blue); padding: 5px 20px; text-align: center; background-color: var(--t-blue); text-transform: uppercase;}
button.buttonBlueSmall:hover {background-color: var(--dkred); color: var(--white); cursor: pointer;}


/* HEADINGS */
h1.pageTitle {color: var(--t-blue); font-family: 'PT Serif', times new roman, serif; font-size: 1.6rem; font-weight: 400; margin: 0; padding: 0;}
h3.sidebarTitle {color: var(--t-dkblue); font-size: 1.2rem; font-weight: 600;}

h1.mainTitle {font-size: 2.4rem; color: var(--t-blue); font-weight: 400; margin: 0; padding: 0;}
h3.subTitle {font-size: 1.6rem; color: var(--t-ltblue); text-transform: uppercase; letter-spacing: 1px; font-weight: 400; margin: 0; padding: 0;}

/* HEADER */
.headerWrapper {width: 100%; background-color: var(--t-dkblue);position:fixed;top:0; z-index: 999;}
.headerContainer {width: 100%; display: grid; grid-template-columns: 250px auto 280px; grid-column-gap: 30px; align-items: center;}
.headerLogo {background-color: var(--t-blue); padding: 20px 30px;}
.headerLogo img {width: 100%;}
.headerNav {}
.headerAction {text-align: right; color: var(--white); margin: 0 30px 0 0;}
.headerName {font-size: 1rem; font-weight: 600;}
.headerActionLinks {margin: 5px 0 0 0;}
.headerActionLinks a {margin: 0 0 0 20px;}

/* LOGIN */
.loginWrapper {width: 100%; height: 1500px; background: #fff url('/images/tridental-login-bg.jpg') no-repeat top right; position: relative;}
.loginContainer {width: 800px; background-color: #fff9; border: 1px solid var(--t-blue); padding: 50px; position: absolute; top: 30%; left: 30%; transform: translate(-50%,-50%);}

/* LAYOUT */
.layoutWrapper {width: 90%; margin: 120px auto;}

.pageNav {width: 100%; display: flex; justify-content:space-between; align-items: center;}
.pageNav-Find {display:flex; gap:0.5em; align-items: center; }

.layoutFull {width: 100%; margin: 40px auto;}
.layout-grid-3-1 {width: 100%; display: grid; grid-template-columns: auto 300px; grid-column-gap: 80px; margin: 40px auto;}
.layout-grid-1-1 {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 80px; margin: 40px auto;}
.layout-grid-1-2 {width: 100%; display: grid; grid-template-columns: 1fr 2fr; grid-column-gap: 80px; margin: 40px auto;}

.titleHolder {width: 100%; display: flex; justify-content: space-between; align-items: center;}
.titleHolder2 {width: 100%; display: grid; grid-template-columns: auto auto; align-items: top;}
.pageInfo {text-align: right;}

.sidebarHolder {background-color: var(--ltgray); padding: 30px; overflow:hidden;text-overflow: ellipsis;}

.sectionHolder { 
    border-top: 1px solid var(--t-blue); margin: 30px 0 0 0; padding: 30px 0 0 0;
    h1, h2, h3, h4 { margin-top: 0; }    
}

.dataRow-1 {margin: 0 0 20px 0;}
.dataRow-1-1 {display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 50px; margin: 0 0 20px 0;}
.dataRow-1-1-1 {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 50px; margin: 0 0 20px 0;}
.dataLabel {font-size: .8rem; color: var(--t-blue); text-transform: uppercase; font-weight: 600; margin: 0 0 5px 0;}

/* FLEX AND 12-COLUMN GRID */
.flex-center { display:flex; gap:2em; align-items:center; }
.flex-space { display:flex; gap:2em; justify-content:space-between;align-items:center; }
.grid-12 { display: grid; grid-template-columns: repeat(12,1fr); column-gap: 2em; row-gap: 1.5em; }
.col-12 { grid-column: span 12; }
.col-11 { grid-column: span 11; }
.col-10 { grid-column: span 10; }
.col-9 { grid-column: span 9; }
.col-8 { grid-column: span 8; }
.col-7 { grid-column: span 7; }
.col-6 { grid-column: span 6; }
.col-5 { grid-column: span 5; }
.col-4 { grid-column: span 4; }
.col-3 { grid-column: span 3; }
.col-2 { grid-column: span 2; }
.col-1 { grid-column: span 1; }
@media screen and (max-width:900px) {
    /* remove manual ordering */
    .grid-12 > * { order: 1 !important; } 
    /* narrow columns become half-wide */
    .col-11, .col-10, .col-9, .col-8,
    .col-1,  .col-2,  .col-3, .col-4 { grid-column: span 6; } 
}
@media screen and (max-width:768px) {
    /* squeeze gaps and let the flex wrap */
    .grid-12 { column-gap: 1em; }
    .flex-center { gap: 1em; flex-wrap: wrap; }
}
@media screen and (max-width:640px) {
    /* collapse grid columns */
    .grid-12 { grid-template-columns: 1fr; }
    .grid-12 > * { grid-column: 1; order: 1 !important;}
    /* collapse flex to a one-column grid */
    .flex-center { display: grid; grid-template-columns: 1fr; gap:1.5em;}
}

/* DIALOGS */
dialog[open] {
    position: fixed;
    .dlg-close { position: absolute; top: 0; right: 0.25em; font-size: 2rem; color: black; text-decoration: none; }
}
dialog::backdrop { background: #0008; backdrop-filter: blur(3px); }


/* TABLES */
table.tableData {margin: 40px auto; width: 100%;}
table.tableData thead th, table.tableData thead td {background-color: var(--t-blue); color: var(--white); text-transform: uppercase; font-weight: 600; padding: 5px 10px; font-size: .8rem; text-align: left; }
table.tableData tbody td {padding: 10px 10px; border-bottom: 1px solid var(--midgray);}

/* FOOTER */
.footerWrapper {width: 100%; background-color: var(--ltblack); display: grid; grid-template-columns: 1fr 1fr; padding: 40px 0; align-items: center;position:fixed;bottom:0;}
.copyright {color: var(--ltgray); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 0 30px; font-size: .7rem;}
.contact {color: var(--white); text-transform: uppercase; letter-spacing: 1px; margin: 0 30px 0 0; text-align: right;}

/* MARKETING STYLES */

.pageWrapper {margin: 160px auto 100px auto; width: 80%;}

.content {font-size: 1.2rem; line-height: 1.6rem;}
.grid-1-1 {width: 100%; display: grid; grid-template-columns: 1fr 1fr; grid-column-gap: 80px;  margin: 50px auto;}

.separatorYellow {width: 250px; height: 6px; background-color: var(--t-yellow); margin: 30px auto;}

.heroWrapper {width: 100%; max-height: 1200px; aspect-ratio: 16/9; background: #fff url('/images/hero-1.jpg') no-repeat top; background-size: cover; position: relative; z-index: 888;}

.heroCTA {width: 80%; max-width: 1200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #0008; padding: 50px; text-align: center;}
.heroCTA-title {font-size: 2.5rem; color: #fff; font-weight: 400;}
.heroCTA-subtitle {font-size: 1.4rem; color: var(--t-ltblue); text-transform: uppercase; margin: 20px 0; letter-spacing: 1px;}
.heroCTA-desc {font-size: 1.2rem; color: #fff; line-height: 1.6rem;}
.heroCTA-button {margin: 30px auto 0 auto;}

.fp-ctaContainer {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-column-gap: 0px; align-items: center; padding: 60px 0; border-bottom: 1px solid var(--t-ltblue);}
.fp-ctaHolder {text-align: center; width: 100%; margin: 0 auto; padding: 0 60px;}
.fp-ctaTitle {font-size: 1.8rem; color: var(--w-red); line-height: 2.4rem;}
.fp-ctaText {font-size: 1rem; line-height: 1.6rem; margin: 20px 0;}
.fp-ctaIcon {font-size: 2rem; color: var(--w-red);}
.borderL {border-left: 1px solid var(--t-ltblue);}

.fp-sect3Wrapper {width: 90%; margin: 100px auto;}
.fp-sect3Title {margin: 0 auto; width: 100%; text-align: center;}
.fp-sect3Subtitle {margin: 10px auto; width: 100%; text-align: center;}
.fp-sect3Text {width: 80%; text-align: center; font-size: 1.4rem; line-height: 1.8rem; margin: 0 auto;}

.fp-footerWrapper {width: 100%; padding: 50px 0; background-color: var(--t-ltblue); display: grid; grid-template-columns: 1fr 1fr; align-items: center;}
.copyright {font-size: 1rem; margin: 0 0 0 50px;}
.footerlink {font-size: 1rem; margin: 0 50px 0 0; text-align: right;}
.footerlink a {color: var(--t-yellow); text-decoration: none;}
.footerlink a:visited {color: var(--t-yellow); text-decoration: none;}
.footerlink a:hover {color: var(--t-yellow); text-decoration: underline;}

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


}

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



}

@media only screen and (max-width: 1023px) {
	
	
	@media only screen and (max-width: 1023px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1) {
	
	
	}

}

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

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

/*
@media (prefers-color-scheme: dark) {
    body { background: #282828; color: #f0f0f0; }
    a, a.linkBlue { color: var(--t-ltblue) !important; }
    .iiMenu li a { color: var(--t-ltblue) !important; }
    .iiMenu ul a { color: white !important ; }
    h1.pageTitle { color: var(--t-ltblue); }
    input[type=text],input[type=search],input[type=date],input[type=number],input[type=password],input.inputText,textarea,select { color: white; background: var(--t-dkblue); border: 1px solid var(--dkgray); display:block; width: 100%;}
    a.buttonWhite, button.buttonWhite { background: inherit; color: var(--t-ltblue);}
    .dataLabel { color: var(--t-ltblue);}
    .featherlight-content { background: #282828 !important; color: white; }
}
*/