.circleBtn {
        width: 80px;
        height: 80px;
        border: solid;
        border-radius: 40px;
        background: #fff;
        color: #000;
        font-size: 45px; 
        margin: 4px;
        border-color: #d9d9d9;
        padding-bottom: 4px;
    }

    .circleBtnSelected {
        width: 80px;
        height: 80px;
        border: none;
        border-radius: 40px;
        background: var(--primary-color);
        color: #fff;
        font-size: 45px; 
        margin: 4px;
    }

     /***** Global Slide *****/
    .slide-right, .slide-left {
        width: 100%;
    }
      
      /***** Slide Right *****/
    .slide-right {
        animation: 1s slide-right;
    }
    @keyframes slide-right {
        from {
        margin-left: -100%;
        }
        to {
        margin-left: 0%;
        }
    }

    /***** Slide Left *****/
    .slide-left {
        animation: 1s slide-left;
    }
    @keyframes slide-left {
        from {
        margin-left: 100%;
        }
        to {
        margin-left: 0%;
        }
    }

    /* checkbox style

        
    /* The checkBox Holder */
    .checkBoxHolder {
        display: block;
        position: relative;
        padding-left: 35px;
        margin-bottom: 12px;
        cursor: pointer;
        font-size: 22px;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* Hide the browser's default checkbox */
    .checkBoxHolder input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }
    
    /* Create a custom checkbox */
    .checkmark {
        position: absolute;
        top: 0;
        left: -11px;
        height: 35px;
        width: 35px;
        background-color: lightgray;
        padding-bottom: 33px;
    }
    
    /* On mouse-over, add a grey background color */
    .checkBoxHolder:hover input ~ .checkmark {
        background-color: #ccc;
    }
    
    /* When the checkbox is checked, add a blue background */
    .checkBoxHolder input:checked ~ .checkmark {
        background-color: var(--primary-color);
    }
    
    /* Create the checkmark/indicator (hidden when not checked) */
    .checkmark:after {
        content: "";
        position: absolute;
        display: none;
    }
    
    /* Show the checkmark when checked */
    .checkBoxHolder input:checked ~ .checkmark:after {
        display: block;
    }
    
    /* Style the checkmark/indicator */
    .checkBoxHolder .checkmark:after {
        left: 12px;
        top: 6px;
        width: 11px;
        height: 20px;
        border: solid white;
        border-width: 0 4px 4px 0px;
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    
    .checkInput {
        display: block;
    }

    .selectDropDown {
        padding: 5px;
        border-radius: 5px;
    }

    .selectorBox {
        display: inline-block;
        border-style: solid;
        padding: 5px;
        width: fit-content;
        border-width: 1px;
        border-radius: 5px;
        margin: auto;
        background-color: lightgray;
    }

    .selectorBtnLeft {
        display: inline-block;
        border-style: solid;
        border-width: 1px;
        padding: 5px;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
        background-color: #fff;
        margin-right: -6px;
        cursor: pointer;
    }

    .selectorBtnRight {
        display: inline-block;
        border-style: solid;
        border-width: 1px;
        padding: 5px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        background-color: #fff;
        margin-right: -6px;
        cursor: pointer;
    }

    .selectorBtnSelected {
        background-color: var(--primary-color);
        color: #fff;
        padding: 6px;
    }

    .secondaryBtn {
        background-color: var(--secondary-color);
        margin-right: 10px;
        margin-left: 10px;
        color: rgb(0, 0, 0);
        visibility: visible;
        padding-left: 35px;
        padding-right: 35px;
        border-radius: 200px;
        font-size: 14px;
        font-weight: 500;    
    }

    .add-to-cart-button-checkout:hover{
        background-color: dodgerblue !important;
        border-color: dodgerblue !important;
        font-weight: 500;
        transition: 0.2s all ease-in-out;
    }