/***************************************************************
* Kairos Pathways — shared brand variables
* These variable are defined in Kairos_wp-login_Style.css since it's loaded sitewide first. Since it's loaded there, we don't need to define them here.
:root {
--kairos-purple: #7030A0;
--kairos-gold: #FFC000;
--kairos-cream: #F6F2EF;
--kairos-lavender: #F0EAF5;
--kairos-black: #000000;
--kairos-white: #FFFFFF;
--kairos-lgray: #C2C2C2;
--kairos-dgray: #5C5C5C;
--kairos-lgreen: #E6f7EC;
--kairos-green: #34A853;
--kairos_dgreen: #1E7E34;
--kairos-lred: #FDECEA;
--kairos-red: #DC3545;
--kairos-dred: #A31621;
}
***************************************************************/
/***************************************************************
* OUTER WRAPPER: #Dashboard
* - controls width
* - holds background + border
* - does NOT control layout
* IMG directory is: https://kairospathways.com/wp-content/themes/astra-child/Kairos_IMG_Files
***************************************************************/
.Dashboard {
width: 100%;
max-width: 1600px;
min-width: 0;
margin: 0px auto;
padding: 5px;
background-color: var(--kairos-black);
overflow-x: hidden;
}
/***************************************************************
Side panel Object Design:
.Side_Screen
└── .Side_Table (TABLE)
├── .Side_Tabs (TD – black buttons)
| └── .sideTab (Button with classes)
| ├── sideTab grpName active (classess)
| ├── sideTab grpName (classess)
| ├── .
| ├── .
| ├── .
| └── sideTab grpName (classess)
└── .Side_Forms (TD – form pages)
└── .sideForm (Form, DIV, or Table objects)
├── sideForm grpName active (classess)
├── sideForm grpName (classess)
├── .
├── .
├── .
└── sideForm grpName (classess)
***************************************************************/
/**************************************************************************************
Both tabLink and tabPage can be set to hidden if tabLink doesn't apply to user
**************************************************************************************/
.hidden{ display: none !important; } /* hidden objects are not displayed */
/***************************************************************
* 1. Dashboard Engine: .Side_Screen
* - used for ALL dashboard screens
* - scrolls horizontally only when needed
***************************************************************/
.Side_Screen {
min-width: 0;
width: 100%;
margin: 0 !Important;
padding: 0 !Important;
display: block;
box-sizing: border-box;
}
/***************************************************************
* 2. Removes all extra spacing generated by the last child
.Side_Screen .Side_Forms > :last-child {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
***************************************************************/
/***************************************************************
* 3. remove border and outline, as well as the bottom-margins
***************************************************************/
.Side_Screen table {
border: none;
outline: none;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/***************************************************************
* 4. removes the outline for all
and
***************************************************************/
.Side_Screen td,
.Side_Screen th { /* no border reset here — allow specific components to set borders */
outline: none;
}
/***************************************************************
* 5. Removes bottom padding customary after the
tag
***************************************************************/
.Side_Screen p {
margin: 0 !important;
padding: 0 5px !important;
width: 100% !important;
}
.Side_Screen .Side_Table {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.Side_Screen > .Side_Table > tbody > tr > .Side_Forms {
padding-left: 5px !important;
}
/***************************************************************
* 6. Side_Table — internal two-column structure
***************************************************************/
.Side_Table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
table-layout: auto; /* Yes — keep this */
}
/***************************************************************
* 7. Side_Tabs — LEFT column (buttons)
* - width expands to fit widest button
* - black background
***************************************************************/
.Side_Tabs {
vertical-align: top;
background: var(--kairos-black);
white-space: nowrap;
padding: 0; /* buttons sit tight inside */
}
/***************************************************************
* 8. Side_Tabs Button Style: .sideTab
* - black background
* - gold text
* - no border, no rounding
***************************************************************/
.Side_Tabs .sideTab {
display: block;
width: 100%;
font-weight: 700;
font-size: inherit !important;
text-align: left;
background: var(--kairos-black) !important;
color: var(--kairos-gold) !important;
border: none !important;
border-radius: 0 !important;
margin: 0 !important;
padding: 5px 5px !important;
cursor: pointer;
}
.Side_Tabs .sideTab:hover { /***** Hover: purple background, gold text *****/
background: var(--kairos-purple) !important;
color: var(--kairos-gold) !important;
}
.Side_Tabs .sideTab.active { /***** Active: black + white *****/
background: var(--kairos-black) !important;
color: var(--kairos-white) !important;
}
.Side_Tabs .sideTab.active:hover { /***** Active + hover remains unchanged *****/
background: var(--kairos-black) !important;
color: var(--kairos-white) !important;
}
/***************************************************************
* 9. Side_Forms — RIGHT column (content)
* - takes all remaining width
* - 5px gap from buttons
***************************************************************/
/* Define the HTML objects used in the form */
.Side_Forms {
background-image: url('https://kairospathways.com/wp-content/themes/astra-child/Kairos_IMG_Files/Background_Kairos_Form.png');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border: none;
box-sizing: border-box;
}
.Side_Forms {
vertical-align: top;
min-width: 0;
width: 100%;
padding: 5px; /* ← this is the correct gap */
margin: 0;
}
.Side_Forms .sideForm { /***** Default: all tab forms hidden *****/
min-width: 0;
display: none;
margin: 0 !important;
/* padding: 5px !important; */
}
.Side_Forms .sideForm.active { display: block; } /***** Only the active form is shown *****/
/* ================================================================================
DEFINING FORM_HEADER_CONTAINER and its children
1) Define: Form_Header_Container to act as a two column table with
Form_Header_Text_Container and Form_Header_Button_Container being beside each
other.
2) Define: Form_Header_Text_Container the
heading to take available space
forcing Form_Header_Button_Container to be on the left of Form_Header_Container.
3) Define: Form_Header_Button_Container to be displayed with a 5px padding around
the submit button and ensure the container itself only is left aligned.
4) Define: Form_Header_Button_Container's appearance when the class Save is added.
In this state background is set to gold to allow the submit button to be
revealed. This also requires that Form_Header_Button needs to have the Save
class added to it as well.
5) Define: Form_Header_Button's appearance in its natural state. Its natural
state is to be hidden until an input in Form_Content_Container has changed.
6) Define: Form_Header_Button's appearance when and input in Form_Content_Container
has changed. When an input changes the container will have the class Save added,
the text color will become black so it can be seen, and it becomes visible.
7) Define: Form_Header_Button's appearance when it has the class Save added and the
mouse hover over the button. In this state the background of the submit button
becomes a light beige color.
================================================================================ */
.Form_Header_Container { /* Step 1 */
display: flex; /* Makes the container a flex container */
flex-direction: row; /* Arranges items in a row by default */
justify-content: space-around; /* Distributes space around items */
align-items: center; /* Or other desired alignment */
background: var(--kairos-purple); /* form background is set to purple */
margin-bottom: 5px !important; /* puts a 5px space between this and content */
}
.Form_Header_Text_Container { /* Step 2 */
flex: 1; /* let the h2 header take up available space */
text-align: left !Important; /* force the h2 heading to be left justified */
padding-left: 5px; /* set padding around button to 5px */
background: var(--kairos-purple); /* form background is set to purple */
margin-bottom: 5px !important; /* puts a 5px space between this and content */
}
.Form_Header_Button_Container { /* Step 3 */
display: flex; /* Makes the container a flex container */
align-items: center; /* Vertically centers the content */
margin:5px !important; /* force spacing around the submit button */
}
/* NOTE: ".Save" isn't in the static HTML — kept because it's a JS-toggled state class (shows the Save button once a field changes) */
.Form_Header_Button_Container.Save { /* Step 4 */
background: var(--kairos-gold); /* set background color to gold */
}
.Form_Header_Button { /* Step 5 */
background: none !important; /* override default background for button */
border-radius: 0 !important; /* remove rounded corners common to buttons */
font-weight: 700 !important; /* force text to be bolded */
border: none !important; /* override default border for button */
color: var(--kairos-purple) !important; /* set text color to purple to blend in */
display: none; /* set default state to be hidden from for */
}
.Form_Header_Button.Save { /* Step 6 */
color: var(--kairos-black) !important; /* set text color to black */
cursor: pointer; /* ensure mouse becomes a pointer when over */
display: block; /* make submit button visible */
}
.Form_Header_Button.Save:hover { /* Step 7 */
background-color: var(--kairos-cream) !important;
}
/* Form_Data_Container styles */
.Form_Data_Container {
display: table !important;
border-collapse: collapse !important; /* ensures borders aren’t double-drawn */
border: none !important; /* removes table border */
}
.Form_Data_Container tbody { display: table-row-group !important; }
.Form_Data_Container tr { display: table-row !important; }
.Form_Data_Container td { display: table-cell !important; }
.Form_Data_Container tbody tr { border: none !important; } /* removes borders from rows */
.Form_Data_Container > tbody > tr > td {
border: none !important; /* removes borders from cells */
outline: none !important; /* removes outlines */
padding: 0 !important; /* optional: removes cell padding if needed */
}
.Form_Data_Container tbody tr:not(:last-child) td { padding-bottom: 5px !important; } /* Add 5px spacing below each row except last */
.Form_Data_Label {
white-space: nowrap; /* 1) no wrapping */
width: 1%; /* 2) auto-size to widest text */
padding: 0 5px 0 0 !important; /* 3) only right padding = 5px */
margin: 0 !important; /* 4) remove margins */
}
.Form_Data_Input {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.Form_Input_Tag,
input.Form_Input_Tag[type="text"],
input.Form_Input_Tag[type="number"],
input.Form_Input_Tag[type="tel"],
input.Form_Input_Tag[type="password"],
input.Form_Input_Tag[type="checkbox"],
input.Form_Input_Tag[type="email"] {
flex: 1;
overflow: hidden;
width:100%;
padding: 0 5px;
background-color: var(--kairos-cream);
border: 1px solid var(--kairos-black);
border-radius: 10px;
}
select.Form_Input_Tag {
flex: 1;
overflow: hidden;
width: 100%;
padding: 0 5px; /* same as input */
background-color: var(--kairos-cream); /* same color */
border: 1px solid var(--kairos-black); /* same border */
border-radius: 10px; /* same corner rounding */
box-sizing: border-box; /* ensures border & padding match input behavior */
}
select.Form_MultiSelect { /* Style the multi-select to match Form_Input_Tag */
padding: 5px; /* More interior space */
background-color: var(--kairos-cream); /* Matches your inputs */
border: 1px solid var(--kairos-black);
border-radius: 10px;
width: 100%;
box-sizing: border-box;
overflow-y: auto; /* Scroll bar if needed */
height: clamp(95px, 8vw, 125px);
}
.Form_MESG_Span,
.Form_PASS_Span {
flex: 1;
overflow: hidden;
width:100%;
padding: 0 5px;
border: 1px solid var(--kairos-black);
border-radius: 10px;
font-weight: 700;
}
input.Form_MESG_Span {
text-align: center;
color: var(--kairos-black);
background: rgba(188, 162, 138, 0.5) !important; /* 50% transparent light grayish brown color */
}
input.Form_PASS_Span {
text-align: center;
color: var(--kairos-purple);
background: var(--kairos-gold);
}
/***************************************************************
* CSS for radio button input element
***************************************************************/
.Radio_Table {
display: table !important;
border-collapse: collapse !important; /* ensures borders aren’t double-drawn */
border: none !important; /* removes table border */
background-color: var(--kairos-purple);
}
.Radio_Table tbody { display: table-row-group !important; }
.Radio_Table tr { display: table-row !important; }
.Radio_Table td { display: table-cell !important; }
.Radio_Table tbody tr { border: none !important; } /* removes borders from rows */
.Radio_Table > tbody > tr > td {
border: none !important; /* removes borders from cells */
outline: none !important; /* removes outlines */
padding: 0 !important; /* optional: removes cell padding if needed */
}
.Radio_Table tbody tr:not(:last-child) td { padding-bottom: 5px !important; } /* Add 5px spacing below each row except last */
.Radio_Header {
background-color: var(--kairos-purple);
color: var(--kairos-gold);
font-weight: 700 !important; /* force text to be bolded */
}
.Radio_Option label {
display: block;
padding: 4px 8px;
cursor: pointer;
font-weight: 700;
background-color: var(--kairos-purple);
color: var(--kairos-gold);
}
.Radio_Option label:has(input:checked) { /* Only the label wrapping the CHECKED radio gets highlighted */
background-color: var(--kairos-white);
color: var(--kairos-purple);
}
.Radio_Option label:hover {
background-color: var(--kairos-gold);
color: var(--kairos-purple);
}
/*************************************************************************************************************************************************/
.Form_Reload_Container {
margin-top: 5px;
}
.Form_Submit_Container {
padding: 5px 0;
}
.Form_Button {
padding: 10px !important;
width: 100%;
white-space: nowrap;
color: var(--kairos-gold) !important;
font-size: inherit !important;
font-weight: 700 !important;
background-color: var(--kairos-purple) !important;
border: 1px solid var(--kairos-black) !important;
border-radius: 10px !important;
}
.Form_Button:hover {
color: var(--kairos-purple) !important;
background-color: var(--kairos-gold) !important;
}
button:disabled {
background-color: var(--kairos-dgray) !Important;
color: var(--kairos-lgray) !Important;
}
button:disabled:hover {
background-color: var(--kairos-dgray) !Important;
color: var(--kairos-lgray) !important;
}
.Form_Gateway_Message {
padding: 10px 14px;
margin-top: 5px;
border-radius: 4px;
font-size: 0.95em;
display: none; /* hidden until it actually has a message */
overflow-wrap: anywhere; /* stronger than break-word — breaks even without a natural break point, so the table's min-content calculation stays small */
word-break: break-word; /* fallback for older browsers that don't support "anywhere" */
max-width: 100%;
box-sizing: border-box;
}
.Form_Gateway_Message.Form_Gateway_Success,
.Form_Gateway_Message.Form_Gateway_Error {
display: block; /* show it once a state class is applied */
}
.Form_Gateway_Success {
background-color: var(--kairos-lgreen);
border: 1px solid var(--kairos-green);
color: var(--kairos_dgreen);
}
.Form_Gateway_Error {
background-color: var(--kairos-lred);
border: 1px solid var(--kairos-red);
color: var(--kairos-dred);
}
.Form_Field_Error_Text {
display: none;
background-color: var(--kairos-lred);
border: 1px solid var(--kairos-red);
color: var(--kairos-dred);
font-size: 0.5em !important;
padding: 3px;
margin: 0;
}
/*