@charset "utf-8";
/*	~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 * 	Theme:  dark-purple           (#00332C)   v3.1
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *  For:   OWS websites
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 *  Author:     DNC THomas
 *  Last edit:  2025-08-25 18:32:40
 *  ****   DO NOT EDIT THIS THEME   ****
 *  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Theme: Tpx Dark Purple (#622f53)
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

:root {
    --baseR: 98;
    --baseG: 47;
    --baseB: 83;
 
    --color9: #22111d;
    --color8: #45213a;
    --color7: #673258;
    --color6: #8a4275;
    --color5: #ac5392;
    --color4: #bd75a8;
    --color3: #cd98be;
    --color2: #debad3;
    --color1: #eedde9;
    --modal: rgba( var(--baseR), var(--baseG), var(--baseB), 0.3);
    --shadow1: 0 0.3em 0.3em -1px var(--color5);
    --shadow2: 0.2em 0.2em rgb(var(--baseR), var(--baseG), var(--baseB), 80%), 0.6em 0.6em 0.6em rgb(var(--baseR), var(--baseG), var(--baseB), 50%);

    --gradient-down: linear-gradient( 0deg, var(--color7), var(--color5));
    --gradient-up: linear-gradient( 0deg,  var(--color5), var(--color7));
    --gradient-ltr: linear-gradient( 90deg,  var(--color7), var(--color5));
    --gradient-rtl: linear-gradient( 90deg,  var(--color5), var(--color7));
}

/*  Combination colours foreground/background */
.ows-theme0 { color: inherit; background: inherit;}
.ows-theme1, .ows-theme1-hvr:hover { color: var(--color9); background: var(--color1);}
.ows-theme2, .ows-theme2-hvr:hover { color: var(--color9); background: var(--color2);}
.ows-theme3, .ows-theme3-hvr:hover { color: var(--color9); background: var(--color3);}
.ows-theme4, .ows-theme4-hvr:hover { color: var(--color9); background: var(--color4);}
.ows-theme5, .ows-theme5-hvr:hover { color: var(--color9); background: var(--color5);}
.ows-theme6, .ows-theme6-hvr:hover { color: var(--color1); background: var(--color6);}
.ows-theme7, .ows-theme7-hvr:hover { color: var(--color1); background: var(--color7);}
.ows-theme8, .ows-theme8-hvr:hover { color: var(--color1); background: var(--color8);}
.ows-theme9, .ows-theme9-hvr:hover { color: var(--color1); background: var(--color9);}

/* Gradients ~ You may wish to adjust the foreground colours used */
.ows-theme-grad-down            { background: var(--gradient-down);color: var(--color1)}
.ows-theme-grad-down-hvr:hover  { background: var(--gradient-down);color: var(--color9)}
.ows-theme-grad-up              { background: var(--gradient-up);color: var(--color1)}
.ows-theme-grad-up-hvr:hover    { background: var(--gradient-up);color: var(--color9)}
.ows-theme-grad-ltr             { background: var(--gradient-ltr);color: var(--color1)}
.ows-theme-grad-ltr-hvr:hover   { background: var(--gradient-ltr);color: var(--color9)}
.ows-theme-grad-rtl             { background: var(--gradient-rtl);color: var(--color1)}
.ows-theme-grad-rtl-hvr:hover   { background: var(--gradient-rtl);color: var(--color9)}

/*  Colors for text only settings */
.ows-theme0-txt, .ows-theme0-txt-hvr:hover { color: inherit};
.ows-theme1-txt, .ows-theme1-txt-hvr:hover { color: var(--color1);}
.ows-theme2-txt, .ows-theme2-txt-hvr:hover { color: var(--color2);}
.ows-theme3-txt, .ows-theme3-txt-hvr:hover { color: var(--color3);}
.ows-theme4-txt, .ows-theme4-txt-hvr:hover { color: var(--color4);}
.ows-theme5-txt, .ows-theme5-txt-hvr:hover { color: var(--color5);}
.ows-theme6-txt, .ows-theme6-txt-hvr:hover { color: var(--color6);}
.ows-theme7-txt, .ows-theme7-txt-hvr:hover { color: var(--color7);}
.ows-theme8-txt, .ows-theme8-txt-hvr:hover { color: var(--color8);}
.ows-theme9-txt, .ows-theme9-txt-hvr:hover { color: var(--color9);}

/* Border only colours */
.ows-theme1-bdr, .ows-theme1-bdr-hvr:hover { border-color: var(--color1);}
.ows-theme2-bdr, .ows-theme2-bdr-hvr:hover { border-color: var(--color2);}
.ows-theme3-bdr, .ows-theme3-bdr-hvr:hover { border-color: var(--color3);}
.ows-theme4-bdr, .ows-theme4-bdr-hvr:hover { border-color: var(--color4);}
.ows-theme5-bdr, .ows-theme5-bdr-hvr:hover { border-color: var(--color5);}
.ows-theme6-bdr, .ows-theme6-bdr-hvr:hover { border-color: var(--color6);}
.ows-theme7-bdr, .ows-theme7-bdr-hvr:hover { border-color: var(--color7);}
.ows-theme8-bdr, .ows-theme8-bdr-hvr:hover { border-color: var(--color8);}
.ows-theme9-bdr, .ows-theme9-bdr-hvr:hover { border-color: var(--color9);}

/*  Extras */
.ows-theme-modal { background: var(--modal);}
.ows-theme-shadow1, .ows-theme-shadow1-hvr:hover {box-shadow: var(--shadow1); /*box-shadow: var(--shadow)*/}
.ows-theme-shadow2, .ows-theme-shadow2-hvr:hover { box-shadow: var(--shadow2); /*box-shadow: var(--shadows)*/}


/*  Theme colour variables 
:root {
    --baseR: 128; --baseG: 128; --baseB:128;
    --color0: transparent;
    --color1: #191919;
    --color2: #333333;
    --color3: #4c4c4c;
    --color4: #666666;
    --color5: #7f7f7f;
    --color6: #999999;
    --color7: #b2b2b2;
    --color8: #cccccc;
    --color9: #e5e5e5;
    --modal: rgba(var(--baseR), var(--baseG), var(--baseB), 0.3);
    --gradient-down:  linear-gradient( var(--color7), var(--color6));
	--gradient-up:    linear-gradient( var(--color6), var(--color7));
    --gradient-left:  linear-gradient( to right,  var(--color7), var(--color6));
	--gradient-right: linear-gradient( to left, var(--color7), var(--color6));

    --gradientBar: linear-gradient(var(--color5) 0%, transparent 20%, transparent 80%, var(--color5) 100%);
    --shadow:      0 0.15em 0.3em -0.1em var(--color1);
    --shadows:     0 0.1em 0.3em 0 rgba(var(--baseR),var(--baseG),var(--baseB),0.3),0 0.1em 0.7em 0 rgba(var(--baseR),var(--baseG),var(--baseB),0.4);
    --pageWidth: 1200px;
}

/*	Theme colour combinations (Foreground / Background)	
.ax-theme1	{color: var(--color9); background: var(--color1);}
.ax-theme2	{color: var(--color9); background: var(--color2);}
.ax-theme3	{color: var(--color9); background: var(--color3);}
.ax-theme4	{color: var(--color9); background: var(--color4);}
.ax-theme5	{color: var(--color1); background: var(--color5);}
.ax-theme6	{color: var(--color1); background: var(--color6);}
.ax-theme7	{color: var(--color1); background: var(--color7);}
.ax-theme8	{color: var(--color1); background: var(--color8);}
.ax-theme9	{color: var(--color1); background: var(--color9);}

/*	Theme colour combinations for HOVER effects (Foreground / Background)	
.ax-theme1-hvr:hover	{color: var(--color9); background: var(--color1);}
.ax-theme2-hvr:hover	{color: var(--color9); background: var(--color2);}
.ax-theme3-hvr:hover	{color: var(--color9); background: var(--color3);}
.ax-theme4-hvr:hover	{color: var(--color9); background: var(--color4);}
.ax-theme5-hvr:hover	{color: var(--color1); background: var(--color5);}
.ax-theme6-hvr:hover 	{color: var(--color1); background: var(--color6);}
.ax-theme7-hvr:hover	{color: var(--color1); background: var(--color7);}
.ax-theme8-hvr:hover	{color: var(--color1); background: var(--color8);}
.ax-theme9-hvr:hover	{color: var(--color1); background: var(--color9);}


/*	Theme TEXT only colours	
.ax-theme1-txt	{color: var(--color1);}
.ax-theme2-txt	{color: var(--color2);}
.ax-theme3-txt	{color: var(--color3);}
.ax-theme4-txt	{color: var(--color4);}
.ax-theme5-txt	{color: var(--color5);}
.ax-theme6-txt	{color: var(--color6);}
.ax-theme7-txt	{color: var(--color7);}
.ax-theme8-txt	{color: var(--color8);}
.ax-theme9-txt	{color: var(--color9);}

/*	Theme TEXT only HOVER colours	
.ax-theme1-txt-hvr:hover { color: var(--color1);}
.ax-theme2-txt-hvr:hover { color: var(--color2);}
.ax-theme3-txt-hvr:hover { color: var(--color3);}
.ax-theme4-txt-hvr:hover { color: var(--color4);}
.ax-theme5-txt-hvr:hover { color: var(--color5);}
.ax-theme6-txt-hvr:hover { color: var(--color6);}
.ax-theme7-txt-hvr:hover { color: var(--color7);}
.ax-theme8-txt-hvr:hover { color: var(--color8);}
.ax-theme9-txt-hvr:hover {color: var(--color9);}

/*	Theme BORDER only colours	
.ax-theme1-bdr { border-color: var(--color1);}
.ax-theme2-bdr { border-color: var(--color2);}
.ax-theme3-bdr { border-color: var(--color3);}
.ax-theme4-bdr { border-color: var(--color4);}
.ax-theme5-bdr { border-color: var(--color5);}
.ax-theme6-bdr { border-color: var(--color6);}
.ax-theme7-bdr { border-color: var(--color7);}
.ax-theme8-bdr { border-color: var(--color8);}
.ax-theme9-bdr { border-color: var(--color9);}

/*	Theme BORDER only HOVER colours	
.ax-theme1-bdr-hvr:hover { border-color: var(--color1);}
.ax-theme2-bdr-hvr:hover { border-color: var(--color2);}
.ax-theme3-bdr-hvr:hover { border-color: var(--color3);}
.ax-theme4-bdr-hvr:hover { border-color: var(--color4);}
.ax-theme5-bdr-hvr:hover { border-color: var(--color5);}
.ax-theme6-bdr-hvr:hover { border-color: var(--color6);}
.ax-theme7-bdr-hvr:hover { border-color: var(--color7);}
.ax-theme8-bdr-hvr:hover { border-color: var(--color8);}
.ax-theme9-bdr-hvr:hover { border-color: var(--color9);}

/*  Theme modal background colour	
.ax-theme-modal {
	background: var(--theme);
	background: var(--modal);
}

/*  ~~~~~~  Gradients  ~~~~~~
.ax-gradient-left { background: var(--gradient-left);}
.ax-btn-gradient-left { background: var(--gradient-left);}
.ax-btn-gradient-left:hover {background: var(--gradient-right);}
.ax-gradient-right { background: var(--gradient-right);}
.ax-btn-gradient-right { background: var(--gradient-right);}
.ax-btn-gradient-right:hover{background: var(--gradient-left);}
.ax-gradient-down { background: var(--gradient-down);}
.ax-btn-gradient-down { background: var(--gradient-down);}
.ax-btn-gradient-down:hover{ background: var(--gradient-up);}
.ax-gradient-up { background: var(--gradient-up);}
.ax-btn-gradient-up { background: var(--gradient-up);}
.ax-btn-gradient-up:hover { background: var(--gradient-down);}
*/
