.full-view {
    width: 100%;
    float: left;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

#textVisible .collapsed .s1 {
    display: block;
    font-size: 12px;
}

#textVisible .s1 {
    display: none;
}

.accordion-body {
    display: flex;
}

.accordion-button::after {
    color: #ffffff;
}

.accordion-button {
    background: rgba(24, 24, 24, 0.8) !important;
    /*color: #ffffff !important;*/
}

    .accordion-button:hover {
        background-color: #da2c46 !important;
        /*color: #ffffff !important;*/
    }

.text-center {
    text-align: center;
    margin: 0px auto;
    width: 100%;
}

#widgetHead {
    color: #fff088 !important;
}

.windget-active {
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -6px 0px inset;
}
    .windget-active:hover {
        box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -6px 0px inset,0 4px 8px 0 rgb(0 0 0 / 20%) !important;

    }

.windget-1 {
    width: 19.4%;
    float: left;
    margin: 5px;
    background-color: #009efb;
    color: #ffffff;
    font-family: inherit;
    text-align: center;
}

    .windget-1:hover {
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
        cursor: pointer;
    }

.windget-2 {
    width: 19.4%;
    float: left;
    margin: 5px;
    background-color: #3fb28f;
    color: #ffffff;
    font-family: inherit;
    text-align: center;
}

    .windget-2:hover {
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
        cursor: pointer;
    }

.windget-3 {
    width: 19.4%;
    float: left;
    margin: 5px;
    background-color: #08bcc5;
    color: #ffffff;
    font-family: inherit;
    text-align: center;
}

    .windget-3:hover {
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
        cursor: pointer;
    }

.windget-4 {
    width: 19.4%;
    float: left;
    margin: 5px;
    /*background-color: #f36945;*/
    background-color: #ffa500;
    color: #ffffff;
    font-family: inherit;
    text-align: center;
}

    .windget-4:hover {
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
        cursor: pointer;
    }

.windget-5 {
    width: 18.4%;
    float: left;
    margin: 5px;
    /*background-color: #4e73df;*/
    background-color: #f36945;
    color: #ffffff;
    font-family: inherit;
    text-align: center;
}

    .windget-5:hover {
        box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%);
        cursor: pointer;
    }
/*.windget-5:focus {
        box-shadow: inset 0px 8px 0px 0px #ad584294;
        cursor: pointer;
    }
    .windget-5:focus:hover {
        box-shadow: inset 0px 8px 0px 0px #ad584294,0 4px 8px 0 rgb(0 0 0 / 20%);
        cursor: pointer;
    }*/

.margin-top-bottom-title {
    margin-top: 10px;
    margin-bottom: 2px;
}

.margin-subtitle {
    margin-top: 2px;
    margin-bottom: 10px;
}


/*===============responsive class started===================*/
@media only screen and (max-width:1739px) and (min-width:1501px) {
    .windget-4 {
        width: 18.9%;
        float: left;
        margin: 5px;
    }
}

@media only screen and (max-width:1500px) and (min-width:1436px) {
    .windget-4 {
        width: 17.9%;
        float: left;
        margin: 5px;
    }
}

@media only screen and (max-width:1437px) and (min-width:1294px) {
    .windget-1 {
        width: 19%;
        float: left;
    }

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .windget-2 {
        width: 19%;
        float: left;
    }

    .windget-3 {
        width: 19%;
        float: left;
    }

    .windget-4 {
        width: 19%;
        float: left;
    }

    .windget-5 {
        width: 19%;
        float: left;
    }
}

@media only screen and (max-width:1293px) and (min-width:1032px) {
    .windget-1 {
        width: 18%;
        float: left;
    }

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .windget-2 {
        width: 18%;
        float: left;
    }

    .windget-3 {
        width: 18%;
        float: left;
    }

    .windget-4 {
        width: 18%;
        float: left;
    }

    .windget-5 {
        width: 20%;
        float: left;
    }
}

@media only screen and (max-width:1031px) and (min-width:1001px) {
    .windget-1 {
        width: 18%;
        float: left;
    }

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .windget-2 {
        width: 18%;
        float: left;
    }

    .windget-3 {
        width: 18%;
        float: left;
    }

    .windget-4 {
        width: 18%;
        float: left;
    }

    .windget-5 {
        width: 19%;
        float: left;
    }
}

@media only screen and (max-width:1000px) and (min-width:901px) {
    .windget-1 {
        width: 49%;
        float: left;
    }

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .windget-2 {
        width: 47%;
        float: left;
    }

    .windget-3 {
        width: 49%;
        float: left;
    }

    .windget-4 {
        width: 47%;
        float: left;
    }

    .windget-5 {
        width: 97%;
        float: left;
    }
}

@media only screen and (max-width:900px) and (min-width:601px) {
    .windget-1 {
        width: 49%;
        float: left;
    }

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .windget-2 {
        width: 47%;
        float: left;
    }

    .windget-3 {
        width: 49%;
        float: left;
    }

    .windget-4 {
        width: 47%;
        float: left;
    }

    .windget-5 {
        width: 98.2%;
        float: left;
    }
}

@media only screen and (max-width:600px) and (min-width:501px) {
    .windget-1 {
        width: 47%;
        float: left;
    }

    .windget-2 {
        width: 47%;
        float: left;
    }

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .windget-3 {
        width: 47%;
        float: left;
    }

    .windget-4 {
        width: 47%;
        float: left;
    }

    .windget-5 {
        width: 96%;
        float: left;
    }
}

@media only screen and (max-width:500px) and (min-width:413px) {
    .windget-1 {
        width: 47%;
        float: left;
    }

    .windget-2 {
        width: 47%;
        float: left;
    }

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .windget-3 {
        width: 47%;
        float: left;
    }

    .windget-4 {
        width: 47%;
        float: left;
    }

    .windget-5 {
        width: 96%;
        float: left;
    }
}

@media only screen and (max-width:414px) and (min-width:374px) {
    .windget-1 {
        width: 47%;
        float: left;
    }

    .windget-2 {
        width: 47%;
        float: left;
    }

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .windget-3 {
        width: 47%;
        float: left;
    }

    .windget-4 {
        width: 47%;
        float: left;
    }

    .windget-5 {
        width: 96%;
        float: left;
    }
}

@media only screen and (max-width:375px) and (min-width:321px) {
    .windget-1 {
        width: 47%;
        float: left;
    }

    .windget-2 {
        width: 47%;
        float: left;
    }

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .windget-3 {
        width: 47%;
        float: left;
    }

    .windget-4 {
        width: 47%;
        float: left;
    }

    .windget-5 {
        width: 96%;
        float: left;
    }
}

@media only screen and (max-width:320px) and (min-width:316px) {
    .windget-1 {
        width: 47%;
        float: left;
    }

    .center-class {
        width: 99%;
        margin: 0 auto;
    }

    .windget-2 {
        width: 46%;
        float: left;
    }

    .windget-3 {
        width: 47%;
        float: left;
    }

    .windget-4 {
        width: 46%;
        float: left;
    }

    .windget-5 {
        width: 97%;
        float: left;
    }
}

@media only screen and (max-width:315px) and (min-width:280px) {
    .windget-1 {
        width: 97%;
        float: left;
    }

    .windget-2 {
        width: 97%;
        float: left;
    }

    .windget-3 {
        width: 97%;
        float: left;
    }

    .windget-4 {
        width: 97%;
        float: left;
    }

    .windget-5 {
        width: 97%;
        float: left;
    }
}