/************************************************************************************
 *
 * Document: Style sheet for bobcares portal web dev and design technology pages
 * Created on: 24 September 2024
 * Authors: Aleena C R
 * Description: Additional bobcares portal styles
 *
 *************************************************************************************/

.border-bottom-light-blue-thick {
    border: 0 !important;
    border-bottom: 7px solid #C8E8FF !important;
    border-top: 1px solid #C8E8FF !important;
    /* border-bottom: 7px solid #0C71C3 !important; */
}


/* Styles on hover */

.slash-category-card:hover {
    border: 3px solid #0C71C3 !important;
    border-radius: 1rem !important;
}

.slash-category-card:hover .slash-category-sub-div {
    border-radius: 1rem !important;
}

.slash-category-card:hover .slash-category-name-div {
    border-top-left-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
}

.slash-category-card:hover .h3 {
    transform: scale(1.1) translateX(10px);
    width: 80% !important;
    text-decoration: underline;
    transition: transform 0.5s ease, text-decoration 0.5s ease, margin-left 0.5 ease;
}

.slash-category-card:hover i {
    color: white !important;
    font-size: medium !important;
    transition: color 0.5s ease, font-size 0.5s ease;
    border-right: 0px !important;
}

.slash-category-card:hover .fa-arrow-circle-right:before {
    color: white !important;
}

.slash-category-card:hover .slash-category-name-div {
    border-bottom-right-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
}

.slash-category-card:hover .view-icon-div {
    /* background-color: #0C71C3 !important; */
    background-color: transparent !important;
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
    border-bottom-left-radius: 0rem !important;
    border-top-left-radius: 0rem !important;
    transition: border-bottom-left-radius 0.5s ease, border-top-left-radius 0.5 ease, padding-left 0.5s ease;
}

.checkbox-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.checkbox-image {
    position: relative !important;
    margin: 10px !important;
    cursor: pointer !important;
}

.checkbox-image input {
    display: none !important;
}

.checkbox-image input:checked+.technology .web-dev-design-technology-cards {
    border: 7px solid #0C71C3 !important;
}

.checkbox-image input:checked+.technology .technology-name-div {
    font-size: medium !important;
    border-radius: 0px !important;
}


/* .checkbox-image input:checked+.technology , */

.checkbox-image input:checked+.technology .icon-name-div.slash-rounded-4 {
    border-radius: 0px !important;
}

@media only screen and (max-width: 510px) {
    .technology-div .checkbox-image {
        width: 100% !important;
        height: fit-content !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
    }
    #project-existence .label-col {
        flex-basis: revert;
        margin: 5px !important;
        padding: 0px !important;
    }
    .technology-category-header {
        margin-left: 0.75rem !important;
        margin-right: 0.75rem !important;
    }
    #web-dev-design-request-form,
    #web-dev-design-request-form .container-fluid,
    #web-dev-design-request-form #form-container {
        padding-left: 0.3rem !important;
        padding-right: 0.3rem !important;
    }
}