/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}
#aiLogo {margin: 40px 0 25px 5%; width: 50%;}
.pinkBar {height: 6px; background: #ff00a4; width: 90%; margin-left: 5%;}
.white13{
  font-family: 'robotoregular', Helvetica, sans-serif;
  color: #FFF;
  /*font-size: 13px;*/
  font-size: 18px;
}
.r14 {font-size:14px; font-weight:normal;}
.r12 {font-size:12px; font-weight:normal;}
.pinkI {color: #FF00A4; font-style:italic; font-size: 15px; font-weight:bold;}
.normalText {line-height:normal;}
.normalWeight {font-weight:normal;}
input, textarea {font-size:12px; font-family: 'robotoregular', Helvetica, sans-serif;}
textarea {
  resize: none; 
  overflow-y: auto;
}
#qrAppLabelRow { margin-top: 14px; }
#qrBodyInput1 { resize: none !important; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
#qrBodyInput1::-webkit-scrollbar { width: 0; height: 0; }

#qrLoadingDownloadOverflow { overflow: visible !important; }
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
a {
  text-decoration: none;
}
.smallPink {color:#ff00a4; font-size:14px;}
.underline {text-decoration: underline;}
.click {cursor:pointer;}
.bold {font-weight:bold;}
.italics {font-style:italic;}
#contentWrapper {
  width:1200px;
  margin:0 auto;
  background:#FFF;
}
#configArea {
  height:35px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.navBar{
  position: relative;
  width: 100%;
  height: 30px;
  background: #B7B6B6;
  border-radius: 5px;
}
.blackTitle{font-weight:bold; font-size:32px; margin:30px auto 30px;}
.titleContainers {position: relative;}
#projectName,#dateName {height: 35px;width: 270px;padding: 5px 32px 0 15px;font-size: 16px;font-weight: bold;text-align: left;background: white;vertical-align: top;text-transform: uppercase;font-family: 'Roboto', sans-serif;border: solid 1px #a9a9a9;outline: none; border-radius: 5px; transition: all 0.3s ease;}
.icon {position: absolute;top: 50%;transform: translateY(-50%);height: 21px; margin-left: -27px;}
.inputDiv {border:solid 1px #a9a9a9; width:100%; padding:5px 10px; color:#000; outline: none; border-radius: 5px;}
.projectBlock {
  width: 100%;
  height: 200px;
}
#partialContent {
  width: 90%;
  margin: 15px 5%;
  font-weight: bold;
}
.selectArea {
  width: 100%;
  padding: 2.5% 2.5% 12%;
  border: 2px solid #313131;
  box-sizing: border-box;
  border-radius: 5px;
}
.description{
    padding: 15px 10px;
    color: #000;
    align-items: center;
    display: flex;
    justify-content: flex-end;
}
.switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 16px;
    margin-top: 0px;
}
.switch input {
    display: none;
}
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}
.slider.round {
    border-radius: 34px;
}
.slider.round:before {
    border-radius: 50%;
}
.slider:before {
    position: absolute;
    content: "";
    height: 12px;
    width: 12px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}
input:checked + .slider:before {
  -webkit-transform: translateX(18px);
  -ms-transform: translateX(18px);
  transform: translateX(18px);
}
#dataSubArea {
  width: 90%;
  margin-left: 5%;
  margin-top: 10px;
}
.choiceArea {width: 100%; background: #e2e3e9; border-radius: 5px;}
.choiceOption {padding: 20px 25px; display: inline-block; font-size: 14px; color: #313131; cursor: pointer; border-radius: 5px;}
.choiceActive {color: #FFF; background: #313131; border-radius: 5px;}
.shareSubArea {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 10px;
}
#data {margin-top: 10px;}
#share {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 10px;
}
#lang, #omt, #feed, #caricature, #cloud, #payment {
  width: 95%;
  margin-left: 2.5%;
  margin-top: 10px;
}

/* Payment Capture layout */
#paymentFields {
  width: 100%;
}

#paymentRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}

#paymentLeft {
  flex: 0 0 55%;
}

#paymentRight {
  flex: 0 0 40%;
}

#paymentTaxAmountDisplay {
  margin-top: 2px;
  min-height: 25px;
}

#paymentCurrencyInput {
  width: 100%;
  height: 28px;
  font-size: 12px;
  border: 1px solid #a9a9a9;
  border-radius: 5px;
  padding-left: 6px;
  background-color: #ffffff;
  color: #363636;
  box-sizing: border-box;
}

#paymentCurrencyInput:focus {
  outline: none;
}

/* Align labels to the left of inputs and tighten widths inside Payment Capture */
#payment .overflow {
  display: flex;
  align-items: center;
}

#payment .floatEmailInput {
  width: 120px;
  margin-top: 0;
}

#payment .inputContainers {
  width: 320px;
}

.taxAmountRow {
  display: flex;
  margin-top: 2px;
}

#payment .taxAmountRow .floatEmailInput {
  width: 120px;
}

#payment .taxAmountRow .inputContainers {
  width: 260px;
}

#paymentHintsBox {
  font-size:13px;
  line-height:16px;
  font-weight:normal;
  background: #fff8e1;
  border-left: 4px solid #f39c12;
  border-radius: 5px;
  padding: 16px 20px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

#paymentHintsBox::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(243, 156, 18, 0.3) 50%, transparent 100%);
}

#paymentHintsBox .bold {
  color: #d68910;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
}



/* Master Artist iframe styling to match other sections */
#demoSearchSubArea .selectArea {
  width: 90%;
  margin-left: 5%;
  margin-top: 20px;
  padding: 25px;
  padding-top: 10px;
  border: 2px solid #313131;
  box-sizing: border-box;
  border-radius: 5px;
}

#demoSearchSubArea .selectArea iframe {
  width: 100%;
  border: none;
  border-radius: 5px;
}

/* Border radius control classes for specific sections */
.selectArea.straight-top {
  border-radius: 0 0 8px 8px !important;
}

.selectArea.straight-bottom {
  border-radius: 8px 8px 0 0 !important;
}

.selectArea.straight-both {
  border-radius: 0 !important;
}

.selectArea.straight-left {
  border-radius: 0 8px 8px 0 !important;
}

.selectArea.straight-right {
  border-radius: 8px 0 0 8px !important;
}

/* For itemBar elements that need straight bottom corners */
.itemBar.straight-bottom {
  border-radius: 8px 8px 0 0 !important;
}

/* For choiceArea elements that need straight bottom corners */
.choiceArea.straight-bottom {
  border-radius: 8px 8px 0 0 !important;
}

/* Make the active choice option have straight bottom corners when choiceArea is straight-bottom */
.choiceArea.straight-bottom .choiceOption.choiceActive {
  border-radius: 8px 8px 0 0 !important;
}

/* Override class for inactive choice options */
.choiceOption.choiceInactive {
  background-color: #e2e3e9 !important;
  color: #000 !important;
}

/* Override choiceActive when choiceInactive is also present */
.choiceOption.choiceActive.choiceInactive {
  background-color: #e2e3e9 !important;
  color: #000 !important;
}

/* Submission Flow tabs (APP COPY, APP COLORS, QRCODE SUBMISSION) on one line */
#lang .choiceArea.straight-bottom {
  display: flex;
  flex-wrap: nowrap;
}
#lang .choiceArea.straight-bottom .choiceOption {
  flex-shrink: 0;
  white-space: nowrap;
}

.pink {color: #fa31ac}
input:checked + .slider {
    background-color: #579a17;
}
.pBtn {
  background-color: #FF00A4;
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  height: 34px;
  line-height: 34px;
  color: #FFF;
  padding: 0 25px;
  font-size:14px;
  user-select: none;
  border-radius: 5px;
}

/* Modern styling for specific buttons */
#emailActivate, #textActivate, #qrActivate {
    border-radius: 5px;
    font-weight: 700;
    padding: 0 30px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
}

/* Cloud Connection Section */
.cloud-connection-container {
  border: 1px solid black;
  padding: 20px;
  margin: 20px 0;
}

.cloud-connection-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.cloud-connection-left {
  flex: 1;
  margin-right: 20px;
}

.cloud-connection-description {
  margin-bottom: 10px;
  line-height: 1.5;
  font-weight: normal;
  font-size: 14px;
  width: 80%;
}

.cloud-connection-right {
  text-align: right;
}

.cloud-activate-button {
  background-color: #ff00a4;
  color: white;
  width: 200px;
  margin-bottom: 5px;
}

.cloud-connection-status {
  font-size: 12px;
  text-align: center;
  font-weight: normal;
}

.cloud-connect-id {
  font-weight: bold;
  font-size: 14px;
  margin: 15px 0;
}

/* Upload button styling */
.uploadBtn {
    border-radius: 5px;
    font-weight: 700;
    padding: 0 30px;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    text-transform: uppercase;
}

.uploadBtn:hover {
    background-color: #ff00a4;
}
.gBtn {
    background-color: #c7c6c5;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    height: 34px;
    line-height: 34px;
    color: #FFF;
    padding: 0 25px;
    font-size:14px;
    border-radius: 5px;
}
.greenBtn {
  background-color: #c7c6c5;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#579a17), to(#579a17));
  background-image: -webkit-linear-gradient(top, #579a17, #579a17);
  background-image: -moz-linear-gradient(top, #579a17, #579a17);
  background-image: -ms-linear-gradient(top, #579a17, #579a17);
  background-image: -o-linear-gradient(top, #579a17, #579a17);
  background-image: linear-gradient(to bottom, #579a17, #579a17);
  text-decoration: none;
  text-align: center;
  box-sizing: border-box;
  height: 34px;
  line-height: 34px;
  color: #FFF;
  padding: 0 25px;
  font-size:14px;
}
#titleFlex {display:flex; width: 90%; margin: 0 5%; flex-wrap: wrap; align-items: center;}
#leftTitle, #centerTitle, #rightTitle {display:inline-flex;}
#leftTitle {width:20%; justify-content: flex-start; align-items: center;}
#projectBox {width:100%; height:35px; line-height:35px; border:1px solid #FF00A4; text-align:center; font-size:16px; border-radius: 5px; cursor: pointer;}
#projectBox:hover {border-color: #ff00a4;}
#centerTitle {width:60%; text-align:center; flex-direction: row; align-items: center; justify-content: center;}
#rightTitle {width:20%; justify-content: flex-end; align-items: center;}
#rightTitle .dropBtn {height:35px; line-height:35px; font-weight: bold; font-size: 16px; border-radius: 5px;}
#rightTitle .dropBtn:hover {background-color: #ff00a4;}
#projectConfigTitle {width: 100%; text-align: center; margin-top: 20px;}
#projectConfigTitle .blackTitle {margin: 0;}

/* Pill Toggle Styles */
.pillToggleContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 25px;
  margin-bottom: 10px;
  width: 100%;
}

.pillToggle {
  position: relative;
  display: inline-flex;
  background: #f0f0f0;
  border-radius: 50px;
  padding: 4px;
  border: 2px solid #e0e0e0;
  min-width: 400px;
  width: 750px;
  height: 60px;
}

.pillToggle input[type="radio"] {
  display: none;
}

.pillToggleLabel {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50%;
  height: 100%;
  font-size: 16px;
  font-weight: bold;
  color: #666;
  cursor: pointer;
  border-radius: 45px;
  padding: 0 20px;
  text-align: center;
  user-select: none;
}

.pillToggle input[type="radio"]:checked + .pillToggleLabel {
  color: #fff;
  font-weight: bold;
}

.pillToggleSlider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: #ff00a4;
  border-radius: 45px;
  z-index: 1;
}

.pillToggle input[type="radio"]:nth-of-type(2):checked ~ .pillToggleSlider {
  transform: translateX(100%);
}
#shareSave, #dataSave, #pageSave, #imageSave, #langSave, #omtSave, #feedSave, #caricatureSave, #paymentSaveBtn {float: right; margin: 20px 0; height: 32px; line-height: 32px; padding: 0 45px; border-radius: 5px;}
#shareSave:hover, #dataSave:hover, #pageSave:hover, #imageSave:hover, #langSave:hover, #omtSave:hover, #feedSave:hover, #caricatureSave:hover, #paymentSaveBtn:hover {background-color: #ff00a4;}
#compileBtn {margin: 50px auto; display: inline-block; text-align: center;}
.switchText {margin-Left: 5px; font-size: 17px; display: inline-block; vertical-align: top;}
.optionNameSpacing{
  margin: 10px 0;
}
.projectNameSpacing{
  margin: 10px 0;
  text-align:center;
}
.projectBorder {
  height: 70%;
  border: 1px solid #000;
  background-position:center;
  background-repeat:no-repeat;
  background-color: #f1f1f1;
  background-size:contain;
  position:relative;
}

#projectsBtn{
  width: 10%;
  height: 30px;
  background: #ff00a4;
  float: left;
  text-align: center;
  border-radius: 5px;
}
#projectsBtn:hover {background-color: #ff00a4;}
#optionsBtn{
  width: 10%;
  height: 30px;
  background: #ff00a4;
  float: left;
  text-align: center;
  border-radius: 5px;
}
#optionsBtn:hover {background-color: #ff00a4;}
#optionsSaveBtn{
  width: 10%;
  height: 30px;
  background: #ff00a4;
  float: left;
  text-align: center;
  border-radius: 5px;
}
#optionsSaveBtn:hover {background-color: #ff00a4;}

.optionsBtn {
  width: 100%;
  height: 30px;
  background: #ff00a4;
  text-align: center;
  opacity: 75%;
  line-height:30px;
  position: absolute;
  bottom: 0px;
  font-weight: bold;
  border-radius: 5px;
}
.button-container {width: 90%;margin: 0 5%; display: flex;align-items: center; justify-content: space-between;}
#creditBox {color: #313131;font-weight: bold; text-align: center; display: flex;align-items: center;justify-content: center; box-sizing: border-box; line-height:20px; min-height:42px;}
#creditsContainer {
  padding: 0px 20px;
  position: relative;
  color: #313131;
  font-weight: bold;
  text-align: center;
  margin: 10px 10px 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ff00a4;
  box-sizing: border-box;
  line-height: 20px;
  height: 42px;
  min-width: 125px;
  border-radius: 5px;
  background: #ffffff;
}
.creditList .prices {list-style: none; padding: 0; margin: 0; margin:5px 0 0 10px;}
.creditList .prices li {margin-bottom: 2px; font-size: 14px; display: flex; margin-left: 6px;}
.creditList .plan-name {color: #000;font-weight: bold; width:105px; display:inline-block; text-align:left;}
.creditList .plan-price {color: #ff00a4; font-weight: bold; display:inline-block; text-align:left;}
#creditsContainer .icon-container {
  position: relative;
}

#creditsContainer svg {
  width: 20px;
  height: auto; 
  margin-right: 12.5px;
  margin-top: 4px;
}
#creditsTooltip {
  display: none;
  position: absolute;
  top: 25px;
  left: -242px;
  width: 210px;
  padding: 10px;
  background: white;
  border: 1px solid #ff00a4;
  color: black;
  font-size: 14px;
  text-align: center;
  z-index: 1000;
  background-color: rgb(245, 245, 245);
}

#creditsContainer .icon-container:hover #creditsTooltip {
  display: block;
}
#creditsTooltip.show {
  display: block !important;
}

.date-range-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.date-caution-container {
  flex-shrink: 0;
}
.date-caution-icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  width: 28px;
  height: 28px;
  background-color: #ff00a4;
  border-radius: 50%;
  border: 1px solid #ff00a4;
  box-sizing: border-box;
}
.date-caution-icon {
  font-size: 16px;
  line-height: 1;
  color: #ffffff;
  display: block;
}
.date-caution-icon-container:hover .date-caution-tooltip {
  display: block;
}
.date-caution-tooltip {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  padding: 8px 12px;
  min-width: 180px;
  background: rgb(245, 245, 245);
  border: 1px solid #ff00a4;
  color: #000;
  font-size: 13px;
  text-align: center;
  z-index: 1000;
  border-radius: 5px;
  white-space: nowrap;
}

.infinitySymbol {font-size:38px;}
  #gearAccountBlock {display: flex;align-items: center; justify-content: flex-end;}
  .button-wrapper {display: flex;align-items: center;justify-content: center;margin: 10px;}
  .back-button {padding: 10px 20px;background-color: #313131;color: #fff;font-weight: bold;text-align: center;margin: 10px 0;display: flex;align-items: center;justify-content: center; border-radius: 5px; height:42px;}
  .back-button:hover {background-color: #fff;color: #313131;outline: 1px solid #313131;}
  .account-gear, .logout-button, .back-button {cursor: pointer;border-radius: 5px;}
  .account-gear {width: 35px;height: 35px;background-image: url('https://cdn.sketchbot.com/portal/img/accountGear.svg');background-repeat: no-repeat;background-position: center;background-size: contain;}
  .account-gear:hover {background-image: url('https://cdn.sketchbot.com/portal/img/accountGearHover.svg');}
  .logout-button {padding: 10px 20px;background-color: #313131;color: #fff;font-weight: bold;text-align: center;margin: 10px 0 10px 10px;display: flex;align-items: center;justify-content: center; border-radius: 5px; height:42px;}
  .logout-button:hover {background-color: #fff;color: #313131;outline: 1px solid #313131;}
  hr {border: 0; height: 3px; background-color: #ff00a4; margin: 0px auto 15px; width:90%; margin-left:5%;}
#menu {
  position:relative;
  height:30px;
}

#menu:hover > ul {
    display: block;
}
#menu a {color:#323434;}
#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
    position: absolute;
    top: 30px;
    right: -6px;
    z-index: 99999;
    background-color: #e4e2e2;
    border-radius: 5px;
}

#menu ul a:hover {
    background-color: #f2f2f2;
    border-radius: 5px;
}

#menu ul a {
    padding: 10px;
    height: auto;
    line-height: 1;
    display: block;
    white-space: nowrap;
    float: none;
    text-transform: none;
    width:115px;
    text-align:left;
    font-weight:bold;
    font-size:12px;
    border-radius: 5px;
}

.inactiveBtn{background:#b7b6b6 !important;}
/* input[type=number] {
  -moz-appearance:textfield;
} */
.error {border:1px #DD0414 solid !important; color:#DD0414;}
.valid {border:1px #008000 solid !important; color:#008000;}
.click {cursor:pointer;}
.center {text-align:center;}

.active {
    background-color: #313131 !important; 
}
.inactive {
    background-color: #afafaf; 
}

.itemContent{
    display: none;
}
.itemBar{
    color: #FFF; 
    padding: 20px;
    font-size: 21px;
    background-color: #313131;
    margin: 25px 0 0 0;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-bottom: 3px solid #FF00A4;
    transition: all 0.3s ease;
}
.toggleIcon{
    height: 20px;
    float: right;
    cursor: pointer;
}   
.toggleIcon img{ 
    height: 100%;
}
/* data section */
.x-holder {height:100%; width:44px; display:inline-flex; justify-content: flex-start; align-items:center;}
.x-container {width: 20px;height: 20px; position: relative; cursor:pointer; background-image:url('../images/pink_x.svg'); background-repeat: no-repeat; margin-left:9px;}
.dropBtn {height:28px; line-height:28px; width:100%; text-align:center; font-size: 13px; padding:0;}
.inputHeader {font-size:11px; color:#ff00a4; margin-bottom:3px;}
.typeArea {height:30px;width:45px; display:inline-block;}
.inputArea {width:250px; height:45px; display:inline-block;}
.alternativeArea {height:30px; display:inline-block; margin:13px 0 0 5px; width:100px;}
.optional {background-color:#e2e3e9; border-radius: 5px;}
.mandatory {background-color:#ff00a4; color:#FFF; border-radius: 5px;}
.fieldSelectedBox {width:100%; margin-top:8px; padding:7px 16px; background: #ffffff; border-radius: 5px; border: 1px solid #e9ecef;}
.fieldSelectedFlex {display:flex; justify-content: flex-start; align-items:center; margin-top:3px; height:100%;}
#dataArea {display: flex;}
#dataSelectArea {flex: 0 0 25%; display: flex; flex-direction: column; justify-content: center; text-align:center;}
#dataSelectedArea .textHeader {width:95%;}
.dataSubtext {height:45px; width:95%;}
#fieldBox {width: 100%; box-sizing: border-box; border:2px solid #313131; text-align:center; border-radius: 5px;}
.fieldItem {text-align:left; width:100%; padding-left:5%; height:26px; line-height:26px; cursor:pointer; font-size:16px; font-weight:normal; user-select:none; border-radius: 0; margin-bottom: 2px;}
#arrowArea {display:flex; flex: 0 0 10%; align-items: center; justify-content: center;}
#swapArrow {width:55px; height:55px; background-size:contain; background-image:url('../images/swap.svg'); background-repeat: no-repeat;}
#dataSelectedArea {flex: 0 0 65%; display: flex; flex-direction: column; text-align:center;}
#selectedBox {width: 95%; scrollbar-gutter: stable; overflow-y:auto; height:508px; box-sizing: border-box; border:2px solid #313131; text-align:center; padding:8px 12px 12px; text-align:left; border-radius: 5px; background: #ffffff;}
#terms-form, #newsletter-form, #check1-form, #check2-form, #check3-form {margin: 0; border: none; padding: 0;}
#terms-form .dz-message, #newsletter-form .dz-message, #check1-form .dz-message, #check2-form .dz-message, #check3-form .dz-message {display:none !important;}
.removeArea {height:30px; line-height:30px; text-align:center; width:125px; text-decoration: none; font-size:12px; font-weight: bold; color:#ff00a4; margin-top:8px;}
.dragHandle {width:28px; height:28px;background-size:contain; background-image:url('../images/scroll.svg'); background-repeat: no-repeat; cursor:pointer;}
#editDropdownBkg{width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 9999; background-color: rgba(25, 25, 25, 0.3); display: none; align-items: center; justify-content: center;}
#editDropdown{height: auto; width: 550px; margin: 350px auto; background-color: #d5d5d5; border: 1px solid #6f6f6f; box-sizing: border-box; padding: 20px; position: relative; border-radius: 5px;}
#editDropdownDesc{font-size: 16px; padding-bottom: 20px;}
#editDropdownInput{width: 100%; height: 425px; margin: 0 auto; border: 1px solid; display: flex; background: #fff; border-radius: 5px;}
#editDropdownSave{width: 150px; margin: 20px auto 0; border-radius: 8px;}
#tipArea {font-size:13px; line-height:16px; float:left; margin-top:17px; font-weight:normal; background: #fff8e1; border-left: 4px solid #f39c12; border-radius: 5px; padding: 16px 20px; margin-bottom: 20px; position: relative; overflow: hidden;}
#tipArea::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(243, 156, 18, 0.3) 50%, transparent 100%);}
#tipArea .bold {color: #d68910; font-weight: 700; font-size: 14px; text-transform: uppercase;}
#tipArea a {color: #e17055; text-decoration: none; font-weight: 600; border-bottom: 1px solid transparent;}
#tipArea a:hover {color: #d63031; border-bottom-color: #d63031;}

/* Modern T&C Template link styling */
.pink.click.underline {color: #FF00A4; text-decoration: none; font-weight: 700;}
.pink.click.underline:hover {color: #ff00a4;}
/* data section end */
/* email section */
.dataField {display: flex; flex-wrap: wrap;}
#bothChoices {float:right; width: 370px; font-size:12px; text-align:center; margin-top:13px; line-height:14px;}
#emailFields {margin: 5px 0 0 0;}
#emailContent {width: 100%; position:relative; display: flex;}
#emailActivateSection {position:absolute; top:0; right:0; width:200px;}
#emailContentLeft {display: inline-block; width:600px; vertical-align: top;}
#emailContentRight {display: inline-block; vertical-align: top; width:300px;}
#hintsBox {font-size:13px; line-height:16px; margin:300px 0 0 20px; vertical-align: top; font-weight:normal; background: #fff8e1; border-left: 4px solid #f39c12; border-radius: 5px; padding: 16px 20px; margin-bottom: 20px; position: relative; overflow: hidden; word-spacing: -1px;}
#hintsBox::before {content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(243, 156, 18, 0.3) 50%, transparent 100%);}
#hintsBox .bold {color: #d68910; font-weight: 700; font-size: 14px; text-transform: uppercase;}
#hintsBox a {color: #e17055; text-decoration: none; font-weight: 600; border-bottom: 1px solid transparent;}
#hintsBox a:hover {color: #d63031; border-bottom-color: #d63031;}

/* Style for the hints title */
#hintsBox h3, #hintsBox h4, #hintsBox strong:first-child {color: #d68910; font-weight: 700; font-size: 16px; text-transform: uppercase; margin-bottom: 8px; display: block;}
.overflow {overflow: auto;}
.downloadLink {flex: 0 0 100%;}
.downloadLink a {color: #FF00A4; text-decoration: none; font-size: 15px; font-weight: bold; flex: 1 1 100%;cursor: pointer;}
.downloadBlock a {color: #FF00A4; text-decoration: none; font-size: 15px; font-weight: bold; flex: 1 1 100%;cursor: pointer;}
.emailOptions {width: 150px; display: flex; flex-wrap: wrap; margin-top: 25px; position: relative;}
.imgInfo {vertical-align: top;}
.imgIcon {width: 37px; height: 30px; background-image: url(../images/imgLogo.png); vertical-align: top; margin-top:3px;}
.emailExample {flex: 0 0 62%; display: flex; flex-direction: column; margin-top: 25px;}
.dropzone.dz-clickable {cursor: pointer;}
.dropzone {padding: 0; border: 0;}
.dropzone .dz-preview {display:none !important;}
.dropzone .dz-preview.dz-image-preview {display:none !important;}

.removeSticker {position: absolute; height: 20px; width: 20px; top: -10px; right: -10px; background-image: url(../images/removeX.png); display: none; z-index: 3; cursor: pointer !important;
}
#email-header-dropzone {width:425px; height:85px; background:#c2c1bf; color:#FFF; border: dashed; border-color: #707070; position:relative;}
#eHeaderPreview {height:100%; width:100%; position:absolute; top:0; left:0; background-size: cover; background-repeat:no-repeat; pointer-events: none; z-index:2;}
#email-footer-dropzone {width:425px; height:65px; background:#c2c1bf; color:#FFF; border: dashed; border-color: #707070; position:relative;}
#eFooterPreview {height:100%; width:100%; position:absolute; top:0; left:0; background-size: cover; background-repeat:no-repeat; pointer-events: none; z-index:2;}
.exampleImg{width: 220px; height:auto; margin-top:10px;}
.inputContainers {margin: 5px 0 0px;width: 425px; display: inline-block; position:relative;}
.floatEmailInput {width: 150px; text-align: left; display: inline-block;}
#senderDomain {height:28px; font-size:12px; width: 100%; border: solid 1px #a9a9a9; padding-left:6px; border-radius: 5px;}
.floatEmail {width: 150px; text-align: left; display: inline-block; vertical-align: top; margin-top:6px;}
#placeholderBox {font-size: 16px;color: #FFF; width: 425px; height: 150px; line-height: 150px; background: #c2c1bf;text-align: center;}
#greetingFname {position:absolute; right:10px; color:#a9a9a9; line-height:28px; height:28px; top:0; font-size:12px; font-weight:normal;}
.black16 {font-size: 16px;color: #333;font-weight: bold;}
.dropzone .dz-message {
    text-align: center;
    width: 100%;
    height: 20px;
    line-height: 20px;
    position: absolute;
    top: calc(50% - 10px);
}
.socialSharing {display: flex; align-items: center; justify-content: center;}
.shareIconCheckbox {margin: 0 7px 0 12px;}
.shareIcon {height: 60px; margin-right: 28px; vertical-align:middle; border: 0;}
#testEmailArea {margin: 10px 0; display: flex; align-items: center; gap: 10px; margin-left: 130px;}
#testEmailBtn {display: inline-block; margin-right: 5px; margin-left: 10px; border-radius: 5px; min-width: 166px}
#testEmailField {display: inline-block; height: 34px; vertical-align: top; border: solid 1px #a9a9a9; padding-left: 10px; min-width: 245px; box-sizing: border-box; border-radius: 5px;}
#emailActiveText, #textActiveText, #feedActiveText, #feedSubActiveText, #caricatureActiveText, #caricatureSubActiveText, #qrActiveText {text-align:center; margin-top:5px; font-size:11px; color: #333;}
/* email end */

/* text start */
#textContent {width: 100%; position:relative; display: none;}
#textPosition {width:500px; vertical-align:top;}
#textActivateSection, #qrActivateSection {margin: 0 0 20px auto; width:200px;}
#txtMsgBox {width: 100%; font-size:16px; height: 350px; border: 2px solid #313131; border-radius: 5px;}
.textHeader {font-size: 16px; font-weight: bold;}
.subTextHeader {font-size: 14px; font-weight:normal;}
.subTextNote {font-size: 12px; font-weight:normal; margin-top: 7.5px;}
#textBox {margin: 20px 0 5px;}
/* text end */

/* share image start */
#shareImgArea {width: 100%;}
#shareImgFlex {display: flex;}
.takeawaySections {width: 33.3%; box-sizing: border-box; margin-top: 40px;}
.checkBoxArea {display: flex; align-items: center; height: 20px;}
.roundedTwo {
    border: solid 2px #313131;
    position: relative;
    background-color: white;
    margin-right: 5px !important;
    width: 20px;
    height: 20px;
}
.check_css {
    display: inline-block;
    margin: 0; 
    position: relative;
}
input[type=checkbox] {
    visibility: hidden;
}
.roundedTwo label {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.roundedTwo input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.roundedTwo label:after {
    /* -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; */
    opacity: 0;
    content: url('https://picturemosaics.com/photo-mosaic-tool/sub-flow/images/check.svg');
    text-align: center;
    position: absolute;
    width: 18px;
    height: 18px;
    top: -10px;
    left: -2px;
}
.checkboxLabel {
    font-size: 16px;
    padding-left: 8px;
    display: inline-block;
}
.imgTemplateTxt {font-size: 14px; font-weight: bold; text-decoration: none; color: #fa31ab; display: inline-block; cursor: pointer;}
.imgSubArea {margin:25px 0 0 33px; width: 230px; position:relative;}
.removeImgX {background-image: url('../images/pink_x.svg'); height:15px; width:15px; background-size:contain; display:inline-block; margin-left:5px; cursor:pointer;}
#squareOverlay {border: 1px solid #313131; box-sizing: border-box; background-size: cover; user-select: none; position:absolute; width:230px; height:230px; top:0; left:0; z-index:2;}
#squareImage {width: 230px; height: 230px; z-index:1;}
#squareOverlay .dz-preview {display:none !important;}
#squareOverlay .dz-preview.dz-image-preview {display:none !important;}
#sq-overlay-form  .dz-message {display:none !important;}
#sq-overlay-form {display:inline-block; vertical-align:top;}
#footerSubArea {height:306px; background:#f7f7f7;}
#footerOverlay {border: 1px solid #313131; width:100%; height:306px; box-sizing: border-box; background-size: cover; user-select: none; position:absolute; z-index:2;  top:0; left:0;}
#footerOverlay .dz-preview {display:none !important;}
#footerOverlay .dz-preview.dz-image-preview {display:none !important;}
#noheader-overlay-form  .dz-message {display:none !important;}
#noheader-overlay-form {display:inline-block; vertical-align:top;}
#footerSubArea img {width: 100%; height:auto; z-index:1}
#recSubArea {height:345px; background:#f7f7f7; margin-top: 8px !important;}
#rec-overlay-form {display:inline-block; vertical-align:top;}
#recOverlay .dz-preview {display:none !important;}
#recOverlay .dz-preview.dz-image-preview {display:none !important;}
#rec-overlay-form .dz-message {display:none !important;}
.imgUploadText {display:inline-flex; align-items:center; font-size:11px; margin-left:10px; height:34px; line-height:34px;}
#recOverlay {border: 1px solid #313131; width:100%; height:345px; box-sizing: border-box; background-size: cover; user-select: none; position:absolute; z-index:2;  top:0; left:0;}
#recSubArea img {width: 100%; height:auto; margin-top:42px; z-index:1}
.overlayUpload {margin:10px 0 0 33px;}
.uploadBtn {display:inline-block; font-size:12px;}
.downloadBox {margin:3px 0 0 32px; font-size:14px; }
/* share image end */

/*share page start */
#pageSave, #sharePageArea {display:none;}
#sharePageTop {display: flex; justify-content: flex-start; margin-top:50px;}
.subText {font-size:13px; font-weight:normal; margin-top:5px;}
#shareColors {flex: 0 0 50%; display: flex; flex-direction: column;}
#shareFont {flex: 0 0 50%; display: flex; flex-direction: column;}
#sharePageColorOption {width:45%; margin-top:29px; display: flex; justify-content: space-between; align-items: center;}
#sharePageColorDropdown {height:34px; font-size:14px; width: 150px; border-radius: 5px;}
#shareTxtColor {display:none;}
.colorPicker {background-size: contain; background-repeat: no-repeat; width: 40px; height: 40px; display: inline-block; border-radius: 25px; border: 1px solid #000; position: relative;}
#font-form {margin: 0; border: none; padding: 0; margin-top: 15px;}
#font-form .dz-message {display:none !important;}
#fontDropdown {margin: 15px 10px 0 0;}
#fontUploadDropdown {height:34px; font-size:14px; width: 150px; border-radius: 5px;}
#fontUpload, #fontDropdown {display: inline-block;vertical-align: top;}
#fontRequire {font-size: 10px; color: #000; text-align: center; width: 175px; margin: 5px 0 0 160px;}
#fontError {color: #ad2f09; font-size: 13px; margin: 10px 0 0 160px; text-align: center; width: 175px; height: 20px;}
#sharePageBottom {display: flex; align-items: start; justify-content: flex-start; margin-top:50px;}
#sharePageContent {flex: 0 0 47%; display: flex; flex-direction: column;}
#share-page-header-dropzone {width: 305px; height: 85px;background: #c2c1bf;color: #FFF;border: dashed;border-color: #707070;position: relative;}
#sPageHeaderPreview {height:100%; width:100%; position:absolute; top:0; left:0; background-size: cover; background-repeat:no-repeat; pointer-events: none; z-index:2;}
#shareCopyText {flex: 0 0 50%; display: flex; flex-direction: column; margin-left:3%;}
.shareOptions {width:125px; display: flex; flex-wrap: wrap; margin-top: 15px; position: relative;}
.shareExample {display: flex; flex-direction: column; margin-top: 15px;}
#shareFields {margin:5px 0 0 0;}
.shareInputContainers {margin: 5px 0 0px; width: 305px; display: inline-block;}
.floatInputShare {width: 125px; text-align: left; display: inline-block;}
.floatShare {width: 125px; text-align: left; display: inline-block; vertical-align: top; margin-top:6px;}
.pageShareIcon {height: 44px; margin-right: 10px; vertical-align:middle; border: 0;}
/*share page end */

/* country codes styling */
#countryCodesWrapper{
  width: 380px;
}
.countryCodesTabWrapper{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.countryCodesTab{
  background: #FF00A4 !important;
  color: #FFF !important;
  cursor: default !important;
  padding: 4px 20px;
  user-select: none;
  font-size: 14px;
}
.countryCodesToggle{
  text-decoration: underline;
  color: #FF00A4 !important;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
}
.countryCodesCountriesWrapper{
  height: 148px;
  overflow-y: scroll;
  border: 2px solid #FF00A4;
}
#countryCodesEnabled, #countryCodesAvailable{
  margin-bottom: 10px;
}
.iti__country{
  cursor: pointer;
}
.iti__country:hover{
  background-color: rgba(0, 0, 0, 0.05);
}
.iti__country__enabled{
  width: 85%;
}
.enabledCountryRow{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.enabledCountryButtonsWrapper{
  width: 35%;
  display: flex;
  align-items: center;
  margin-right: 7.5px;
  gap: 5px;
}
.enabledCountryRemoveButton, .enabledCountryFavoriteImage{
  cursor: pointer;
}
.enabledCountryRemoveButton{
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid;
  border-radius: 5px;
  box-sizing: border-box;
  font-weight: bold;
  padding-bottom: 2px;
}
.enabledCountryFavoriteImage{
  width: 22px;
  height: 22px;
}
.favoritedCountryFavoriteImage{
  filter: invert(81%) sepia(34%) saturate(4989%) hue-rotate(349deg) brightness(105%) contrast(91%);
}
#countryCodesFavoriteBreak{
  display: none;
  width: 96%;
  margin: 0 auto;
  height: 1px;
  border: 1px solid grey;
}

.ipadSkipArea {margin-bottom:20px;}
#ipadSkipDiv {display:none;}


#appColorsArea {display:none;}
#onlineFlowArea {display:none;}
#appPageTop {display: flex; justify-content: flex-start; margin-top:20px;}
#appColorsSection {flex: 0 0 50%; display: flex; flex-direction: column;}
#appFont {flex: 0 0 50%; display: flex; flex-direction: column;}
#appPageColorOption {width:45%; margin-top:19px; display: flex; justify-content: space-between; align-items: center;}
#appFontDropdown {margin-top:5px;}
#appPageColorDropdown, #fontAppDropdown {height:34px; font-size:14px; width: 150px; border-radius:5px;}
#appTxtColor, #appBtnColor, #appBtnTxtColor {display:none;}
#appBackgroundArea {margin-top:25px;}
.appbgUpload {margin-top:10px;}
#app-bg-overlay-form {display:inline-block; vertical-align:top;}
#app-bg-overlay-form .dz-message {display:none !important;}

#caricatureSection {display: flex; justify-content: flex-start; width:100%; border:1px solid #000; margin:10px 0 0 0;}
.caricatureSubLeft {width:50%; margin:0; padding:0; background:#f2f2f2; border-right:1px solid #c1c1c1; box-sizing: border-box;}
.caricatureSubRight {width:50%; margin:0; padding:0; border-left:1px solid #c1c1c1; box-sizing: border-box;}
.carSubHeaderText {font-size: 13px; font-weight:normal;}
.randomArea {margin-left:30px; }
.carCheckboxLabel {font-size:14px; padding-left:5; display:inline-block;}
.caricatureSelectHeaders {display: flex; justify-content: center; flex-direction: column; height:70px; padding-left:3%; border-bottom:2px solid #c1c1c1;}
.caricatureSelectSubHeader {display: flex; justify-content: flex-start; align-items:center; height:70px; width:100%; border-bottom:2px solid #c1c1c1;}
.carChoiceBlock {width:100%; padding: 15px; box-sizing: border-box;}
.carSearchBar {width:100%; margin-bottom:20px; display: flex; align-items: center; justify-content: space-between; height: 40px; background:#FFF; border:1px solid #a9a9a9;}
#carSearchHolder {width:90%; height:100%; position:relative;}
#carSearchBtn {display: flex;align-items: center;justify-content: center;height: 100%;width: 25px;margin: 0px 10px;}
#caricatureInput {color: #363636; height: 100%; width: 98%; border:0; padding-left: 2%;font-size: 16px;outline: none;font-weight: bold;background-color: transparent;}
#searchDividerBar {display: flex;align-items: center;justify-content: center;height: 70%;width: 1px; border-right: 1px solid grey;}
#caricatureTopHeader {display: flex; align-items: flex-start;justify-content: space-between;}
.carGridRow {display: grid; grid-template-columns: 1fr 1fr;gap: 16px;}
#carGridChoices {height:575px; overflow-y:auto; overflow-x:hidden; align-content: start;}
#carChoiceHead {margin-bottom:15px; width: 438px;}
.carItem {background: #FFF; border:1px solid #bdbdbd; height:115px; width:210px; box-sizing: border-box; text-align: center; display: flex;align-items: center;justify-content: center; padding:10px 5px; position: relative; border-radius: 5px;}
.carItem::before {content: "";position: absolute;top: 0; left: 0; right: 0; bottom: 0;background-color: rgba(242, 242, 242, 0.7);z-index: 1;opacity: 0;pointer-events: none;}
.carItem.show-overlay::before {opacity: 1;}
.carHeadItem {
  color:#FFF; 
  padding: 10px 20px; 
  text-align: center;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.carHeadItem:hover {
  background-color: #ff00a4;
}

#selectAllCar {
  background-color: #ff00a4;
}

#selectAllCar:hover {
  background-color: #ff00a4;
}

#removeAllCar {
  background-color: #890e0f;
}

#removeAllCar:hover {
  background-color: #a01010;
}
.circle-image {width: 95px;height: 95px;border-radius: 50%;background-size: cover; background-position: center; background-repeat: no-repeat;overflow: hidden;}
.body-image {height: 60px; width:50%; text-align:center;}
.bodyContent {height:auto; width:100%; user-select: none; -webkit-user-drag: none;}
#carRightSub {display: flex; justify-content: flex-start; align-items:center; padding: 25px 3% 0;}
#carPageHeader {padding: 0 3%; margin-top:28px;}
#caricatureHeader {border: 1px solid #a9a9a9; color: #363636; height: 40px; width: 100%;padding-left: 2%;font-size: 16px;outline: none;font-weight: bold;background-color: #FFF; border-radius: 5px;}
.carOrientationBoxes {margin-left:15px;}
#carSelectedChoices {height: 575px; width:100%; overflow-y: auto; overflow-x: hidden; padding:10px 3%; margin-top:13px; display: grid; grid-template-columns: repeat(3, 1fr); column-gap: clamp(10px, 2vw, 18px); row-gap: 35px; align-content: start; position:relative;}
#carAllItemsRight {position:relative; height:716px;}
#carAllItemsRight::before {content: "";position: absolute;top: 0; left: 0; right: 0; bottom: 0;background-color: rgba(242, 242, 242, 0.7);z-index: 1;opacity: 0; pointer-events: none;}
#carAllItemsRight.overlay-active::before {opacity: 1;}
.gridLandscape {grid-template-columns: repeat(4, 1fr) !important;}
.carSelectedItem {height:95px; width:95px; position:relative; margin:0 auto;}
.car-x-container {width: 20px;height: 20px; position: absolute; right:0; top:0; cursor:pointer; background-image:url('../images/pink_x.svg'); background-repeat: no-repeat;}
#customCaricatureArea {font-size:13px; line-height:16px; float:left; margin-top:24px; font-weight:normal;}

.feedSection {display: flex; justify-content: flex-start; width:100%;}
#feedPageColorOption {width:45%; margin-top:10px; display: flex; justify-content: space-between; align-items: center;}
#feedColorsSection {flex: 0 0 34%; display: flex; flex-direction: column;}
#feedPageColorDropdown {height:34px; font-size:14px; width: 150px; border-radius: 5px;}
#feedColorBox {margin-left:20px;}
#feedGridBgColor, #feedDrawColor {display:none;}
#feedBackgroundArea {flex: 0 0 100%;}
#sysReq {margin-bottom:20px; width:155px;}
#sysReq a {text-decoration: none; font-weight: bold; color: #FF00A4;}
#feedHeaderArea {flex: 0 0 75%;}
#feedPreview {margin-top:50px;}
.feedbgUpload {margin-top:10px;}
#feed-bg-form {display:inline-block; vertical-align:top;}
#feed-bg-form .dz-message {display:none !important;}
#feed-header-form {display:inline-block; vertical-align:top;}
#feed-header-form .dz-message {display:none !important;}
#gallery-header-form {display:inline-block; vertical-align:top;}
#gallery-header-form .dz-message {display:none !important;}
#feedActivateSection, #caricatureActivateSection {margin: 0 0 0 auto; }
.paymentActivateSection {width: 200px;margin-left: auto;margin-bottom: 28px;}
.paymentActivateSection #paymentCaptureToggleBtn {width: 100%;min-width: 200px;box-sizing: border-box;padding: 0 30px;height: 40px;line-height: 40px;font-size: 13px;font-weight: 700;border-radius: 5px;}
.paymentActivateSection #paymentCaptureStateText {font-size: 12px;line-height: 1.4;margin-top: 6px;text-align: center;}
.feedInfoIcon {display:inline-flex; position:relative; height:15px; width:15px; margin-left:5px;}
.feedTitle {display:flex; justify-content: flex-start; align-items: center;}
.feedUl {
  display: block;
  list-style-type: disc;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 0;
  margin-right: 0;
  padding-left: 30px;
}
.feedUl li {
  display: list-item;
  text-align: left;
}
#feedTooltip {display: none;
  position: absolute;
    bottom: -420px;
    right: -652px;
    width: 650px;
    padding: 10px;
    background: #FFF;
    border: 1px solid #ff00a4;
    color: black;
    font-size: 14px;
    z-index: 1000;
    text-align: left;
    font-weight:normal;
}

/* Cloud Connection Section */
.cloud-connection-container {
  border: 1px solid black;
  padding: 20px;
  margin: 20px 0;
}

.cloud-connection-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.cloud-connection-left {
  flex: 1;
  margin-right: 20px;
}

.cloud-connection-description {
  margin-bottom: 10px;
  font-weight: normal;
  font-size: 14px;
  width: 80%;
}

.cloud-connection-right {
  text-align: right;
}

.cloud-activate-button {
  background-color: #ff00a4;
  color: white;
  width: 200px;
  margin-bottom: 5px;
}

.cloud-connection-status {
  font-size: 12px;
  text-align: center;
  font-weight: normal;
}

.cloud-connect-id {
  font-weight: bold;
  font-size: 14px;
  margin: 15px 0;
}

.sideTab.active {
    background-color: #FF00A4 !important;
    color: #ffffff !important;
    border-color: #FF00A4 !important;
    transform: translateY(-1px);
}

/* Remove the conflicting default selection CSS */
/* .sideTab[data-target="#dataBar"] {
    background-color: #FF00A4 !important;
    color: #ffffff !important;
    border-color: #FF00A4 !important;
    box-shadow: 0 4px 16px rgba(251, 59, 172, 0.3);
    transform: translateY(-1px);
} */

/* Side Tab Navigation Styles */
#sideTabNavigation {
  position: fixed;
  left: 50%;
  transform: translate(-50%, -50%); /* Center both horizontally and vertically */
  z-index: 9999;
  width: 210px;
  margin-left: -750px; /* Center in left column */
  transition: top 0.3s ease-out; /* Smooth transition for iframe repositioning */
}

.sideTabContainer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 12px;
}

.sideTab {
  padding: 14px 18px;
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #495057;
  text-align: left;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  min-height: 20px;
}

.sideTab::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
}

.sideTab:hover {
  background-color: #e8e8e8;
  border-color: #FF00A4;
}

.sideTab.active {
  background-color: #FF00A4 !important;
  color: #ffffff !important;
  border-color: #FF00A4 !important;
}

.sideTab.active:hover {
  background-color: #FF00A4 !important;
  color: #ffffff !important;
}

.tabIcon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  vertical-align: middle;
}

.tabText {
  display: inline;
  font-family: 'robotoregular', Helvetica, sans-serif;
  position: relative;
  z-index: 1;
  white-space: nowrap;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  margin-left:5px;
}

/* Responsive adjustments */
@media (max-width: 1700px) {
  #sideTabNavigation {
    margin-left: -660px;
    width: 195px;
  }
  
  .sideTab {
    padding: 12px 12px;
    font-size: 12px;
    gap: 10px;
  }
  
  .tabIcon {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 1500px) {
  #sideTabNavigation {
    display: none; /* Hide when screen is too narrow */
  }
}

/* Artist Mode Visibility Styles */
[data-artist-mode] {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

[data-artist-mode]:not([style*="display: none"]) {
  opacity: 1;
  visibility: visible;
}

[data-artist-mode][style*="display: none"] {
  opacity: 0;
  visibility: hidden;
}

/* Side tab visibility */
.sideTab[style*="display: none"] {
  opacity: 0;
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.sideTab:not([style*="display: none"]) {
  opacity: 1;
  visibility: visible;
}

/* Hide caricature section in master artist mode */
[data-artist-mode="master"] #caricatureWrapper,
[data-artist-mode="master"] .sideTab[data-section="caricature"],
[data-artist-mode="master"] [id*="caricature"] {
  display: none !important;
}

.cloud-connection-container {
  border: 1px solid black;
  padding: 20px;
  margin: 20px 0;
}

.cloud-connection-main {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.cloud-connection-left {
  flex: 1;
  margin-right: 20px;
}

.cloud-connection-description {
  margin-bottom: 10px;
  font-weight: normal;
  font-size: 14px;
  width: 80%;
}

.cloud-connection-right {
  text-align: right;
}

.cloud-activate-button {
  background-color: #ff00a4;
  color: white;
  width: 200px;
  margin-bottom: 5px;
}

.cloud-connection-status {
  font-size: 12px;
  text-align: center;
  font-weight: normal;
}

.cloud-connect-id {
  font-weight: bold;
  font-size: 14px;
  margin: 15px 0;
}

/* Artist Mode Indicator */
#artistModeIndicator {
  text-align: center;
  margin-top: 15px;
  font-weight: bold;
  color: black;
  font-size: 16px;
  font-family: 'robotoregular', Helvetica, sans-serif;
  border-radius: 5px;
  width: 100%;
}


#resourceText {
  font-weight: bolder;
  font-size: 15px;
  border: 1px solid #ff00a4;
  color: #ff00a4;
  background-color: white;
  height:35px;
  line-height:35px;
  padding-right: 45px;
  cursor: pointer;
  position: relative;
  border-radius:5px;
  box-sizing: border-box;
  min-width: 210px;
}

#resourceContainer {
  position: relative;
  height:35px;
  box-sizing: border-box;
  text-align:center;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: white;
  min-width: 210px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 9999;
  border: 1px solid #ff00a4;
  top: 100%;
  right: 0;
  min-height: 75px;
}

.dropdown-content div {
  color: black;
  padding: 15px 16px;
  text-decoration: none;
  display: block;
  font-weight: bold;
  cursor:pointer;
  font-size:15px;
}

#resourceText::after {
  content: '';
  position: absolute;
  right: 23px;
  top: 50%;
  width: 16px;
  height: 8px;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 8%22%3E%3Cpolygon points=%220,0 16,0 8,8%22 fill=%22%23ff00a4%22/%3E%3C/svg%3E');
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

#resourceText.open::after {
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 8%22%3E%3Cpolygon points=%220,8 16,8 8,0%22 fill=%22%23ff00a4%22/%3E%3C/svg%3E');
}

.whiteBackground{
  background-color: white;
}

.grayBackground{
  background-color: rgb(245, 245, 245);
}

.whiteBackground:hover, .grayBackground:hover{
  background-color: rgb(220, 220, 220);
}