.AccContainer{
    margin-top: 25px;
    margin-bottom: 50px;
}

/* HIDES THE INPUT WHICH IS NOT NEEDED TO BE DISPLAYED */
.dion input {
    display: none;
}
/* THIS IS THE MAIN SECTION WITH CLASS DION */

.dion {
    background: #FF5400;
    width: 80%;
    margin: 0 auto 1px auto;
    border: 1px solid #FF5400;
    transition: ease .26s;
    position: relative;
    max-width: 800px;
    border-bottom: 1px solid #C5C5C5;
}

.one .dion {
    border-bottom: 1px solid #68AC93;
}

.two .dion {
    background: #E5E5E5;
    border: 1px solid #E5E5E5;
}

.three .dion, .four .dion {
    background: none;
    border: 0;
}

.five .dion {
    border: 0px solid #68AC93;
    background: #2770B3;
    margin: 0 auto 0 auto;
    border-bottom: 0px solid #11589A;
}

.five.orange .dion {
    background: #E84722;
}

.five.darkgreen .dion {
    background: #305247;
}

.two.ocho .dion {
    background: #FBFBFB;
    border: 1px solid #F9F9F9;
    border: 1px solid #FF5400;
    box-shadow: inset 0 1px 0 #FFF;
}

.two.ocho.darking .dion {
    background: #FFF;
    border: 1px solid #222;
    box-shadow: inset 0 1px 0 #000;
}

.five.orange.purple .dion {
    background: #683F9E;
    margin: 0 auto 0 auto;
    border: 1px solid #683F9E;
    border-bottom: 1px solid #52278E;
}

.five.orange.purple.blue .dion {
    background: #0090B5;
    margin: 0 auto 10px auto;
    border: 3px solid #FFF;
    border-radius: 5px;
    box-shadow: 0 0 8px 0 #B7B7B7;
    transition: ease .26s;
}

.five.orange.purple.blue.safi .dion {
    border-radius: 60px;
    box-shadow: 0 0 0 0 #B7B7B7;
    border: 0px solid #FFF;
    background: none;
}

.dion:hover {
    background: #FF6600;
}

.two .dion:hover {
    background: #FFF;
}

.three .dion:hover, .four .dion:hover {
    background: none;
}

.five .dion:hover {
    background: #1D1E1A;
    border-bottom: 0px solid #1D1E1A;
}

.five.darkgreen .dion:hover {
    background: #21332D;
}

.two.ocho .dion:hover {
    background: #FF6600;
    box-shadow: inset 0 1px 0 #6C8A6D;
    color: #FFF;
}

.five.orange.purple .dion:hover {
    background: #51396F;
}

.five.orange.purple.blue .dion:hover {
    background: #0090B5;
}

.five.orange.purple.blue.safi .dion:hover {
    background: none;
}

.five.orange.purple.blue .dion label:hover, .five.orange.purple.blue .dion input:checked + label {
    color: #FFF;
    background: #006C88;
    border-radius: 2px;
    border-bottom: 0px solid;
}

.five.orange.purple.blue.safi .dion label:hover, .five.orange.purple.blue.safi .dion input:checked + label {
    border-radius: 60px;
    background: #FF5400;
}

.five.orange.purple.blue.safi.white .dion label:hover, .five.orange.purple.blue.safi.white .dion input:checked + label {
    background: #F6F6F6;
    border: 3px solid #FF5400;
}

.maindion .dion:first-child {
    border-radius: 3px 3px 0 0;
}

.five .dion:first-child {
    border-radius: 5px 5px 0 0;
}

.two.ocho .dion:first-child {
    border-radius: 6px 6px 0 0;
}

.two.ocho.darking .dion:first-child {
    border-radius: 0;
}

.two.ocho .dion:first-child label:hover, .two.ocho .dion:first-child input:checked + label {
    border-radius: 5px 5px 0 0;
}

.two.ocho.darking .dion:first-child label:hover, .two.ocho.darking .dion:first-child input:checked + label {
    border-radius: 0;
}

.maindion .dion:last-child {
    border-radius: 0 0 3px 3px;
}

.five .dion:last-child {
    border-radius: 0 0 5px 5px;
    border-bottom: 0px solid;
}

.two.ocho .dion:last-child {
    border-radius: 0 0 6px 6px;
}

.two.ocho.darking .dion:last-child {
    border-radius: 0;
}

.two.ocho .dion:last-child label:hover, .two.ocho .dion:last-child input:checked + label + .content {
    border-radius: 0 0 4px 4px;
}

.two.ocho.darking .dion:last-child label:hover, .two.ocho.darking .dion:last-child input:checked + label + .content {
    border-radius: 0;
}

.two.ocho .dion:last-child input:checked + label {
    border-radius: 0 0 0 0;
    color: #fff;
}

.five .dion:first-child input:checked + label {
    border-radius: 5px 5px 0 0;
}

.one .dion:last-child input:checked + label + .content {
    border-radius: 0 0 3px 3px;
}
/* THIS IS THE LABEL WHERE QUESTION IS DISPLAYED */

.dion label {
    font-size: 16px;
    color: #FFF;
    padding: 12px 24px 12px 10px;
    display: block;
    cursor: pointer;
    position: relative;
    z-index: 10;
    transition: ease .26s;
}

.two .dion label {
    color: #616161;
    border-bottom: 1px solid #C5C5C5;
}

.three .dion label {
    padding: 12px 24px 12px 20px;
    z-index: 10;
    border-radius: 35px;
    background: #4D5159;
    transition: ease .26s;
}

.three.red .dion label {
    background: #ED5565;
}

.three.green .dion label {
    background: #03A678;
}

.three.white .dion label {
    background: #FFF;
    box-shadow: 0 0 10px 0px #afafaf;
    margin: 0 0 10px 0;
    border: 1px solid #CCC;
    color: #515151;
}

.three.blue .dion label {
    background: #4A89DC;
}

.four .dion label {
    border-bottom: 2px solid #1f2426;
    background: #3B4549;
    border-radius: 4px;
}

.two.ocho .dion label {
    color: #616161;
    border-bottom: 0px solid #C5C5C5;
    transition: ease .0s;
}

.two.ocho.darking .dion label {
    color: #FFF;
    background: #3D3D3D;
    border-bottom: 0px solid #C5C5C5;
    transition: ease .0s;
}

.two.ocho.darking.green .dion label {
    background: #144D78;
}

.five.orange.purple.blue.safi .dion label {
    box-shadow: 0 0 8px 0 #B7B7B7;
    border: 3px solid #FFF;
    border-radius: 60px;
    background: #212528;
    transition: ease .26s;
}

.five.orange.purple.blue.safi.white .dion label {
    box-shadow: 0 0 5px 0 #B7B7B7;
    border: 3px solid #FFF;
    border-radius: 60px;
    background: #F6F6F6;
    color: #515151;
    font-size: 16px !important;
}

.five.orange.purple.blue.safi.white .dion label {
    transition: .35s ease;
}

.two.ocho .dion label:hover, .two.ocho .dion input:checked + label {
    background: #FF5400;
    box-shadow: inset 0 1px 0 #FF7800;
    color: #FFF;
}

.two.ocho.darking .dion label:hover, .two.ocho.darking .dion input:checked + label {
    background: #222;
    box-shadow: inset 0 1px 0 #FF7800;
    color: #FFF;
}

.two.ocho.darking.green .dion label:hover, .two.ocho.darking.green .dion input:checked + label {
    background: #0D324D;
    box-shadow: inset 0 1px 0 #0D324D;
    color: #FFF;
}

.three .dion label:hover {
    background: #322D42;
}

.three.red .dion label:hover {
    background: #DA4453;
}

.three.green .dion label:hover {
    background: #049372;
}

.three.white .dion label:hover {
    color: #FFF;
}

.three.blue .dion label:hover {
    background: #2970cc;
}

.three .dion input:checked + label {
    background: #322D42;
}

.three.white .dion input:checked + label {
    color: #FFF;
}

.four .dion label:hover {
    background: #1f2426;
}

.five.orange.purple .dion label:hover, .five.orange.purple .dion input:checked + label {
    color: #FFF;
    background: #51396F;
}

.five.orange.purple .dion:first-child label:hover, .five.orange.purple .dion:first-child input:checked + label {
    border-radius: 3px 3px 0 0;
}

.five.orange.purple.blue .dion:first-child label:hover, .five.orange.purple.blue .dion:first-child input:checked + label {
    border-radius: 2px;
}

.five.orange.purple.blue.safi .dion:first-child label:hover, .five.orange.purple.blue.safi .dion:first-child input:checked + label {
    border-radius: 60px;
}

.five.orange.purple.blue.safi.white .dion:first-child label:hover, .five.orange.purple.blue.safi.white .dion:first-child input:checked + label {
    border-radius: 60px;
    border: 3px solid #FF5400;
}

.dion input:checked + label {
    background: #418A6F;
}

.two .dion input:checked + label {
    background: #FFF;
}

.four .dion input:checked + label {
    background: #fff;
}

.five .dion input:checked + label {
    background: #1D1E1A;
}
/* THESE ARE THE FONT AWESOME ICONS SHOWING TO THE LEFT OF EACH QUESTION */

.dion label::after {
    font-family: "Font Awesome 5 Free";
    content: '\f067';
    font-size: 15px;
    font-weight: bold;
    position: absolute;
    left: 2.5%;
    top: 34%;
}

.two .dion label::after {
    content: '\f31e';
}

.three .dion label::after {
    content: '\f054';
}

.four .dion label::after {
    content: '\f0e0';
}

.five .dion label::after {
    content: '\f07b';
}

.five.darkgreen .dion label::after {
    content: '\f13a';
}

.two.ocho .dion label::after {
    content: '\f054';
    transform: rotate(0deg);
    transition: .35s ease;
}

.two.ocho.darking .dion label::after {
    content: '\f303';
    transform: rotate(0deg);
    transition: .35s ease;
}

.two.ocho.darking.green .dion label::after {
    content: '\f6a9';
    transform: rotate(0deg);
    transition: .35s ease;
}

.two.ocho .dion input:checked + label::after {
    transform: rotate(90deg);
    content: '\f054';
}

.two.ocho.darking .dion input:checked + label::after {
    transform: rotate(90deg);
    content: '\f303';
}

.two.ocho.darking.green .dion input:checked + label::after {
    content: '\f028';
    transform: rotate(0deg);
}

.dion input:checked + label::after {
    font-family: "Font Awesome 5 Free";
    content: '\f068';
    font-size: 15px;
    font-weight: bold;
    position: absolute;
    left: 2.5%;
    top: 34%;
}

.two .dion input:checked + label::after {
    content: '\f78c';
}

.three .dion input:checked + label::after {
    content: '\f078';
}

.four .dion input:checked + label::after {
    content: '\f658';
}

.five .dion input:checked + label::after {
    content: '\f07c';
}

.five.darkgreen .dion input:checked + label::after {
    content: '\f057';
}

.five.orange.purple .dion label::after {
    content: '\f00d';
    transform: rotate(45deg);
    transition: .35s ease;
}

.five.orange.purple.safi .dion label::after {
    content: '\f077';
    transform: rotate(0deg);
    transition: .35s ease;
}

.five.orange.purple.safi.white .dion label::after {
    content: '\f204';
    transform: rotate(0deg);
    transition: .35s ease;
}

.five.orange.purple .dion input:checked + label::after {
    transform: rotate(270deg);
}

.five.orange.purple.safi .dion input:checked + label::after {
    transform: rotate(180deg);
}

.five.orange.purple.safi.white .dion input:checked + label::after {
    transform: rotate(0deg);
    content: '\f205';
}
/* THIS IS THE ACTUAL CONTENT WHICH IS THE ANSWER */

.dion label + .content {
    max-height: 0;
    font-size: 0;
    transition: ease .26s;
    position: absolute;
    width: 100%;
    max-width: 800px;
    padding: 5px 0 5px 0;
    opacity: 0;
}
    /* THIS CREATES PADDING INSIDE THE CONTENT AND IT CENTERS THE CONTENT */

    .dion label + .content .innercontent {
        width: 96%;
        margin: 0 auto;
    }
/* THIS SHOWS THE CONTENT WHEN USER CLICKS ON QUESTIONS */

.dion input:checked + label + .content {
    font-size: 14px;
    max-height: 999em;
    text-align: left;
    line-height: 22px;
    background: #FFF;
    color: #1D1D1D;
    position: relative;
    opacity: 1;
}

.blog .innertopcontent .dion label + .content p {
    font-size: 14px;
}

.two .dion input:checked + label + .content {
    color: #616161;
    box-shadow: 2px 2px 20px rgba(0,0,0,.2);
}

.three .dion input:checked + label + .content {
    background: #322D42;
    color: #FFF;
    border-radius: 22px;
    margin: 1px 0 0 0;
}

.three.white .dion input:checked + label + .content {
    margin: 1px 0 16px 0;
}

.four .dion input:checked + label + .content {
    box-shadow: 2px 2px 20px rgba(0,0,0,.2);
    transform: scale(1.045,1.045);
    margin: 12px 0 14px 0;
    z-index: 15;
    border-radius: 6px;
    border: 1px solid #b9b9b9;
}

.five .dion input:checked + label + .content {
    background: #262721;
    color: #FFF;
}

.five.darkgreen .dion input:checked + label + .content {
    transform: scale(1.03,1.03);
    z-index: 15;
    background: #219E81;
}

.five .dion:last-child input:checked + label + .content {
    border-radius: 0 0 5px 5px;
}

.two.ocho .dion input:checked + label + .content {
    background: #f3f3f3;
    color: #494949;
}

.two.ocho.darking .dion input:checked + label + .content {
    background: #FFF;
    color: #222;
}

.two.ocho.darking.green .dion input:checked + label + .content {
    background: #63CCE2;
    color: #124B76;
}

.five.orange.purple.blue .dion input:checked + label + .content {
    background: #FFF;
    color: #515151;
}

.five.orange.purple.blue.safi .dion input:checked + label + .content {
    background: #074A56;
    color: #FFF;
    box-shadow: 0 0 8px 0 #B7B7B7;
    z-index: 15;
    margin: 8px auto 14px auto;
    border-radius: 22px;
    border: 3px solid #FFF;
    width: 96%;
}

.five.orange.purple.blue.safi.white .dion input:checked + label + .content {
    text-align: justify;
    text-indent: 10px;
    background: #F6F6F6;
    color: #333333;
    box-shadow: 0 0 5px 0 #B7B7B7;
    font-size: 16px;
}

    .five.orange.purple.blue.safi.white .dion input:checked + label + .content .innercontent p{
        text-align: justify-all;
        line-height: 35px;
        font-size: 14px;
    }

    .AccLabel {
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 0;
        font-size: 14px !important;
    }