@charset 'utf-8';
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');

/**
 * 
 * 	@author		George Iancu
 * 	@copyright	Cube Creative Ltd (c) 2021.
 * 	@license	Commercial
 * 
 */

/** RESET / START **/
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1;padding-top: 158px;}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
table tbody, table tfoot, table thead,table tbody tr:nth-child(even){ background: none; border: none; }
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video{vertical-align: top;}
table tbody td, table tbody th{ padding: 0; }
/** RESET / END **/



/* ===============
 * 
 * DOCUMENT SETUP
 * 
 * ===============
 */
*{ outline: none; box-sizing: border-box; }
*:hover{ 
	-webkit-transition: 0.4s color ease-in-out; -ms-transition: 0.4s color ease-in-out; -o-transition: 0.4s color ease-in-out; -moz-transition: 0.4s color ease-in-out; transition: 0.4s color ease-in-out;
	-webkit-transition: 0.4s background ease-in-out; -ms-transition: 0.4s background ease-in-out; -o-transition: 0.4s background ease-in-out; -moz-transition: 0.4s background ease-in-out; transition: 0.4s background ease-in-out;
	-webkit-transition: 0.4s background-color ease-in-out; -ms-transition: 0.4s background-color ease-in-out; -o-transition: 0.4s background-color ease-in-out; -moz-transition: 0.4s background-color ease-in-out; transition: 0.4s background-color ease-in-out;
}
html,body{/* height: 100%; */padding:0px;margin:0px;min-height: 100vh;}
body{font-family: Arial, sans-serif !important;font-weight: 400;-webkit-font-smoothing: antialiased;text-shadow: 1px 1px 1px rgba(0,0,0,0.004);overflow-x: hidden;min-height: 100vh;}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  
body {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    background: radial-gradient(circle at 62% 48%, rgba(0, 180, 255, 0.45) 0%, rgba(0, 180, 255, 0.25) 18%, rgba(0, 180, 255, 0.12) 32%, rgba(0, 180, 255, 0.05) 42%, transparent 60%), radial-gradient(circle at 100% 48%, rgba(0, 120, 255, 0.20) 0%, transparent 58%), linear-gradient(to bottom, #2a4a76 0%, #1056b3 66%, #0f55b1 66%, #0b4a9a 100%);
    color: white;
  }
  
/* darker horizontal section behind the laptop */
body::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 120px;
    height: 180px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
    pointer-events: none;
    z-index: 0;
  }
  
  /* full-width footer artwork */
body::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 35%; /* adjust to suit */
    background: url('/themes/default/assets/img/png/home-graphic-footer.png') no-repeat bottom center;
    background-size: cover;
    pointer-events: none;
    z-index: 0;
    background-repeat: no-repeat;
}
  

h1{font-size: 50px; line-height: normal;font-weight: 500;text-transform: none;margin: 0 0 20px 0;padding: 0;font-family: Arial, sans-serif;}
h2{font-size: 30px; white-space: normal;text-transform: none;margin: 0 0 20px 0;padding: 0;font-family: Arial, sans-serif;font-weight: bold;}
h3{ font-size:35px; line-height: normal; font-weight: 700; text-transform: none; margin: 0 0 20px 0; padding: 0; font-family: Arial, sans-serif;} /* Area title (left) */
h4{font-size:30px; line-height: normal;font-weight: 700;text-transform: none;margin: 0 0 30px 0;padding: 0;font-family: Arial, sans-serif;} /* Sub header within copy */
h5{font-size:25px;line-height: normal;font-weight: 700;text-transform: none;margin: 0 0 10px 0;padding: 0;font-family: Arial, sans-serif;} /* Smaller option */
h6{font-size:20px;line-height: normal;font-weight: 700;text-transform: none;margin: 0 0 20px 0;padding: 0;font-family: Arial, sans-serif;} /* Smaller option same as para*/

p,
ul,
ul li{font-size: 16px;line-height: 1.5;font-weight:500;color: inherit;margin-bottom: 1.5rem;} /* Site wide paragraph style */
b, strong { font-weight:700;}
a{ color:#00b6ae; text-decoration:none;font-weight:500 }

blockquote {margin: 0px; padding: 0px; border:none; font-size:16px; line-height:21px; color:#00b6ae; font-weight:300}

#wrapper form ::-webkit-input-placeholder {
    color: #536372;
  }
#wrapper form ::-moz-placeholder {
    color: #536372;
  }
#wrapper form :-ms-input-placeholder {
    color: #536372;
  }
#wrapper form :-moz-placeholder {
    color: #536372;
  }

.container{max-width: 50vw;margin: 0 auto;min-height: calc(100vh - 220px);}


.sysalert{position: fixed;top: 0;left: 0;width: 100%;background: red;color: white;padding: 10px 0;}

.button{border-radius: 25px !important;font-size: 16px !important;padding: 20px 40px !important;line-height: 0.7 !important;border: 1px solid #1A6975 !important;background: transparent;color: white !important;display: inline-block !important;font-weight: 600 !important;height: auto !important;border: 1px solid white !important;}
.button.fill{background: #55BCD7;color: white;border: none !important;display: inline-block !important;}
.button.fill.white{ background: white; color: #1A6975 !important; }


/* ===============
 * 
 * HEADER
 * 
 * ===============
 */
header{width: 100%;padding: 25px 5%;display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;height: auto;min-height: 150px;/* background: #5dbe7c; */}
header > div{ }
header > div:nth-child(1){ }
header > div:nth-child(2){align-self: flex-start;text-align: center;}
header > div:nth-child(3){ }

header > div:nth-child(2) > div{ display: flex; align-items: center; }
header > div:nth-child(2) > div > svg{margin-top: 10px;display: block;}
header > div:nth-child(2) > div > svg{margin-top: 10px;display: block;}

header > div:nth-child(2) > div > div {display: flex;align-items: flex-end;margin-left: 15px;}
header > div:nth-child(2) > div > div > svg{ float: left; }
header > div:nth-child(2) > div > div a{display: block;color: #1A6975;font-size: 13px;text-align: left;padding: 5px 6px;margin-bottom: 0px;}
header > div:nth-child(2) > div > div a:hover{background-color: #eeeeee;}

header.sticked{position: relative;top: 0;left: 0;width: 100%;z-index: 9999;}

body.system1 header,
body.system2 header,
body.system3 header{ }
body.system1 a.shownav svg g line,
body.system2 a.shownav svg g line,
body.system3 a.shownav svg g line{ stroke: black; }

.mwl-logo img{ width: 340px; }


/* ===============
 * 
 * WRAPPER
 * 
 * ===============
 */
 #wrapper{width: 100%;/* background-repeat: repeat; *//* background-position: center center; *//* display: flex; */flex-wrap: wrap;flex-direction: column;/* min-height: 85vh; *//* background: url("data:image/svg+xml;charset=utf-8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22Layer_2%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20viewBox%3D%220%200%201600%20963%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Aurl(%23linear-gradient)%3Bstroke-width%3A0px%3B%7D%3C%2Fstyle%3E%3ClinearGradient%20id%3D%22linear-gradient%22%20x1%3D%22800%22%20y1%3D%22456.3%22%20x2%3D%22800%22%20y2%3D%22889.69%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%235cbe7c%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23459763%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cg%20id%3D%22Layer_1-2%22%3E%3Crect%20class%3D%22cls-1%22%20width%3D%221600%22%20height%3D%22963%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); */}
 .wrapper{ padding-left: 10%; padding-right: 10%; }
 body.system1 #wrapper,
 body.system2 #wrapper,
 body.system3 #wrapper{}
 #wrapper > div:not(#footer, #ccore-admin-bar){width: 100%;height: 100%;/* padding-left: 30px; *//* padding-right: 30px; */padding-top: 45px;margin-top: auto;}
#wrapper > div:not(.logindiv){ margin-top: 0; }
 #wrapper.with_footer_bar > div:not(#footer-bar){height: calc(100vh - 255px);}
 #wrapper.full{ }
 #wrapper.full > div:not(#footer-bar){ padding-top: 0; }
 #wrapper.centered_content > div:not(#footer-bar){ padding-top: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
 body.landing #wrapper > div:not(#footer-bar, #ccore-admin-bar){/* height: calc(100vh - 255px); */min-height: 450px;/* margin-top: 20px; */}

 body.system1 #wrapper > div:nth-child(2){  }
 body.system3 #wrapper > div:nth-child(2){  }

 #wrapper p,
 #wrapper ul,
 #wrapper ul li{
    font-size: 18px;
}

.page-members\/login\/system1  #wrapper {min-height: 100vh;}
 .page-members\/login\/system2  #wrapper {min-height: 100vh;}
 .page-members\/login\/system3  #wrapper {min-height: 100vh;}


 /* ===============
 * 
 * FOOTER BAR
 * 
 * ===============
 */
 #footer-bar{width: 100%;padding: 15px 30px;display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;height: 125px;}
.footer-copyright { align-self: baseline; padding-left: 20px;}

  /* ===============
 * 
 * NAVIGATION
 * 
 * ===============
 */
 a.shownav{  }
 a.shownav svg{ width: 50px;  }
 a.shownav svg path{ fill: white; }
 a.shownav.active svg path{ fill: #000; }
 a.shownav.active svg path:nth-child(2){transform: rotate(45deg) translateY(-10px);}
 a.shownav.active svg path:nth-child(3){ display: none; }
 a.shownav.active svg path:nth-child(4){transform: rotate(-45deg) translateX(-22px);}

 #navigation{position: absolute;top: 0;left: 0;width: 100%;min-height: 100%;background-color: white;z-index: 9999;padding-top: 125px;display: flex;align-items: center;justify-content: center;flex-wrap: wrap;transform: translateY(-100%);transition: transform .4s linear;}
 #navigation > ul{ }
 #navigation > ul li{margin: 2.5% 0;}
 #navigation > ul li ul{ display: none; }
 #navigation > ul > li > a{color: #8497a2;font-size: 46px;font-weight: 700;text-align: center;display: block;line-height: 1;}
 #navigation.active{ transform: translateX(0); }
.deck-count{ position: absolute; top: 17px; left: 16px;}

 /* ===============
 * 
 * CONTENT HOMEPAGE
 * 
 * ===============
 */
 #content_homepage{display: flex;align-items: center;gap: 5rem;/* padding-top: 5rem; */justify-content: center;padding-left: 10%;padding-right: 10%;}
 #content_homepage > div{flex: 1;}
 #content_homepage h1{width: 100%;line-height: 1;margin: 0 auto;color: white;margin-bottom: 3rem;font-weight: bold;}
 #content_homepage p{font-size: 25px;color: white;}
 #content_homepage div.buttons{ margin-top: 2rem; }
 #content_homepage div.buttons .login{}

/* ===============
 * 
 * CONTENT DEFAULT TEMPLATE
 * 
 * ===============
 */
.container #content h1{/* color: #8497a2; *//* letter-spacing: -5px; *//* font-size: 90px; *//* line-height: 96px; *//* margin-bottom: 40px; */}
.container #content h2{color: #8497a2;letter-spacing: -5px;}
.container #content h3{color: #8497a2;letter-spacing: -5px;}
.container #content h4{color: #8497a2;letter-spacing: -5px;}
.container #content h5{color: #8497a2;letter-spacing: -5px;}
.container #content p,
.container #content ul li{color: #8497a2;margin: 10px 0 20px 0;font-size: 16px;}
.container #content ul{ list-style-type: initial; margin-left: 20px; }
.container #content ul li{ margin-top: 5px; margin-bottom: 5px; }

.container #content p strong{ color: #8497a2; }








/**
 * 	CUSTOM REVEAL BOXES
 */
.reveal{ font-size: 14px; color: #1A6975; }
.reveal h1{font-size: 28px;border-bottom: 1px solid #1A6975;margin-bottom: 20px;padding-bottom: 10px;}
.reveal h2{margin-top: 10px;margin-bottom: 15px;font-size: 16px;font-weight: bold;color: inherit;}
.reveal p{margin-bottom: 15px;font-size: 14px;color: inherit;}
.reveal input{ box-shadow: none; }
.reveal input[type='submit']{padding: 5px 30px;border: none;background-color: #00af9a;cursor: pointer;color: white;}


/* ===============
 * 
 * TEMPLATE LOGIN
 * 
 * ===============
 */
section#tpl-login{/* background-color: #005cb8; *//* height: 100%; *//* min-height: 93vh; *//* background-image: url('../img/login-backdrop.svg'); *//* background-position: bottom center; *//* background-size: 100% auto; *//* background-repeat: no-repeat; *//* display: flex; */align-items: center;justify-content: center;/* position: relative; *//* z-index: 999; */text-align: center;margin-top: -30%;}
section#tpl-login .close-tpl-login{position: absolute;top: 30px;right: 30px;cursor: pointer;}
section#tpl-login > div{display: flex;align-items: center;gap: 2rem;max-width: 60%;justify-content: center;margin: 0 auto;}
section#tpl-login h1{font-size: 103px;color: white;margin: 0 0 5px 0;letter-spacing: -12px;}
section#tpl-login p{font-size: 16px;font-weight: normal;color: initial;margin-bottom: 20px;}
section#tpl-login a{font-size: 16px;font-weight: normal;/* color: white; */line-height: 24px;text-decoration: underline;}
section#tpl-login form{-webkit-display: flex;-moz-display: flex;-ms-display: flex;-o-display: flex;display: flex;margin: 0;width: 100%;flex-wrap: wrap;background: white;padding: 2rem 2.5rem;border-radius: 20px;}
section#tpl-login form h2{color: #1A6975;font-size: 2rem;margin: 0 0 2rem 0;padding: 0;line-height: 1;}
section#tpl-login form input{background: #fff;width: 100%;margin-right: 0;height: 25px;box-shadow: none;border: 1px solid #CCCCCC;color: #536372;font-size: 13px;/* text-align: center; */height: 50px;border-radius: 0;padding: 5px 15px;margin-bottom: 1em;}
section#tpl-login form input[type="submit"]{display: inline-block !important;background: #55BCD7;color: white;border: none !important;width: auto;}
section#tpl-login form .is-invalid-input:not(:focus){ border: 1px solid #DB0078; }

section#tpl-login a.recover{text-decoration: none;margin-top: 17px;color: white;margin-top: 1.5rem;display: inline-block;text-align: center;}
section#tpl-login a.register{/* background-color: #6A418F; */text-decoration: none;padding: 12px 22px 12px 22px;display: inline-block;border-radius: 20px;line-height: 1;display: inline-block;width: auto;margin-left: 1rem;}
section#tpl-login a.guest{background-color: #006EC1;text-decoration: none;padding: 10px 22px 15px 22px;display: inline-block;border-radius: 20px;line-height: 1;margin-left: 15px;}


/* ===============
 * 
 * TEMPLATE CARDS
 * 
 * ===============
 */
section#tpl-cards{/* background-color: #005cb8; *//* height: 100%; *//* min-height: 800px; *//* padding: 70px; *//* padding-top: 200px; */}
section.tpl-cards h1{font-size: 30px;color: #1A6975;margin: 0 0 1rem 0;font-weight: 600;display: flex;align-items: center;gap: 0.75rem;}
section.tpl-cards h1 span{background: #55BCD7;color: white;width: 40px;height: 40px;display: inline-flex;align-items: center;justify-content: center;border-radius: 20px;font-size: 21px;position: relative;top: -1px;}
section.tpl-cards p{ margin-left: 3.5rem; }

.ecards-grid{-webkit-display: flex;-moz-display: flex;-ms-display: flex;-o-display: flex;display: flex;justify-content: center;flex-wrap: wrap;margin-left: auto;margin-right: auto;margin-bottom: 30px;} 
.ecard{cursor: pointer;margin: 0;width: 25%;margin-bottom: 20px;margin-top: 20px;}
.ecard svg{width: initial;height: 80px;}
.ecard h2{margin: 10px 0 0 0;padding: 0;color: white;font-size: 23px;}

.ecard-row {display: flex;width: 100%;align-items: center;padding-top: 22px;position: relative;gap: 2rem;}
.ecard-row:first-child {padding-top: 0px;}
.ecard-row .ecard-category svg{ width: 40px; height: 40px; }
.ecard-row select{ margin: 0; height: 50px; border-radius: 30px; padding: 0 20px; background: #CCCCCC; font-weight: bold; }
.ecard-row > div:first-child {width: auto;}
.ecard-row > .ecard {width: 19%;cursor: initial;}
.ecard-row .category-scroll > .ecard {cursor: initial;}
.ecard-row .category-scroll > a.ecard {cursor: pointer;}
.ecard-row > a.ecard {cursor: pointer;}
.ecard-row > .ecard > div {transform: scale(0.8);}
.ecard-row h2{font-size: 26px;color: #415364 !important;}
.ecard-row h3{font-size: 16px;color: white;line-height: 24px;}
.request-ecard { display: flex; justify-content: center;}
.ecard-more-categories {font-size: 18px;margin-left: 15px;margin-bottom: 20px;color: #415364 !important;font-weight: bold;}
.category-scroll {display: flex;overflow: scroll;flex: 1;}
.category-scroll > *:nth-child(1) {order: 7;}
.category-scroll > *:nth-child(2) {order: 6;}
.category-scroll > *:nth-child(3) {order: 5;}
.category-scroll > *:nth-child(4) {order: 4;}
.category-scroll > *:nth-child(5) {order: 3;}
.category-scroll > *:nth-child(6) {order: 2;}
.category-scroll > *:nth-child(7) {order: 1;}
.category-scroll a {min-width: 22%;}
.category-scroll > div {min-width: 23%;}
.category-scroll h3{margin-top: 10px;}
.category-scroll .right-arrow {
    position: absolute;
    right: -26px;
    top: 0px;
    bottom: 0;
    display: flex;
    cursor: pointer;
}
.category-scroll .right-arrow svg {
    max-width: 20px;
    height: auto;
}
.category-scroll .left-arrow  {
    position: absolute;
    left: 187px;
    top: 0px;
    bottom: 0;
    margin: auto;
    display: flex;
    cursor: pointer;
}
.category-scroll .left-arrow svg {
    max-width: 20px;
    height: auto;
}



/* ===============
 * 
 * TEMPLATE STEPS - LAYOUT
 * 
 * ===============
 */
section#tpl-steps{ }
section#tpl-steps > div{/* border: 1px solid #6D7D82; *//* border-radius: 20px; *//* padding: 2rem 4rem; */display: flex;gap: 2rem;}
section#tpl-steps > div > div:nth-child(1){ flex: 1; }
section#tpl-steps > div > div:nth-child(2){width: 25%;border-left: 1px solid #f0f0f0;padding-left: 2rem;display: flex;flex-direction: column;min-width: 300px;}
section#tpl-steps > div ul.steps{display: flex;gap: 2rem;position: relative;margin-bottom: 3rem;}
section#tpl-steps > div ul.steps.bevalued{ gap: 3rem; }
section#tpl-steps > div ul.steps:before{content: " ";width: 84%;height: 1px;position: absolute;top: 17px;left: 0;background: #55BCD7;z-index: 1;}
section#tpl-steps > div ul.steps li{display: flex;flex-direction: column;min-width: 150px;flex: 1;font-size: 16px;font-weight: bold;}
section#tpl-steps > div ul.steps li span{border: 1px solid #55BCD7;display: flex;width: 35px;border-radius: 30px;align-items: center;justify-content: center;margin-bottom: 1rem;height: 35px;background: white;z-index: 2;line-height: 0;}
section#tpl-steps > div ul.steps li.filled{ }
section#tpl-steps > div ul.steps li.filled span{background: #76BC21;color: white;font-weight: bold;}
section#tpl-steps > div ul.steps li.current span{background: #55BCD7;color: white;font-weight: bold;}

section#tpl-steps > div > div:nth-child(2) h3{color: #1A6975;font-size: 20px;line-height: 1;display: flex;align-items: center;gap: 1rem;}
section#tpl-steps > div > div:nth-child(2) h3 img{width: 60px;height: auto;}
section#tpl-steps > div > div:nth-child(2) div{display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;margin-top: auto;}
section#tpl-steps > div > div:nth-child(2) div .ecard-reset{ margin-bottom: 0; }
section#tpl-steps > div > div:nth-child(2) div .ecard-submit{ margin-bottom: 0; }


section#tpl-steps .tpl-steps-content{display: flex;gap: 3rem;}
section#tpl-steps .tpl-steps-content > div{ }
section#tpl-steps .tpl-steps-content > div:nth-child(1){width: 25%;}
section#tpl-steps .tpl-steps-content > div:nth-child(1) > img{width: 250px;height: 201px;display: block;margin-bottom: 5rem;}
section#tpl-steps .tpl-steps-content > div:nth-child(1) .steps-controls{ margin-top: 2rem; display: flex; align-items: center; gap: 1rem; }

section#tpl-steps .tpl-steps-content > div:nth-child(2){flex: 1;}

section#tpl-steps .tpl-steps-content input[type="text"],
section#tpl-steps .tpl-steps-content input[type="email"],
section#tpl-steps .tpl-steps-content textarea{color: #000;border-radius: 2rem;padding: 1rem 2rem;height: auto;}
section#tpl-steps .tpl-steps-content ::-webkit-input-placeholder { color: #000; }
section#tpl-steps .tpl-steps-content ::-moz-placeholder { color: #000; }
section#tpl-steps .tpl-steps-content :-ms-input-placeholder { color: #000; }
section#tpl-steps .tpl-steps-content :-moz-placeholder { color: #000; }


section#tpl-steps.system2 > div ul.steps:before{ width: 79%; }



/* ===============
 * 
 * TEMPLATE STEP 1
 * 
 * ===============
 */
section.tpl-step1{ }
section.tpl-step1 h1{font-size: 30px;margin: 0 0 1rem 0;font-weight: 600;display: flex;align-items: center;gap: 0.75rem;}
section.tpl-step1 h1 span{background: #55BCD7;color: white;width: 40px;height: 40px;display: inline-flex;align-items: center;justify-content: center;border-radius: 20px;font-size: 21px;position: relative;top: -1px;}
section.tpl-step1 .autosearch{background-color: #C5EDE9;height: 70px;width: calc(35%);margin: 0 auto;display: flex;align-items: center;justify-content: center;font-size: 39px;font-weight: 300;line-height: 0;overflow: hidden;margin-bottom: 30px;border-radius: 50px;transition: border-radius .5s ease-in-out, opacity .5s ease-in-out;opacity: 0.6;border: none;}
section.tpl-step1 .autosearch:focus{ border-radius: 0; opacity: 1; }
section.tpl-step1 .users{ width: calc(35%); margin: 0 auto; display: block; }
section.tpl-step1 .users li{margin: 10px 0; display: none;}
section.tpl-step1 .users li a{color: white;font-size: 18px;padding: 10px 0;display: block;font-weight: 300;text-align: left; animation-name: usershow;animation-duration: .4s;animation-iteration-count: 1;animation-fill-mode: forwards;}
section.tpl-step1 .users li a:after{content: url('/themes/default/assets/img/list-arrow.png');display: block;float: right;position: relative;top: -5px;}
section.tpl-step1 .users li a:hover{ color: #C5EDE9; }
section.tpl-step1 .users li:hover a:after{ right: -10px; -webkit-transition: 0.4s right ease-in-out; -ms-transition: 0.4s right ease-in-out; -o-transition: 0.4s right ease-in-out; -moz-transition: 0.4s right ease-in-out; transition: 0.4s right ease-in-out; animation-fill-mode: forwards; }

section.tpl-step1 #invite-member{margin-top: 0;display: block;}
section.tpl-step1 #invite-member form{margin: 0 auto;width: 80%;min-width: 300px;display: flex;align-items: center;justify-content: center;margin-top: 1rem;}
section.tpl-step1 #invite-member form input{background: #fff;width: 100%;margin-right: 0;height: 25px;box-shadow: none;border: none;color: #536372;font-size: 13px;/* text-align: center; */height: 30px;border-radius: 10px;padding: 5px 15px;margin-bottom: 0;margin-right: 10px;flex: 1;}
section.tpl-step1 #invite-member form input[type="submit"]{margin-right: 0;background-color: #DB0078;cursor: pointer;color: white;width: 33px;height: 33px;border-radius: 33px;display: flex;align-items: center;justify-content: center;font-weight: 700;margin-top: 0;line-height: 1;margin-bottom: 0;padding: 10px;width: 33px;margin-left: auto;margin-right: auto;flex: none;}
section.tpl-step1 #invite-member .switch-to-multiple{margin-right: 0;cursor: pointer;color: white;/* width: 33px; */height: 33px;border-radius: 33px;display: flex;align-items: center;justify-content: center;font-weight: 700;margin-top: 0;line-height: 1;margin-bottom: 0;padding: 10px;/* width: 180px; */margin-left: auto;margin-right: auto;font-size: 12px;/* margin-left: 10px; */}

section.tpl-step1 #invite-members{margin-top: 0;display: none;}
section.tpl-step1 #invite-members form{ margin: 0 auto; width: 50%; min-width: 300px; display: flex;align-items: center;justify-content: center;margin-top: 1rem;}
section.tpl-step1 #invite-members form input{background: #fff;width: 100%;margin-right: 0;height: 25px;box-shadow: none;border: none;color: #536372;font-size: 13px;/* text-align: center; */height: 30px;border-radius: 10px;padding: 5px 15px;margin-bottom: 0;margin-right: 10px;}
section.tpl-step1 #invite-members form input[type="submit"]{margin-right: 0;background-color: #DB0078;cursor: pointer;color: white;width: 33px;height: 33px;border-radius: 33px;display: flex;align-items: center;justify-content: center;font-weight: 700;margin-top: 0;line-height: 1;margin-bottom: 0;padding: 10px;width: 50px;margin-left: auto;margin-right: auto;}

.email-error {margin: 10px; color: #c30000 !important; font-size: 18px}

@keyframes usershow {	
	from { margin-left: -50px; visibility: 0; }
	to { margin-left: 0; visibility: 1; }
}

button.add-recipient {
    background-color: #415364;
    text-decoration: none;
    padding: 12px 32px 12px 32px;
    display: inline-block;
    border-radius: 12px;
    line-height: 1;
    color: white;
    margin: 0 0 30px 0;
    cursor: pointer;
    }

/* ===============
 * 
 * TEMPLATE STEP 2
 * 
 * ===============
 */
section.tpl-step2{/* height: 100%; *//* min-height: 800px; *//* padding: 70px; *//* padding-top: 200px; */}
section.tpl-step2 h1{font-size: 30px;margin: 0 0 1rem 0;font-weight: 600;display: flex;align-items: center;gap: 0.75rem;}
section.tpl-step2 h1 span{background: #55BCD7;color: white;width: 40px;height: 40px;display: inline-flex;align-items: center;justify-content: center;border-radius: 20px;font-size: 21px;position: relative;top: -1px;}
section.tpl-step2 > div.row:first-of-type{/* display: flex; *//* align-items: center; *//* margin-bottom: 5%; */}


/* ===============
 * 
 * TEMPLATE CUSTOMISE
 * 
 * ===============
 */
section.tpl-customise{/* min-height: 100%; *//* padding: 70px; *//* padding-top: 100px; */ }
section.tpl-customise h1{font-size: 30px;margin: 0 0 1rem 0;font-weight: 600;display: flex;align-items: center;gap: 0.75rem;}
section.tpl-customise h1 span{background: #55BCD7;color: white;width: 40px;height: 40px;display: inline-flex;align-items: center;justify-content: center;border-radius: 20px;font-size: 21px;position: relative;top: -1px;}
section.tpl-customise h1 strong{font-weight: inherit;}
section.tpl-customise h3{font-size: 22px;margin: 0 0 10px 0;color: white;font-weight: 400;}
section.tpl-customise > div.row:first-of-type{/* display: flex; *//* align-items: center; *//* margin-bottom: 3%; */}
section.tpl-customise p.heading{font-size: 18px;font-weight: 400;margin-bottom: 10px;}
section.tpl-customise textarea,
section.tpl-customise input[type="text"],
section.tpl-customise input[type="email"],
section.tpl-customise input[type="color"]{border: 1px solid #ccc;background: white;box-shadow: none;color: #8497a2;font-size: 14px;font-family: "Fira Sans", Arial;border-radius: 10px;}
section.tpl-customise textarea{ height: 100px; }
section.tpl-customise textarea::placeholder{ color: #8497a2 }
section.tpl-customise .when_to_send{margin-bottom: 20px;}
section.tpl-customise .when_to_send label{ color: white; display: flex; align-items: center; }
section.tpl-customise .when_to_send label input{ margin: 0 0 0 10px; }

section.tpl-customise .ng-invalid-maxlength{background-color: red;color: white;}
section.tpl-customise #dynframe{transform: scale(0);overflow: auto;overflow-x: hidden;animation-name: dynframeshow;animation-duration: 1s;animation-delay: .3s;animation-iteration-count: 1;animation-fill-mode: forwards;border-radius: 20px;width: 300px;height: 350px;}
	section.tpl-customise #dynframe::-webkit-scrollbar {/* width: .5em; */}
	section.tpl-customise #dynframe::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); }
 	section.tpl-customise #dynframe::-webkit-scrollbar-thumb {/* background-color: #ffffff; *//* outline: 1px solid #a0a0a0; */}
section.tpl-customise #dynframe table{border-collapse: initial;padding: 15px;transform: scale(0.5); /* Adjust the scale value to zoom out */transform-origin: top left;width: 600px !important;}
section.tpl-customise .button{margin-top: 25px;font-size: 14px;font-weight: normal;}
section.tpl-customise .button.cancel{background-color: #415364;text-decoration: none;padding: 12px 32px 12px 32px;display: inline-block;border-radius: 12px;line-height: 1;}
section.tpl-customise .button.send{background-color: #eb3397;text-decoration: none;padding: 12px 32px 12px 32px;display: inline-block;border-radius: 12px;line-height: 1;color: white;border: none !important;}
section.tpl-customise .card-customisation {/* padding-left: 25px; */}
section.tpl-customise .card-preview {padding-left: 0px;}

section.tpl-customise .card-custo-preview{display: flex;width: 100%;gap: 2rem;}
section.tpl-customise .card-custo-preview .card-customisation{flex: 1;}
section.tpl-customise .card-custo-preview .card-preview{
    width: 40%;
}
section.tpl-customise .card-custo-preview .card-preview #dynframe{margin-top: 2rem;}


#cardsbar{ margin-top: 40px; }
#cardsbar h3{ color: white; font-weight: 400; font-size: 22px; }
#cardsbar .cards-inline{display: flex;width: 100%;margin-top: 15px;flex-wrap: wrap;justify-content: center;gap: 2rem;}
#cardsbar .cards-inline a{/* flex: 1; */text-align: center;filter: grayscale(1);flex-basis: 10%;margin: 0;}
#cardsbar .cards-inline a:hover,
#cardsbar .cards-inline a.active{ filter: initial; }
#cardsbar .cards-inline a svg{width: initial;height: 35px;}
#cardsbar .cards-inline a h2{font-size: 15px;font-weight: 300;}

@keyframes dynframeshow {	
	from { transform: scale(0); }
	to { transform: scale(1); }
}


/**
 * 	VERSIONS SLIDER
 */
#versions{width: 100%;height: 344px;overflow: hidden;position: relative;padding: 0;}
#versions.reduced{height: 155px;}
#versions.fullwidth{ padding: 0; }
#versions .next-version,
#versions .prev-version{position: absolute;z-index: 1000;top: 35%;max-width: 5%;}
#versions .next-version{right: 0;}
#versions .prev-version{left: 0;}
#versions .version{display: none;position: relative;width: calc(100% / 4 - 2%);height: 80%;float: left;text-align: center;background: none;margin: 5px 1%;transition: border .5s ease-in-out;animation-name: niceslide;animation-duration: 1s;animation-iteration-count: 1;animation-fill-mode: forwards;background-repeat: no-repeat;background-position: center center;background-size: cover;border-radius: 15px;background-position: center top;filter: grayscale(100%);box-shadow: 0 0 10px white;box-sizing: border-box;opacity: 0.5 !important;}
#versions.cloured .version{ filter: initial; }
#versions.cloured .version.selected{box-shadow: 0 0 0px 3px #55BCD7;background-size: cover;border: 10px solid white;opacity: 1 !important;}
#versions.fullwidth .version{  }
#versions .version:nth-child(1),
#versions .version:nth-child(2),
#versions .version:nth-child(3),
#versions .version:nth-child(4){ display: block; }
#versions .version.active,
#versions .version:hover{border: 10px solid #eee;filter: initial;opacity: 1 !important;}
@keyframes niceslide {	
	from { bottom: -100%; opacity: 0; }
	to { bottom: 0px; opacity: 1; }
}


/**
 * 	PROFILE PAGE
 */
section#profile{ display: flex; flex-wrap: wrap; }
section#profile > div {flex: 1;margin: 0 20px;}

section#profile form{width: 50%;}
section#profile h2{/* margin-top: 10px; */margin-bottom: 15px;font-size: 32px;font-weight: bold;color: #e9edf0;display: flex;align-items: flex-end;margin-bottom: 30px;}
section#profile h2 svg{ margin: 0 10px;}
section#profile p{margin-bottom: 15px; font-size: 14px; color: white;}
section#profile label{ color: #ffffff; font-size: 13px; margin: 0 0 10px 0; }
section#profile input{background: #fff;width: 100%;margin-right: 0;height: 25px;box-shadow: none;border: none;color: #536372;font-size: 13px;/* text-align: center; */height: 33px;border-radius: 10px;padding: 5px 15px;margin-bottom: 0;margin-right: 10px;}
section#profile input[type='submit']{margin-right: 0;background-color: #DB0078;cursor: pointer;color: white;height: 33px;border-radius: 33px;display: flex;align-items: center;justify-content: center;font-weight: 700;margin-top: 10px;line-height: 1;margin-bottom: 0;padding: 10px;width: 150px;}
section#profile .button{padding: 5px 30px;background-color: #206d58;cursor: pointer;color: white;margin: 0 0 3px 0;height: 30px;}
.profile_toggle{position: fixed;top: 205px;left: 0;cursor: pointer;z-index: 99999;}
.profile_toggle svg{width: 80px;height: auto;}

section#profile .mycards-list{max-height: 100vh;overflow: scroll;}
section#profile .mycards-list li{border-bottom: 1px solid white;display: flex;align-items: center;margin-bottom: 15px;padding-bottom: 15px;}
section#profile .mycards-list li > div:nth-child(1){ margin-right: 10px; }
section#profile .mycards-list li > div:nth-child(1) img{max-width: 30px;}

section#profile .mydecks-list{ counter-reset: item; }
section#profile .mydecks-list li{border-bottom: 1px solid white;display: flex;align-items: center;margin-bottom: 15px;padding-bottom: 15px;}
section#profile .mydecks-list li a{ color: inherit; }
section#profile .mydecks-list li:before{display: inline-block;content: counter(item);counter-increment: item;width: 2em;counter-increment: item;width: 40px;height: 40px;border-radius: 40px;display: flex;align-items: center;justify-content: center;color: white;margin-right: 10px;border: 2px solid white;font-size: 20px;}



/**
 * 	SYSTEM 2
 */
 .mydecks-list{/* display: flex; */align-items: center;justify-content: center;}
 .mydecks-list{
    margin: 0;
}
 .mydecks-list li{margin: 0;display: flex;align-items: center;opacity: 0.3;margin-bottom: 5px;}
 .mydecks-list li.active,
 .mydecks-list li:hover{ opacity: 1; }
 .mydecks-list li a{color: inherit;font-size: inherit;}
 .mydecks-list li.active a{ font-weight: bold; }



 /* ===============
 * 
 * TEMPLATE STEP 1
 * 
 * ===============
 */
section.tpl-decks{ }
section.tpl-decks .content{ margin-left: 3.5rem; }
section.tpl-decks h1{font-size: 30px;color: #1A6975;margin: 0 0 1rem 0;font-weight: 600;display: flex;align-items: center;gap: 0.75rem;}
section.tpl-decks h5{color: #1A6975;margin: 0 0 1rem 0;font-weight: 600;display: flex;align-items: center;gap: 0.75rem;margin-top: 2rem;}
section.tpl-decks h6{color: #1A6975;margin: 0 0 1rem 0;font-weight: 600;}
section.tpl-decks h1 span{background: #55BCD7;color: white;width: 40px;height: 40px;display: inline-flex;align-items: center;justify-content: center;border-radius: 20px;font-size: 21px;position: relative;top: -1px;}
section.tpl-decks .content ul{list-style: disc;margin-left: 1rem;}
section.tpl-decks .content ul li{margin-bottom: 0.5rem;}

section.tpl-decks .content .wheel{display: flex;gap: 3rem;margin-top: 2rem;}
section.tpl-decks .content .wheel > div:nth-child(1){ flex: 1; }
section.tpl-decks .content .wheel > div:nth-child(2){width: 55%;}
section.tpl-decks .content .wheel > div.currentdeck{ background: #E7EAED;border-radius: 20px;padding: 2rem; }
section.tpl-decks .content .wheel > div.currentdeck ul{list-style: none;margin: 1rem 0;padding: 0;}
section.tpl-decks .content .wheel > div.currentdeck ul li{display: flex;gap: 1rem;align-items: center;justify-content: space-between;}
section.tpl-decks .content .wheel > div.currentdeck ul li a.remove-card{  }
section.tpl-decks .content .wheel > div.currentdeck ul li a.remove-card svg{width: 25px;height: 25px;}

section.tpl-decks .content .wheel .thewheel{ }
section.tpl-decks .content .wheel .thewheel .cls-25{ cursor: pointer; }
section.tpl-decks .content .wheel .thewheel .cls-30{ cursor: pointer; }
section.tpl-decks .content .wheel .thewheel .cls-22{ cursor: pointer; }
section.tpl-decks .content .wheel .thewheel .cls-31{ cursor: pointer; }
section.tpl-decks .content .wheel .thewheel .cls-29{ cursor: pointer; }
section.tpl-decks .content .wheel .thewheel .cls-21{ cursor: pointer; }
section.tpl-decks .content .wheel .thewheel .cls-23{ cursor: pointer; }
section.tpl-decks .content .wheel .thewheel .cls-32{ cursor: pointer; }
section.tpl-decks .content .wheel .thewheel .cls-33{ cursor: pointer; }
section.tpl-decks .content .wheel .thewheel .cls-16{ cursor: pointer; }
section.tpl-decks .content .wheel .thewheel .cls-24{ cursor: pointer; }
section.tpl-decks .content .wheel .thewheel .cls-19{ cursor: pointer; }

section.tpl-decks .wheelpopup{position: fixed;width: 100%;height: 100%;background: rgba(0,0,0,0.8);z-index: 999;top: 0;left: 0;align-items: center;justify-content: center; display: none;}
section.tpl-decks .wheelpopup.open{ display: flex; }
section.tpl-decks .wheelpopup .wheelpopup-body {width: 50%;min-height: 59%;background: white;border-radius: 20px;box-shadow: 0 0 3px 0 #ccc;position: relative;}
section.tpl-decks .wheelpopup .wheelpopup-body .wheelpopup-body-content{padding: 5rem;}
section.tpl-decks .wheelpopup .wheelpopup-body a.close{ position: absolute; right: 1rem; top: 1rem; }
section.tpl-decks .wheelpopup .wheelpopup-body a.close svg{width: 50px;height: 50px;}

section.tpl-decks .wheelpopup  .wheelpopup-controls{ text-align: center; position: absolute; width: 100%; bottom: 0; left: 0; }

section.tpl-decks .savedcards h4{ font-size: 18px;color: #1A6975;margin: 0;font-weight: 600; }
section.tpl-decks .savedcards hr{margin: 0.5rem 0;}

/* ===============
 * 
 * TEMPLATE STEP 2
 * 
 * ===============
 */
 section.tpl-recipient{ }
 section.tpl-recipient .content{ margin-left: 3.5rem; }
 section.tpl-recipient h1{font-size: 30px;color: #1A6975;margin: 0 0 1rem 0;font-weight: 600;display: flex;align-items: center;gap: 0.75rem;}
 section.tpl-recipient h5{color: #1A6975;margin: 0 0 1rem 0;font-weight: 600;display: flex;align-items: center;gap: 0.75rem;margin-top: 2rem;}
 section.tpl-recipient h6{color: #1A6975;margin: 0 0 1rem 0;font-weight: 600;}
 section.tpl-recipient h1 span{background: #55BCD7;color: white;width: 40px;height: 40px;display: inline-flex;align-items: center;justify-content: center;border-radius: 20px;font-size: 21px;position: relative;top: -1px;}
 section.tpl-recipient .content ul{list-style: disc;margin-left: 1rem;}
 section.tpl-recipient .content ul li{margin-bottom: 0.5rem;}
 
 section.tpl-recipient .savedcards h4{ font-size: 18px;color: #1A6975;margin: 0;font-weight: 600; }
 section.tpl-recipient .savedcards hr{ margin: 0.5rem 0; }

 section.tpl-recipient ul.choosen-cards-list{list-style: none;margin: 0;padding: 0;display: grid;grid-template-columns: repeat(6,1fr);gap: 1rem;}
 section.tpl-recipient .choosen-cards-list li{ }

 /* ===============
 * 
 * TEMPLATE STEP 3
 * 
 * ===============
 */
 section.tpl-review{ }
 section.tpl-review .content{ margin-left: 3.5rem; }
 section.tpl-review h1{font-size: 30px;color: #1A6975;margin: 0 0 1rem 0;font-weight: 600;display: flex;align-items: center;gap: 0.75rem;}
 section.tpl-review h5{color: #1A6975;margin: 0 0 1rem 0;font-weight: 600;display: flex;align-items: center;gap: 0.75rem;margin-top: 2rem;}
 section.tpl-review h6{color: #1A6975;margin: 0 0 1rem 0;font-weight: 600;}
 section.tpl-review h1 span{background: #55BCD7;color: white;width: 40px;height: 40px;display: inline-flex;align-items: center;justify-content: center;border-radius: 20px;font-size: 21px;position: relative;top: -1px;}
 section.tpl-review .content ul{list-style: disc;margin-left: 1rem;}
 section.tpl-review .content ul li{margin-bottom: 0.5rem;}
 
 section.tpl-review .savedcards h4{ font-size: 18px;color: #1A6975;margin: 0;font-weight: 600; }
 section.tpl-review .savedcards hr{ margin: 0.5rem 0; }

 section.tpl-review ul.choosen-cards-list{list-style: none;margin: 0;padding: 0;display: grid;grid-template-columns: repeat(6,1fr);gap: 1rem;}
 section.tpl-review .choosen-cards-list li{ }


 footer{min-height: 70px; justify-content: center;margin-bottom: 0px;flex-direction: column;background: #1B6975;padding: 25px 5%;display: none;}
 footer div:nth-child(1) ul{ display: flex;gap: 1rem; margin-bottom: 0; }
 footer div:nth-child(1) ul li{  margin-bottom: 0; }
 footer div:nth-child(1) ul li::before{content: "|";color: white;font-weight: bold;margin-right: 1rem;}
 footer div:nth-child(1) ul li:first-of-type::before{ display: none; }
 footer div:nth-child(1) ul li{ color: white; font-weight: bold; }


 /* User Messages */
 .message-page {}
 .message-page #tpl-message{ margin-bottom: 300px;}
 .message-page #tpl-message p{ font-size: 25px; max-width: 500px; text-align: center; margin: 50px auto; color: white; }
 .message-page #tpl-message p a{color: white; text-decoration: underline;}
 .message-page #footer-bar{ position: absolute; bottom: 0; left: 0;}


 /* Custom System tpl sections */
 .wrapper.cardswelcome{display: flex;gap: 2rem;align-items: center;}
 .wrapper.cardswelcome > div:nth-child(1){width: 40%;}
 .wrapper.cardswelcome > div:nth-child(2){flex: 1;display: flex;gap: 5%;justify-content: center;text-align: center;/* background-image: url('/themes/default/assets/img/png/welcome-bg-image.png'); *//* background-size: 100%; *//* background-position: center; *//* background-repeat: no-repeat; */}
 .wrapper.cardswelcome > div:nth-child(2) > div{flex: 1;display: flex;flex-direction: column;align-items: center;}
 .wrapper.cardswelcome > div:nth-child(2) img,
 .wrapper.cardswelcome > div:nth-child(2) svg{display: block;height: 300px;margin-bottom: 2rem;}
 .wrapper.cardswelcome > div:nth-child(2) p{max-width: 60%;}




 /**
 * 	SYSTEM 3
 */
 .bevalued-categories{display: flex;align-items: center;gap: 1rem;}
 .bevalued-categories button{ }
 .bevalued-categories button:hover,
 .bevalued-categories button.active{ background-color: #76b729; }