/*------------------------------------------------------------------*/
/*  List Module colours */
/*------------------------------------------------------------------*/
.list-module-blue ul {
    margin: 1em 0 1em 0;
    padding: 0 0 0 1em; /* make space for li's :before */
    list-style: none;
}
.list-module-blue li {
    position: relative;
    padding-left: 0.5em; /* text distance to icon */
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-size: 0.9rem!important;
}
.list-module-blue li a {
    font-size: 16px!important;
}
.list-module-blue li a:hover{
    text-decoration: underline;
}
.list-module-blue li:before {
    content:"\F28A";
    font-family: bootstrap-icons !important;
    position: absolute;
    color: #1893fa;
    font-size: 0.9rem;
    left: -1em; /* same as ul padding-left */
    top: 0.5em; /* depends on character, maybe use padding-top instead */
    /*  .... more styling, maybe set width etc ... */
}
.list-module-green ul {
    margin: 1em 0 1em 0;
    padding: 0 0 0 1em; /* make space for li's :before */
    list-style: none;
}
.list-module-green li {
    position: relative;
    padding-left: 0.5em; /* text distance to icon */
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-size: 0.9rem!important;
}
.list-module-green li a {
    font-size: 16px!important;
}
.list-module-green li a:hover{
    text-decoration: underline;
}
.list-module-green li:before {
    content:"\F28A";
    font-family: bootstrap-icons !important;
    position: absolute;
    color: #339246;
    font-size: 0.9rem;
    left: -1em; /* same as ul padding-left */
    top: 0.5em; /* depends on character, maybe use padding-top instead */
    /*  .... more styling, maybe set width etc ... */
}

.list-module-pink ul {
    margin: 1em 0 1em 0;
    padding: 0 0 0 1em; /* make space for li's :before */
    list-style: none;
}
.list-module-pink li {
    position: relative;
    padding-left: 0.5em; /* text distance to icon */
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-size: 0.9rem!important;
}
.list-module-pink li a {
    font-size: 16px!important;
}
.list-module-pink li a:hover{
    text-decoration: underline;
}
.list-module-pink li:before {
    content:"\F28A";
    font-family: bootstrap-icons !important;
    position: absolute;
    color: #d84fbe;
    font-size: 0.9rem;
    left: -1em; /* same as ul padding-left */
    top: 0.5em; /* depends on character, maybe use padding-top instead */
    /*  .... more styling, maybe set width etc ... */
}

.list-module-oran ul {
    margin: 1em 0 1em 0;
    padding: 0 0 0 1em; /* make space for li's :before */
    list-style: none;
}
.list-module-oran li {
    position: relative;
    padding-left: 0.5em; /* text distance to icon */
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-size: 0.9rem!important;
}
.list-module-oran li a {
    font-size: 16px!important;
}
.list-module-oran li a:hover{
    text-decoration: underline;
}
.list-module-oran li:before {
    content:"\F28A";
    font-family: bootstrap-icons !important;
    position: absolute;
    color: #dd901e;
    font-size: 0.9rem;
    left: -1em; /* same as ul padding-left */
    top: 0.5em; /* depends on character, maybe use padding-top instead */
    /*  .... more styling, maybe set width etc ... */
}

.list-module-grey ul {
    margin: 1em 0 1em 0;
    padding: 0 0 0 1em; /* make space for li's :before */
    list-style: none;
}
.list-module-grey li {
    position: relative;
    padding-left: 0.5em; /* text distance to icon */
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-size: 0.9rem!important;
}
.list-module-grey li a {
    font-size: 16px!important;
}
.list-module-grey li a:hover{
    text-decoration: underline;
}
.list-module-grey li:before {
    content:"\F28A";
    font-family: bootstrap-icons !important;
    position: absolute;
    color: #828384;
    font-size: 0.9rem;
    left: -1em; /* same as ul padding-left */
    top: 0.5em; /* depends on character, maybe use padding-top instead */
    /*  .... more styling, maybe set width etc ... */
}

.list-module-dark ul {
    margin: 1em 0 1em 0;
    padding: 0 0 0 1em; /* make space for li's :before */
    list-style: none;
}
.list-module-dark li {
    position: relative;
    padding-left: 0.5em; /* text distance to icon */
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-size: 0.9rem!important;
}
.list-module-dark li a {
    font-size: 16px!important;
}
.list-module-dark li a:hover{
    text-decoration: underline;
}
.list-module-dark li:before {
    content:"\F28A";
    font-family: bootstrap-icons !important;
    position: absolute;
    color: #1c1f21;
    font-size: 0.9rem;
    left: -1em; /* same as ul padding-left */
    top: 0.5em; /* depends on character, maybe use padding-top instead */
    /*  .... more styling, maybe set width etc ... */
}
.list-module-red ul {
    margin: 1em 0 1em 0;
    padding: 0 0 0 1em; /* make space for li's :before */
    list-style: none;
}
.list-module-red li {
    position: relative;
    padding-left: 0.5em; /* text distance to icon */
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-size: 0.9rem!important;
}
.list-module-red li a {
    font-size: 16px!important;
}
.list-module-red li a:hover{
    text-decoration: underline;
}
.list-module-red li:before {
    content:"\F28A";
    font-family: bootstrap-icons !important;
    position: absolute;
    color: #F50606;
    font-size: 0.9rem;
    left: -1em; /* same as ul padding-left */
    top: 0.5em; /* depends on character, maybe use padding-top instead */
    /*  .... more styling, maybe set width etc ... */
}

.list-module-yell ul {
    margin: 1em 0 1em 0;
    padding: 0 0 0 1em; /* make space for li's :before */
    list-style: none;
}
.list-module-yell li {
    position: relative;
    padding-left: 0.5em; /* text distance to icon */
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    font-size: 0.9rem!important;
}
.list-module-yell li a {
    font-size: 16px!important;
}
.list-module-yell li a:hover{
    text-decoration: underline;
}
.list-module-yell li:before {
    content:"\F28A";
    font-family: bootstrap-icons !important;
    position: absolute;
    color: #FFC100;
    font-size: 0.9rem;
    left: -1em; /* same as ul padding-left */
    top: 0.5em; /* depends on character, maybe use padding-top instead */
    /*  .... more styling, maybe set width etc ... */
}
/*------------------------------------------------------------------*/
/*  But Magenta */
/*------------------------------------------------------------------*/

/* From Uiverse.io by cssbuttons-io */ 
.butMagenta {
 width: 200px;
 height: 50px;
 cursor: pointer;
 display: flex;
 align-items: center;
 border: none;
 border-radius: 5px;
 background: #ffffff;
}

.butMagenta, .butMagenta span {
 transition: 200ms;
}

.butMagenta .text {
 transform: translateX(35px);
 color: #1A1A1D;
 font-weight: bold;
}

.butMagenta .icon {
 position: absolute;
 border-left: 1px solid #eaebee;
 transform: translateX(150px);
 height: 40px;
 width: 40px;
 display: flex;
 align-items: center;
 justify-content: center;
}

.butMagenta svg {
 width: 15px;
 fill: #111;
}

.butMagenta:hover {
 background: #ff3636;
}

.butMagenta:hover .text {
 color: transparent;
}

.butMagenta:hover .icon {
 width: 200px;
 border-left: none;
 transform: translateX(0);
}

.butMagenta:focus {
 outline: none;
}

.butMagenta:active .icon svg {
 transform: scale(0.8);
}