@import url("https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@7.1.0/css/all.min.css");
@font-face {
	font-family: 'MyConferencesuite_Alliance';
	src: url('../../../../css/webfonts/MyConferencesuite_Alliance.eot?z1yefj');
	src: url('../../../../css/webfonts/MyConferencesuite_Alliance.eot?z1yefj#iefix') format('embedded-opentype'), url('../../../../css/webfonts/MyConferencesuite_Alliance.ttf?z1yefj') format('truetype'), url('../../../../css/webfonts/MyConferencesuite_Alliance.woff?z1yefj') format('woff'), url('../../../../css/webfonts/MyConferencesuite_Alliance.svg?z1yefj#MyConferencesuite_Alliance') format('svg');
	font-weight: normal;
	font-style: normal;
}
:root {
	--primary-gold:rgba(253,192,16,1);
    --yellow:rgba(254,242,00,1);
    --green:rgba(80,167,72,1);
    --red:rgba(240,29,38,1);
    --brown:rgba(89,13,13,1);

    --info-color:#333333;

    /* Radii */
	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 18px;
	--radius-xl: 25px;

    --transition:all .7s cubic-bezier(.25,.8,.25,1);

    --box-shadow: 0px 0px 0px rgba(00, 00, 00, 0.0);
	--transform: scale(1) translateY(0px);
    --box-shadow-hover: 0px 5px 18px rgba(00, 00, 00, 0.1);
	--transform-hover: scale(1.05) translateY(-2px);
}
#footer{
	padding:2rem;
}
.row{
    margin:0;
}
#content-middle .panel{
    background:transparent;
}
.alert.alert-success{
    display:none;
}
div.pageinfo {
    background: var(--primary-gold);
    padding: 13px;
    border: none;
    font-size: 1rem;
    color: var(--info-color);
    font-weight: 400;
    text-align: center;
    text-shadow: none;
    margin: 1rem 0;
    border-radius: 15px;
    box-shadow: 0px 3px 10px rgba(00, 00, 00, 0.1);
}
div.pageinfo strong {
    font-weight: 600;
}
.MyCS_brand:after {
	font-family: 'MyConferencesuite_Alliance';
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	content: '\e900';
	color:rgba(255,255,255,0.9);
	font-size: 45px;
	text-shadow: none;
}
html,
body,
input,
select,
textarea,
legend,
legend.left,
label,
label.left{
	font-size:1.1rem !important;	
}
div[data-group="comments"] {
    margin-top: 25px;
    padding-top: 25px;
    border-top: 1px solid rgba(00, 00, 00, 0.1);
}
div.field{
    width:100%;
    margin:0;
    overflow: visible;
}
div#fieldContainer {
    display: grid;
    gap: 0.5rem;
}
.fancybox-bg{
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: opacity .35s ease;
}
/* Optional softer open fade */
.fancybox-is-open .fancybox-bg {
  opacity: 1;
}
.fancybox-content {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.2);

  box-shadow:
    0 20px 60px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.15);

  color: #fff; /* if using dark glass */

  opacity: 0;
  transform: translateY(20px) scale(.96);
  transition:
    opacity .35s ease,
    transform .35s cubic-bezier(.22,1,.36,1);
}
.fancybox-slide--current .fancybox-content {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.fancybox-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.25),
    rgba(255,255,255,.05)
  );
  pointer-events: none;
}
.modalPopUp{
    padding: 2rem !important;
    border-radius: 25px;
    box-shadow:0px 5px 20px rgba(00, 00, 00, 0.4);
}
#content,
#header .container{
	width:90% !important;	
}

.tab-content{
    background:transparent;
}
#header,
#content{
    border-radius: 25px;
    box-shadow:0px 4px 18px rgba(00, 00, 00, 0.1);
    background:#ffffff;
    margin:1rem auto;
    max-width: 90%;
}

/***********************************
    Radio/Checkbox Inputs
***********************************/
[type="radio"],
[type="checkbox"]{
    opacity:0;
    position: absolute;
}
[type="radio"] + label,
[type="checkbox"] + label{
    position:relative;
    padding-left:30px;
    cursor:pointer;
    display:inline-block;
    color:#666;
    line-height:25px;
    transition:var(--transition);
}

[type="radio"] + label:before,
[type="checkbox"] + label:before{
    content:"";
    position:absolute;
    left:0;
    top:4px;
    width:20px;
    height:20px;
    border-radius: 100%;
    border:2px solid rgba(89,13,13,0.5);
    background:#fff;
    transition:var(--transition);
}
[type="checkbox"] + label:before{
    border-radius: 0px;
}

[type="radio"]:checked + label:after,
[type="checkbox"]:checked + label:after{
    content:"";
    position:absolute;
    left:3px;
    top:7px;
    width:14px;
    height:14px;
    border-radius:100%;
    background:var(--red);
    transform:scale(1.4);
    opacity:1;
    transition:var(--transition);
}
[type="checkbox"]:checked + label:after{
    border-radius:0;
}
[type="radio"]:checked + label:before,
[type="checkbox"]:checked + label:before{
    border-color:rgba(89,13,13,1.0);
    transition:var(--transition);
    transform: scale(1.4);
}

[type="radio"]:not(:checked) + label:after,
[type="checkbox"]:not(:checked) + label:after{
    content:"";
    position:absolute;
    left: 3px;
    top: 7px;
    width:14px;
    height:14px;
    border-radius:100%;
    background:#fff;
    transform:scale(0);
    opacity:0;
    transition:var(--transition);
}
[type="checkbox"]:not(:checked) + label:after{
    border-radius: 0;
}
label.full:after{
    content:"Full" !important;
    font-size: 14px;
    color: orangered;
}
#paymentForm input[type="radio"] {
    opacity: 1 !important;
    float: none;
    position: relative;
}
div[data-group="wide"] div.text-editable{
	width:100% !important;	
}
div.field div.form-group div{
	width: 68% !important;
}
div.field div.form-group label {
    width: 29% !important;
}
fieldset legend.left{
	float: left;
    width: 29%;
    border: none;
    font-weight: normal;	
}
div.field div.form-group fieldset div.de_fieldset span.de_cols_1 label {
    width: 100% !important;
    float: left;
    padding-left: 6%;
    padding-top: 3px;
}
div[data-group="note"] div.form-group p.information{
	display:none;
}
div[data-group="note"] div.form-group .text-editable{
	width:100% !important;	
}
div[data-group="note"] div.form-group .text-editable .alert{
	width:98% !important;
	margin:15px;
}

div[data-group="note"] h3{
    background: var(--green);
    color: #ffffff;
    padding: 1rem;
    border-radius: 17px;
    box-shadow: 0px 3px 18px rgba(00, 00, 00, 0.1);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

div[data-group="note"] h3 i{
    font-size: 1.1rem;
    text-shadow: 1px 3px 10px rgba(00, 00, 00, 0.1);
}

.loadInfo,
#mycs-spinner{
	background: rgba(255, 255, 255, .8) url('https://mycs-cdn.myconferencesuite.com/other/Project/3280/5b/3b/loading2025.gif') 50% 50% no-repeat !important;	
	background-size: 75px !important;
}
#mycs-loading-mask{
	background: rgba(255, 255, 255, 1) !important;	
	display:none;
}
#mycs-spinner{
	width: 80px !important;
	height: 76px !important;
	background-color: transparent !important;
}
div.field div.form-group {
    overflow: visible;
}
input[type="text"], input[type="email"], select, textarea{
    height: auto;
    padding: 10px 14px;
    line-height: normal;
    border-radius: 8px;
    transition: var(--transition);
    box-shadow:0 0 0 rgba(00, 00, 00, 0.0);
    transform: var(--transform);
}

input[type="text"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus{
    transition: var(--transition);
    box-shadow: 0 3px 18 rgba(00, 00, 00, 0.05);
    transform: scale(1) translateY(-2px);
}

#register, #returning, #button input, .btn-primary, #addAdt, #paybtn, .btn-download, .btn-download:visited {
    padding: 18px 30px !important;
    text-transform: uppercase;
    margin: 5px;
    border: 1px solid var(--red);
    color: #ffffff;
    background: var(--red);
    border-radius: 20px;
    display: inline-block;
    border-color: var(--red);
    transition: var(--transition) !important;
    box-shadow: 0 0 0 rgba(00, 00, 00, 0.0) !important;
    transform: var(--transform) !important;
    font-size: 1.1rem;
}

#register:hover,
#register:focus,
#returning:hover,
#returning:focus,
#button input:hover,
#button input:focus,
.btn-primary:hover,
.btn-primary:focus,
#addAdt:hover,
#addAdt:focus,
#paybtn:hover,
#paybtn:focus,
.btn-download:hover,
.btn-download:focus,
.btn-download:visited:hover,
.btn-download:visited:focus{
    background: var(--red);
    border-color: var(--red);
    transition: var(--transition) !important;
    box-shadow: 0 3px 18px rgba(00, 00, 00, 0.05) !important;
    transform: scale(1) translateY(-2px) !important;
}

.btn-wrapper{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    margin: 1rem;
    padding: 1rem 0;
}
.btn-wrapper a{
    float:none !important;
    margin:0px !important;
}

.review #fieldContainer{
    gap:1rem;
}
.review #fieldContainer hr{
    display:none;
}
.review #fieldContainer .field-summary{
    padding: 1.5rem 1rem;
    border-radius: 10px;
    box-shadow: 0px 0px 3px rgba(00, 00, 00, 0.05);
    transition: var(--transition) !important;
    
    transform: var(--transform) !important;
}

.review #fieldContainer .field-summary:hover{
    transition: var(--transition) !important;
    box-shadow: 0 3px 18px rgba(00, 00, 00, 0.05) !important;
    transform: scale(1.01) translateY(-2px) !important;
}

.review #fieldContainer .field-summary span{
    transition: var(--transition) !important;
    font-weight:normal;
}
.review #fieldContainer .field-summary:hover span{
    transition: var(--transition) !important;
    font-weight:normal;
    color:var(--green);
}