[v-cloak] {
  display: none;
}

.swal-overlay{
	z-index: 99999999;
}

.btn_icon svg{
	margin-left: 0.5em;
}
.buttons-multiple {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-section {
	margin-bottom: 3rem;
}
	.page-section__header {
	    font-size: 1.4em;
	}
	.page-section__intro{
		font-family: Manrope, Open Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
	    line-height: 1.5;
	    margin: 1em 0 1.5em;
	}

.support-help .buttons-multiple{
	margin-top: 1rem;
	justify-content: space-between;
}

.support-form__wrap{
	justify-items: end;
}

select.input{
	cursor: pointer;
	appearance: base-select;
	align-items: center;
    justify-content: space-between;
	font-size: 14px;
    padding: 1.2rem 1rem;
}
	select.input::picker-icon{
		content: "";
	    width: 15px;
	    height: 15px;
	    flex-shrink: 0;
	    flex-grow: 0;
	    background-repeat: no-repeat;
	    background-size: contain;
	    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23666' class='size-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
	    transition: transform 0.2s ease;
	}
	select.input::picker(select){
		appearance: base-select;
		border-radius: 12px;
		padding: 0.5rem 0;
		opacity: 0;
		transition: all 0.2s ease;
		transform: translateY(1rem);
	}
		select.input:open::picker-icon {
	    	transform: rotate(180deg);
	    }
	    select.input:open::picker(select){
	    	transform: translateY(0rem);
	    	opacity: 1;
	    }

.seq-list{
	position: relative;
}
.seq-wrapper {
    margin-bottom: 2.5rem;
}
.seq {
    display: grid;
    grid-template-columns: 2fr 2fr 5fr 1fr;
    gap: 1rem;
}
	.seq-name {
	    grid-column: 1 / 3;
	}
	.seq-nbp {
	    grid-column: 1 / 2;
	    grid-row: 2 / 3;
	}
	.seq-pur {
	    grid-column: 2 / 3;
	    grid-row: 2 / 3;
	}
	.seq-seq {
	    grid-column: 3 / 4;
	    grid-row: 1 / 3;
	}
	.seq-controls {
	    display: flex;
	    gap: 2rem;
	    margin: 1rem 0;
	    flex-wrap: wrap;
	}
		.seq-button {
		    display: flex;
		    align-items: center;
		    gap: 0.5em;
		    font-size: 0.75em;
		    cursor: pointer;
		    border-radius: 8px;
    		padding-right: 0.5em;
		    transition: all 0.2s ease;
		    color: #333;
		}
			.seq-button svg {
			    background-color: #eff5f5;
			    border-radius: 8px;
			    width: 3em;
			    height: 3em;
			    padding: 8px;
			    transition: background-color 0.2s ease;
			}
		.seq-add{
			font-size: 0.9em;
		}
		.seq-button:hover{
			background: #eff5f5;
		}
			.seq-button:hover svg{
				background-color: #cff5ce;
			}

.list-move,
.list-enter-active,
.list-leave-active {
  transition: all 0.2s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateY(1rem);
}
.list-leave-active{
	position:absolute;
}

.catalog-item__description--block table{
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
}
.catalog-item__description--block table tr:nth-child(2n+1){
    background-color: #eff5f5;
}
.catalog-item__description--block table tr:not(:first-child){
    font-size: 0.8em;
}
.catalog-item__description--block table td{
    padding: 0.8rem;
}

.form__footer {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    background: #f8fff8;
    padding: 2rem;
    border-radius: 14px;
    margin-top: 2rem;
}
	.form__footer--fields, .form__footer--controls{
	    display: flex;
	    gap: 2rem;
	}

#import-sequences{
	min-width: 25vw;
}
	.import-sequences__form {
	    min-height: 30vh;
	    display: flex;
	    gap: 1rem;
	}

@media(max-width:520px){
	.seq {
	    grid-template-columns: 2fr 2fr;
	}
	.seq-seq {
	    grid-column: 1/3;
	    grid-row: 3/4;
	}
	.form__footer--fields, .form__footer--controls{
		flex-direction: column;
	}
	.support-help .buttons-multiple{
		justify-content:center;
	}
}