.aia-option-tile {

    padding: 4px 4px;

    border: solid 1px #000;

    border-radius: 5px;

    cursor: pointer;

    font-weight: 600;

    box-sizing: border-box;

    padding: 4px 6px 4px 6px;

    overflow: hidden;

    text-overflow: ellipsis;

    /*display: flex;*/

    border-radius: 16px;

    height: 24px;

    align-items: center;

    white-space: nowrap;

    margin: 4px 4px 4px 4px;

    line-height: initial;



}







img.aia-logo {

    max-width: 85px !important;

    height: auto;

}



#software-toolkit thead * {

    /*color: #000;*/

}



#software-toolkit thead {

    background: #fff;

}



#software-toolkit {

    padding: 2em;

    overflow: scroll;

    /*max-width: 100%;*/

    max-width: 100vw !important;

}



#software-toolkit td *, #software-toolkit td {

    font-size: 11px;

}



#software-toolkit th {

    font-size: 12px;

    white-space: nowrap;

}



#software-toolkit_filter label {

    max-width: 500px;

    margin: 0;

}



#software-toolkit_filter {

    display: flex;

    justify-content: center;

    align-items: center;

    margin: 20px 0;

}



#software-toolkit_filter input {

    width: 50%;

    font-size: 20px;

}



.page-item a {

    min-width: 90px;

}



.aia-column-description {



    /*min-width: 300px;*/

    /*max-width: 500px;*/

}



#software-toolkit_wrapper {

    padding: 0 1em;

}







#software-toolkit .filters input {

    padding: 2px;

    font-size: 12px !important;

    /*display: none;*/

}









#software-toolkit .filters .aia-column-description input, #software-toolkit .filters .aia-column-name input, #software-toolkit .filters .aia-column-cat input, #software-toolkit .filters .aia-column-lisense input, #software-toolkit .filters .aia-column-os input, #software-toolkit .filters .aia-column-func input {

    display: initial;

}



#software-toolkit .filters .deleteicon {

    /*display: none;*/

    visibility: hidden;

    display: inline-flex;

    display: inline-flex;

    position: relative;

    display: inline-flex;

    align-items: center;

    left: -10px;

}



#software-toolkit .filters .aia-column-description .deleteicon, #software-toolkit .filters .aia-column-name .deleteicon, #software-toolkit .filters .aia-column-cat .deleteicon, #software-toolkit .filters .aia-column-lisense .deleteicon, #software-toolkit .filters .aia-column-os .deleteicon, #software-toolkit .filters .aia-column-size .deleteicon {

visibility: visible;

    display: inline-flex;

    position: relative;

    display: inline-flex;

    align-items: center;

    left: -10px;

}



#reset-columns {

    float: right;

    font-size: 12px;

}



span.deleteicon {



}

span.deleteicon span {

    position: absolute;

    display: block;

    right: 3px;

    width: 15px;

    height: 15px;

    border-radius: 50%;

    color: #fff;

    background-color: #ccc;

    font: 13px monospace;

    text-align: center;

    line-height: 1em;

    cursor: pointer;

}

span.deleteicon input {

    padding-right: 18px;

    box-sizing: border-box;

    max-width: 100px;

}



.aia-colored {

    color: #fff;

}



.aia-drag-icon {

    /*float: right;*/

    margin-right: 5px;

    color: #f6f0f0;

}



thead .fa-arrows-up-down-left-right {

    color: #eeeeee;



}



/*tbody td {*/

/*    !*display: flex;*!*/

/*    !*flex-wrap: wrap;*!*/

/*    !*flex-direction: row;*!*/



/*}*/



/*#software-toolkit {*/

/*    table-layout: relative;*/

/*    width: 100% !important;*/

/*    height: 100% !important;*/

/*    overflow: scroll;*/



/*}*/



#software-toolkit td,

#software-toolkit th {



}



.cost-group {

    display: flex;

    padding: 10px;

}



.cost-group label {

   padding: 5px;

    font-size: 12px;

    font-weight: 600;

}



.aia-tiles {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

}



.aia-tiles span {

    /*flex: 1 0 48%; !* explanation below *!*/





}



/*

@todo update with actual

 */

#wpforms-form-67404 {

    /*border: #DB0026 solid 1px  ;*/

    box-shadow: #DB0026 0px 2px 8px 0px;

    /*box-shadow: #DB0026 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;*/

    max-width: 600px;

    padding: 2em;

    clear: both;

    margin: auto;

}



#reset-block {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    margin-right: 20px;

}



#start-fresh {

    /*font-size: 90%;*/

    /*color: blue;*/

    font-size: 12px;

}



#software-toolkit_wrapper {

    overflow-x:scroll;

    padding-bottom: 50px;

}





.tools-popup-container {

    display: none;

    position: fixed;

    top: 5%;

    left: 5%;

    width: 90vw;

    height: 90vh;

    background-color: rgba(0, 0, 0, 0.5);

    align-items: center;

    justify-content: center;

    z-index: 1000;

    display: none;

    align-items: center;







}



.tools-popup {

    background-color: white;

    border-radius: 10px;

    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);

    padding: 20px;

    position: relative;

    display: flex !important;

    justify-content: center;

    align-items: center;

    height: 90%;

    width: 90%;

    overflow-y: auto;

}



.tools-close-button {

    position: absolute;

    top: 10px;

    right: 10px;

    cursor: pointer;

}



.tools-popup-content {

    height: 90%;

    width: 90%;

    display: flex;

    justify-content: flex-start;

    align-items: center;

    flex-direction: column;

}



.hiddenpopup {

    display: none ;

}

#feedbackForm form {

    display: flex;

    flex-direction: column;

    padding-bottom: 20px;

    max-width: 600px;

}



#feedbackForm {

    margin-top: 12px;

}

.feedback-parameter {

    display: flex;

    justify-content: space-between;

    align-items: center;

    max-width: 450px;

}



.feedback-parameter .parameter-name {

    font-weight: bold;

}



.flexme {

    display: flex !important ;

}



.star-rating input[type="radio"] {

    display: none;

}



.star-rating {

    display: flex;

    flex-direction: column;



}





.rate i {

    font-size: 20px;

}



.rate i, .rate i:hover ~ i {

    color: #222;

    text-shadow: none;

    transition: color 200ms,

    text-shadow 200ms;



    transition-delay: 0;

}





.rate:hover i {

    color: #fc0;

    text-shadow: #fc0 0 0 20px;

}



.yellowish {

    color: #fc0 !important;

    text-shadow: #fc0 0 0 20px !important;

}



/* Make the effect apply one star at a

   time. Limiting the selector to when

   .rate is hovered removes the effect

   without delay when cursor leaves

   the .rate area. */

.rate:hover i:nth-child(2) {

    transition-delay: 30ms;

}



.rate:hover i:nth-child(3) {

    transition-delay: 60ms;

}



.rate:hover i:nth-child(4) {

    transition-delay: 90ms;

}



.rate:hover i:nth-child(5) {

    transition-delay: 120ms;

}



/* Miscellaneous styles. */

.rate i {

    cursor: pointer;

    font-style: normal;

}



.hidden {

    display: none;

}



.form-part {

    margin-bottom: 10px;

    display: flex;

    flex-direction: column;

}



.form-part textarea {

    margin-bottom: 12px;

}



.feedback-logo {

    margin-bottom: 12px;

    position: absolute;

    left: 0;

    top: 0;

}



.stars-rating {

    display: flex;

    align-items: center;

}



.show-rating {

    cursor: pointer;

}



.rating-score {

    white-space: nowrap;

}





.benefits {

    color: green;

}

.disappointments {

    color: red;

}

.keywords {

    margin-top: 10px;

}



.prosandcons {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap ;

}



.prosandcons>div {

   /*max-width: 50%;*/

    padding: 1em;

    width: 100%;

}



.rating-feedbac .main-feedback {

    font-weight: 400;

    width: 65%;

}

span.benefits span.disappointments {

    font-style: italic;

    padding: 5px;

    font-size: 80% !important;

    line-height: 1  !important;;

}



.recent-reviews {

    max-height: 90%;



    width: 80% ;

    margin: auto;

    clear: both;

    max-width: 920px;

    display: flex;

    flex-direction: column;

    align-items: center;

}



.review-item {

    position: relative;

    max-height: 180px; /* Adjust as needed to show around 400 characters */

    overflow: hidden;

    background: linear-gradient(to bottom, transparent, #d3d3d3); /* Blurry bottom effect */

    cursor: pointer;

    width: 100%;



    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */

    border-radius: 10px;

    border: 1px solid #ccc;

    padding: 10px;

    margin: 10px;

    display: flex;

    flex-direction: row;

    align-items: flex-start;

    justify-content: space-between;



}



.rating-feedback {

    display: flex;

    flex-direction: row;

    justify-content: space-between;

    width: 100%;

    /*align-items: center;*/



}

.feedback-item {

    display: flex;

    flex-direction: row;

    justify-content: space-between;

}



.loaded-rating {

    padding: 5px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */

    border-radius: 2px;

}



.total-score {

    width: 50px;

    height: 50px;

    color: white;

    background: blue;

    border-radius: 15px;

    text-align: center;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 25px;

    font-weight: 900;

}



#tokenfield {

    margin: 12px 0 ;

    /*pointer-events: none;*/

}



#clear-keywords {

    display: none;

    font-size: 10px;

    color: red;

}



.tokens-words  #tokenfield {

    border: none;  /* Remove the border */

    outline: none; /* Remove the outline when focused */

    padding: 5px;  /* Add padding for spacing */

    background-color: transparent; /* Make the background transparent */

}



.tokens-words .tokenfield {

    pointer-events: none;

    min-height: 66px;

}

.tokens-words .token-input {

    pointer-events: none;

    max-width: unset !important;

    width: unset !important;

}



.preset-tokens {

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    max-width: 600px;

    padding: 20px 0;

}



.tokens-words .tokenfield {

    font-size: 11px ;

    height: auto ;

}



.soft-keyword {

    background: #48c9f1;

    color: white;



    border-radius: 5px;

    padding: 2px;

    font-size: 10px;

    white-space: nowrap;

   margin: 1px;

    flex: 0 0 calc(20% - 10px);

    text-align: center;

    cursor: pointer;

}





#toggleForm {

    display: none;

}



td .stars-rating i {

    font-size: 20px !important;

}





#firstReview, #toggleForm, #feedbackForm button {

    background-color: #FF4242 !important;

    color: white !important;

    border: 2px solid #FF0000;

    border-radius: 5px;

    padding: 10px 20px;

    font-size: 16px;

    font-weight: bold;

    cursor: pointer;

    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);

    transition: transform 0.2s, box-shadow 0.2s;

}



#firstReview:hover, #toggleForm:hover {

    transform: scale(1.05);

    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);

}



#firstReview:active, #toggleForm:active {

    transform: scale(0.95);

    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);

}







@media(max-width:777px) {

    #software-toolkit_filter {

        flex-direction: column;

        align-items: baseline;

    }



    #reset-block {

        margin-top: 10px;

    }

}





@media(max-width:1650px) {

    #software-toolkit_wrapper {

        zoom: 0.95;

    }

    #software-toolkit_wrapper {

        overflow-x:scroll;

        padding-bottom: 50px;

    }



}



@media(max-width:1500px) {

    #software-toolkit_wrapper {

        zoom: 0.9;

    }



}



@media(max-width:1200px) {

    #software-toolkit_wrapper {

        zoom: 0.85;

    }



}



@media(max-width:1650px) {



}