How to edit CSS separately for different calendars?

Hi! I have several calendars on my websites – (each has different shortcode – id=1, id=2 etc.).
But I want to manipulate CSS for them separately. Now I have a long custom CSS in the plugin settings “Edit Styles” – but they are only for my calendar id=1. Now I’m creating the second calendar and have encountered that problem – where I need to add CSS only for the second calendar and not let the CSS for the first calendar affect the CSS for the second calendar
This is how my “Edit Styles” looks now and I want to make it work only for my first calendar and not for all of my calendars

/* Styles definition here */
.uh_phone .l{display:none}

#fbuilder, #fbuilder label, 
#fbuilder span { 
font-family: Glegoo;
font-size:14px;
}

#fbuilder input[type=text], 
#fbuilder textarea, 
#fbuilder select { 
font-family: Glegoo;
font-size:14px;
}

#fbuilder .ui-datepicker { 
	font-family: Glegoo;
	font-size: 14px;
}

a {
  color: black;
}

/* Remove arrors in the fields */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number]{-moz-appearance: textfield;}

/* Smaller size of the fields */
#fbuilder .emailclass input{width:50% !important}

/* Center everything */
#fbuilder .fields{text-align:center}
#fbuilder .captcha{text-align:center}
.pbSubmit{text-align:center;float:none;width:50%;margin:auto}

#fbuilder .calendarclass{width:50%;margin:auto}
#fbuilder .cff-phone-field{width:90%;margin:auto}
#hdcaptcha_cp_appbooking_post_1{width:35%}

/* phone fields */
.uh_phone:last-of-type input{width:100% !important}

/* phone field not centered */
#fbuilder .uh_phone{display:inline-block;float:none}

/* Change the submit button to the style */
.pbSubmit{background:#fff;text-transform: uppercase;font-size: 19px;font-weight: 500;font-family: "Abhaya Libre", Sans-serif;border:1px solid black}
.pbSubmit:hover{background-color:#000;color:#fff}