@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Waiting+for+the+Sunrise&display=swap');		
@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Math&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cabin+Sketch:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@300;400;500;600;700;800;900&display=swap');


/*@import url('https://fonts.googleapis.com/css2?family=Koh+Santepheap:wght@100;300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zilla+Slab+Highlight:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Londrina+Outline&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Londrina+Shadow&display=swap');
*/




/*strip-font

            background-color: #aaa;
           	color: #fff;
        	display: inline-block;
            width: fit-content;
        	padding: 0px 5px; 
        	background-color: var(--p_color);
        	background-color: var(--h_color);
        ',
    //ACRONYM FONT





            text-shadow: 0px -1px 0px #000000aa, -1px 0px 0px #000000aa, 0px 1px 0px #000000aa, 1px 0px 0px #000000aa;
            letter-spacing: 6px;
        	text-transform: uppercase;
        	
        	
        	
        	
        	
        	
  */      	
        	


:root {
    
/*fonts*/	
--font : 'Quicksand', sans-serif ;
--wb-font:  'Waiting for the Sunrise', cursive;
--dict-font: 'STIX two math', serif;
--block-font:  Roboto ;
/*
        'inherit-font',
        'inherit-bold-font',

            'strip-font',
            'acronym-font' 
*/
--hw-font: 'Reenie Beanie', cursive;
--book-font: 'Koh Santepheap', cursive;
--sketch-font: 'Cabin Sketch';
--strip-font: 'Zilla Slab Highlight', cursive;
--acronym-font: 'Londrina Outline', cursive;
--block-shadow-font: 'Londrina Shadow', cursive;


--font-wt : 500;
--font-b : 600;
--color : #333;    
    
--button-color : #ffffff;
--button-ft-wt : 500;
--button-bg-color : #b1d501;
--button-bg-hover : #1377c5;


 
/ 
/*brand colors*/
--e-green: #b1d501;
--e-blue: #1377c5;
--e-turq: #00c4ea;
--e-purple: #817ceb;
/*brand lights +30% */
--elt-green: #dcfe31 ;
--elt-blue: #43a3ec ;
--elt-turq: #3edfff ;
--elt-purple: #a6a2f1 ;


--e-accent-1: #1377c5;
--e-accent-2: #b1d501;
--e-grad-1: #817ceb;
--e-grad-2: #00c4ea;

--e-light: #f6f7f8;
--e-light-feature: #eee;

--e-dark: #06253d;
--e-dark-mid: #0D4E81;
--e-dark-soft: #126fb5;



/*brand gradient*/
--e-grad: linear-gradient(var(--g-deg), var(--e-grad-1) 0%,  var(--e-grad-2) 100%);
/*brand gradient stops
--grad-1: #817ceb;
--grad-2: #7185EB;
--grad-3: #618EEB;
--grad-4: #5197EB;
--grad-5: #41A0EB;
--grad-6: #31A9EB;
--grad-7: #21B2EB;
--grad-8: #11BBEB;
--grad-9: #00c4ea;
--grad-10: #00c4ea;*/



/*rainbow colours*/
--rb-red: #e36f52;  /*RAG red*/
--rb-red-orange: #EC9156 ;
--rb-orange: #f1aa47;  /*RAG amber*/
--rb-orange-yellow: #F2C745 ;
--rb-yellow: #f2dd2f;
--rb-yellow-green: #C6DD4E ;
--rb-green: #99DA61; /*RAG green*/
--rb-green-turq: #62D295 ;
--rb-turq: #2ACAC8;
--rb-turq-blue: #36B3D7 ;
--rb-blue: #429BE6;
--rb-blue-purple: #7182E4 ;
--rb-purple: #A069E1;
--rb-purple-pink: #BB6ABE ;
--rb-pink: #D66A9B;
--rb-pink-red: #DE6F7C;

/*NEED RE-DONE BASED ON NEW RB SET xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx*/
/*rainbow - darks*/
--dk-red: #d64723;
--dk-orange: #e78e11;
--dk-yellow: #dbc60e;  --rb-yellow-x: #dbc60e;
--dk-green: #71c43d;
--dk-turq: #18b4a1;
--dk-blue: #1878ac;
--dk-purple: #4e2cd5;
--dk-pink: #9540b1;
/*rainbow - lights*/
--lt-red: #f1b8a9;
--lt-orange: #f9da42;
--lt-yellow: #f8ee96;
--lt-green: #c7efae;
--lt-turq: #8ff0e4;
--lt-blue: #8accf0;
--lt-purple: #bdb0ef;
--lt-pink: #e3b0dd;


--g-deg: 200deg;
--g-deg-bg: 270deg;	
	     
/*FINDER LIBRARIES*/
    --library-programmes: url(https://effective.vision/wp-content/uploads/2022/05/programmes.svg);
    --progs-1: var(--rb-purple);
    --progs-2: var(--rb-purple-pink);
    --progs-3: var(--rb-pink);
    --progs-grad: linear-gradient(var(--g-deg), var(--progs-1), var(--progs-3));
    --progs-grad-bg: linear-gradient(var(--g-deg-bg), var(--progs-1) -20%, var(--progs-2), var(--progs-3) 120%);
    
    
    --library-workshops: url(https://effective.vision/wp-content/uploads/2022/05/workshops.svg);
    --workshops-1: var(--rb-blue);    --workshops-1: #1377c5;
    --workshops-2: var(--rb-blue-purple);--workshops-2: #668ac8;
    --workshops-3: var(--rb-purple);--workshops-3: #74c5ef;
    --workshops-grad: linear-gradient(var(--g-deg), var(--workshops-1), var(--workshops-3));
    --workshops-grad-bg: linear-gradient(var(--g-deg-bg), var(--workshops-1) -20%, var(--workshops-2), var(--workshops-3) 120%);
    
    --library-modules: url(https://effective.vision/wp-content/uploads/2022/04/modules.svg);
    --mods-1: var(--rb-blue);
    --mods-2: var(--rb-blue-purple);
    --mods-3: var(--rb-purple);
    --mods-grad: linear-gradient(var(--g-deg), var(--mods-1), var(--mods-3));
    --mods-grad-bg: linear-gradient(var(--g-deg-bg), var(--mods-1) -20%, var(--mods-2), var(--mods-3) 120%);
    
    
    --library-pods: url(https://effective.vision/wp-content/uploads/2022/04/pods.svg);
    --pods-1: var(--rb-turq);
    --pods-2: var(--rb-turq-blue);
    --pods-3: var(--rb-blue);
    --pods-grad: linear-gradient(var(--g-deg), var(--pods-1), var(--pods-3));   
    --pods-grad-bg: linear-gradient(var(--g-deg-bg), var(--pods-1) -20%, var(--pods-2), var(--pods-3) 120%);   
 
    
    --playlists-1: var(--rb-green);
    --playlists-2: var(--rb-green-turq);
    --playlists-3: var(--rb-turq);
    --playlists-grad: linear-gradient(var(--g-deg), var(--playlists-1), var(--playlists-3));   
    --playlists-grad-bg: linear-gradient(var(--g-deg-bg), var(--playlists-1) -20%, var(--playlists-2), var(--playlists-3) 120%);  
    
    
    --library-resources: url(https://effective.vision/wp-content/uploads/2022/05/resources_inverse.svg);
    --library-resources: url(https://effective.vision/wp-content/uploads/2022/04/resources.svg);
    --res-1: var(--e-dark-soft);
    --res-2: var(--e-dark-mid);
    --res-3: var(--e-dark);
    --res-grad: linear-gradient(var(--g-deg), var(--res-1), var(--res-3));   
    --res-grad-bg: linear-gradient(var(--g-deg-bg), var(--res-1) -20%, var(--res-2), var(--res-3) 120%);  
        
    
    --library-people: url(https://effective.vision/wp-content/uploads/2022/04/pods.svg);
    --people-1: var(--rb-pink);
    --people-2: var(--rb-pink-red);
    --people-3: var(--rb-red);
    --people-grad: linear-gradient(var(--g-deg), var(--people-1), var(--people-3));   
    --people-grad-bg: linear-gradient(var(--g-deg-bg), var(--people-1) -20%, var(--people-2), var(--people-3) 120%);   
    
    
/*roundups*/
    --library-roundups: url(/wp-content/uploads/elms/svgs/post_type_roundups.svg);     
    --roundups-1: var(--accent-1);
/*private*/
    --library-private: url(/wp-content/uploads/elms/svgs/post_type_private.svg);     
    --private-1: #aaa;    
    
/*DASHBOARD ONLY = white label accent 1*/
/*blocks*/
    --library-blocks: url(https://effective.vision/wp-content/uploads/2022/05/blocks.svg);     
    --blocks-1: var(--accent-1);
    --blocks-2: var(--accent-1);
    --blocks-3: var(--accent-1);    
    --blocks-grad: linear-gradient(var(--g-deg), var(--blocks-1), var(--blocks-3)); 
    --blocks-grad-bg: linear-gradient(var(--g-deg-bg), var(--blocks-1), var(--blocks-2)); 
    

   
/*quotes*/
    --library-quotes: url(https://effective.vision/wp-content/uploads/2022/05/quotes.svg);
    --quotes-1: var(--accent-1);
    --quotes-2: var(--accent-1);
    --quotes-3: var(--accent-1);
    --quotes-grad: linear-gradient(var(--g-deg), var(--quotes-1), var(--quotes-3));    
    --quotes-grad-bg: linear-gradient(var(--g-deg-bg), var(--quotes-1), var(--quotes-2));  






/*AVATARS*/
    --avatar-effective: url(https://effectivelearning.co.uk/wp-content/uploads/elms/favicon.webp);
    --avatar-external: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/reccomends_avatar.png);
    --avatar-review: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/external_avatar.png);
 /*   --avatar-client: url('your logo here');*/
 




    
/*LEARNING STYLES*/
/*lt version*/
    --ls-watch: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/watch.svg);
    --ls-read: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/read.svg);
    --ls-listen: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/listen.svg);
    --ls-do: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/do.svg);
/*dk version*/
    --ls-watch-dk: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/learning_style_dk_watch.svg);
    --ls-read-dk: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/learning_style_dk_read.svg);
    --ls-listen-dk: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/learning_style_dk_listen.svg);
    --ls-do-dk: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/learning_style_dk_do.svg);




/*STAMP/RIBBON....NAV CARD LEFT & ACF RESOURCE TYPE*/
    --type-pods: url(https://effective.vision/wp-content/uploads/2022/04/stamp_left_pod.svg);
    --type-video: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/stamp_left_video.svg);
    --type-read-me: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/stamp-left_read-me.svg);
    --type-podcast: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/stamp-left_podcast.svg);
    --type-doc-dl: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/stamp_left_docs_downloads.svg);
    --ribbon-prog: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/prog_programmes.svg);
 /*   --ribbon-prog-library: url(https://effective.vision/wp-content/uploads/2022/05/prog_library.svg);
    --ribbon-prog-toolkit: url(https://effective.vision/wp-content/uploads/2022/05/prog_toolkit.svg); */
    --ribbon-mod: url(https://effective.vision/wp-content/uploads/2022/05/mod_module.svg);
/*    --ribbon-mod-pod-pack: url(https://effective.vision/wp-content/uploads/2022/05/mod_pod-pack.svg);
    --ribbon-mod-toolkit: url(https://effective.vision/wp-content/uploads/2022/05/mod_toolkit.svg);*/
/*RESOURCE TYPE - acf*/
    --acf-type-video: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/resource_type_video.svg);
    --acf-type-read-me: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/resource_type_read_me.svg);
    --acf-type-podcast: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/resource_type_podcast.svg);
    --acf-type-doc-dl: url(https://effectivelearning.co.uk/wp-content/uploads/2026/02/resource_type_doc_dl.svg);    











/*whiteboard colours*/
--wb-blue: #0a9efc;
--wb-green: #1cbc3c;
--wb-yellow: #edda51;
--wb-red: #ec5f47;
--wb-purple: #800080;
	
/*pencil case*/
--biro-blue-dk: #090036;
--biro-blue-lt: #30274F;
--pencil-grey: #6E6E6E;
--red-pen: #E26E6E;
--green-pen: #3AA35A;

/*highlighters*/
--hl-yellow: #f8fc46;
--hl-red: #f8877f;
--hl-orange: #ffad2a;
--hl-green: #77e68a;
--hl-pink: #fb83b3;	
--hl-blue: #67ebfa;	
--hl-yellow-mark: linear-gradient( to right,    #f8fc4644,    #e8fa4f 5%,   #f8fc4633 ); /*background-image*/
--hl-blue-mark: linear-gradient( to right,    #67ebfa44,    #67ebfa 5%,   #67ebfa33 ); /*background-image*/
--hl-red-mark: linear-gradient( to right,    #f8877f44,    #f8877f 5%,   #f8877f33 ); /*background-image*/
--hl-orange-mark: linear-gradient( to right,    #ffad2a44,    #ffad2a 5%,   #ffad2a33 ); /*background-image*/
--hl-green-mark: linear-gradient( to right,    #77e68a44,    #77e68a 5%,   #77e68a33 ); /*background-image*/
--hl-pink-mark: linear-gradient( to right,    #fb83b344,    #fb83b3 5%,   #fb83b333 ); /*background-image*/



/*box shadows*/
--tile-3d: rgb(0 0 0 / 40%) 0px 2px 4px, rgb(0 0 0 / 30%) 0px 7px 13px -3px, rgb(0 0 0 / 20%) 0px -3px 0px inset;
--paper: 1px 1px 6px 0px #00000044;
--page-shadow: 1px 1px 10px 0px #00000066;



/*bg images*/
--paper-img: url(https://effective.vision/wp-content/uploads/2022/02/paper-vector.png);
--bg-paper : ;
--bg-flash : url(https://template.effective.vision/wp-content/uploads/sites/3/2021/08/revision-card-background.jpg);
--bg-frame-1 : url(https://template.effective.vision/wp-content/uploads/sites/3/2021/07/black-frame.png);


--img-paper: url(https://effective.vision/wp-content/uploads/2022/02/paper-vector.png);
--img-paper-lined : url(https://template.effective.vision/wp-content/uploads/sites/3/2021/08/revision-card-background.jpg);


    






















/* xxxxxxxxxxxxxxxxxxxxxxxxxxxx CHECK / REFINE WHEN DO BLOCKS UPGRADE XXXXXXXXXXXXXXXXXXXXXX */
/*3D shadows - brand colours - */
--e-blue-3d:	1px 1px 1px var(--e-blue), 2px 2px 1px var(--e-blue), 3px 3px 1px var(--e-blue),  4px 4px 1px var(--e-blue), 9px 9px 6px #06253d55, 12px 12px 10px #06253d44, 15px 18px 35px #06253d33; 
--e-green-3d:	1px 1px 1px var(--e-green),  2px 2px 1px var(--e-green), 3px 3px 1px var(--e-green),  4px 4px 1px var(--e-green), 9px 9px 6px #06253d55, 12px 12px 10px #06253d44,    15px 18px 35px #06253d33 ;
--e-turq-3d:	1px 1px 1px #1377C5,        2px 2px 1px #1377c5,        3px 3px 1px #1377c5,        4px 4px 1px #1377c5,     9px 9px 6px #06253d55,    12px 12px 10px #06253d44,    15px 18px 35px #06253d33 ;
--e-purple-3d:	1px 1px 1px #817ceb,        2px 2px 1px #817ceb,        3px 3px 1px #817ceb,        4px 4px 1px #817ceb,    9px 9px 6px #06253d55,    12px 12px 10px #06253d44,    15px 18px 35px #06253d33; 
--e-dark-3d:	1px 1px 1px #06253d,        2px 2px 1px #06253d,        3px 3px 1px #06253d,        4px 4px 1px #06253d,    9px 9px 6px #06253d55,    12px 12px 10px #06253d44,    15px 18px 35px #06253d33; 
/*3D shadows - rainbow darks*/
--dk-red-3d:	1px 1px 1px var(--dk-red), 2px 2px 1px var(--dk-red), 3px 3px 1px var(--dk-red), 4px 4px 1px var(--dk-red), 9px 9px 6px #00000033, 12px 12px 10px #00000022, 15px 18px 35px #00000011; 	
--dk-orange-3d:	1px 1px 1px var(--dk-orange), 2px 2px 1px var(--dk-orange), 3px 3px 1px var(--dk-orange), 4px 4px 1px var(--dk-orange), 9px 9px 6px #00000033, 12px 12px 10px #00000022, 15px 18px 35px #00000011; 
--dk-yellow-3d:	1px 1px 1px var(--dk-yellow), 2px 2px 1px var(--dk-yellow), 3px 3px 1px var(--dk-yellow), 4px 4px 1px var(--dk-yellow), 9px 9px 6px #00000033, 12px 12px 10px #00000022, 15px 18px 35px #00000011; 
--dk-green-3d:	1px 1px 1px var(--dk-green), 2px 2px 1px var(--dk-green), 3px 3px 1px var(--dk-green), 4px 4px 1px var(--dk-green), 9px 9px 6px #00000033, 12px 12px 10px #00000022, 15px 18px 35px #00000011; 	
--dk-turq-3d:	1px 1px 1px var(--dk-turq), 2px 2px 1px var(--dk-turq), 3px 3px 1px var(--dk-turq), 4px 4px 1px var(--dk-turq), 9px 9px 6px #00000033, 12px 12px 10px #00000022, 15px 18px 35px #00000011; 	
--dk-blue-3d:	1px 1px 1px var(--dk-blue), 2px 2px 1px var(--dk-blue), 3px 3px 1px var(--dk-blue), 4px 4px 1px var(--dk-blue), 9px 9px 6px #00000033, 12px 12px 10px #00000022, 15px 18px 35px #00000011; 
--dk-purple-3d:	1px 1px 1px var(--dk-purple), 2px 2px 1px var(--dk-purple), 3px 3px 1px var(--dk-purple), 4px 4px 1px var(--dk-purple), 9px 9px 6px #00000033, 12px 12px 10px #00000022, 15px 18px 35px #00000011; 
--dk-pink-3d:	1px 1px 1px var(--dk-pink), 2px 2px 1px var(--dk-pink), 3px 3px 1px var(--dk-pink), 4px 4px 1px var(--dk-pink), 9px 9px 6px #00000033, 12px 12px 10px #00000022, 15px 18px 35px #00000011; 	
/*3D shadows*/	
--black-3d: 1px 1px 1px #000, 2px 2px 1px #000,    3px 3px 1px #000,   4px 4px 1px #000,   9px 9px 6px rgba(16,16,16,0.4),    12px 12px 10px rgba(16,16,16,0.2), 15px 18px 35px rgba(16,16,16,0.2);
}





}


/* TAGS */

article.card .tag.content_count.hover {
    display: none;
}
article.card:hover .tag.content_count.hover {
    display: initial;
}
article.card:hover .tag.content_count.no_hover {
    display: none;
    cursor: default;
}



.programmes {    --tag: var(--progs-grad-bg);}
.workshops {    --tag: var(--workshops-grad-bg);}
.modules {    --tag: var(--mods-grad-bg);}
.pods {    --tag: var(--pods-grad-bg);}
.resources {    --tag: var(--res-grad-bg);}
.blocks {    --tag: var(--blocks-grad-bg);}



.planned { 
    --tag: var(--rb-red); 
}
.content_count,
.blog_1 .planned , 
.blog_2 .planned , 
.blog_5 .tag.planned { 
    --tag: var(--accent-2); 
}


.all {
    --tag: var(--dark);
}

.infographics,
.finder input[value="infographics"] + label {	
    --tag: var(--rb-yellow-green);
}
.docs-summary-notes,
.docs-templates,
.docs-worksheets, .finder input[value*="docs-"] + label {	
    --tag: var(--rb-green);	
}

.storytelling, .finder input[value="stroytelling"] + label { 	
    --tag: var(--rb-green-turq);
}
.top-tens, .finder input[value="top-tens"] + label  { 	
    --tag: var(--rb-turq);	
}
.podcast-reviews, .finder input[value="podcast-reviews"] + label { 	
    --tag: var(--rb-turq-blue);
}
.book-reviews, .finder input[value="book-reviews"] + label { 	
    --tag: var(--rb-blue); 	
}

/*BEAR? --tag: var(--rb-blue-purple);	*/

.models, .finder input[value="models"] + label { 
    --tag: var(--rb-purple);
}
.case-studies, .finder input[value="case-studies"] + label {	
    --tag:  var(--rb-purple-pink); 
}
.articles, .finder input[value="articles"] + label { 
    --tag: var(--rb-pink);
}

/*PK VIDEOS? FTC? models? --tag: var(--rb-pink-red);*/

.videos,.finder input[value="videos"] + label { 
    --tag: var(--rb-red);
}

/*   --tag: var(--rb-red-orange);
    --tag-2: var(--rb-orange);
    --rb-yellow: #f2dd2f;
    --rb-orange-yellow: #F2C745 ;
*/

.youtube,
.TED,
.ted,
.ted-talks,
.videos-ted-talks, .videos-tv-movie, .videos-other, .finder input[value="videos-"] + label { 	
    --tag: #EA1F1F;
}



body {
    --tag: var(--accent-2) ;
    --tag-text: #fff;
}
.tag {
    background: var(--tag);
    color: var(--tag-text);
    border-radius: 100px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 3px 10px;
    margin: 5px;
    height: fit-content;
    max-width: fit-content;
    flex: 1;
    white-space: nowrap;
    text-shadow: 0px 0px 20px #000000aa;
    border: 3px solid transparent;
    background-clip: padding-box !important;
}
.tag.minutes {
    background: var(--accent-2);
    border: 0;
}
.tag.request {
    background: var(--rb-red);
}
.blog_1 .tag.planned, .blog_5 .tag.planned,
.blog_1 .tag.request, .blog_5 .tag.request {
    background: var(--accent-2);
}
.card .tag {
    font-size: 14px;
}

a.tag:hover {
    background: var(--tag);
    color: var(--tag-text);    
    border-color: var(--tag);
}

















/*AUTO - ICONS*/

.icon_bg, .acf-field .icon_bg {
    border-radius: 10px;
    height: 60px;
    width: 60px;
    display: block;
    position: relative;
    border: 2px solid transparent;
}

        /* ADMIN / ACF TWEAKS*/
        .wp-list-table .icon_bg {
            height: 40px;
            width: 40px;
            display: inline-block;
        }
        .acf-input label:not(.selected) .icon_bg:not(.static) {
            background: #06253d33;
            border: 2px solid #06253d11;
        }
        .selected .icon_bg {
            border: 2px solid #06253daa;
        }


.icon_bg.icon_sml {
    height: 40px;
    width: 40px;
}
.icon_bg.icon_lrg {
    height: 80px;
    width: 80px;
}

.icon_bg > .icon {
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
}
/*default = light theme - for dashboard*/
/* THIS MAKE LEARNING STYLES GREY
.icon_bg:not(.active) {
    background: #06253d33;
    border-color: #06253d33;
}*/
.icon_bg.active {
    border-color: #06253d;
}

/*dark theme - for finder*/
.dark_theme .icon_bg:not(.active) {
    background: #ffffff11;
    border-color: #ffffff11;
}
.dark_theme .icon_bg.active {
    border-color:#fff;
}





/**** DARK ICON, NO BG - learning styles****/
/*format not selected*/
.acf-input label:not(.selected) .icon_bg.learning_style {
    background: transparent;
    border: 0px;
    opacity: 0.25;
}
/*format selected*/
.selected .icon_bg.learning_style, .icon_bg.learning_style.active {
    border: 0px;
    opacity: 1;
}


/****CIRCULAR - AVATAR & RESOURCE TYPE****/
.icon_bg.avatar, .icon_bg.resource_type {    
    border-radius: 100px;
    overflow: hidden;
}
.icon_bg.avatar .icon, .icon_bg.resource_type .icon {    
    height: 70%;
    width: 70%;
    margin: 15%;
    background-position: center;
}

/*format not selected*/
.icon:not(.selected) .icon_bg.avatar{
    background: #fff;
    filter: saturate(0);
}
/*format selected*/
.selected .icon_bg.avatar, .icon_bg.avatar.active {
    filter: saturate(1);
}

/*ACF - ICON BACKGROUNDS & PRETTY EDIT PAGE*/




/*RADIO BUTTONS - FINDER LIBRARY*/
.icon_bg.programmes {    background-image: var(--progs-grad-bg);}
.icon_bg.programmes .icon {    background-image: var(--library-programmes);}
.icon_bg.workshops {    background-image: var(--workshops-grad-bg);}
.icon_bg.workshops .icon {    background-image: var(--library-workshops);}
.icon_bg.modules {    background-image: var(--mods-grad-bg);}
.icon_bg.modules .icon {    background-image: var(--library-modules);}
.icon_bg.pods {    background-image: var(--pods-grad-bg);}
.icon_bg.pods .icon {    background-image: var(--library-pods);}
.icon_bg.resources {    background: var(--res-grad-bg);}
.icon_bg.resources .icon {    background-image: var(--library-resources);}
.icon_bg.quotes {    background-image: var(--quotes-grad-bg);}
.icon_bg.quotes .icon {    background-image: var(--library-quotes);}
.icon_bg.blocks {    background-image: var(--blocks-grad-bg);}
.icon_bg.blocks .icon {    background-image: var(--library-blocks);}

.icon_bg.recommends {    background: var(--resources-grad);}
.icon_bg.recommends .icon {    background-image: var(--library-recommends);}

/*CHECKBOXES - LEARNING STYLES*/
.icon_bg.read .icon {    background-image: var(--ls-read-dk);}
.icon_bg.listen .icon {    background-image: var(--ls-listen-dk);}
.icon_bg.watch .icon {    background-image: var(--ls-watch-dk);}
.icon_bg.do .icon {    background-image: var(--ls-do-dk);}


/*RADIO BUTTONS - AVATAR*/
.icon_bg.avatar {    background-color: #fff;     border: 1px solid #06253d22; }
.icon_bg.effective .icon {    background-image: var(--avatar-effective);}
.icon_bg.external .icon {    background-image: var(--avatar-external);}
.icon_bg.review .icon {    background-image: var(--avatar-review);}
.icon_bg.client .icon {    background-image: var(--site-avatar);  }


/*RADIO BUTTONS - RESOURCE TYPE*/
.icon_bg.resource_type {    background-color: var(--dark); }
.icon_bg.resource_type.video .icon {    background-image: var(--acf-type-video);}
.icon_bg.resource_type.podcast .icon {    background-image: var(--acf-type-podcast);}
.icon_bg.resource_type.read_me .icon {    background-image: var(--acf-type-read-me);}
.icon_bg.resource_type.doc_dl .icon {    background-image: var(--acf-type-doc-dl);}



.boxed_button {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px dashed #ccc;
    min-height: 40px;
    position: relative;
    padding: 10px;
    color: #ccc;
    background: #ffffff22;
    font-size: 18px;
}

.boxed_button.active, .boxed_button:hover {
    border-style: solid;
    color: #ccc;
}