a {
    color: #38A3F5; /*#1972e6;*/
}

    a:hover {
        color: #38A3F5; /*#1972e6;*/
    }

input[type=radio] {
    width: 20px;
    height: 20px;
}

input[type=checkbox] {
    width: 20px;
    height: 20px;
}

.some-color-bold {
    color: #38A3F5 /*#203259*/;
    font-weight: 500;
}

.some-color-bold2 {
    color: gray;
    font-weight: 500;
}


.some-color-blue { /* is a blue color - light*/
    color: #0071E9;
}

.m-some-color-blue { /* is a blue color - light*/
    color: white;
}

.some-color { /* is a blue color - light*/
    color: #4d4d4d;
}

/*//203259;  0071E9 */

.title-label-color {
    color: #808080;
}

.body-background {
    background-color: #f2f2f2;
}

.astext {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    font-size: smaller;
}

.astext2 {
    background: none;
    border: none;
    /*    margin: 0;
    padding: 0;*/
    cursor: pointer;
    font-size: smaller;
}

/*.roundWhite  -- i tried in a mobile view
{
 border: 1px solid white;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding:5px;
}

.roundBlue
{
 border: 1px solid blue;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding:5px;
}*/
.grey-shadow-sides {
    border-left: 2px solid #e6e6e6;
    border-right: 2px solid #e6e6e6;
}
/*box-shadow: -5px 0 5px -5px #ff0000;
    box-shadow: 5px 0 5px -5px #ff0000;      e6e6e6;  seda        --- modra 0071E9*/

.grey-thin-frame {
    border: 1px solid #e6e6e6;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
}

.grey-thin-frame2 {
    /*    border: 1px solid white;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;*/
    padding-left: 20px;
    padding-right: 20px;
}

.grey-thin-frame23 {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
}

.grey-thin-frame-m {
    border: 1px solid #e6e6e6;
    /*    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;*/
    border-radius: 20px;
}

.grey-frame-m {
    /*    border: 1px solid #e6e6e6;*/
    /*    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;*/
    /*    border-radius: 20px;*/
    /* background-color: #FCFCFC;*/ /*99 %*/
    /*background-color: blue;*/
    background-color: #F0F0F0;
}

.grey-frame-m2 {
    /*    margin-left: 15px;
    margin-right: 15px;
    border-radius: 20px;
    background-color: #F2F4F6;*/
    margin-left: 15px;
    margin-right: 15px;
    border: 1px solid #eee;
    border-radius: 12px;
    /*  padding: 20px;*/
    /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);*/
    box-shadow: 0 4px 15px rgba(20, 30, 50, 0.04);
    transition: transform 0.2s ease;
}

.grey-frame-m23 {
    /*    border: 1px solid #e6e6e6;*/
    /*    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;*/
    /*    border-radius: 20px;*/
    /* background-color: #FCFCFC;*/ /*99 %*/
    /*background-color: blue;*/
    /*   background-color: #F8F8F8;*/
    /*  background-color: #F0F0F0;*/
    margin-left: 15px;
    margin-right: 15px;
    border-radius: 20px;
    /*    background-color: #F8F8F8;*/
    background-color: #17212b;
}

.left-frame {
    border-left: 1px solid #e6e6e6;
    /*    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;*/
    padding-left: 20px;
    padding-right: 20px;
}

.left-frame-explore {
    border-left: 1px solid transparent; /*  has to be for same layout as .left-frame ... upper*/
    /*    border-left: 1px solid #e6e6e6;*/
    /*    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;*/
    padding-left: 20px;
    padding-right: 20px;
}

.grey-thin-frame-img {
    border: 1px solid #e6e6e6;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 1px;
}

.blue-thin-frame {
    border: 1px solid #0071E9;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
}

.blue-thin-frame2 {
    /* padding: 0px;*/
    /*  border: 1px solid #010430;*/
    /*   border: 1px solid #e6e6e6;*/
    /*    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;*/
    /*    border-radius: 20px;*/
    /*    padding-left: 0px;
    padding-right: 0px;*/
}

.color-white-bc-blue {
    color: white;
    background-color: #0071E9;
}

.border-blue {
    border-color: #60a3eb; /*#0071E9;*/
}

.ui-dialog {
    /*left: 80% !important;
        top: 50% !important;
        margin-left: -175px !important;
        margin-top: -175px !important;*/
    /*    left: 80% !important;
    top: 50% !important;*/
    /*    margin-left: -175px !important;
    margin-top: -175px !important;*/
}

.background-main {
    /*background-image: url(../../Content/Images/QWorld4.jpg);*/
    /*background-image: url(/Content/Images/QWorld4.jpg);*/
    /*url(/pix/samples/bg1.gif);*/
    background-size: 100% 100%;
    /*width:100%;
    height:100%;*/
}

.dark-blue-color {
    color: #212442;
}

.menu-border-style {
    border-color: grey;
    border: 1px;
    border-style: solid;
    padding: 10px;
    border-radius: 5px;
}

.width-300 {
    width: 300px;
    min-width: 300px;
}

.width-350 {
    width: 350px;
    min-width: 350px;
}

.width-400 {
    width: 450px;
    min-width: 450px;
}

.width-600 {
    width: 600px;
    min-width: 600px;
}

.width-900 {
    width: 900px;
    min-width: 900px;
}

.width-1000 {
    width: 1000px;
    min-width: 1000px;
}

.width-100 {
    width: 100%;
    min-width: 100%;
}

.width-100-m {
    /*    width: calc(100vw - 30px);*/
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.btn-color {
    color: white;
    background-color: #0071E9;
    border-color: #0071E9;
}

th, td {
    padding: 5px;
}

.control-label {
    /*font-weight: 500;*/
    /*color: #0071E9;*/
    /* color: #191b33; darker as firefox*/
    /*color: #5b5e8a; lighter as firefox*/
    color: #0071E9;
    font-weight: 600;
    width: 600px;
    min-width: 600px;
    margin-top: 15px;
    margin-bottom: 5px;
    /*  color #0071E9- light blue
        color  #202340     - dark blue  firefox - but lighther - #5c607d
    */
}

.control-label2 {
    /*font-weight: 500;*/
    /*color: #0071E9;*/
    /* color: #191b33; darker as firefox*/
    /*color: #5b5e8a; lighter as firefox*/
    color: #343434;
    font-weight: 600;
    width: 600px;
    min-width: 600px;
    margin-top: 15px;
    margin-bottom: 5px;
    /*  color #0071E9- light blue
        color  #202340     - dark blue  firefox - but lighther - #5c607d
    */
}

.control-label-m {
    /*font-weight: 500;*/
    /*color: #0071E9;*/
    /* color: #191b33; darker as firefox*/
    /*color: #5b5e8a; lighter as firefox*/
    color: #0071E9;
    font-weight: 600;
    /*    width: 100vw;*/
    /*    min-width: 600px;*/
    margin-top: 15px;
    margin-bottom: 5px;
    vw
    /*  color #0071E9- light blue
        color  #202340     - dark blue  firefox - but lighther - #5c607d
    */
}

.form-control-m {
    display: block;
    width: 100%;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
}

.form-control2 {
    border: 1px solid #dcdcdc;
    transition: all 0.3s ease;
    /*   border-radius:10px;*/
    display: block;
    /*    width: 100%;*/
    margin: auto;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555555;
    background-color: #fff;
    background-image: none;
    /*    border: 1px solid #ccc;*/
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    margin-top: 10px;
}

.form-control2-m {
    border: 1px solid #dcdcdc;
    transition: all 0.3s ease;
    /*   border-radius:10px;*/
    display: block;
    /*    width: 100%;*/
    margin: auto;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555555;
    background-color: #fff;
    background-image: none;
    /*    border: 1px solid #ccc;*/
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    margin-top: 10px;
    width: 100%;
}

/*.form-control-q23 {
    display: block;
    width: 600px;
    margin: auto;
    height: 40px;
    font-size: 14px;
    line-height: 1.42857143;*/
/*color: #555555;*/
/*color: #858585;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 20px;*/ /* Smoothly rounded corners */
/*box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);*/ /* Slightly darker and wider shadow */
/*transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}*/

.form-control2:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Noticeable shadow on hover */
}

.form-control2:focus {
    border-color: #4A90E2; /* Highlight border on focus */
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.6); /* Bright focus shadow */
    outline: none; /* Remove default focus outline */
}

.form-control2-m:focus {
    border-color: #4A90E2; /* Highlight border on focus */
    box-shadow: 0 0 10px rgba(74, 144, 226, 0.6); /* Bright focus shadow */
    outline: none; /* Remove default focus outline */
}

.form-control-height34 {
    height: 34px;
}

.form-control-height170 {
    height: 120px;
}

.text-danger2 {
    color: #a94442;
    font-size: 12px;
    margin-bottom: 0px;
}

a.text-danger2:hover,
a.text-danger2:focus {
    color: #843534;
}

.full-width {
    width: 100%;
}

.category-titles-txt {
    /*  color: #2760a8;*/
    /*  color: #3f83cc;*/
    /*    color: #6a88a8;*/
    font-size: small;
    color: #495273; /*#9e7294;*/
}

.category-titles-txt2 {
    /*  color: #2760a8;*/
    /*  color: #3f83cc;*/
    /*    color: #6a88a8;*/
    color: #825a79; /* #5d8aa8;*/
}

.category-titles-txt2 {
    /*  color: #2760a8;*/
    /*  color: #3f83cc;*/
    /*    color: #6a88a8;*/
    color: #5d8aa8;
    font-size: 11px;
}

.rating {
    /*color:*/ /* #82abab;*/ /*#789494;
    font-size: small;*/
}

.q-globe {
    padding-bottom: 2px;
}

.q-reference {
    color: #808080;
    font-size: smaller;
    padding-top: 0px !important;
    margin-top: 0px !important;
    padding-bottom: 6px !important;
    /*    height: auto;*/
    /*   background-color: aqua;*/
}

.s-reference {
    margin-left: 5px;
}

.position-txt {
    color: cadetblue;
}

.short-text {
    padding-top: 10px;
    padding-bottom: 10px;
    /*  color: #6A6A6A;*/
    color: #74797d; /* #4d5158; */ /*#4d4d4d;*/
    font-size: 14px;
    /*    padding-bottom:px !important;
    padding-top:px !important;*/
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.28em;
}

.short-text-m {
    padding-top: 10px;
    padding-bottom: 10px;
    /*  color: #6A6A6A;*/
    color: #4b5057; /*#4d4d4d;*/
    font-size: 14px;
    /*    padding-bottom:px !important;
    padding-top:px !important;*/
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.28em;
}

.search-final-category-title {
    font-size: 1.65em;
    font-weight: 500;
    /* color: #007aff;*/
    color: #2760a8;
}

.search-final-category-title-2 {
    font-size: 1.65em;
    font-weight: 500;
    /* color: #007aff;*/
    color: #006FB2;
}

.q-footer {
    position: relative;
    bottom: 0;
    width: 100%;
    background-color: #f2f4f6;
    height: 50px;
}

.q-footer-li {
    font-size: small;
}

.q-footer-span {
    width: 20%;
    text-align: right;
    float: right;
    margin-right: 5px;
    /*  margin-top: 20px;*/
}

.q-footer-span-text {
    color: #808080;
    font-size: 12.8px;
    padding: 0 20px 0px 0;
}

.q-search-input {
    width: 40%;
    min-width: 400px;
    margin: auto;
    background-color: white;
    border-color: #111838;
    color: darkblue;
    border-width: 2px;
    border-radius: 30px;
    height: 40px;
}

.q-search-input2 {
    width: 40%;
    min-width: 400px;
    margin: auto;
    background-color: white;
    border-color: #111838;
    color: white;
    border-width: 2px;
    border-radius: 30px;
    height: 40px;
}

.q-search-input23 {
    width: 40%;
    min-width: 400px;
    margin: auto;
    background-color: white;
    border-color: #808080;
    color: darkblue;
    border-width: 2px;
    border-radius: 30px;
    height: 40px;
}

.list-category {
    width: auto;
    margin: auto;
    color: #cccccc;
    background-color: #0071E9;
    font-weight: 500;
    border-color: #cccccc;
    text-decoration: none !important;
}

.listcategory-span {
    color: #cccccc;
    width: 100px;
    float: right;
    margin-top: 0px;
    margin-right: 20px;
}

.q-href {
    font-weight: bold;
    font-size: xx-large;
    text-decoration: none !important;
}

.q-href-3 {
    /*   font-weight: bold;*/
    /*    font-size: xx-large;*/
    font-size: 28px;
    text-decoration: none !important;
}

.q-href-32 {
    /*   font-weight: bold;*/
    /*    font-size: xx-large;*/
    font-size: 26px;
    text-decoration: none !important;
}

.main-div-id {
    margin-left: 170px; /*220px;*/
    width: 620px;
    display: inline-block;
    min-height: 80%;
}

.main-div-id-s {
    /*display: inline-block;*/
    min-height: 80%;
    display: inline-block;
}

.main-div-id2 {
    width: 650px;
    display: inline-block;
    min-height: 80%;
}

.information-href {
    color: #185e78; /*darkslategray;*/
    font-size: small;
    text-decoration: none !important;
    /*  float: left;*/
    /*padding: 8px 0px 8px 0px;*/
    outline-color: white !important;
    width: 330px;
    text-align: right;
}

.information-href-m {
    color: #185e78; /*darkslategray;*/
    background-color: #f2f3f6;
    font-size: small;
    font-weight: 500;
    text-decoration: none !important;
    padding: 4px 8px 4px 8px;
    border-radius: 5px;
    outline-color: white !important;
    width: calc(100vw - 30px);
    text-align: right;
    margin-left: 15px;
}

.information-div {
    outline-color: white !important;
    border-style: none !important
}

.category-title-heading {
    color: #006FB2;
    font-size: 1.5em;
    font-weight: 500;
}

.category-title-heading-h {
    color: #007aff;
    font-size: 1.7em;
    font-weight: 500;
}

.category-title-item-heading {
    /*    color: #007aff;*/
    color: #2760a8;
    font-size: 1.65em;
    font-weight: 500;
}

.category-title-item-heading-2 {
    /*    color: #007aff;*/
    color: #006FB2;
    font-size: 1.65em;
    font-weight: 500;
}

.category-title-item-heading-s {
    /*    color: #007aff;*/
    color: #2760a8;
    font-size: 1.55em;
    font-weight: 500;
}

.category-title-item {
    color: #102d52;
}

.subject-title-item {
    color: #007aff;
    font-weight: 500;
    font-size: 1.17em;
}

.county-result {
    font-size: 12.8px;
    color: #595353;
}

.filter-properties {
    font-size: 12.8px;
    /* color: #546373;*/
    background-color: #d7d7de; /*#d7dede;*/ /*#849cad*/ /*#43769c;*/ /*#015a9b;*/
    color: white;
    font-weight: 500;
    border-radius: 10px;
    padding: 3px 8px;
    margin-right: 2px;
    line-height: 1.8;
}

.q-about {
    color: #007aff;
    /*    font-size: small;*/
    font-weight: 600;
}

.position-img {
    /*   :)   */
    /*    padding-top: 2px !important;
    padding-bottom: 0px !important;
    padding-right: 3px !important;*/
    /*    margin-top:0px !important;*/
}

.categories-img {
    padding-bottom: 2px !important;
    /*    margin-top:0px !important;*/
}

/*qsite*/

.qsite-abc {
    background-color: #08002b;
}

.qwoogi-font-small {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: x-large !important;
    color: white;
    text-decoration: none !important;
}

.qwoogi-font-small2 {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: x-large !important;
    color: #4A90E2;
    text-decoration: none !important;
}

.qwoogi-font-small-qsite {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: large !important;
    color: white;
    text-decoration: none !important;
}

.qwoogi-font-small-qsite2 {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: large !important;
    color: #00a8f3;
    text-decoration: none !important;
}

.qwoogi-font-small-qsite23 {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-size: 20px;
    color: #00a8f3;
    text-decoration: none !important;
    font-weight: 900;
}

.qwoogi-font-big {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white;
    font-size: 600%;
    font-weight: 700;
    width: auto;
    text-shadow: -2px -2px 0 #111838, 2px -2px 0 #111838, -2px 2px 0 #111838, 2px 2px 0 #111838;
    text-align: left !important;
    text-decoration: none;
}

.qwoogi-font-big2 {
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: white;
    font-size: 68px;
    font-weight: 700;
    width: auto;
    /*    text-shadow: -2px -2px 0 #808080, 2px -2px 0 #808080, -2px 2px 0 #808080, 2px 2px 0 #808080;*/
    text-shadow: -2px -2px 0 #00A8F3, 2px -2px 0 #00A8F3, -2px 2px 0 #00A8F3, 2px 2px 0 #00A8F3;
    text-align: left !important;
    text-decoration: none;
}

.form-control-q {
    display: block;
    width: 100%;
    height: 34px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555555;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
}

.form-control-q2 {
    display: block;
    width: calc(100% - 30px);
    height: 48px;
    font-size: 14px;
    line-height: 1.42857143;
    /*color: #555555;*/
    color: #041d2b;
    /*background-color: #fff;*/
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 30px; /* Smoothly rounded corners */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Slightly darker and wider shadow */
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    padding-left: 20px;
    padding-right: 115px;
}

    .form-control-q2:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Noticeable shadow on hover */
    }

    .form-control-q2:focus {
        border-color: #4A90E2; /* Highlight border on focus */
        box-shadow: 0 0 10px rgba(74, 144, 226, 0.6); /* Bright focus shadow */
        outline: none; /* Remove default focus outline */
    }

.form-control-q2-m {
    display: block;
    width: calc(100% - 30px);
    margin-right: 15px;
    margin-left: 15px;
    height: 44px;
    font-size: 16px;
    /*line-height: 1.42857143;*/
    border: 1px solid #ccc;
    border-radius: 30px; /* Smoothly rounded corners */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Slightly darker and wider shadow */
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    padding-left: 20px;
    padding-right: 95px;
    color: #041d2b;
    background-color: white;
}

    .form-control-q2-m:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Noticeable shadow on hover */
    }

    .form-control-q2-m:focus {
        border-color: #4A90E2; /* Highlight border on focus */
        box-shadow: 0 0 10px rgba(74, 144, 226, 0.6); /* Bright focus shadow */
        outline: none; /* Remove default focus outline */
    }

.form-control-q23 {
    display: block;
    width: 600px;
    margin: auto;
    height: 48px;
    font-size: 14px;
    /*line-height: 1.42857143;*/
    /*color: #555555;*/
    /*color: #858585;
    background-color: #fff;*/
    border: 1px solid #ccc;
    border-radius: 40px; /* Smoothly rounded corners */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Slightly darker and wider shadow */
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    padding-left: 20px;
    padding-right: 115px;
    color: #041d2b;
    background-color: white;
}

    .form-control-q23:hover {
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Noticeable shadow on hover */
    }

    .form-control-q23:focus {
        /*border-color: #4A90E2; */ /* Highlight border on focus */
        /*box-shadow: 0 0 10px rgba(74, 144, 226, 0.6);*/ /* Bright focus shadow */
        outline: none; /* Remove default focus outline */
    }

.form-group-q {
    /* margin-bottom: 15px;*/
}

.search-control-q23 {
    display: block;
    margin: auto;
    height: 40px;
    font-size: 14px;
    line-height: 1.42857143;
    /*color: #555555;*/
    color: #858585;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    /* border-radius: 20px; */ /* Smoothly rounded corners */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); /* Slightly darker and wider shadow */
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.search-control-q23a {
    /*    display: block;
    margin: auto;*/
    height: 34px;
    font-size: 14px;
    line-height: 1.42857143;
    /*color: #555555;*/
    /* color: #858585;*/
    color: #3c3c3c;
    /*background-color: #fff;*/
    background-color: #F2F4F6;
    border: 1px solid #F2F4F6;
    border-radius: 5px;
    /* border-radius: 20px; */ /* Smoothly rounded corners */
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);*/ /* Slightly darker and wider shadow */
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

    .search-control-q23a:hover,
    .search-control-q23a:visited {
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

.category-title-heading-2 {
    /*   color: #010430;*/
    /* color: #000108;*/
    color: #004c7a;
    /*   color: #010430; */
    font-size: 1.9em;
    font-weight: 500;
    width: auto;
    position: relative; /* Required for the absolute positioning of the pseudo-element */
    display: inline-block; /* Ensure the link behaves like a block/inline-block element */
    padding-left: 10px; /* Adjust padding to make space for the line */
}

    .category-title-heading-2::before {
        content: "";
        position: absolute;
        left: 0px; /* Position the line on the left of the text */
        width: 3px; /* Width of the vertical line */
        top: 1px; /* Align with the top of the text */
        bottom: 1px; /* Align with the bottom of the text */
        background-color: #38a3f5; /* Color of the vertical line */
    }

.category-title-heading-23 {
    color: #212936;
    font-size: 32px; /*31*/ /* on update, also change line height*/
    line-height: 38px; /*1.2% of size*/
    font-weight: 500;
    width: auto;
    /*   position: absolute;*/
    /*display: inline-block;*/
    text-align: left;
    /*padding-left: 10px;*/
    /*    margin: 0;*/
    display: inline-block;
    max-width: 700px;
}

.category-title-heading-23c {
    color: #212936;
    font-size: /*21.8px; */ /* 22.8px;*/ 28px; /*26px; */ /* 28px; */ /*23px;*/ /* on update, also change line height*/
    line-height: 31px; /*1.2% of size*/
    font-weight: /*500;*/ 600;
    /*    width: auto;*/
    /*display: inline-block;*/
    text-align: left; /*center;*/
    /*padding-left: 10px;*/
    /*    margin: 0;*/
    /*padding: 20px 0 0 0;*/
    /*    margin: auto;*/
    /*    display: inline-block;*/
}

.category-title-heading-23c2 {
    color: #212936;
    font-size: /*21.8px;*/ /*22.8px; */ /*25.8px; */ 28px; /*23px;*/ /* on update, also change line height*/
    line-height: 26px; /*1.2% of size*/
    font-weight: 600;
    /*    width: auto;*/
    /*display: inline-block;*/
    text-align: left;
    /*padding-left: 10px;*/
    /*    margin: 0;*/
    /*padding: 20px 0 0 0;*/
    /*    margin: auto;*/
    /*    display: inline-block;*/
}

.q-site-text {
    /*font-size: 15.8px;*/
    font-size: 14.2px;
    /*color: #030247;*/
    /* color: #453c59;*/
    color: /*#595353;*/ #171c2b;
    font-weight: 400;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /*roboto  200 not works on android, so need to add
                <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;200;300&display=swap" rel="stylesheet">

            */
}

.ddds {
    margin-left: 0px !important;
    padding-left: 0px !important;
}

    .ddds:hover {
        background-color: #cccccc;
        color: darkblue;
    }

.ggg {
    text-decoration: none !important;
    margin: 0px !important;
    padding: 0px !important;
}

.short-text-w {
    padding-top: 10px;
    padding-bottom: 10px;
    /*  color: #6A6A6A;*/
    color: white;
    font-size: 1.1em;
    /*    padding-bottom:px !important;
            padding-top:px !important;*/
}

.short-text-w-2 {
    padding-top: 10px;
    padding-bottom: 10px;
    /*  color: #6A6A6A;*/
    color: white;
    /*font-size: 1.1em;*/
    font-size: 1.0em;
    /*  font-size: small;*/
    /*    padding-bottom:px !important;
            padding-top:px !important;*/
}

.list-category-test {
    width: auto;
    margin: auto;
    color: #cccccc;
    /*   background-color: #0071E9;*/
    font-weight: 500;
    /*border-color: #cccccc;*/
    text-decoration: none !important;
}

.main-text-title-test-w {
    font: x-large;
    color: white;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    float: left;
    margin-top: 10px;
    margin-left: 0px;
    padding-left: 0px;
}

.main-text-title-test-b {
    font: x-large;
    font-weight: 600;
    /*    color: #006FB2;*/
    color: #00A8F3;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    float: left;
    margin-top: 20px;
    margin-left: 0px;
    padding-left: 0px;
}

.q-href-test {
    /*  font-weight: bold;*/
    font-size: x-large;
    text-decoration: none !important;
}

.b-thin-frame {
    border: 1px solid #010430;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
}

.container-s {
    display: flex;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

.left-div-s {
    width: 170px; /*220px;*/
    margin: 0px;
    padding: 0px;
    min-width: 170px;
    flex-shrink: 0;
}

.middle-div-s {
    /*width: fit-content;*/
    flex-grow: 1;
    float: right;
    /*background: linear-gradient(to right, #01063d, #383c6b, #01063d);*/
    background: linear-gradient(to right, #010626, #30304a, #010626);
    padding: 0px;
    margin: 0px;
}

.middle-div-l {
    /*width: fit-content;*/
    flex-grow: 1;
    float: right;
    /*background: linear-gradient(to right, #01063d, #383c6b, #01063d);*/
    padding: 0px;
    margin: 0px;
}

.right-div-s {
    min-width: 220px;
    float: right;
    margin: 0px;
    padding: 0px;
}

.right-div-s2 {
    min-width: 600px;
    float: right;
    margin: 0px;
    padding: 0 0 0 0;
}

.parentDiv img {
    width: 300px !important;
    height: auto;
    padding: 0px;
    margin: 0px;
}

.information-div-2 {
    outline-color: white !important;
    border-style: none !important;
    /* color: #010430;*/
    /*font-size:smaller;*/
}

.b-thin-frame {
    border: 1px solid #010430;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
}

.listcategory-span-test {
    color: #cccccc;
    width: 100px;
    float: right;
    margin-top: 10px;
    margin-right: 20px;
}

.listcategory-span-test2 {
    color: #cccccc;
    width: 100px;
    /*float: right;*/
    margin-top: 10px;
    margin-right: 20px;
}

.aaa {
    /* padding-top: 10px;
            padding-bottom: 10px;*/
    /*  color: #4d4d4d;*/
    /*color:*/ /*#9e4c2e;*/ /*#347ba3; */ /*#235e29;*/ /* #4c9e54;*/
    /*  text-shadow: white 2px 5px;*/
    font-size: 1.24em;
    font-weight: 500;
    /*    text-shadow: 1px 1px 0px #2785cc;*/

    color: #347ba3;
    /*text-shadow: 1px 1px 2px #347ba3;*/
}

.bbb {
    /* padding-top: 10px;
            padding-bottom: 10px;*/
    /*  color: #6A6A6A;*/
    /*    color: #01063d;*/
    /*    font-size: 1.1em;*/
    /*    padding-bottom:px !important;
                    padding-top:px !important;*/
    color: #010430;
    /*    font-size: 1.17em;*/
    font-size: 1.24em;
    font-weight: 500;
    /*          text-shadow: 1px 1px 0px #01063d;*/
    /* background-clip:text;*/
    /*            -webkit-background-clip: revert ;
            -webkit-text-fill-color: transparent;*/
}

.category-title-heading-h-2 {
    color: #006FB2;
    font-size: 1.7em;
    font-weight: 600;
}

.b-thin-frame {
    border: 1px solid #010430;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding-left: 20px;
    padding-right: 20px;
}

.search-category-d-3 {
    /*color: #595959;*/
    /* color: #1b6185;     not bad*/
    /*color: #346178; also not bad*/
    /*  color: #4e6673;*/
    /* color: #07588a;     */
    color: #02436b;
    /*     color: #18464f;*/
    /*  color: #25464d;*/
    /*         color: #879394;*/
    /*color: #18464f;*/
    /*    font-size: 1.17em;*/
    font-size: 14px;
    /*  font-weight: 500;*/
    /*    font-weight: bold;*/
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    /* has to contain <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500;600&display=swap" rel="stylesheet">*/
}

.search-category-d-32 {
    /*color: #595959;*/
    /* color: #1b6185;     not bad*/
    /*color: #346178; also not bad*/
    /*  color: #4e6673;*/
    /* color: #07588a;     */
    color: #4d5151;
    /*     color: #18464f;*/
    /*  color: #25464d;*/
    /*         color: #879394;*/
    /*color: #18464f;*/
    /*    font-size: 1.17em;*/
    font-size: 14.8px; /*14px;*/
    /*  font-weight: 500;*/
    /*    font-weight: bold;*/
    font-weight: 400;
    font-family: Arial, sans-serif;
    /*    font-family: Roboto, sans-serif;*/
    /* has to contain <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500;600&display=swap" rel="stylesheet">*/
    line-height: 1.58em;
}

.search-category-d-32a {
    /*color: #595959;*/
    /* color: #1b6185;     not bad*/
    /*color: #346178; also not bad*/
    /*  color: #4e6673;*/
    /* color: #07588a;     */
    color: #4d5151;
    /*     color: #18464f;*/
    /*  color: #25464d;*/
    /*         color: #879394;*/
    /*color: #18464f;*/
    /*    font-size: 1.17em;*/
    font-size: 16px;
    /*  font-weight: 500;*/
    /*    font-weight: bold;*/
    font-weight: 400;
    font-family: Arial, sans-serif;
    /*    font-family: Roboto, sans-serif;*/
    /* has to contain <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500;600&display=swap" rel="stylesheet">*/
    line-height: 1.58em;
}

.search-category-d-3-m {
    /*color: #595959;*/
    /* color: #1b6185;     not bad*/
    /*color: #346178; also not bad*/
    /*  color: #4e6673;*/
    /* color: #07588a;     */
    color: #02436b;
    /*     color: #18464f;*/
    /*  color: #25464d;*/
    /*         color: #879394;*/
    /*color: #18464f;*/
    /*    font-size: 1.17em;*/
    font-size: 14px;
    /*  font-weight: 500;*/
    /*    font-weight: bold;*/
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
    /* has to contain <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500;600&display=swap" rel="stylesheet">*/
}

.search-category-l-3 {
    /*    color: #5f6368;*/
    /* color: #23A8F2;*/
    /*    color: #93989e;*/
    /*   color: #6a88a8;*/
    /*color: #078a86;           not bad*/
    color: #148c88;
    /*  color: #096b6*/
    font-weight: 500;
    font-size: 14px;
    /*  font-weight: 500;*/
    /*   font-weight: bold;*/

    font-family: 'Roboto', sans-serif;
    /*  has to contain <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500;600&display=swap" rel="stylesheet">*/
}

.search-category-l-32 {
    /*    color: #5f6368;*/
    /* color: #23A8F2;*/
    /*    color: #93989e;*/
    /*   color: #6a88a8;*/
    /*color: #078a86;           not bad*/
    color: #5f6361;
    /*  color: #096b6*/
    font-weight: 600;
    font-size: 14.8px; /* 14px;*/
    /*  font-weight: 500;*/
    /*   font-weight: bold;*/
    font-family: 'Arial', sans-serif;
    /*    font-family: 'Roboto', sans-serif;*/
    /*  has to contain <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500;600&display=swap" rel="stylesheet">*/
    line-height: 1.58em;
}

.search-category-l-32a {
    /*    color: #5f6368;*/
    /* color: #23A8F2;*/
    /*    color: #93989e;*/
    /*   color: #6a88a8;*/
    /*color: #078a86;           not bad*/
    color: #5f6361;
    /*  color: #096b6*/
    font-weight: 600;
    font-size: 16px;
    /*  font-weight: 500;*/
    /*   font-weight: bold;*/
    font-family: 'Arial', sans-serif;
    /*    font-family: 'Roboto', sans-serif;*/
    /*  has to contain <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500;600&display=swap" rel="stylesheet">*/
    line-height: 1.58em;
}

.search-category-l-3-m {
    /*    color: #5f6368;*/
    /* color: #23A8F2;*/
    /*    color: #93989e;*/
    /*   color: #6a88a8;*/
    /*color: #078a86;           not bad*/
    color: #148c88;
    /*  color: #096b6*/
    font-weight: 500;
    font-size: 14px;
    /*  font-weight: 500;*/
    /*   font-weight: bold;*/

    font-family: 'Roboto', sans-serif;
    /*  has to contain <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500;600&display=swap" rel="stylesheet">*/
}

.q-main-color {
    background-color: #010430;
}

.container-img {
    position: relative;
    text-align: start;
    color: royalblue;
}


.bottom-left-img {
    position: absolute;
    bottom: 5px;
    left: 5px;
    font-size: 10px;
    font-weight: bold;
    color: white;
    padding: 5px;
    text-shadow: 0px 0px 5px rgba(0, 1, 8, 0.9), 0px 0px 10px rgba(0, 1, 8, 0.8), 0px 0px 15px rgba(0, 1, 8, 0.6);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    max-width: 128px;
    word-wrap: break-word;
    z-index: 1;
}

.bottom-left-img2 {
    position: absolute;
    bottom: 5px;
    left: 5px;
    font-size: 10px;
    font-weight: bold;
    color: white;
    padding: 5px;
    text-shadow: 0px 0px 5px rgba(0, 1, 8, 0.9), 0px 0px 10px rgba(0, 1, 8, 0.8), 0px 0px 15px rgba(0, 1, 8, 0.6);
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    max-width: 158px;
    word-wrap: break-word;
    z-index: 1;
}

.image-container {
    display: flex; /* Enables arranging elements side-by-side */
    width: 360px; /* Adjust width as needed */
    height: 240px; /* Adjust height as needed */
}

.image-container2 {
    position: relative;
    display: inline-block;
    /* margin: 10px;*/
}

.portrait {
    width: 128px; /* Adjust width as needed */
    height: auto; /* Maintains aspect ratio */
    object-fit: cover; /* Ensures image fills container */
}

.portrait-m {
    width: calc((100vw - 40px) / 3);
    /* Adjust width as needed */
    height: auto; /* Maintains aspect ratio */
    /*object-fit: cover;*/ /* Ensures image fills container */
}


.landscape-container {
    display: flex;
    flex-direction: column; /* Stacks images vertically */
    width: calc(100% - 128px); /* Fills remaining space */
}

.landscape {
    width: 100%; /* Landscape images fill container width */
    height: auto; /* Maintains aspect ratio */
    object-fit: cover; /* Ensures image fills container */
}

.s-title {
    /*    color: #007aff;*/
    /*    color: #2760a8;        this last*/
    /*color: #3469c9;*/
    /*    color: #006FB2;   nope this is last*/
    /*    color: #049ed6;*/
    color: #0b5bdb; /*  try #0a93c4*/
    /*font-size: 1.62em;*/
    font-size: 22px;
    font-weight: 500;
}

.s-title-m {
    /*    color: #007aff;*/
    /*    color: #2760a8;  this was last*/
    /*    color: #3469c9;*/
    /*    color: #006FB2;   nope this is last*/
    /*    color: #049ed6;*/
    color: #0b5bdb;
    /*font-size: 1.62em;*/
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 20px;
}


/*search icon*/

.input-container {
    position: relative;
    margin: auto;
    width: 600px; /* Adjust the width of the input field */
}

.input-container2 {
    position: relative;
    /*    margin: auto;*/
    width: 660px; /* Adjust the width of the input field */
}

.search-input {
    width: 100%;
    /*padding-right: 35px; */ /* Adjust the padding to make space for the icon */
}

.search-icon {
    position: absolute;
    top: 55%;
    right: 10px;
    transform: translateY(-50%);
    color: cornflowerblue; /* Adjust the color of the icon */
    cursor: pointer;
}

.search-icon-m {
    position: absolute;
    top: 78px;
    right: 30px;
    transform: translateY(-50%);
    color: cornflowerblue; /* Adjust the color of the icon */
}
/*
search icon legend*/

#mainDivId {
    /* Align items to the start */
    /*    justify-content: flex-start;
    align-items: flex-start;*/
}

.some-labels {
    /*color: #808080;*/
    color: /*#bebebe;*/ #96aab4;
}

.info-label {
    /*    color: #918c7c;*/
    /*color: #2688b5;*/
    /*    color: #2b8dba;*/
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: /*14px;*/ /*12.8px;*/ 14.2px;
    margin-bottom: 5px;
    line-height: 16px; /* Match the icon height */
    /*  background-color: #d4f5d4;*/
    /* color: #81998f;*/
    /*    color: #b9c9ba;*/
    color: #78b4c8;
}

.margin-15 {
    margin-left: 15px;
    margin-right: 15px
}

.test-background {
    background-color: aquamarine;
}

.abcd {
    padding-bottom: 8px;
}

.more-button {
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #212936;
    border: 1px solid gray;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    color: gray;
}

.more-button2 {
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #cacaca;
    border: 1px solid gray;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    color: gray;
    /*
    padding-top:5px;*/
    margin-top: 10px;
}

.more-button23 {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #f0f0f0;
    border: 1px solid gray;
    cursor: pointer;
    /*    align-items: center;
    justify-content: center;*/
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /*  z-index: 10;*/
    color: gray;
}

.frame-img-80 {
    width: 120px;
    height: 120px;
    /*  overflow: hidden;*/
    display: flex;
}

/* WebP <picture> wrappers must not affect layout — collapse the picture box so
   the inner <img> lays out exactly as a direct child of its container (width:100%,
   object-fit and absolute positioning all resolve against the container, and no
   inline-baseline gap appears). */
picture {
    display: contents;
}

.image-container-80 {
    width: 120px;
    height: 120px;
    overflow: hidden;
    border-radius: 10px;
}

    .image-container-80 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.frame-img-80-m {
    width: 100px;
    height: 100px;
    /*  overflow: hidden;*/
    display: flex;
}

.image-container-80-m {
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 10px;
}

    .image-container-80-m img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.frame-img-360-240 {
    width: 360px;
    height: 240px;
    overflow: hidden;
    display: flex;
}

.image-container-360-240 {
    width: 360px;
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
}

    .image-container-360-240 img {
        width: 100%;
        height: 150%;
        object-fit: cover;
        object-position: center;
    }


.frame-img-landscape-1-m {
    width: calc(100vw - 15px);
    height: calc((100vw - 15px) / 3 * 2);
    overflow: hidden;
    display: flex;
    padding: 15px;
}

.image-container-landscape-1-m {
    width: 100%; /* Take full width of parent minus padding */
    height: 100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    border: #e6e6e6 1px solid;
}

    .image-container-landscape-1-m img {
        width: 100%;
        height: 150%;
        object-fit: cover;
        object-position: center;
    }


.my-favicon {
    background-color: #f5f5f5;
    padding: 2px 2px;
    border-radius: 5px;
    width: 22px;
    height: 22px;
}


.partial-info-icon {
    display: inline-block;
    position: relative;
    top: 3px; /* Fine-tune vertical position */
    vertical-align: baseline;
}

    .partial-info-icon svg {
        display: block; /* Removes extra space below SVG */
        width: 16px;
        height: 16px;
    }

    /* Clickable info icons (ShowInfo on ListQSX/Search + mobile) show the hand cursor;
       decorative info icons without an onclick keep the default cursor. */
    .partial-info-icon[onclick] {
        cursor: pointer;
    }

.exclude-this-svg {
    background-color: initial;
    margin-bottom: initial;
    height: initial;
}

.div-text-style-category {
    padding: 0 5px;
    /*color: var(--color-grey-600, #3c4043);*/
    /*font-size: .875rem;*/
    /*font-size: 1.0142857143em;*/
    /*        font-size: 1.015em;*/
    font-size: 10.8px;
    /*font-size: 0.87em;*/
    /* font-weight: 400;*/
    font-weight: /* 500;*/ 400;
    /* font-family: "Google Sans Text", "Noto Naskh Arabic UI", Arial, sans-serif;*/
    /*    font-family: "Google Sans Medium", "Roboto Medium", "Arial", sans-serif;*/
    /* font-family: "Google Sans", "Google Sans Medium", "Roboto Medium", Arial, sans-serif;*/
    /*font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;*/
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
    margin: 0;
}

.white-text {
    color: white;
}

.claim-div-m {
    margin-top: 10px;
    height: 38px;
    /*    background-color: #00ccff;*/
    /*015b9b*/
    /* background-color: #279ab8;*/
    background-color: #15BCE8; /*#015a9b;*/
    width: calc(100% - 30px);
    font-size: 12.8px;
    font-weight: 600;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
    display: flex;
    cursor: pointer;
    /*  position: relative;*/
}
/*
    .claim-div-m::before {
        content: "";
        position: absolute;
        left: 50px;  
        top: 0;
        bottom: 0;  
        width: 1px;  
        background: #333;  
    }*/

.my-q-list-div-m {
    margin-top: 10px;
    height: 38px;
    /*    background-color: #00ccff;*/
    /*015b9b*/
    /* background-color: #279ab8;*/
    /*background-color: #15BCE8;*/ /*#015a9b;*/
    border: 2px solid #15BCE8;
    width: calc(100% - 30px);
    font-size: 12.8px;
    font-weight: 600;
    border-radius: 20px;
    align-items: center;
    justify-content: center;
    display: flex;
}

.claim-span {
    /*    color: #004466;*/
    color: white;
    margin-right: 10px;
    display: flex;
    align-items: center;
    line-height: 1;
}

.my-q-list-span {
    /*    color: #004466;*/
    color: #15BCE8;
    margin-right: 10px;
    display: flex;
    align-items: center;
    line-height: 1;
}

.claim-div {
    margin: 10px 0;
    /*background-color: #00ccff;*/
    /*015b9b*/
    /*background-color: #279ab8;*/
    background-color: #15BCE8; /*#015a9b;*/
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    float: right;
    text-align: right;
    padding: 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 34px; /*40px;*/
    cursor: pointer;
}

.claim-div-d-width-200 {
    width: 200px;
}

.claim-div-d-width-255 {
    /*width: 255px;*/
    width: 275px;
}

.my-q-list-div {
    margin: 10px 0;
    /*background-color: #15BCE8;*/ /*#015a9b;*/
    border: 2px solid #15BCE8;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    float: right;
    text-align: right;
    padding: 6px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 34px; /*40px;*/
}

.my-q-list-div-d-width-200 {
    width: 200px;
}

.my-q-list-div-d-width-255 {
    /*width: 255px;*/
    width: 275px;
}

.max-width-230 {
    max-width: 230px;
}

.plus-style {
    font-size: 20px;
    padding: 0 10px;
}

.review-div {
    color: gray;
    height: 20px;
    width: 200px;
    font-size: 12px;
    padding: 5px 0;
    right: 0px;
    float: right;
    text-align: right;
}

.like-div2 {
    height: 20px;
    padding: 5px 0;
    right: 0px;
    float: right;
    text-align: right;
}

.review-div22 {
    height: 20px;
    padding: 5px 0;
    right: 0px;
    float: right;
    text-align: right;
}

/*dark*/

.has-tooltip-d {
    position: relative;
}

    .has-tooltip-d::before {
        content: attr(data-tooltip);
        position: absolute;
        top: 100%;
        margin-top: 10px;
        left: 50%;
        transform: translateX(-50%);
        background-color: white;
        color: #505050;
        border-radius: 10px;
        padding: 5px 10px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
        z-index: 10;
    }

    .has-tooltip-d:hover::before {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease-in-out, visibility 0s linear 0s;
    }


/*    not dark*/
.has-tooltip {
    position: relative;
    display: inline-block;
    color: #808080;
}

    .has-tooltip::before {
        content: attr(data-tooltip);
        position: absolute;
        top: calc(100% + 4px);
        margin-top: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: #aeaeae /*#505050*/;
        color: white;
        border-radius: 10px;
        padding: 5px 10px;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
        z-index: 10;
        box-sizing: border-box;
        max-width: calc(100vw - 20px);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*For tooltips that would extend beyond the right edge*/
    .has-tooltip[data-position="right"]::before {
        left: auto;
        right: 0;
        transform: translateX(0);
    }

    /*For tooltips that would extend beyond the left edge*/
    .has-tooltip[data-position="left"]::before {
        left: 0;
        transform: translateX(0);
    }

    .has-tooltip:hover::before {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.3s ease-in-out, visibility 0s linear 0s;
    }

/* Fix for the specific icon with margin-right */
span[style*="float:right"] .has-tooltip::before {
    right: 0;
    left: auto;
    transform: none;
}

/*
    start
account */

.div-control {
    height: 60px;
}

.div-control-h {
    height: 150px;
}

.panel-css-min-w { /*wider*/
    background-color: white;
    border-radius: 20px;
    min-height: 400px;
    width: 940px;
    padding: 20px;
}

.panel-css-min {
    background-color: white;
    border-radius: 20px;
    min-height: 440px;
    width: 1080px;
    padding: 20px;
}

.panel-css-min2 {
    background-color: white;
    border-radius: 20px;
    min-height: 440px;
    width: 1280px;
    padding: 20px;
}

.account-css {
    font-size: 12.8px;
    font-weight: 600;
}

.panel-css-m {
    background-color: white;
    border-radius: 20px;
    height: calc(100vh- 30px);
    width: calc(100vw - 30px);
    justify-content: center;
    /*  padding: 20px;*/
}


.panel-css {
    background-color: white;
    border-radius: 20px;
    height: 440px;
    width: 1080px;
    padding: 20px;
}

.panel-css2 {
    background-color: white;
    border-radius: 20px;
    height: 440px;
    width: 680px;
    padding: 20px;
}

.wrapper-class {
    width: 100%;
    display: flex;
    justify-content: center;
    /*    flex-wrap: wrap;*/
}

.wrapper-class-m {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    /*    flex-wrap: wrap;*/
}

.q-tile-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    min-height: 200px;
}

.q-tile-row-m {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Remove this line temporarily */
    /* height: calc(100vh - 130px); */
    min-height: 200px; /* Add a minimum height instead */
}

.q-tile-m {
    width: calc(100vw - 30px);
    height: calc((100vh - 200px) / 3 );
    border: 1px solid #dcdcdc;
    border-radius: 20px;
    /*    display: flex;*/
    /*    flex-direction: column;*/
    justify-content: left;
    align-items: flex-start;
    font-weight: 600;
    color: #333333;
    /*    #0071E9;*/
    font-size: 18px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    text-align: left;
    background-color: white;
    transition: all 0.3s ease;
    padding: 20px;
    flex-direction: column;
}

.q-tile {
    width: 260px;
    height: 200px;
    border: 1px solid #dcdcdc;
    border-radius: 20px;
    /*   display: flex;*/
    /*    align-items: center;
    justify-content: center;*/
    font-weight: 600;
    color: #333333; /* #0071E9;*/
    font-size: 18px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    /*text-align: center;*/
    background-color: white;
    /*  transition: all 0.3s ease;*/
    padding: 20px;
    text-align: left;
}

    .q-tile:hover {
        border-color: #ccc;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        cursor: pointer;
    }

/* Each advertising / account tile is wrapped in an <a>. Kill the default link
   underline (in EVERY state) and the focus-ring "frame" Chrome draws after a
   click. Colour is deliberately left untouched so the tiles can never go
   invisible. The panel's own :hover drop-shadow is on .q-tile and is
   intentionally kept. */
.q-tile-link,
.q-tile-link:link,
.q-tile-link:visited,
.q-tile-link:hover,
.q-tile-link:focus,
.q-tile-link:active {
    text-decoration: none;
    outline: none;
}

/*
account  end*/

.add-css {
    color: #0071E9;
    border-color: #0071E9;
    background-color: white;
    float: left;
    border-radius: 20px;
}

    .add-css:focus,
    .add-css:active,
    .add-css:hover {
        color: #0071E9;
        border-color: #0071E9;
        background-color: white;
        outline: none !important;
        box-shadow: none !important;
    }

.next-css {
    border-radius: 20px;
    color: white;
    background-color: #0071E9;
    border-color: #0071E9;
    float: right;
}

    .next-css:focus,
    .next-css:active,
    .next-css:hover {
        color: white;
        background-color: #0071E9;
        border-color: #0071E9;
        outline: none !important;
        box-shadow: none !important;
    }

.submit-css {
    border-radius: 20px;
    color: white;
    background-color: #0071E9;
    border-color: #0071E9;
    float: right;
}

    .submit-css:focus,
    .submit-css:active,
    .submit-css:hover {
        background-color: #0071E9;
        border-color: #0071E9;
        color: white;
        outline: none !important;
        box-shadow: none !important;
    }

.save-css {
    border-radius: 20px;
    color: white;
    background-color: #0071E9;
    border-color: #0071E9;
    float: right;
}

    .save-css:focus,
    .save-css:active,
    .save-css:hover {
        background-color: #0071E9;
        border-color: #0071E9;
        color: white;
        outline: none !important;
        box-shadow: none !important;
    }

/*desktop settings starts*/

.settings-d-outer-div {
    width: 1180px;
    display: flex;
    justify-content: space-between;
    gap: 40px;
    margin: 0 auto;
}

.settings-d-inner-div {
    width: 260px;
    padding: 0 0px;
}

/*desktop settings ends*/

.gradient-text {
    /*font-family: 'Gill Sans', sans-serif;*/
    /*font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;*/ /*needed for Qwoogi mobile width as height font*/
    line-height: 1; /*    The line-height: 1 will also help keep the "Q" proportional since you mentioned it appears taller on the actual device.*/
    /*background: linear-gradient( 90deg, #007AFF 0%, #5856D6 25%, #AF52DE 50%, #FF2D92 75%, #FF9500 100% );*/
    background: linear-gradient(90deg, #007AFF 0%, /* Blue */
    #5856D6 17%, /* Indigo */
    #AF52DE 33%, /* Purple */
    #FF2D92 50%, /* Pink */
    #FF9500 67%, /* Orange */
    #FFD60A 83%, /* Yellow */
    #34C759 100% /* Green */
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /*      text-align: center;*/
}

input[type="password"],
input[type="password"]::placeholder {
    font-family: Arial, sans-serif !important;
    font-weight: 400;
}

form input[type="password"] {
    font-family: Arial, sans-serif !important;
    font-weight: 400;
}

.cAttribute-class {
    font-size: 20px;
    font-weight: 400;
    color: /*cadetblue;*/ /*#AF52DE;*/ #447fb3;
}

.icon-color {
    color: #15BCE8; /* #0e7c99;*/
    /*color: #808080;*/
}

.icon-color-fill {
    color: #15BCE8; /* #0e7c99;*/
    fill: #15BCE8;
    /*fill: #808080;*/
}

.panel-media {
    display: flex;
    justify-content: center; /* centers items */
    align-items: center; /* vertical alignment */
    gap: 82px; /* space between icons */
    flex-wrap: wrap; /* makes it wrap on smaller screens */
    margin: auto;
}

    .panel-media a {
        text-decoration: none;
    }

.panel-media-m {
    display: flex;
    justify-content: center; /* centers items */
    align-items: center; /* vertical alignment */
    gap: 22px; /* space between icons */
    flex-wrap: wrap; /* makes it wrap on smaller screens */
    margin: auto;
}

/*menu start*/
.hover-css {
    padding: 0 12px 0 12px;
    color: gray;
}

.hover-css1:hover {
    border-radius: 10px;
    padding: 8px 12px;
    background-color: #c0e2eb;
    /*color: gray;*/
    text-decoration: none;
}

.hover-css2:hover {
    border-radius: 10px;
    padding: 8px 12px;
    background-color: #e096bb;
    /*color: gray;*/
    text-decoration: none;
}

.hover-css3:hover {
    border-radius: 10px;
    padding: 8px 12px;
    background-color: #ebccc0;
    /*color: gray;*/
    text-decoration: none;
}

.hover-css4:hover {
    border-radius: 10px;
    padding: 8px 12px;
    background-color: #dce096;
    /*color: gray;*/
    text-decoration: none;
}

.hover-css5:hover {
    border-radius: 10px;
    padding: 8px 12px;
    background-color: #9ee096;
    /*color: gray;*/
    text-decoration: none;
}

.hover-css6:hover {
    border-radius: 10px;
    padding: 8px 12px;
    background-color: #96e0cf;
    /*color: gray;*/
    text-decoration: none;
}
/*menu ends*/

.map-color { /*mobile qsite icon*/
    /*color: #4a4b59;*/
    color: #50dc57;
}

.media-div {
    width: 100vw;
    height: 50px !important;
    background-color: /*#F2F4F6;*/ #e6f5fa;
}

.border-color-solid {
    /*border: 1px solid #3c3c3c;*/
    border: 1px solid /*#d2e6f5;*/ #eee;
}

.rating-section {
    /* background-color: #e8e8e8;*/
    background-color: /*#eeeeee;*/ #e0e0e0;
    border-radius: 20px;
    width: auto; /* was 64px - too narrow, wrapped "star + 4.0/10" onto two lines */
    white-space: nowrap;
    flex-shrink: 0;
    float: left;
    padding: 2px 6px;
}

/* Empty Qwoogi-rating badge ("be the first to rate"): a compact circle around the
   star instead of the fixed 64px pill that left the star floating left with empty
   space. align-self/flex keep it from stretching in the inline-flex rating row. */
.rating-dot {
    width: 26px !important;
    height: 26px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    align-self: center;
}

.rate-color {
    color: /*#172b17*/ #453c59;
}

.rating-class {
    color: #c7c6c5;
}

.location-style {
    color: cadetblue;
}

/*filter radiobutton start*/
.radio-container {
    display: inline-block;
    /*margin: 10px;*/
}

    /* Hide the actual radio */
    .radio-container input[type="radio"] {
        display: none;
    }

    /* Style labels like buttons */
    .radio-container label {
        display: inline-block;
        padding: /*2px 6px;*/ 6px 12px; /* same as btn-default */
        border: 1px solid #30cfbf;
        border-radius: 20px;
        cursor: pointer;
        text-align: center;
        font-weight: 500;
        transition: all 0.3s ease;
        user-select: none;
        color: #30cfbf;
        /*margin: 5px;*/
        font-size: 14px; /* same as btn-default */
        line-height: 1.42857; /* same vertical sizing */
    }

        /* Hover effect */
        .radio-container label:hover {
            border-color: #cf3072;
            color: #cf3072;
        }

    /* Checked effect */
    .radio-container input[type="radio"]:checked + label {
        background-color: #30cfbf;
        color: white;
    }

        .radio-container input[type="radio"]:checked + label:hover {
            border-color: #cf3072;
            color: #cf3072;
        }

    /* Pressed effect */
    .radio-container label:active {
        transform: translateY(1px);
    }

/*filter radiobutton ends*/

/* filter checkboxes start*/

.checkbox-container {
    display: inline-block;
    margin: 10px;
}

    /* Hide the actual checkbox */
    .checkbox-container input[type="checkbox"] {
        display: none;
    }

    /* Style the label to look like a button */
    .checkbox-container label {
        display: inline-block;
        padding: 4px 8px;
        /*border: 1px solid #015a9b;*/
        border: 1px solid #dcdcdc;
        border-radius: 20px;
        cursor: pointer;
        text-align: center;
        font-weight: 500;
        transition: all 0.3s ease;
        user-select: none;
        /*color: #015a9b;*/
        color: /*#7a7a7a;*/ #636363;
    }

        /* Hover effect */
        .checkbox-container label:hover {
            /*     border-color: #FF9500;
            color: #FF9500;*/
            background-color: #f0f0f0;
        }

    .checkbox-container input[type="checkbox"]:checked ~ label {
        /*        background-color: #015a9b;
        color: white;*/
        border-color: #015a9b;
        color: #015a9b;
        background-color: #f0f0f0;
    }

    /* Active/pressed effect */
    .checkbox-container label:active {
        transform: translateY(1px);
    }

.c-attribute-group-style {
    color: /* #015a9b;*/ /* #637887;*/ #526470;
    font-size: 16px;
    margin-left: 5px;
}

/*.ui-dialog {
    max-width: calc(100vw - 30px) !important;
}*/

/*#divFilter.ui-dialog-content {
    padding: 15px !important;
}*/

/*    filter checkboxes end*/

/*selector checkboxes starts - category*/

.checkbox-container-category {
    display: inline-block;
    margin: 10px;
}

    /* Hide the actual checkbox */
    .checkbox-container-category input[type="checkbox"] {
        display: none;
    }

    /* Style the label to look like a button */
    .checkbox-container-category label {
        display: inline-block;
        padding: 4px 8px;
        /* background-color: #ffffff;*/
        border: 1px solid #6d5a9b;
        border-radius: 20px;
        cursor: pointer;
        text-align: center;
        font-weight: 500;
        transition: all 0.3s ease;
        user-select: none;
        /* min-width: 120px;*/
        color: #6d5a9b;
    }

        /* Hover effect */
        .checkbox-container-category label:hover {
            border-color: #FF9500;
            /*    background-color: #FF9500;*/
            color: #FF9500;
        }

    .checkbox-container-category input[type="checkbox"]:checked ~ label {
        background-color: #6d5a9b;
        /*border-color: #6d5a9b;*/
        color: white;
    }

/* Active/pressed effect */
/*    .checkbox-container-category label:active {
        transform: translateY(1px);
    }*/

/*selector checkboxes ends - category*/


/*selector checkboxes starts - cAttribute*/
.checkbox-container-cAttribute {
    display: inline-block;
    margin: 10px;
}

    /* Hide the actual checkbox */
    .checkbox-container-cAttribute input[type="checkbox"] {
        display: none;
    }

    /* Style the label to look like a button */
    .checkbox-container-cAttribute label {
        display: inline-block;
        padding: 4px 8px;
        /* background-color: #ffffff;*/
        border: 1px solid #015a9b;
        border-radius: 20px;
        cursor: pointer;
        text-align: center;
        font-weight: 500;
        transition: all 0.3s ease;
        user-select: none;
        /* min-width: 120px;*/
        color: #015a9b;
    }

        /* Hover effect */
        .checkbox-container-cAttribute label:hover {
            border-color: #FF9500;
            /*       background-color: #FF9500;*/
            color: #FF9500;
        }

    .checkbox-container-cAttribute input[type="checkbox"]:checked ~ label {
        background-color: #015a9b;
        /*border-color: #28a745;*/
        color: white;
    }

/* Active/pressed effect */
/*    .checkbox-container-cAttribute label:active {
        transform: translateY(1px);
    }*/
/*selector checkboxes ends - cAttribute*/

.filter-style {
    background-color: #15bce8;
    /* #0e7c99;*/
    font-weight: 500;
    font-size: 12.8px;
    color: white;
    width: auto;
    float: right;
    padding: 1px 6px;
    border-radius: 10px;
    margin-right: 10px;
    cursor: pointer;
}

.filter-style-m {
    background-color: #15bce8;
    /* #0e7c99;*/
    font-weight: 600;
    font-size: 10.8px;
    color: white;
    width: auto;
    /*float: right;*/
    padding: 1px 6px;
    border-radius: 10px;
    /*margin-right: 5px;*/
    cursor: pointer;
}

.header-icons {
    /*color: #15BCE8;*/
    color: /*#bebebe;*/ #96aab4;
    fill: /*#bebebe;*/ #96aab4;
}

.header-icons2 {
    /*color: #15BCE8;*/
    color: white;
    fill: white;
}

.icon-color-fill-gray {
    color: #b3b3b3; /* #0e7c99;*/
    fill: #b3b3b3;
    /*fill: #808080;*/
}

.d-us-link {
    right: 0px;
    color: #15BCE8 /*#38A3F5*/ /*#1972e6*/;
    margin: 20px 0px 20px 30px;
    width: auto;
    float: left;
    font-size: /*15.8px;*/ 14px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    ;
}

.border-bottom-style {
    border-bottom: 1px solid #e6e6e6;
}

.border-top-style {
    border-top: 1px solid #e6e6e6;
}

.title-href-color {
    color: #212936;
}

.m-list-header-result {
    background: linear-gradient(to bottom, #e6f5fa, white);
}

.icon-standard {
    font-size: 20px !important;
    vertical-align: middle;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

/*filter start*/

.filter-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /*padding: 8px 12px;*/
    /*padding: 4px 6px;*/
    padding: 2px 6px;
    border: 1px solid #15BCE8;
    /*border-radius: 5px;*/
    border-radius: 5px;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    float: right;
    white-space: nowrap; /* Keeps all text on one line */
    height: 24px;
}

    .filter-button:hover {
        background-color: #f5f5f5;
        text-decoration: none;
    }

    .filter-button svg {
        display: block;
        flex-shrink: 0;
    }

.filter-text {
    line-height: 1;
    color: #15BCE8;
}

/*filter end*/

.search-info {
    padding: 20px;
    background-color: #f2f4f6;
    border-radius: 20px;
    padding-inline: 60px;
}

.title-list-categories {
    font-weight: 700;
    color: #333333;
    display: inline-flex;
    align-items: center;
    margin-bottom: auto;
    margin-top: auto;
    margin-left: 5px;
    min-height: 30px !important;
}

/*.my-frame {
    width: 645px;
    border: 1px solid #f8f8f8;*/ /*#f2f2f2;*/
/*border-radius: 10px;
    padding: 0 15px 15px 15px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}*/

.my-frame {
    width: 645px;
    border: 1px solid #eee; /* Trochu viditeľnejší okraj ako f8f8f8, aby definoval tvar */
    border-radius: 12px; /* Mierne zaoblenejšie rohy pôsobia modernejšie */
    padding: 20px; /* Viac priestoru vo vnútri */
    background: #fff;
    /* Modern "Soft Shadow" */
    /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1);*/
    /*box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.06);*/
    /* Jemný nádech do modra působí čistěji */
    box-shadow: 0 4px 15px rgba(20, 30, 50, 0.04);
    /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);*/
    transition: transform 0.2s ease; /* Bonus: light interaction */
}

/*.my-frame:hover {
        transform: translateY(-2px);*/ /* Pri prejdení myšou sa jemne "nadvihne" */
/*box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    }*/

.q-data-class {
    border: 1px solid #f2f4f6;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    width: 1000px;
    min-width: 1000px;
}

.q-data-class2 {
    background-color: #f2f4f6;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    width: 1000px;
    min-width: 1000px;
}


.q-data-class-m {
    border: 1px solid #f2f4f6;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    /*    width: 1000px;
    min-width: 1000px;*/
}

.q-data-class2-m {
    background-color: #f2f4f6;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    padding-left: 20px;
    padding-right: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    /*    width: 1000px;
    min-width: 1000px;*/
}

.remove-class {
    vertical-align: middle;
    color: #d97c95;
}

.add-class {
    vertical-align: middle;
    color: #7cd9d7;
}

.drag-drop-css {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
    color: #848381;
    font-weight: 100;
    font-size: 10px;
}

/*extended table start*/

.middle-text-top {
    font-size: 12px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.middle-text-center {
    font-size: 12px;
    font-weight: 200;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: gray;
}

.middle-text-bottom {
    font-size: 10px;
    font-weight: 200;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: gray;
}

.right-text-top {
    font-size: 12px;
    font-weight: 200;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: gray;
}

.right-icon-bottom {
}

.tr-height td {
    vertical-align: middle;
    height: 55px;
}

.left-image-url {
    height: 42px; /* 38 32px;*/
    width: auto;
    margin-right: 15px;
    border-radius: 10px;
    border: 1px solid #f2f4f6;
}

/*extended table ends*/