/****   buttons **********/

/* inner button icons */
div.icon 
{
    width: 16px;
    height: 16px;
    display:inline-block;
    vertical-align:bottom;
    margin-right: 4px;
}

div.visualIcon {
    height: 16px;
    display:inline-block;
    vertical-align:bottom;
}
/*div.icon-disabled
{
    background-position: 0 -32px;
}

.js-relative-pos {
    background-position: 0 -32px;
}*/

div.undoIcon {
    background-image: url('/admin/Content/Img/Main/UndoIcon.png');
    background-repeat: no-repeat;
}
div.addIcon {
    background-image: url('/admin/Content/Img/Main/AddIcon.png');
    background-repeat: no-repeat;
}
div.cancelIcon {
    background-image: url('/admin/Content/Img/Main/CancelIcon.png');
    background-repeat: no-repeat;
}
div.preDefine {
    background-image: url('/admin/Content/Img/Main/PredefinedIcon.png');
    background-repeat: no-repeat;
}

div.uploadIcon {
    background-image: url('/admin/Content/Img/Main/uploadButton.png');
    background-repeat: no-repeat;
}
/* end inner button icons */

button {
    font-family: "Poppins", Sans-Serif;    
}

button.grey, input.grey
{
    background-color:  #FFFFFF;
    /*background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#dadada));*/ /* Saf4+, Chrome */
    /*background-image: -webkit-linear-gradient(top, #f0f0f0, #dadada);
    background-image: -moz-linear-gradient(top, #f0f0f0, #dadada);
    background-image: -ms-linear-gradient(top, #f0f0f0, #dadada);
    background-image: -o-linear-gradient(top, #f0f0f0, #dadada);
    background-image: linear-gradient(top, #f0f0f0, #dadada);*/
    border: 1px solid #623875;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    /*-webkit-box-shadow: inset 0 1px 0 0 #fefefe;
    -moz-box-shadow: inset 0 1px 0 0 #fefefe;
    -ms-box-shadow: inset 0 1px 0 0 #fefefe;
    -o-box-shadow: inset 0 1px 0 0 #fefefe;
    box-shadow: inset 0 1px 0 0 #fefefe;*/
    color: #623875;
    text-align: center;
    /*text-shadow: 0 -1px 0 #dddddd;*/
    text-decoration: none;
    padding-left: 8px;
    padding-right: 8px;
    height:32px;
    margin-right: 15px;
}

button.defaultgrey
{
    background-color: #ffffff;
    border: 1px solid #623875;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    /*-webkit-box-shadow: inset 0 1px 0 0 #fefefe;
    -moz-box-shadow: inset 0 1px 0 0 #fefefe;
    -ms-box-shadow: inset 0 1px 0 0 #fefefe;
    -o-box-shadow: inset 0 1px 0 0 #fefefe;
    box-shadow: inset 0 1px 0 0 #fefefe;*/
    color: #623875;
    text-align: center;
    /*text-shadow: 0 -1px 0 #dddddd;*/
    text-decoration: none;
    padding-left: 8px;
    padding-right: 8px;
    height:24px;
    margin-right: 5px;
}

button.arrow
{
    background: transparent;
    height:24px;
    width: 20px;
    margin-left: -5px;
}
button.arrow:hover, button.arrow.focus {
    opacity: 0.5;
    cursor: pointer;
}

button.grey:hover, button.grey:focus,  input.grey:hover, input.grey:focus
{
    border: 1px solid #623875;
    background-color: #EFEBF1;
    color: #623875;
    /*background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#f3f3f3)); /* Saf4+, Chrome */
    /*background-image: -webkit-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -moz-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -ms-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: -o-linear-gradient(top, #fefefe, #f3f3f3);
    background-image: linear-gradient(top, #fefefe, #f3f3f3);*/
    cursor: pointer;
}

button.defaultgrey:hover, button.defaultgrey:focus {
    border: 1px solid #623875;
    background-color: #EFEBF1;

    cursor: pointer;
}


button.grey:active, input.grey:active
{
    border: 1px solid #623875;
    background-color: #EFEBF1;
    color: #623875;
    /*-webkit-box-shadow: inset 0 0 4px 4px #e0e0e0, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 4px 4px #e0e0e0, 0 1px 0 0 #eeeeee;
    -ms-box-shadow: inset 0 0 4px 4px #e0e0e0, 0 1px 0 0 #eeeeee;
    -o-box-shadow: inset 0 0 4px 4px #e0e0e0, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 4px 4px #e0e0e0, 0 1px 0 0 #eeeeee;*/
}

button.grey:disabled, input.grey:disabled 
{
    background-color:  #FFFFFF;
    /*background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e8e8e8));*/ /* Saf4+, Chrome */
    /*background-image: -webkit-linear-gradient(top, #f7f7f7, #e8e8e8);
    background-image: -moz-linear-gradient(top, #f7f7f7, #e8e8e8);
    background-image: -ms-linear-gradient(top, #f7f7f7, #e8e8e8);
    background-image: -o-linear-gradient(top, #f7f7f7, #e8e8e8);
    background-image: linear-gradient(top, #f7f7f7, #e8e8e8);*/
    border: 1px solid #CEC1D4;
    /*-webkit-box-shadow: inset 0 1px 0 0 #fefefe;
    -moz-box-shadow: inset 0 1px 0 0 #fefefe;
    -ms-box-shadow: inset 0 1px 0 0 #fefefe;
    -o-box-shadow: inset 0 1px 0 0 #fefefe;
    box-shadow: inset 0 1px 0 0 #fefefe;*/
    color: #CEC1D4;
    /*text-shadow: 0 -1px 0 #dddddd;*/
    cursor: default;
}

/*button.greyDisable
{
    background-color: #f0f0f0;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#dadada));
    background-image: -webkit-linear-gradient(top, #f0f0f0, #dadada);
    background-image: -moz-linear-gradient(top, #f0f0f0, #dadada);
    background-image: -ms-linear-gradient(top, #f0f0f0, #dadada);
    background-image: -o-linear-gradient(top, #f0f0f0, #dadada);
    background-image: linear-gradient(top, #f0f0f0, #dadada);
    border: 1px solid #999999;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    -ms-border-radius: 7px;
    -o-border-radius: 7px;
    border-radius: 7px;
    -webkit-box-shadow: inset 0 1px 0 0 #fefefe;
    -moz-box-shadow: inset 0 1px 0 0 #fefefe;
    -ms-box-shadow: inset 0 1px 0 0 #fefefe;
    -o-box-shadow: inset 0 1px 0 0 #fefefe;
    box-shadow: inset 0 1px 0 0 #fefefe;
    color: #333333;
    text-align: center;
    text-shadow: 0 -1px 0 #dddddd;
    text-decoration: none;
    padding: 7px 8px 7px 8px;
    margin-right: 15px;
    color: #999;
}
*/

button.green, input.green
{
    background-color: #623875;
    border: 1px solid #623875;
    /*background-image: -webkit-gradient(linear, left top, left bottom, from(#46b099), to(#3e9b87)); /* Saf4+, Chrome */
    /*background-image: -webkit-linear-gradient(top, #46b099, #3e9b87);*/
    /*background-image: -moz-linear-gradient(top, #46b099, #3e9b87);*/
    /*background-image: -ms-linear-gradient(top, #46b099, #3e9b87);*/
    /*background-image: -o-linear-gradient(top, #46b099, #3e9b87);*/
    /*background-image: linear-gradient(top, #46b099, #3e9b87);*/
    /*border: 1px solid #5d99b5;*/
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
    border-radius: 8px;
    /*-webkit-box-shadow: inset 0 1px 0 0 #95d2dc;
    -moz-box-shadow: inset 0 1px 0 0 #95d2dc;
    -ms-box-shadow: inset 0 1px 0 0 #95d2dc;
    -o-box-shadow: inset 0 1px 0 0 #95d2dc;
    box-shadow: inset 0 1px 0 0 #95d2dc;*/
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    padding-left: 8px;
    padding-right: 8px;
    height:32px;
    margin-right: 15px;
}

button.green:hover, button.green:focus, input.green:hover, input.green:focus
{
    color: #FFFFFF;
    border: 1px solid #462853;
    background-color: #462853;
    border: 1px solid #462853;
    /*background-image: -webkit-gradient(linear, left top, left bottom, from(#95d2dc), to(#54c5ad)); /* Saf4+, Chrome */
    /*background-image: -webkit-linear-gradient(top, #95d2dc, #54c5ad);*/
    /*background-image: -moz-linear-gradient(top, #95d2dc, #54c5ad);*/
    /*background-image: -ms-linear-gradient(top, #95d2dc, #54c5ad);*/
    /*background-image: -o-linear-gradient(top, #95d2dc, #54c5ad);*/
    /*background-image: linear-gradient(top, #95d2dc, #54c5ad);*/
    /*-webkit-box-shadow: inset 0 1px 0 0 #95d2dc;*/
    /*-moz-box-shadow: inset 0 1px 0 0 #95d2dc;*/
    /*-ms-box-shadow: inset 0 1px 0 0 #95d2dc;*/
    /*-o-box-shadow: inset 0 1px 0 0 #95d2dc;*/
    /*box-shadow: inset 0 1px 0 0 #95d2dc;*/
    cursor: pointer;
}

button.green:active, input.green:active
{
    color: #FFFFFF;
    background-color: #462853;
    border: 1px solid #462853;
    /*-webkit-box-shadow: inset 0 0 6px 4px #95d2dc, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 6px 4px #95d2dc, 0 1px 0 0 #eeeeee;
    -ms-box-shadow: inset 0 0 6px 4px #95d2dc, 0 1px 0 0 #eeeeee;
    -o-box-shadow: inset 0 0 6px 4px #95d2dc, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 6px 4px #95d2dc, 0 1px 0 0 #eeeeee;*/
}

button.green:disabled, input.green:disabled
{
    background-color: #CEC1D4;
    /*background-image: -webkit-gradient(linear, left top, left bottom, from(#80d6b5), to(#7ccbba));*/ /* Saf4+, Chrome */
    /*background-image: -webkit-linear-gradient(top, #80d6b5, #7ccbba);
    background-image: -moz-linear-gradient(top, #80d6b5, #7ccbba);
    background-image: -ms-linear-gradient(top, #80d6b5, #7ccbba);
    background-image: -o-linear-gradient(top, #80d6b5, #7ccbba);
    background-image: linear-gradient(top, #80d6b5, #7ccbba);
    -webkit-box-shadow: inset 0 1px 0 0 #7ccbba;
    -moz-box-shadow: inset 0 1px 0 0 #7ccbba;
    -ms-box-shadow: inset 0 1px 0 0 #7ccbba;
    -o-box-shadow: inset 0 1px 0 0 #7ccbba;
    box-shadow: inset 0 1px 0 0 #7ccbba;*/
    border: 1px solid #CEC1D4;
    color: #FFFFFF;
    cursor: default;
}

.add
{
    margin-top: 2em;
}

img.icon
{
    margin-right: 7px;
    margin-bottom: -2px;
}

button.small
{
    padding: 7px;
    margin-top: 0;
}

button.tiny
{
    padding: 2px 30px 2px 30px;
    margin-top: 0;
    height: 22px;
}

#testTimeButton
{
    margin-top: 1.2em;
}

.warningIconShow
{
    display: inline;
    margin-left: 10px;
    margin-bottom: -3px;
    width: 20px;
}
.warningIconHide
{
    display: none;
    margin-left: 10px;
    margin-bottom: -3px;
    width: 20px;
}

/*.saveButton
{
    display: block;
    background-image: url(/Content/Img/Main/save.svg);
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    border: none;
    cursor: pointer;
    opacity: 0.7;
}

.saveButtonDisabled, .saveButton:hover, .saveButton:focus {
    display: block;
    background-image: url(/Content/Img/Main/save.svg);
    background-repeat: no-repeat;
    width: 25px;
    height: 25px;
    border: none;
    cursor: pointer;
    opacity: 0.4;
}*/

.deleteButtonSkill, .deleteButtonDisabledSkill{
    font-size: 1.33em;    
    vertical-align: -0.1em;
}

.deleteButton, .deleteButtonDisabled, .deleteFolderButton {
    display: block;
    color: #ff8298;
    text-decoration: none;
    background-color: transparent;
    /*background-image: url(/Content/Img/Main/Delete.png);
    background-repeat: no-repeat;*/
    width: 15px;
    height: 19px;
    border: none;
    cursor: pointer;
}

.deleteButton:hover, .deleteButton:focus, .deleteFolderButton:hover, .deleteFolderButton:focus {
    color: #4d4d4d;
    /*background-position: 0px -20px;*/
}

.deleteButtonDisabled
{
    color: #a3a3a3;
    /*background-image: url(/Content/Img/Main/DeleteDisabled.png);*/
    cursor: default;
}

/*.addButton
{
    display: block;
    background-image: url(/Content/Img/Main/AddIcon.png);
    background-repeat: no-repeat;
    width: 14px;
    height: 15px;
    border: none;
}*/

.dropdownButton {
    display: inline-block;
    background: none;
    font-family: "Font Awesome 5 Pro";
    font-size: 12px;
    color: #623875;
    border: none;
    cursor: pointer;
    margin-right: 10px;
    transform: rotate(90deg); /* Rotate the icon to point down initially */
    transition: transform 0.2s ease; /* Smooth rotation effect */
}

.dropdownButton::before {
    content: "\f04b";
    display: inline-block;
    font-weight:bold;
}

.rotateRight {
    transform: rotate(0deg);
}

.editButton {
    display: block;
    cursor: pointer;
    color: #623875;
    text-decoration: none;
    width: 20px;
    height: 20px;
    border: none;
    background-color: transparent;
}

.editButton:hover {
    /*background-position: 0 -20px;*/
    color: #462853;
}

.editButton:disabled {
    color: black;
    cursor: default;
}

.deleteButton:disabled {
    color: black;
    cursor: default;
}

.disableIcon {
    color: #4e64ca;
    /*background-image: url(/Content/Img/Main/edit.png);
    background-repeat: no-repeat;*/
    text-decoration: none;

}

.hiddenIcon{
    visibility:hidden
}


.small-close-btn {
    display: inline-block;
    cursor: pointer;
    background-image: url('/admin/Content/Img/Main/smallClose_combined.png');
    background-repeat: no-repeat;
    width: 16px;
    height: 16px;
    border: none;
}



.small-close-btn:hover
{
    background-position: 0 -16px;
}

.playSoundButton, .playSoundButtonDisabled {
    display: block;
    color: #623875;
    background-color: transparent;
    cursor: pointer;
    text-decoration: none;
    /*background-image: url(/Content/Img/Main/PlaySound.png);
    background-repeat: no-repeat;*/
    width: 20px;
    height: 20px;
    border: none;
}

.playSoundButtonDisabled {
    color: #a3a3a3;
}

.playSoundButtonArchive, .playSoundButtonDisabledArchive {
    display: block;
    /* background-image: url(/admin/Content/Img/Main/PlaySound.png);
    background-repeat: no-repeat;*/
    width: 20px;
    height: 20px;
    border: none;
    text-decoration: none;
}

.playSoundButtonArchive{
    cursor:pointer;
}

.playSoundButtonArchive:hover, .playSoundButtonArchive:focus, .playSoundButtonDisabledArchive {
    background-position: 0px -20px;
    text-decoration: none;
}

.recordButton:hover, .recordButton:focus, .recordButtonDisabled {
    color: #4d4d4d;
}

.recordButton, .recordButtonDisabled {
    display: block;
    color: #623875;
    cursor: pointer;
    text-decoration: none;
    /*background-image: url(/Content/Img/Main/RecordSound.png);
    background-repeat: no-repeat;*/
    width: 20px;
    height: 20px;
    border: none;
    background-color: transparent;
}

.recordButtonDisabled {
    color: #a3a3a3;
}

.playSoundButton:hover, .playSoundButton:focus {
    color: #4d4d4d;
}

.uploadButton:hover {
    color: #4d4d4d;
    /*background-image: url(/Content/Img/Main/upload_hover.png);*/
}

.uploadButton {
    display: block;
    cursor: pointer;
    color: #623875;;
    /*background-image: url(/Content/Img/Main/upload.png);
    background-repeat: no-repeat;*/
    width: 20px;
    height: 20px;
    border: none;
    background-color: transparent;
}

.uploadButtonDisabled {
    color: #a3a3a3;    
    cursor: default;
    display: block;   
    width: 20px;
    height: 20px;
    border: none;
}

.buttonIcon3 {
    margin-right: 3px;
}

.buttonIcon5 {
    margin-right: 5px;
}

.undoButtonBox
{
    white-space: nowrap;
    width: 16px;
}

.undoButton, .undoButtonDisabled {
    display: block;
    background-image: url(/admin/Content/Img/Main/UndoIcon.png);
    background-repeat: no-repeat;
    width: 15px;
    height: 19px;
    border: none;
}

    .undoButton:hover, .undoButton:focus {
        background-image: url("/admin/Content/Img/Main/UndoIcon.png");
    }

.error-icon {
    background-image: url("/admin/Content/Img/Main/timeEntry_warning.png");
    width: 25px;
    height: 25px;
    border: none;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6px;
    display: block;
    background-repeat: no-repeat;
    background-color: transparent;
}

    .error-icon:hover {
        background-image: url("/admin/Content/Img/Main/timeEntry_warning_hover.png");
        background-color: transparent;
    }

.live-icon {
    background-image: url("/admin/Content/Img/Main/log_change.png");
    width: 18px;
    height: 16px;
    border: none;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6px;
    display: block;
    background-repeat: no-repeat;
    background-color: transparent;
}

.refresh-icon {
    /*background-image: url("/Content/Img/Main/refresh.png");*/
    color: #623875;
    width: 25px;
    height: 25px;
    border: none;
    cursor: pointer;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-color: transparent;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6px;
    display: block;
}

.refresh-icon:hover {
    color: #4d4d4d;
    /*background-image: url("/Content/Img/Main/refresh.png");
    background-color: transparent;*/
}

.cancel-icon, .cancel-icon-disabled {
    background-image: url("/admin/Content/Img/Main/CancelIcon.png");
    width: 25px;
    height: 25px;
    border: none;
    cursor: pointer;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6px;
    display: block;
    background-repeat: no-repeat;
    background-color: transparent;
}

    .cancel-icon:hover {
        background-image: url(/admin/Content/Img/Main/CancelIcon_Hover.png);
        background-color: transparent;
    }

.cancel-icon-disabled {
    background-image: url(/admin/Content/Img/Main/CancelIcon_disable.png);
    background-color: transparent;
}
.cancel-icon-disabled:hover
{
    cursor: auto !important;
}
.close-icon {
    background-image: url("/admin/Content/Img/Main/dialogClose_combined.png");
    width: 25px;
    height: 25px;
    border: none;
    cursor: pointer;
    cursor: hand;
    background-repeat: no-repeat;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6px;
    display: block;
    background-color: transparent;
}

.close-icon:hover {
    background-position: 0 -25px;
}

.ok-icon {
    background-image: url("/admin/Content/Img/Main/OkIcon.png");
    width: 25px;
    height: 25px;
    border: none;
    cursor: pointer;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    margin-top: 6px;
    display: block;
    background-repeat: no-repeat;
    background-color: transparent;
}

.qualityDeleteIcon {
    background: none;
    border: none;
    width: 19px;
    height: 19px;
    margin-left: 0.4em;
    vertical-align: middle;
    background: url('/admin/Content/Img/Main/Delete.png') no-repeat 2px 0;
}

.qualityDeleteIcon:hover {
    background-position: 2px -20px;
}

.quality-add-btn
{
    display: block;
    float: left;
    width:34px;
    margin-top: 4px;
    margin-left: 0.3em;
}

.ok-btn
{
    width: 19px;
    height: 19px;
    font-size: 10px;
    color: #fff;
    background-color: #769e3d;
    border-radius: 9px;
    border: medium none currentColor;
    cursor: pointer;
}

.ok-btn:hover
{
    background-color: #8CB747;
}

.ok-btn:after
{
    content: "OK";
}

.trans-button {
    border: none;
    background: none;
}

.greenBG {
    background-color: #623875;
    border: 1px solid #623875;
    /*background-image: -webkit-gradient(linear, left top, left bottom, from(#46b099), to(#3e9b87)); /* Saf4+, Chrome */
    /*background-image: -webkit-linear-gradient(top, #46b099, #3e9b87);
    background-image: -moz-linear-gradient(top, #46b099, #3e9b87);
    background-image: -ms-linear-gradient(top, #46b099, #3e9b87);
    background-image: -o-linear-gradient(top, #46b099, #3e9b87);
    background-image: linear-gradient(top, #46b099, #3e9b87);*/
    /*border: 1px solid #5d99b5;*/
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    /*-webkit-box-shadow: inset 0 1px 0 0 #95d2dc;
    -moz-box-shadow: inset 0 1px 0 0 #95d2dc;
    -ms-box-shadow: inset 0 1px 0 0 #95d2dc;
    -o-box-shadow: inset 0 1px 0 0 #95d2dc;
    box-shadow: inset 0 1px 0 0 #95d2dc;*/
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    padding-left: 8px;
    padding-right: 8px;
    height: 24px;
    margin-right: 5px;
}

.center-position {
    margin: 0 auto;
}

.button-text {
    padding-top: 0.4em;
    padding-right: 1em;
    padding-bottom: 0.4em;
    padding-left: 1em;
}

input[type="checkbox"] {
    width: 14px;
    height: 14px;
    appearance: none; /* Reset the native appearance */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    background-color: #fff; /* Default background */
    border: 1px solid #B4B6C1; /* Border style */
    border-radius: 4px; /* Optional: rounded corners */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

    /* When the checkbox is checked */
input[type="checkbox"]:checked {
    background-color: #33C4B3; /* Background color for checked state */
    border-color: #B4B6C1; /* Match border color */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M13.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L6.5 10.793l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* Optional: Add hover effect */
input[type="checkbox"]:hover {
    border-color: #B4B6C1; /* Change border color on hover */
    background-color: #33C4B3;
}

input[type="radio"] {
    width: 13px;
    height: 13px;
    appearance: none; /* Reset the native appearance */
    -webkit-appearance: none; /* For Safari */
    -moz-appearance: none; /* For Firefox */
    background-color: #fff; /* Default background */
    border: 1px solid #B4B6C1; /* Border style */
    border-radius: 50%; /* Circular shape for radio buttons */
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

input[type="radio"]:disabled{
 background-color: #E7E8EB;
}

input[type="checkbox"]:disabled {
    background-color: #E7E8EB;
}

input[type="checkbox"]:checked:disabled {
    background-color: #E7E8EB;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23black'%3E%3Cpath d='M13.854 4.146a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3-3a.5.5 0 1 1 .708-.708L6.5 10.793l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

    /* When the radio button is selected */
input[type="radio"]:checked {
    background-color: #fff; /* White background */
    border-color: #33C4B3; /* Match border color */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='4' fill='%2333C4B3'/%3E%3C/svg%3E"); /* Dot in the middle */
    background-repeat: no-repeat;
    background-position: center;
    border-color: #B4B6C1;
}

/* Optional: Add hover effect */
input[type="radio"]:hover {
    border-color: #B4B6C1; /* Change border color on hover */
    background-color: #e0f7f4; /* Lighter shade for hover effect */
    border-color: #B4B6C1;
}

input[type="text"], input[type="password"] {
    border-radius: 6px;
    border: 1px solid #B4B6C1;
}

.scroll-link {
    color: #623875;
    text-decoration: none;
}

.scroll-link:hover {
    /*color: #8bb92f;*/
    color: #623875;
    text-decoration: underline;
}
/****  end buttons  ****/