.cv-page {
    position: relative;
    transition: width 0.6s ease, height 0.6s ease, max-height 0.6s ease, max-width 0.6s ease !important;
    border: 1px solid lightgray;
    border-radius: 15px;
    width: 816px;
    max-width: 816px;
    min-height: 1056px;
    max-height: 1056px;
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0 auto;
}



input.cv-text,
textarea.cv-text {
    border: none;
    border-radius: 0;
    word-wrap: break-word;
    background: none;
}

input:focus,
textarea:focus {
    outline: none !important;
}

.cv-text {
    display: block;
    width: 100%;
    margin: 0;
    font-family: 'Georgia', serif !important;
    word-wrap: break-word;
    overflow: hidden;
    padding: 0;
}

.form-control {
    border: none;
    border-radius: 0;
}

.cv-dot {
    width: 12px;
    height: 12px;
    display: inline-block;
    background-color: lightgray;
}

.cv-dot-1 {
    border-radius: 50% 0 0 50%;
}

.cv-dot-3 {
    border-radius: 0 50% 50% 0;
}

textarea {
    display: block;
    resize: none;
    overflow: hidden;
}

.cv-add-component {
    font-size: medium;
    top: 0;
    right: 10px;
    height: 20px;
    width: 20px;
    line-height: 1;
    padding: 0;
    opacity: 0.85;
    border-radius: 5px;
}

.cv-del-component {
    font-size: medium;
    top: 0;
    right: -14px;
    height: 20px;
    width: 20px;
    line-height: 1;
    padding: 0;
    opacity: 0.85;
    border-radius: 5px;
}

.cv-dp-border {
    border: 2px solid white;
}

.cv-topinfo {
    background-color: white !important;

}

.cv-topinfo-left {
    height: 50px;
    background: linear-gradient(7.5deg, white 50%, var(--theme-color, #33858D) 50%);
}

.cv-topinfo-right {
    height: 50px;
    background: linear-gradient(-7.5deg, white 50%, var(--theme-color, #33858D) 50%);
}


.cv-theme-color {
    color: var(--theme-color, #3498DB);
}

.cv-theme-bg {
    background-color: var(--theme-color, #3498DB);
}

.cv-theme-border {
    border-color: var(--theme-color, #3498DB) !important;
}

.cv-dp {
    border-radius: 50%;
    width: 170px;
    height: 170px;
    background-image: url('profile.png');
    background-size: 100% 100%;
    cursor: pointer;
    border: none !important;
}

.cv-dp:hover {
    filter: brightness(0.8);
}


.cv-font-larger {
    font-size: 34px;
}

.cv-font-large {
    font-size: 20px;
}

.cv-font-medium {
    font-size: 15px;
}

.cv-font-small {
    font-size: 13px;
}

.academic-bg-top {
    background-color: var(--theme-color, #3498DB);
    width: 130%;
}

.academic-border {
    border-color: var(--theme-color, #3498DB) !important;
}

.academic-hr {
    background-color: var(--theme-color, #3498DB) !important;
}

.academic-color {
    color: var(--theme-color, #3498DB);
}

.academic-bg {
    background-color: rgba(0, 0, 0, 0.05) !important;
}


/* Skill Pill Container - Creates the pill shape and layout */
.skill-pill-container {
    display: inline-grid;
    vertical-align: middle;
    align-items: center;
    justify-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    margin: 2px;
}



/* format the input to overlay the pseudo-element exactly */
.academic-skill {
    grid-area: 1 / 1;
    width: 100%;
    min-width: 0;
    border: none;
    background: transparent;
    /* Text color inside pill */
    font-size: 13px;
    font-family: 'Georgia', serif !important;
    text-align: center;
    padding: 0;
    margin: 0;
    outline: none;
    height: 100% !important;
    /* Override JS autoGrow height */
}