theme 214 css part (light)

/*                          maziekeen's theme 214 - UPDATE TAB CSS PART (light)
                      accordion (update toggle) by codepen.io/vinsongrant/pen/qbGKed

                            GUIDE HOW TO CUSTOMIZE


                          ----------------------------

                                ALL THE COLORS


    - GENERAL COLOR
        body text, italic, bold, links: will match your color theme

    - THE 'PLUS' ICON before the title
        find the class name:         .update-title:after, .update-title:before {
        change the color in:         background-color: #ab99c4

    - TITLE USED INSIDE THE CONTENT
        find the class name:         .update-inside-title {
        change the color in:         color:#6272a4

    - EFFECT ON THE TITLE ONCE YOU CLICKED
        find the class name:         .update-toggle:checked + .update-title, .update-toggle:checked + .update-title a {
        change the color in:         color:#ab99c4

    - BACKGROUND COLOR OF THE CONTENT
        find the class name:         .update-toggle:checked + .update-title + .update-content {
        change the color in:         background:#fcfcfc (to change the text color inside, just add color:#b6bad1;)

    - BORDERS
        find the class name:         .update-toggle:checked + .update-title + .update-content {
        change the color in:         border:1px solid #ededed
        you also need to change the color to the same in .update-content {



                          maziekeen's theme 214 - UPDATE TAB CSS PART                         */


.update-container {
    max-width:240px; /*   same width of .update-toggle:checked + .update-title + .update-content  */
    top:65px;
    left:25px;
    position:fixed;
    margin: 5px auto 0px;
    box-sizing:border-box;
    z-index:11;
    background-color:transparent;
}

.update-toggle {
    display: none;
}

.update-option {  /*   this is each option you add   */
    position: relative;
    margin-bottom:5px;
}


.update-option, .update-title label a {
    display: inline-block;
    text-align: left;
    padding-left:15px;
}


.update-title {  /*   title of the option   */
    cursor:pointer;
    font-style:italic;
}

.update-title,
.content {
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: all 0.2s;
}

.update-title:after, .update-title:before {  /*   the plus "icon"   */
    content: "";
    position: absolute;
    left: 5px;
    top:4.2px;
    width: 2px;
    height: 8px;
    background-color:#ab99c4;
    transition: all 0.2s;
    cursor:auto;
}

.update-title:after {
    transform: rotate(90deg);
}

.update-inside-title {  /*   title used inside the content   */
    font-weight: bold;
    color:#6272a4;
    margin:5px 0px;
}

.update-inside-title a {
    font-weight: bold;
}

.update-content {  /*   content that appears when you click   */
    max-height: 0;
    padding:0px 5px;
    border:0px solid #ededed; /*   change the color to the same on .update-toggle:checked + .update-title + .update-content  */
    overflow: hidden;
    transition:all 0.3s;
}

.update-content li {
    line-height:13px;
    margin-bottom:4px;
}

.update-toggle:checked + .update-title, .update-toggle:checked + .update-title a {  /*   effect on title once you clicked   */
    font-weight:bold;
    color:#ab99c4;
}

.update-toggle:checked + .update-title + .update-content {  /*   effect on the content once you clicked   */
    border:1px solid #ededed;
    background:#fcfcfc;
    text-align:left;
    max-height: 100vh;
    width:240px; /*   size of the content, adjust as you wish but also change the max-width in .update-container   */
    padding:0px 5px;
    margin: 5px 0px 0px;
    z-index:1;
    transition:all 0.3s;
}

.update-toggle:checked + .update-title:before {
    transform: rotate(90deg) !important;
}
/*                          maziekeen's theme 214 - UPDATE TAB CSS PART (light)                          */