.mycat-course-list-line-content{
    max-width: 70% !important;
    color: var(--mycat-default-text-color);
}

.mycat-eshop-filter-input{
    height: 41px;
}

/****************************************************************************************************
***************************     HEADLINES, LABELS, TEXT, PLACEHOLEDRS     ***************************
****************************************************************************************************/
::placeholder {
    color: rgb(39, 172, 37);
}
.popup-one-company-headline{
    line-height: 25px;
    margin-top: 10px;
    width: 100%;
}
.popup-one-company-row{
    line-height: 20px;
    margin-top: -5px;
    margin-bottom: 5px;
}
.price-including-vat{
    font-size: var(--mycat-price-including-vat-font-size);
    color: var(--mycat-price-including-vat-text-color);

}

.price-without-vat{
    font-size: 15px;
}

.mycat-course-lise-headline-text{
    text-transform: var(--mycat-list-of-courses-headline-text-styling);
    color: var(--mycat-course-list-headline-text-color);
}

.mycat-course-detail-category-value-text{
    font-weight: var(--mycat-default-font-weight);
    font-family: var(--mycat-default-font-family);
    font-size: var(--mycat-course-category-value-text-size);
    color: var(--mycat-course-category-value-color);
}


.mycat-default-text{
    font-weight: var(--mycat-default-font-weight);
    font-family: var(--mycat-default-font-family);
    font-size: var(--mycat-default-text-size);
}

.mycat-form-input-warning{
    font-weight: var(--mycat-default-font-weight);
    font-family: var(--mycat-default-font-family);
    font-size: var(--mycat-default-text-size);
    color: var(--mycat-default-text-color);
    font-style: italic;
    margin-top: 0px;

}

.mycat-additional-data-triger{
    cursor:pointer;
    text-decoration: underline;
    font-style: italic;
}
.mycat-eshop-course-carousel-price{
    color: var(--mycat-headline-text-color);
    font-weight: 500;
    line-height: 1.3em;
    font-size: 20px;
}

.mycat-eshop-one-filter-param-area label{
    color: var(--mycat-filter-headline-text-color);
    font-weight: var(--mycat-filter-label-font-weight);
    line-height: 1.3em;
    text-transform: uppercase;
    font-size: var(--mycat-intermediate-headline-size);
    font-family: var(--mycat-headline-font-family);

}

.mycat-headline-smaller{
    color: var(--mycat-headline-text-color);
    font-weight: var(--mycat-intermediate-headline-font-weight);
    line-height: 1.3em;
    text-transform: uppercase;
    font-size:  var(--mycat-intermediate-headline-size);
    font-family: var(--mycat-headline-font-family);
}

.mycat-headline{
    color: var(--mycat-course-list-headline-text-color);
    font-weight: var(--mycat-big-headline-font-weight);
    line-height: 1.3em;
    text-transform: uppercase;
    font-size: var(--mycat-big-headline-size);
    font-family: var(--mycat-headline-font-family);
    padding-top: 10px;
    padding-right: 20px;
}

.mycat-eshop-course-carousel-decription{
    line-height: 1.3;
    margin-top: 18px;
}


.mycat_label
{
    margin-top: 20px;
    margin-bottom: 0px;
    font-weight: var(--mycat-default-font-weight);
    font-family: var(--mycat-default-font-family);
    font-size: var(--mycat-default-text-size);
    color: var(--mycat-default-text-color);
}


.wpcf7 label{
    color: var(--mycat-headline-text-color);
    font-weight: 500;
    text-transform: capitalize !important;
}

#course_name{
    border-radius: 3px;
    height: 41px;
    box-shadow: inset 0 0 0px #000000;
    width: 100%;
}

.one-course-data-part-smaller-price{
    color: var(--mycat-headline-text-color);
    font-weight: 500;
    width: 12%;
    font-size: 16px;
}



.mycat-eshop-header-one-item{
    flex-grow: 4;
}


.mycat_input
{
    color: var(--mycat-input-placeholder-color);
    font-size: var(--mycat-default-text-size);;
    font-family: var(--mycat-default-font-family);;
}

/****************************************************************************************************
*************************************       BUTTONS       *******************************************
****************************************************************************************************/

.popup-company-button{
    position: relative;
    font-weight: var(--mycat-standard-buttons-text-weight);
    font-size: var(--mycat-standard-buttons-text-size);
    font-family: var(--mycat-button-font-family);
    border-style: solid;
    border-width: var(--mycat-standard-buttons-border-width);
    padding: var(--mycat-standard-buttons-padding);
    border: none;
    cursor: pointer;
    border-radius: var(--mycat-standard-buttons-border-radius);
    box-shadow: var(--mycat-standard-buttons-box-shadow);
    fill: #ffffff;
    top: -7px;
}

.ares-button{
    position: relative;
    font-size: var(--mycat-standard-buttons-text-size);
    font-family: var(--mycat-button-font-family);
    font-weight: var(--mycat-standard-buttons-text-weight);
    cursor: pointer;
    background: white;
    border: 1px solid white;
    border-radius: var(--mycat-standard-buttons-border-radius);
    color: var(--mycat-input-gradient-background);
    height: 27px;
    bottom: 0px;
    display: flex;
    align-items: center;
}
.ares-button:hover{
    color: white;
    background: rgba(255, 0, 0, 0);
}
.ares-button-wrapper{
    margin-top: -51px;
    width: 100%;
    display: flex;
    justify-content: end;
    padding-right: 15px;
    margin-bottom: 29px;
}
.mycat-dashboard-button{
    font-weight: 600;
    font-size: 14px;
    color: white;
    border-style: solid;
    background-color:#524cff;
    padding: 7px 35px;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    fill: #ffffff;
}
.mycat-button-universal-settings-standard{
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: var(--mycat-standard-buttons-text-weight);
    font-size: var(--mycat-standard-buttons-text-size);
    font-family: var(--mycat-button-font-family);
    border-style: solid;
    border-width: var(--mycat-standard-buttons-border-width);
    padding: var(--mycat-standard-buttons-padding);
    border: none;
    cursor: pointer;
    border-radius: var(--mycat-standard-buttons-border-radius);
    box-shadow: var(--mycat-standard-buttons-box-shadow);
    fill: #ffffff;
    min-height: var(--mycat-button-height);
}

.mycat-button-universal-settings-small{
    color: var(--mycat-button-with-background-font-color);
    background-color: #e7a100;
    min-width: 120px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 1px 3px;
    border-radius: 3px;
    border: none;
    cursor: pointer;
}
.courseListButtonColumn{
    min-width:180px;
    width: var(--mycat-button-width);
}
.mycat-button-pagination{
    background: var(--mycat-submit-button-alternate-color);
    border: 1px solid var(--mycat-submit-button-alternate-color);
    color: var(--mycat-button-with-background-font-color);
    width: var(--mycat-button-width);
}

.mycat-button-pagination:hover{
    border: 1px solid var(--mycat-submit-button-alternate-color);
    color: var(--mycat-submit-button-alternate-color);
    background-color: var(--mycat-white-color);
}

.mycat-eshop-course-detail-purchase-button-positioning{
    position: relative;
    bottom: 45px;
    display: flex;
    justify-content: right;
    padding: var(--mycat-course-list-line-padding);
    width: 100%;
}

.mycat-eshop-purchase-button{
    background: var(--mycat-eshop-ordinary-button-color);
    border: 1px solid var(--mycat-eshop-ordinary-button-color);
    color: var(--mycat-button-with-background-font-color);
    width: var(--mycat-button-width);
    height: var(--mycat-button-height);
}

.mycat-eshop-purchase-button-course-detail{
    background: var(--mycat-eshop-course-detail-button-color);
    border: 1px solid var(--mycat-eshop-course-detail-button-color);
    color: var(--mycat-button-with-background-font-color);
    width: var(--mycat-button-width);
}

.mycat-eshop-purchase-button:hover{
    border: 1px solid var(--mycat-eshop-ordinary-button-color);
    color: var(--mycat-eshop-ordinary-button-color);
    background-color: var(--mycat-white-color);
}

.mycat-eshop-purchase-button-course-detail:hover{
    border: 1px solid var(--mycat-eshop-course-detail-button-color);
    color: var(--mycat-eshop-course-detail-button-color);
    background-color: var(--mycat-white-color);
}



.mycat-eshop-purchase-button-alternate{
    color: var(--mycat-button-with-background-font-color);
    background: var(--mycat-submit-button-alternate-color);
    border: 1px solid var(--mycat-submit-button-alternate-color);
    width: var(--mycat-button-width);
}

.mycat-eshop-purchase-button-course-detail-alternate{
    color: var(--mycat-button-with-background-font-color);
    background: var(--mycat-submit-button-course-detail-alternate-color);
    border: 1px solid var(--mycat-submit-button-course-detail-alternate-color);
    width: var(--mycat-button-width);
}

.mycat-eshop-purchase-button-alternate:hover{
    border: 1px solid var(--mycat-submit-button-alternate-color);
    color: var(--mycat-submit-button-alternate-color);
    background-color: var(--mycat-white-color);
}

.mycat-eshop-purchase-button-alternate-course-detail:hover{
    border: 1px solid var(--mycat-submit-button-course-detail-alternate-color);
    color: var(--mycat-submit-button-course-detail-alternate-color);
    background-color: var(--mycat-white-color);
}


.mycat-eshop-purchase-button-open{
    color: var(--mycat-eshop-ordinary-button-color);
    background-color: var(--mycat-white-color);
    border: 1px solid var(--mycat-eshop-ordinary-button-color);
    width: var(--mycat-button-width);
}

.mycat-eshop-purchase-button-open:hover{
    color: var(--mycat-eshop-ordinary-button-color);
    background-color: var(--mycat-white-color);
    border: 1px solid var(--mycat-eshop-ordinary-button-color);

}

.mycat-eshop-cancel-button{
    color: var(--mycat-eshop-ordinary-button-color);
    background-color: var(--mycat-white-color);
    border: 1px solid var(--mycat-eshop-ordinary-button-color);
    border-radius: var(--mycat-standard-buttons-border-radius);
    margin-left: 5px;
    width: 180px;
}

.mycat-eshop-cancel-button:hover{
    color:var(--mycat-button-with-background-font-color);
    background-color: var(--mycat-eshop-ordinary-button-color);
    border: 1px solid #ffffff;
}


.mycat-eshop-submit-button{
    color: var(--mycat-button-with-background-font-color);
    background: var(--mycat-eshop-ordinary-button-color);
    border: 1px solid var(--mycat-eshop-ordinary-button-color);
    width: 180px;
}

.mycat-eshop-submit-button:hover {
    color:var(--mycat-eshop-ordinary-button-color);
    background-color: var(--mycat-button-with-background-font-color);
    border: 1px solid var(--mycat-eshop-ordinary-button-color);

}

#mycat_submit_button{
    background: var(--mycat-eshop-course-detail-button-color);
    border: 1px solid var(--mycat-eshop-course-detail-button-color);
    color: var(--mycat-button-with-background-font-color);
}

#mycat_submit_button:hover{
    background-color: var(--mycat-white-color);
    border: 1px solid var(--mycat-eshop-course-detail-button-color);
    color: var(--mycat-eshop-course-detail-button-color);
}


.mycat-eshop-templates-change-status {
    color: var(--mycat-button-with-background-font-color);
    background-color: #e7a100;
    min-width: 120px;
    margin-left: 3px;
    margin-right: 3px;
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 1px 3px;
    border-radius: 3px;
}

.mycat-eshop-templates-change-status:hover{
    background-color: #e7a100;
}


.mycat-eshop-activation-button{
    min-width: 180px;
    background-color: #e7a100;
    color: white;
}

.mycat-eshop-activation-button:hover{
    background-color: #d19303;
    color: white;
}

.mycat-eshop-deactivation-button{
    min-width: 180px;
    background-color: #E65B65;
    color: white;

}

.mycat-eshop-add-translation > button {
    font-weight: 400;
    fill: #ffffff;
    color: #ffffff;
    background-color: #e7a100;
    border-style: solid;
    padding: 4px 12px;
    min-width: 100px;
    border: none;
    cursor: pointer;
    font-size: 12px;
    border-radius: 3px;
}

.mycat-eshop-add-translation > button:hover{
    background-color: var(--mycat-admin-button-active-color);
    height: 100%;
}

.mycat-popup-input-button-line > button{
    padding:  var(--mycat-small-buttons-padding);
    background-color: var(--mycat-admin-button-active-color);
    border: none;
    border-radius: var(--mycat-small-buttons-border-radius);
    font-weight: var(--mycat-standard-buttons-text-weight);
    cursor: pointer;
    color: var(--mycat-white-color);
}

.mycat-popup-input-button-line > button:hover{
    background-color: var(--mycat-admin-button-active-color);
}


.mycat-go-back-button{
    font-weight: var(--mycat-standard-buttons-text-weight);
    fill: #ffffff;
    color: #ffffff;
    background-color: var(--mycat-eshop-ordinary-button-color);
    border-style: solid;
    min-width: var(--mycat-button-width);
    border-width: var(--mycat-standard-buttons-border-width);
    border-radius: var(--mycat-standard-buttons-border-radius);
    box-shadow: var(--mycat-standard-buttons-box-shadow);
    padding: 9px 30px 9px 30px;
    border: none;
    cursor: pointer;
    font-size: var(--mycat-standard-buttons-text-size);
    margin-left: 14px;
}


.mycat-eshop-carousel-button{
    font-weight: var(--mycat-standard-buttons-text-weight);
    fill: #ffffff;
    color: #ffffff;
    background-color: var(--mycat-eshop-ordinary-button-color);
    border-style: solid;
    border-width: var(--mycat-standard-buttons-border-width);
    border-radius: var(--mycat-standard-buttons-border-radius);
    box-shadow: var(--mycat-standard-buttons-box-shadow);
    padding: 7px 48px 7px 48px;
    border: none;
    cursor: pointer;
    font-size: var(--mycat-standard-buttons-text-size);
}



/****************************************************************************************************
****************************************       TABLES      ******************************************
****************************************************************************************************/


.mycat-eshop-course-detail table th, table td{
    border-bottom: none !important;
}

.mycat-eshop-list-of-dashboard-courses-table{
    width: 99%;
    border-collapse: collapse;
}
.mycat-eshop-list-of-dashboard-courses-table tr{
    border-bottom: 1px solid #2271B1;
    height: 65px;
}
.mycat-eshop-list-of-dashboard-courses-table th{
    text-align: left;
}
.mycat-eshop-first-table-column-left-padding{
    padding-left: 6px;
}



/****************************************************************************************************
***************************************      INPUTS        ******************************************
****************************************************************************************************/

.mycat_input
{
    max-height: 50px;
}

.mycat_input input
{
    border: var(--mycat-registration-form-input-border);
    color: var(--mycat-input-font-color);
    font-family: var(--mycat-default-font-family);
    margin-top: 0px;
    width: 100%;
    height: 38px;
    font-size: var(--mycat-default-text-size);
    padding-left: 9px;
    border-radius: var(--select-input-texarea-border-radius) !important;
    background: var(--mycat-input-gradient-background);
    -webkit-box-shadow: inset 0 0px 0px var(--mycat-input-font-color) !important;
}

.mycat-eshop-filter-input{
    background: var(--mycat-filter-eshop-input-background);
    color: var(--mycat-filter-input-font-color);
    font-weight: var(--mycat-default-font-weight);
    font-family: var(--mycat-default-font-family);
    font-size: var(--mycat-default-text-size);
    border-radius: var(--select-input-texarea-border-radius);
    border: var(--mycat-registration-form-input-border);
    padding: var(--mycat-filter-input-padding);
    cursor: pointer;
    width: 100%;
}


.mycat-eshop-filter-input:placeholder
{
    color: var(--mycat-input-placeholder-color);
    font-size: var(--mycat-default-text-size);
    font-family: var(--mycat-default-font-family);
}

.mycat-eshop-filter-input option {
    color: var(--mycat-drop-down-select-options-font-color);
    font-size: var(--mycat-default-text-size);
    background: var(--mycat-drop-down-select-options-background-color) !important;
    cursor: pointer;
}

.mycat-eshop-filter-input.decorated option:hover {
    color: var(--mycat-drop-down-select-options-font-color-hover) !important;
    background: var(--mycat-drop-down-select-options-background-color-hover) !important;
}

.mycat-eshop-one-filter-param-area select input{
    margin-top: 6px !important;
    padding: 10px 10px !important;
    box-shadow: none !important;
    background-color: var(--mycat-headline-text-color) !important;
    border: var(--mycat-registration-form-input-border);
}



/****************************************************************************************************
*************************************        SELECTS        *****************************************
****************************************************************************************************/

.mycat_select select
{
    color: var(--mycat-input-font-color);
    width: 100%;
    height: 37px;
    font-size: var(--mycat-default-text-size);
    padding-left: 9px;
    padding-bottom: 0px;
    border-radius: var(--select-input-texarea-border-radius);
    cursor: pointer;
    background: var(--mycat-input-gradient-background);
    border: var(--mycat-registration-form-input-border);
    padding-top: 0px;
}

.mycat_select option{
    background: var(--mycat-drop-down-select-options-background-color);
}


.mycat_select {
    /* odstraní standardní šipku */

    -webkit-appearance: none;
    -moz-appearance: none;
}



/****************************************************************************************************
**************************************       TEXTAREAS        ***************************************
****************************************************************************************************/


.mycat_textarea textarea
{
    border: var(--mycat-registration-form-input-border);
    color: var(--mycat-input-font-color);
    width: 100%;
    height: 100px;
    font-size: var(--mycat-default-text-size);
    padding-left: 9px;
    resize: none;
    border-radius: var(--select-input-texarea-border-radius) !important;
    background: var(--mycat-input-gradient-background);
}

/****************************************************************************************************
*************************************       CHECKBOXES       ****************************************
****************************************************************************************************/

.checkbox_input input
{
    width: 23px;
    height: 23px;
    border: 2px solid black;
    cursor: pointer;
    border-radius: 2px;
}
.checkbox_input label
{
    position: relative;
    bottom: 0px;
    left: 5px;
    cursor: pointer;

}
.checkbox_input
{
    display: flex;
}

input[type=radio]:checked:before, input[type=checkbox]:checked:before {

    display: inline-block;
    vertical-align: middle;
    width: 16px;
    font-family: "Font Awesome 5 Free";
    text-rendering: auto;
    margin-left: -1px;
    margin-top: -1px;
    color: var(--mycat-headline-text-color) !important;
}

/****************************************************************************************************
***************************************       IMAGES       ******************************************
****************************************************************************************************/


.mycat-course-detail-main-image{
    width: 230px !important;
    height: 230px !important;
    border-radius: var(--mycat-course-detail-img-border-radius)!important;
    box-shadow: var(--mycat-img-box-shadow) !important;
    position: relative;
    top: -210px;
    left: 25px;
    margin-bottom: -150px;;
}

.mycat-course-detail-background-picture{
    width: 260px !important;
    height: 260px !important;
    box-shadow: none;
    position: relative;
    left: -15px;
}


.mycat-language-switch-icon-box > img{
    height: 30px !important;
    width: 30px !important;
    margin-left: 5px;
    cursor: pointer;
}

/****************************************************************************************************
****************************************       ICONS       ******************************************
****************************************************************************************************/

.mycat-eshop-course-status-icon-hidden{
    font-weight: 600;
    color: #22b12e;
}
.mycat-eshop-course-status-icon-shown{
    font-weight: 600;
    color: rgb(171, 10, 10);
}


/****************************************************************************************************
**************************      CONTAINER, WRAPPERS, ROW, LINES      ********************************
****************************************************************************************************/
.popup-one-company-right-div{
    display: flex;
    align-items: end;
    justify-content: end;
    width: 20%;
}
.popup-company-list-wrapper{
    display: flex;
    width: 100%;
}
.popup-one-company-wrapper{
    display: inline-flex;
    width: 100%;
}
.popup-one-company-left-div{
    display: block;
    justify-content: left;
    width: 80%;
}
@media (min-width: 650px){
    .mycat-eshop-filter-items-area-less-then-4-parameters{
        width: 100%;
        display: flex;
        gap: 15px;
    }
    .courseListButtonColumn{
        line-height: 35px;
    }
}
@media (max-width: 650px){
    .mycat-eshop-filter-items-area-less-then-4-parameters{
        width: 100%;
        display: grid;
        gap: 15px;
    }
    .mycat-course-detail-text-area > div {
        margin-top: 5px !important;
    }
    .mycat-eshop-filter-input{
        height: 40px;
    }
}
.mycat-course-detail-text-row{
    padding-bottom: 40px;
}


.mycat-course-price-in-couse-detail-area{
    display: flex;
    justify-content: start;
}
.bottom-page-spacer{
    margin-bottom: 60px;
}

.mycat-course-additional-data{
    width: 95%;
    display: block;
}
.mycat-course-detail-note-line{
    width: 100%;
    margin-top:20px;
}
.mycat-course-detail-note-area
{
    display: block;
    margin-top: 0px;
    width: 100%;
    text-align: left;
    padding-right: 25px;
}
.mycat_row_button
{
    width: 90%;
    max-width: 1100px;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 40px;
    margin-top: 20px;

}

.mycat_row_button button
{
    padding: 12px 28px;

}

.mycat-one-note
{
    padding-top: 7px;
    padding-bottom: 7px;
}
.mycat-eshop-course-carousel-method{
    margin-top: -1px;
    line-height: 1.3;
}



.mycat-eshop-area-for-button-showed-aboved-each-other{
    margin: 2px 0px;
}

.one-course-data-part-smaller-p{
    flex: 0 0 11%;
    font-size: var(--mycat-default-text-size);
}


#footer-bottom{
    position:fixed;
    bottom: 0px;
    width: 100%;
}


.mycat-eshop-course-detail{
    border-top: none;
    margin-top: var(--mycat-course-detail-area-margin-top);
    width: 100%;
    margin-bottom: var(--mycat-course-detail-area-margin-bottom);
    box-shadow: 2px 9px 20px -8px rgb(0 0 0 / 50%);
    border-radius: var(--mycat-areas-border-radius);
    background: var(--mycat-course-list-line-background-color);
}

.one-course-button-part{
    width: 13%;
    display: flex;
    justify-content: end;
    margin-top: -10px;
}

.one-course-data-top-part
{
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.one-course-row-wrapper{
    font-weight: var(--mycat-default-font-weight);
    font-family: var(--mycat-default-font-family);
    font-size: var(--mycat-default-text-size);
    border-top: none;
    margin-top: var(--mycat-course-list-line-box-marign-top);
    margin-bottom: var(--mycat-course-list-line-box-marign-bottom);
    box-shadow: var(--mycat-course-list-line-box-shadow);
    padding: var(--mycat-course-list-line-padding);
    border-radius: var(--mycat-areas-border-radius);
    column-gap: 25px;
    background: var(--mycat-course-list-line-background-color);


}

.one-course-data-part{
    display: flex;
    width: 100%;
    font-size: var(--mycat-default-text-size);
    column-gap: 25px;
}

.mycat-eshop-course-detail-row-data{
    flex-wrap: wrap;
    width: 100%;
    display: flex;
    align-content: flex-start;
    gap: 5%;
}


.mycat-eshop-course-detail-row-headline{
    font-size: var(--mycat-default-text-size);
    flex-wrap: wrap;
    width: 100%;
    display: flex;
    align-content: flex-start;
    gap: 5%;
}

.mycat-eshop-purchase-form-wrapper{
    margin-top: 30px;
    margin-bottom: 60px;
}


.mycat-eshop-table-headline-row{
    background-color: #2271B1;
    border-collapse: collapse;
    color: var(--mycat-white-color);
    height: 35px;
    color: white;
}


.mycat-eshop-course-carousel-detail
{
    box-shadow: 2px 11px 20px -8px rgb(0 0 0 / 50%);
    margin: 0px 6px 0px 6px;
    padding: 33px 33px 15px 33px;
    border-radius: 0px 0px 0px 20px;
    min-height: 350px;

}

.mycat-eshop-course-carousel-headline{
    color: var(--mycat-headline-text-color);
    font-size: var(--mycat-intermediate-headline-size);
    font-weight: 500;
    line-height: 1.3em;
    font-size: var(--mycat-big-headline-size);
    text-transform: uppercase;
}

.mycat-popup-headline
{
    font-size: var(--mycat-big-headline-size);
    margin-bottom: 10px;
    margin-top: 0px;
    padding-left: 15px;

}

.mycat-eshop-filter-wrapper{
    display: flex;
    width: 100%;
    justify-content: center;
}
.mycat-eshop-filter-row{
    width: 70%;
    max-width: 1100px;
    gap: 5%;
}

.mycat-eshop-filter-form{
    width: 70%;
    border: none;
    margin-bottom: 30px !important;
    box-shadow: 2px 11px 20px -8px rgb(0 0 0 / 50%);
    margin: 0px 6px 0px 6px;
    padding: 33px 33px 30px 33px;
    background: var(--mycat-filter-background);
}

.mycat-purchase-form-top-line{
    width: 70%;
}

.mycat-eshop-one-filter-param-area{
    flex-grow: 4;
}


.mycat-eshop-filter-submit-button-area{
    width: 100%;
    display: flex;
    justify-content: end;
    margin-top: 25px;

}
.list-of-courses-wrapper{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 50px;
    font-size: var(--mycat-default-text-size);
}

.list-of-courses-area{

    width: 70%;

}

.one-course-row{
    flex-wrap: wrap;
    width: 100%;
    display: flex;
    align-content: flex-start;
    gap: 5%;
}

.mycat_container
{
    display: flex;
    width: 100%;
    justify-content: center;

}

.mycat_row
{
    flex-wrap: wrap;
    width: 90%;
    max-width: 1100px;
    display: flex;
    align-content: flex-start;
    gap: 5%;

}


/* add together with the next update */

.one-course-row-wrapper-headline-area {
    color: var(--mycat-white-color);
    padding: 17px 23px 0px 33px;
    background: var(--mycat-headline-gradient-background);
}

.mycat-course-additional-data-area
{
    width: 100%;
}

.mycat-course-additional-data-trigger-area
{
    margin-bottom: -15px;
    margin-top: 20px;
    width: 100%;
}

.mycat-go-back-button-area{
    width: 50%;
    padding: 3px 7px;
    display: inline-flex;
    justify-content: flex-start;
}


.mycat-course-detail-price-line{
    width: 100%;
    text-align: left;
    margin: 15px 0px;
    font-weight: var(--mycat-default-font-weight);
    font-family: var(--mycat-default-font-family);
    font-size: var(--mycat-default-text-size);

}

.mycat-course-detail-price-line-without-vat{
    width: 100%;
    text-align: left;
    margin: 15px 0px -15px 0px;
    font-weight: var(--mycat-default-font-weight);
    font-family: var(--mycat-default-font-family);
    font-size: var(--mycat-default-text-size);
}

.one-course-detail-button-line{
    width: 100%;
    display: flex;
    justify-content: end;
    margin-top: -10px;
}

.mycat-eshop-hide-course-detail
{
    display: none;
}

.mycat-course-detail-text-area{
    width: 100%;
}
.mycat-course-detail-image-row{
    gap: 10px;
    width: 25%;
    min-width: 320px;
    padding: 10px;
}



.mycat-purchase-form-top-line-wrapper{
    display: flex;
    width: 100%;
    margin-bottom: 20px;
}
.mycat-purchase-form-top-line{
    display: flex;
    margin: auto;
    justify-content: right;

}

.mycat-language-switch-icon-area{
    width: 50%;
    padding: 3px 7px;
    display: inline-flex;
    justify-content: flex-end;
}


.mycat-course-detail-text-area > div {
    gap: 10px;
    margin-top: 15px;
}

.mycat-course-detail-container-headline{
    width: 100%;
    color: var(--mycat-white-color);
    margin: auto;
    padding-bottom: 20px;
    padding-top: 12px;
    padding-left: 28px;
    margin-bottom: 17px;
    background: var(--mycat-headline-gradient-background);

}

#mycat-purchase-form-area{

    box-shadow: var(--mycat-standard-buttons-box-shadow);
    margin-top: 0px;
    margin-bottom: 90px !important;
    display: block !important;
    border-radius: var(--mycat-areas-border-radius);
    background: var(--mycat-course-list-line-background-color);
    padding-top: 35px !important;
}

#mycat-purchase-form-area .mycat-purchase-form-top-line{
    width: 98% !important;
}

.mycat-purchase-form-area{

    box-shadow: 2px 7px 20px -8px rgb(0 0 0 / 50%);
    margin-top: 18px !important;
    margin-bottom: 13px !important;

}

.list-of-courses-headline-wrapper{
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
}

.mycat-eshop-list-of-courses-headline{
    border-top: none;
    margin-top: 18px !important;
    margin-bottom: -15px !important;
    box-shadow: 2px 7px 20px -8px rgb(0 0 0 / 50%);
    padding: 13px 23px 15px 33px;
    display: flex;
    width: 70%;
    background: var(--mycat-headline-gradient-background);
    color: var(--mycat-white-color);

}

.mycat-eshop-row{
    display: flex;
    width: 100%;
}



/****************************************************************************************************
*************************************        RESPONSE      ******************************************
****************************************************************************************************/



/************************************       0 - 551px       *****************************************/

@media (max-width: 551px) {

    .mycat-course-detail-text-row {
        padding-bottom: 30px;

    }

    .mycat_column .mycat-headline-smaller{
        padding-top: 40px;
    }

    .mycat-eshop-filter-items-area{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(1, minmax(30%, 1fr));
        grid-column-gap: 15px;
        grid-row-gap: 15px;
    }

    .hideOnSmallScreen{
        display: none !important;
    }

    .mycat-pagination-area-in-course-list{
        width: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 10px;
        margin-top: 55px;
    }

    .mycat-course-detail-container{
        position: relative;
        display: flex;
        margin: auto;
        padding: var(--mycat-course-list-line-padding);
    }


    .mycat-course-detail-text-row{

        display: block;
        min-width: 100%;
    }

    .mycat-course-detail-text-area{
        gap: 0px;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }

    .mycat-course-detail-image-row{
        display: none;
    }

    .one-course-row-wrapper{
        display: none;
    }

    .mycat_column
    {
        flex-grow: 1;
        width: 100%;
    }

    .mycat-eshop-open-course-detail-button{
        padding: 7px 30px 7px 30px;
        margin-left: 20px;
        width: 130px;
    }

    .mycat-eshop-submit-button{

        padding: 4px 30px 4px 30px;
        border: none;
        width: 180px;
    }

    .mycat-eshop-course-carousel-detail
    {
        margin-top: 30px;
    }

    .mycat-eshop-course-carousel-price{
        position:absolute;
        bottom: 95px;
    }

    .mycat-eshop-course-carousel-button-wrapper{
        position: absolute;
        bottom: 40px;
        margin-top: 22px;
    }

    .list-of-courses-area {
        width: 95%;
    }
    .mycat-eshop-filter-form{
        width: 95%;
    }
    .mycat-purchase-form-top-line{
        width: 95%;
    }

    .mycat-eshop-course-carousel-area{
        display: block;


    }
    .mycat-eshop-course-carousel-detail
    {
        width: 100%;
    }

    .mycat-purchase-form-area
    {

        padding: 5px 5px !important;
    }
}



/************************************      551px - 751px      *****************************************/


@media (min-width: 551px) and (max-width: 751px) {

    .mycat-eshop-filter-items-area{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(25%, 1fr));
        grid-column-gap: 15px;
        grid-row-gap: 15px;
    }


    .mycat-pagination-area-in-course-list{
        width: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 10px;
        margin-top: 35px;
    }

    .mycat-course-detail-text-row{

        display: block;
        min-width: 100%;
    }

    .mycat-course-detail-container{
        position: relative;
        display: flex;
        padding: var(--mycat-course-list-line-padding);
        margin: auto;
    }


    .mycat-course-detail-text-area {
        gap: 10px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .mycat-course-detail-image-row{
        display: none;
    }

    .one-course-row-wrapper{
        display: none;
    }

    .mycat_column
    {
        flex-grow: 1;
        width: 100%;
    }

    .mycat-eshop-open-course-detail-button{
        padding: 7px 30px 7px 30px;
        margin-left: 20px;
        width: 130px;
    }

    .mycat-eshop-submit-button{

        padding: 4px 30px 4px 30px;
        border: none;
        width: 180px;
    }

    .mycat-eshop-course-carousel-detail
    {
        margin-top: 30px;
    }

    .mycat-eshop-course-carousel-price{
        position:absolute;
        bottom: 95px;
    }

    .mycat-eshop-course-carousel-button-wrapper{
        position: absolute;
        bottom: 40px;
        margin-top: 22px;
    }

    .list-of-courses-area {
        width: 95%;
    }
    .mycat-eshop-filter-form{
        width: 95%;
    }
    .mycat-purchase-form-top-line{
        width: 95%;
    }

    .mycat-eshop-course-carousel-area{
        display: block;


    }
    .mycat-eshop-course-carousel-detail
    {
        width: 100%;
    }

    .mycat-purchase-form-area
    {

        padding: 5px 5px !important;
    }
}



/************************************      751px - 851px      *****************************************/


@media (min-width: 751px) and (max-width: 851px) {

    .mycat-eshop-filter-items-area{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(25%, 1fr));
        grid-column-gap: 15px;
        grid-row-gap: 15px;
    }


    .mycat-pagination-area-in-course-list{
        width: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        margin-top: 35px;
    }

    .mycat-course-detail-text-row{

        display: block;
        min-width: 100%;
    }

    .mycat-course-detail-container{
        position: relative;
        display: flex;
        padding: var(--mycat-course-list-line-padding);
        margin: auto;
    }


    .mycat-course-detail-text-area {
        gap: 10px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .mycat-course-detail-image-row{
        display: none;
    }

    .one-course-row-wrapper{
        display: none;
    }

    .mycat_column
    {
        flex-grow: 1;
        width: 100%;
    }

    .mycat-eshop-open-course-detail-button{
        padding: 7px 30px 7px 30px;
        margin-left: 20px;
        width: 130px;
    }

    .mycat-eshop-submit-button{

        padding: 4px 30px 4px 30px;
        border: none;
        width: 180px;
    }

    .mycat-eshop-course-carousel-detail
    {
        margin-top: 30px;
    }

    .mycat-eshop-course-carousel-price{
        position:absolute;
        bottom: 95px;
    }

    .mycat-eshop-course-carousel-button-wrapper{
        position: absolute;
        bottom: 40px;
        margin-top: 22px;
    }

    .list-of-courses-area {
        width: 95%;
    }
    .mycat-eshop-filter-form{
        width: 95%;
    }
    .mycat-purchase-form-top-line{
        width: 95%;
    }

    .mycat-eshop-course-carousel-area{
        display: block;


    }
    .mycat-eshop-course-carousel-detail
    {
        width: 100%;
    }

    .mycat-purchase-form-area
    {

        padding: 5px 5px !important;
    }


}


/************************************      851px - 1001px      *****************************************/


@media (min-width: 851px) and (max-width: 1001px) {

    .mycat-eshop-filter-items-area{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(25%, 1fr));
        grid-column-gap: 15px;
        grid-row-gap: 15px;
    }

    .mycat-pagination-area-in-course-list{
        width: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        margin-top: 35px;
    }

    .mycat-course-detail-text-row{

        display: block;
        min-width: 100%;
    }

    .mycat-course-detail-container{
        position: relative;
        display: flex;
        padding: var(--mycat-course-list-line-padding);
        margin: auto;
    }


    .mycat-course-detail-text-area {
        gap: 10px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .mycat-course-detail-image-row{
        display: none;
    }

    .mycat_column
    {
        flex-grow: 2;
        width: 45%;
    }

    .mycat-eshop-open-course-detail-button{
        padding: 7px 30px 7px 30px;
        margin-left: 20px;
        width: 130px;
    }

    .mycat-eshop-course-carousel-price{
        position:absolute;
        bottom: 95px;
    }

    .mycat-eshop-course-carousel-button-wrapper{
        position: absolute;
        bottom: 40px;
        margin-top: 22px;
    }

    .one-course-button-part
    {
        width: 13%;
    }
    .one-course-row-wrapper
    {
        display: none;
    }
    .list-of-courses-area {
        width: 85%;
    }
    .mycat-eshop-filter-form{
        width: 85%;
    }
    .mycat-purchase-form-top-line{
        width: 85%;
    }
    .mycat-eshop-course-carousel-area{
        display: flex;


    }
    .mycat-eshop-course-carousel-detail
    {
        width: 50%;
    }
    .mycat-purchase-form-area{

        padding: 33px 23px 15px 33px  !important;;
    }

}


/************************************     1001px - 1150px      *****************************************/




@media (min-width: 1001px) and (max-width: 1151px) {

    .mycat-eshop-filter-items-area{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(25%, 1fr));
        grid-column-gap: 15px;
        grid-row-gap: 20px;
    }
    .hideOnBigScreen{
        display: none !important;
    }

    .mycat-pagination-area-in-course-list{
        width: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        margin-top: 20px;
    }
    .mycat-course-detail-text-area {
        gap: 10px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .mycat-course-detail-text-row{

        display: block;
        min-width: 100%;
    }

    .mycat-course-detail-container{
        position: relative;
        display: flex;
        padding: var(--mycat-course-list-line-padding);
        margin: auto;
    }

    .mycat-course-detail-image-row{
        display: none;
    }

    .one-course-row-wrapper{
        display: flex;
    }

    .mycat_column
    {
        flex-grow: 2;
        width: 45%;
    }

    .mycat-eshop-open-course-detail-button{
        padding: 7px 30px 7px 30px;
        margin-left: 20px;
        width: 130px;
    }

    .mycat-eshop-course-carousel-price{
        position:absolute;
        bottom: 95px;
    }

    .mycat-eshop-course-carousel-button-wrapper{
        position: absolute;
        bottom: 40px;
        margin-top: 22px;
    }

    .one-course-button-part
    {
        width: 13%;
    }
    .list-of-courses-area {
        width: 85%;
    }
    .mycat-eshop-filter-form{
        width: 85%;
    }
    .mycat-purchase-form-top-line{
        width: 85%;
    }
    .mycat-eshop-hidden
    {
        display: none;
    }
    .mycat-eshop-course-carousel-area{
        display: flex;


    }
    .mycat-eshop-course-carousel-detail
    {
        width: 50%;
    }
    .mycat-purchase-form-area{

        padding: 33px 23px 15px 33px  !important;;
    }
}

/************************************     1151px - 1301px      *****************************************/

@media (min-width: 1151px) and (max-width: 1301px) {

    .mycat-course-list-line-content {
        padding-top: 7px;
        max-width: 80%;
    }
    .mycat-eshop-filter-items-area{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(3, minmax(25%, 1fr));
        grid-column-gap: 15px;
        grid-row-gap: 20px;
    }

    .hideOnBigScreen{
        display: none !important;
    }

    .mycat-pagination-area-in-course-list{
        width: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        margin-top: 20px;
    }

    .mycat-course-detail-text-row{

        display: block;
        min-width: 100%;
    }

    .mycat-course-detail-text-area {
        gap: 10px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .mycat-course-detail-container{
        position: relative;
        display: flex;
        padding: var(--mycat-course-list-line-padding);
        margin: auto;
    }

    .mycat-course-detail-image-row{
        display: none;
    }

    .one-course-row-wrapper{
        display: flex;
    }

    .mycat_column
    {
        flex-grow: 2;
        width: 45%;
    }

    .mycat-eshop-open-course-detail-button{
        margin-left: 20px;
        padding: 7px 30px 7px 30px;
        width: 150px;
    }

    .mycat-eshop-course-carousel-price{
        position:absolute;
        bottom: 95px;
    }

    .mycat-eshop-course-carousel-button-wrapper{
        position: absolute;
        bottom: 40px;
        margin-top: 22px;
    }

    .one-course-button-part
    {
        width: 13%;
    }
    .list-of-courses-area {
        width: 85%;
    }
    .mycat-eshop-filter-form{
        width: 85%;
    }
    .mycat-purchase-form-top-line{
        width: 85%;
    }
    .mycat-eshop-hidden
    {
        display: none;
    }
    .mycat-eshop-course-carousel-area{
        display: flex;


    }
    .mycat-eshop-course-carousel-detail
    {
        width: 50%;
    }
    .mycat-purchase-form-area{

        padding: 33px 23px 15px 33px  !important;;
    }

}

/************************************     1301px - 1599px      *****************************************/


@media (min-width: 1301px) and (max-width: 1599px) {

    .mycat-course-list-line-content {
        padding-top: 7px;
        max-width: 80%;
    }
    .mycat-eshop-filter-items-area{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(17%, 1fr));
        grid-column-gap: 15px;
        grid-row-gap: 25px;
    }
    .hideOnBigScreen{
        display: none !important;
    }

    .mycat-pagination-area-in-course-list{
        width: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        margin-top: 20px;
    }

    .mycat-course-detail-text-row{

        display: block;
        min-width: 66%;
    }

    .mycat-course-detail-text-area {
        gap: 10px;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }

    .mycat-course-detail-container{
        position: relative;
        display: flex;
        padding: var(--mycat-course-list-line-padding);
        margin: auto;
    }

    .mycat-course-detail-image-row{
        display: block;
    }

    .one-course-row-wrapper{
        display: flex;
    }

    .mycat_column
    {
        flex-grow: 2;
        width: 45%;
    }

    .mycat-eshop-open-course-detail-button{
        padding: 7px 40px 7px 40px;
        width: 180px;
    }

    .mycat-eshop-course-carousel-price{
        position:absolute;
        bottom: 95px;
    }

    .mycat-eshop-course-carousel-button-wrapper{
        position: absolute;
        bottom: 40px;
        margin-top: 22px;
    }

    .one-course-button-part
    {
        width: 13%;
    }
    .list-of-courses-area {
        width: 85%;
    }
    .mycat-eshop-filter-form{
        width: 85%;
    }
    .mycat-purchase-form-top-line{
        width: 85%;
    }
    .mycat-eshop-hidden
    {
        display: none;
    }
    .mycat-eshop-course-carousel-area{
        display: flex;


    }
    .mycat-eshop-course-carousel-detail
    {
        width: 50%;
    }
    .mycat-purchase-form-area{

        padding: 33px 23px 15px 33px  !important;;
    }
}

/************************************     1600px - -------      *****************************************/

@media (min-width: 1600px){

    .mycat-course-list-line-content {
        padding-top: 7px;
        max-width: 80%;
    }
    .mycat-eshop-filter-items-area{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(4, minmax(17%, 1fr));
        grid-column-gap: 15px;
        grid-row-gap: 25px;
    }
    .hideOnBigScreen{
        display: none !important;
    }

    .mycat-pagination-area-in-course-list{
        width: 100;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 60px;
        margin-top: 20px;
    }

    .mycat-course-detail-text-row{

        display: block;
        min-width: 70%;
    }

    .mycat-course-detail-text-area {
        gap: 10px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
    }

    .mycat-course-detail-container{
        position: relative;
        display: flex;
        padding: var(--mycat-course-list-line-padding);
        margin: auto;
    }

    .mycat-course-detail-image-row{
        display: block;
    }

    .one-course-row-wrapper{
        display: flex;
    }

    .mycat_column
    {
        flex-grow: 2;
        width: 45%;
    }

    .mycat-eshop-open-course-detail-button{
        padding: 7px 40px 7px 40px;
        width: 180px;
    }
    .mycat-eshop-course-carousel-price{
        position:absolute;
        bottom: 100px;
    }

    .mycat-eshop-course-carousel-button-wrapper{
        position: absolute;
        bottom: 40px;
        margin-top: 22px;
    }
    .one-course-button-part
    {
        width: 13%;
    }
    .list-of-courses-area {
        width: 70%;
    }
    .mycat-eshop-filter-form{
        width: 70%;
    }
    .mycat-purchase-form-top-line{
        width: 70%;
    }
    .mycat-eshop-hidden
    {
        display: none;
    }
    .mycat-eshop-course-carousel-area{
        display: flex;


    }
    .mycat-eshop-course-carousel-detail
    {
        width: 50%;
    }
    .mycat-purchase-form-area{

        padding: 33px 23px 15px 33px  !important;;
    }
}


/****************************************************************************************************
***************************************       POPUPS       ******************************************
****************************************************************************************************/

.mycat-notification-popup-headline-area{
    width: 100%;
    position: sticky;
    top: -20px;
    background-color: white;
    margin-top: -20px;
    padding-top: 20px;

}
.mycat-popup-area{
    display: flex;
    position: fixed;
    bottom: -50%;
    right: 0%;
    align-items: center;
    justify-content: center;
    width: 100%;
    z-index: 10;
}

.mycat-notification-popup #field_for_notifications_and_warnings {
    padding-left: 20px;
    padding-top: 15px;
    font-family: var(--mycat-default-font-family);
    color: var(--mycat-default-text-color);
    font-size: var(--mycat-course-category-value-text-size);
}

.mycat-notification-popup
{
    background-color: white;
    width: 50%;
    min-width: 400px;
    max-width: 550px;
    min-height: 250px;
    max-height: 250px;
    position: fixed;
    top: calc(50vh - 125px);
    margin-left: 25%;
    margin-right: 25%;
    padding: 20px;
    border: none;
    box-shadow: 2px 7px 20px -8px rgb(0 0 0 / 50%);
    overflow-y: auto;
    border-radius: 7px;
}

.mycat-closing-cross-popup{
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 19px;
    font-weight: 600;
    position: absolute;
    right: 20px;
    top: 14px;
    cursor: pointer;
}

.mycat-closing-cross {
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 25px;
    font-weight: 600;
    position: absolute;
    right: 20px;
    top: 8px;
    cursor: pointer;
}

.mycat-popup-input-line{
    width: 100%;
    display: flex;
    margin: 30px 0px;

}

.mycat-popup-input-line > input{
    width: 100%;
    border: none;
    height: 31px;
    border-radius: 3px;
    padding-left: 8px;
    font-size: 15px;
    color: white;
    font-weight: 600;
    background-color: #185D96;

}

.mycat-popup-with-input
{
    background-color: #F0F0F1;
    width: 50%;
    min-width: 250px;
    max-width: 350px;
    min-height: 12%;
    position: fixed;
    border-radius: 3px;
    top: calc(50% - 100px);
    margin-left: 25%;
    margin-right: 25%;
    padding: 20px;
    border: none;
    box-shadow: 2px 8px 23px 0px rgba(0,0,0,0.6);
    -webkit-box-shadow: 2px 8px 23px 0px rgba(0,0,0,0.6);
    -moz-box-shadow: 2px 8px 23px 0px rgba(0,0,0,0.6);
}

.mycat-popup-input-button-line{
    width: 100%;
    display: flex;
    justify-content: right;
    margin: 25px 0px;
}


/****************************************************************************************************
***************************************       SPINNER       *****************************************
****************************************************************************************************/

.mycat-spinner {
    display: flex;
    position: fixed;
    left: calc(50vw - 50px);
    top: calc(50vh - 50px);
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    transform: translate(-50%, -50%);
}

.mycat-spinner::before {
    content: "";
    border-radius: 50%;
    border: 11px solid #f3f3f3;
    border-top: 11px solid #3498db;
    width: 100px;
    height: 100px;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    display: none;
    z-index: 2;
}


/****************************************************************************************************
*************************************      CUSTOM STYLES      ***************************************
*****************************************************************************************************
*********    CUSTOM COLORS, FONT-FAMILIES, FONT-SIZES, BORDER-RADIUS, BACKGROUNDS etc.   ************
****************************************************************************************************/

.display-non {
    display: none;
}

.mycat-display-none
{
    display: none;
}
.mycat-disply-flex
{
    display: flex;
}

.mycat-curtain{
    opacity: 45%;
}

@media(min-width: 1000px){
    .showOnlyOnSmallerScreenThan1000px{
        display: none !important;
    }
}



/****************************************************************************************************
***********************************       UNCLASSIFIABLE       *************************************
****************************************************************************************************/



#footer-widgets{
    display: none;
}

.aslan-menu-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

/****************************************************************************************************
****************************************       RESPONSE       ***************************************
****************************************************************************************************/



@media(min-width: 1000px) and (max-width: 1200px){
    .mycat-course-detail-category-value-text{
        font-size: calc(var(--mycat-course-category-value-text-size) - 1px );
    }
    .mycat-headline-smaller{
        font-size: calc(var(--mycat-intermediate-headline-size) - 1px );
    }
    .mycat-default-text {
        font-size: calc(var(--mycat-default-text-size) - 1px );
    }
    .mycat-button-universal-settings-standard{
        font-size: var(--mycat-standard-buttons-text-size);
    }
    .list-of-courses-wrapper {
        font-size: calc(var(--mycat-default-text-size) - 1px);
    }
    .mycat-headline{
        font-size: calc(var(--mycat-big-headline-size) - 1px);
    }
    .price-including-vat {
        font-size: calc(var(--mycat-price-including-vat-font-size) - 1px);
    }
    .mycat-course-detail-price-line-without-vat {
        font-size: calc(var(--mycat-default-text-size) - 1px);
    }
    .mycat-course-detail-price-line {
        font-size: calc(var(--mycat-default-text-size) - 1px);
    }
    .mycat-button-universal-settings-standard{
        min-height: var(--mycat-button-height);
    }

}

@media(min-width: 550px) and (max-width: 1000px){
    .mycat-course-detail-category-value-text{
        font-size: calc(var(--mycat-course-category-value-text-size) - 1px );
    }
    .mycat-headline-smaller{
        font-size: calc(var(--mycat-intermediate-headline-size) - 1px );
    }
    .mycat-default-text {
        font-size: calc(var(--mycat-default-text-size) - 1px );
    }
    .mycat-button-universal-settings-standard{
        font-size: var(--mycat-standard-buttons-text-size);
    }
    .list-of-courses-wrapper {
        font-size: calc(var(--mycat-default-text-size) - 1px);
    }
    .mycat-headline{
        font-size: calc(var(--mycat-big-headline-size) - 1px);
    }
    .price-including-vat {
        font-size: calc(var(--mycat-price-including-vat-font-size) - 1px);
    }
    .mycat-course-detail-price-line-without-vat {
        font-size: calc(var(--mycat-default-text-size) - 1px);
    }
    .mycat-course-detail-price-line {
        font-size: calc(var(--mycat-default-text-size) - 1px);
    }
    .mycat-button-universal-settings-standard{
        min-height: calc(var(--mycat-button-height) - 5px);
    }
}

@media(max-width: 550px){
    .mycat-course-detail-category-value-text{
        font-size: calc(var(--mycat-course-category-value-text-size) - 2px );
    }
    .mycat-headline-smaller{
        font-size: calc(var(--mycat-intermediate-headline-size) - 2px );
    }
    .mycat-default-text {
        font-size: calc(var(--mycat-default-text-size) - 2px );
    }
    .mycat-button-universal-settings-standard{
        font-size: var(--mycat-standard-buttons-text-size);
    }
    .list-of-courses-wrapper {
        font-size: calc(var(--mycat-default-text-size) - 2px);
    }
    .mycat-headline{
        font-size: calc(var(--mycat-big-headline-size) - 2px);
    }
    .price-including-vat {
        font-size: calc(var(--mycat-price-including-vat-font-size) - 2px);
    }
    .mycat-course-detail-price-line-without-vat {
        font-size: calc(var(--mycat-default-text-size) - 2px);
    }
    .mycat-course-detail-price-line {
        font-size: calc(var(--mycat-default-text-size) - 2px);
    }
    .mycat-button-universal-settings-standard{
        min-height: calc(var(--mycat-button-height) - 8px);
    }
}

#price_with_discount{
    font-weight: 600;
    font-size: var(--mycat-price-including-vat-font-size);
    color: var(--mycat-price-including-vat-text-color);
}

.checkbox_input.mycat-default-text{
    margin-bottom: 2px !important;
}

.terms-additional-area-text.mycat-default-text{
    margin-bottom: 0px !important;
    margin-top: -2px !important;
}
.field_for_notifications_and_warnings p{
    margin: 0px 0 10px;
}

.no-courses-available-notification-wrapper{
    margin-top: 30px;
}

.mycat-notification-area {
    display: flex;
    position: absolute;
    top: calc(50vh - 75px);
    left: calc(50vw - 200px);
    justify-content: center;
    align-items: center;
    width: 400px;
    height: 150px;
    background: #912e2e;

}
.mycat-notification-content {
    color: white;
}
.no-courses-available-notification-wrapper{
    display: flex;
    justify-content: start;
    align-items: center;
    height: 120px;
    padding: 50px;
}
.checkbox_input a {
    cursor: pointer;
}