theme 216 css part

/*                          maziekeen's theme 216 - UPDATE TAB CSS PART
                      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

    - UPDATE TITLE
        find the class name:         .update-option, .update-title label a {
        add styles you want there

    - EFFECT ON THE TITLE ONCE YOU CLICKED
        find the class name:         .update-toggle:checked + .update-title, .update-toggle:checked + .update-title a {
        add styles you want there

    - BACKGROUND COLOR OF THE CONTENT
        find the class name:         .update-toggle:checked + .update-title + .update-content {
        change the color in:         background:#ffffff;
        *to change the text color inside, just add a style: color:#111111;

    - BORDERS
        find the classes names:      .update-toggle:checked + .update-title + .update-content {
        AND                          .update-button {
        change the color in:         outline:1px solid #ededed;

    - BOX SHADOW
        find the classes names:      .update-toggle:checked + .update-title + .update-content {
        AND                          .update-button {



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


.update-container {
    max-width:150px;
    top:65px;
    left:15px;
    position:fixed;
    margin: 5px auto 0px;
    z-index:11;
    background-color:transparent;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.update-toggle {
    display: none;
}

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


/*   title of the option   */
.update-option, .update-title label a {
    display: inline-block;
    text-align: left;
    padding-left:10px;
}


.update-title {
    cursor:pointer;
}


/*   content that is hidden (before you click)   */
.update-content {
    max-height: 0;
    outline:0px solid transparent;
    overflow: hidden;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.update-title, .update-content {
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/*   lists (ul li) styles inside the content   */
.update-content li {
    margin-bottom:5px;
}


/*   buttons   */
.update-button {
    display:block;
    border:none;
    padding: 7px 10px;
    margin:7px 0px 10px;
    text-align:center;
    font-weight:bold;
    background-color:#ffffff;
    outline: 1px solid #ededed;
    -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}



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

/*   content that appears once you clicked   */
.update-toggle:checked + .update-title + .update-content {
    outline:1px solid  #ededed;
    background-color:#ffffff;
    text-align:left;
    max-height: 100vh;
    width:240px; /*   size of the content, adjust as you wish   */
    padding:10px;
    margin: 5px 0px 0px;
    z-index:1;
    -webkit-box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

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