/*Theme Color Code : #F39C12*/

:root {
    /* --mainBGColor: #f4f6f9;*/
    --mainBGColor: #f7f7f7;
    --primary-color: #F39C12;
    --primary-color-hover: #eb9000;
    --light-color: #f1d4a733;
    --dark-light-color: #e9c79159;
    --gradient-color: linear-gradient( 180deg, #f8c471 0%, /* lighter yellow top */
    var(--primary-color) 50%, /* main yellow */
    #d68910 100% /* darker golden bottom */
    );
}

.content-wrapper.theamedbg {
    background-color: var(--mainBGColor) !important;
}


.EventManagement .BGPrimary {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.EventManagement .BGPrimary-light {
    background-color: var(--light-color) !important;
    color: var(--primary-color) !important;
}

.EventManagement .BGPrimary-dark-light {
    background-color: var(--dark-light-color) !important;
    color: var(--primary-color) !important;
}

.skin-yellow-light .main-header .logo {
    background: var(--primary-color);
    color: white;
}

.skin-yellow-light .main-header .navbar {
    background: var(--primary-color);
    color: white;
    font-weight: 600;
}



.main-sidebar {
    /* background: var(--light-color) !important;*/
    background: white !important;
}

.sidebar-menu > li:hover > a {
    border-left: 4px solid var(--primary-color) !important;
    background: var(--dark-light-color) !important;
    color: black !important;
}

    .sidebar-menu > li:hover > a > .fa {
        color: black !important;
    }


.sidebar-menu > li.active > a {
    font-weight: 600 !important;
    border-left: 4px solid var(--primary-color) !important;
    background: var(--dark-light-color) !important;
    color: black !important;
    transition: background 0.5s ease, color 0.5s ease, border 0.8s ease;
}

.sidebar-menu li > .treeview-menu {
    background: white !important;
    color: black !important;
}

.sidebar-menu > li > .treeview-menu > li:hover > a {
    background: var(--dark-light-color) !important;
    color: black !important;
    font-weight: 600 !important;
    margin-right: 3.5px !important;
    border-radius: 5px !important;
    transition: background 0.3s ease, color 0.3s ease, border 0.5s ease;
}
.EventManagement .box {
    border-top: hidden !important;
    border-radius: 5px !important;
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
}

    .EventManagement .box:not(:has(.box-header, .box-body)) {
        padding: 10px !important;
    }

.EventManagement .box-body {
    padding-top: 10px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    padding-bottom: 10px !important;
}

/*.EventManagement .box-primary {
    background-color: white;
}

  .EventManagement .box-primary .box-header {
        background-color: var(--primary-color) !important;
        border-radius: 5px 5px 4px 4px !important;
        color: white !important;
    }

        .EventManagement .box-primary .box-header .btn-bitbucket {
            background: white !important;
            color: var(--primary-color) !important;
        }

        .EventManagement .box-primary .box-header .box-title {
            color: white !important;
        }

            .EventManagement .box-primary .box-header .box-title .fa {
                color: white !important;
            }

    .EventManagement .box-primary .box-body {
        background-color: var(--light-color) !important;
    }
*/

.EventManagement .box-top-outline {
    border-top: 2.5px solid var(--primary-color) !important;
}

.EventManagement .box-outline {
    border: 0.5px solid var(--primary-color) !important;
}

    .EventManagement .box-outline .box-header {
        background: var(--light-color) !important;
    }

    .EventManagement .box-outline .box-body {
        background: white !important;
    }


.EventManagement .box-header {
    border-bottom: 1px solid rgba(0, 0, 0, .125);
    padding: 12px 16px;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    /*  grid-template-columns: repeat(9, minmax(120px, 1fr));*/
    gap: 0px;
    justify-content: center;
    justify-items: center;
    padding-top: 12px;
    margin: 0 auto;
}

/* When more than 7 icons exist */
/*  .dashboard-grid:has(.dashboard-icon:nth-child(8)) {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 0px;
        margin: 0 auto; 
    }*/


.moduleNameFirstLetter {
    position: absolute;
    font-size: 50px;
    margin: auto;
    width: 100px;
    word-break: break-all;
    margin-top: -6px !important;
    margin-left: -99px !important;
    line-height: 2;
    font-weight: bold;
    vertical-align: middle;
    text-transform: uppercase;
    transition: color 0.5s ease;
}

    .moduleNameFirstLetter:hover {
        background-color: var(--dark-light-color) !important;
        transform: scale(1.10);
        box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
        color: var(--primary-color) !important;
    }
.dashboard-icon {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 145px !important;
}

.dashboard-icon-title {
    font-size: 15px;
    font-weight: 600 !important;
    color: #333;
    width: 110px;
    margin-top: 2px !important;
    text-shadow: 0px 0px #d4d4d4 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    line-height: 1.3;
    padding-bottom: 2px;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}


    .dashboard-icon-title :hover {
        background-color: var(--dark-light-color) !important;
        transform: scale(1.10);
        box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
    }

.dashboard-icon-anchor {
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.1s ease;
}

.dashboard-icon-image {
    width: 95px;
    height: 95px;
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .3);
    background-color: white !important;
    transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

    .dashboard-icon-image:hover {
        background-color: var(--dark-light-color) !important;
        transform: scale(1.10);
        box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
    }


@media (max-width: 768px) {
    .dashboard-grid {
        grid-template-columns: repeat(4, 1fr); /* still 4 per row on tablet */
        gap: 10px;
    }

    .dashboard-icon-image {
        width: 86px;
        height: 86px;
    }

    .dashboard-icon-title {
        margin-top: -10px !important;
        font-size: 15px;
    }

    .dashboard-icon {
        height: 133px !important;
    }

    .moduleNameFirstLetter {
        margin-top: -6px !important;
        font-size: 47px !important;
        margin-left: -95px !important;
    }
}


@media (max-width: 480px) {
    .dashboard-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 icons per row on small screens */
        gap: 5px;
        justify-items: center;
    }

    .dashboard-icon-image {
        width: 76px;
        height: 76px;
    }

    .dashboard-icon-title {
        margin-top: -16px !important;
        font-size: 13px;
    }

    .dashboard-icon {
        height: 122px !important;
    }

    .moduleNameFirstLetter {
        margin-top: -11px !important;
        font-size: 45px !important;
        margin-left: -89px !important;
    }
}


@media (max-width: 376px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 icons per row on small screens */
        gap: 10px;
        justify-items: center;
    }

    .dashboard-icon-image {
        width: 72px;
        height: 72px;
    }

    .dashboard-icon-title {
        margin-top: -23px !important;
        font-size: 12px;
    }

    .dashboard-icon {
        height: 107px !important;
    }

    .moduleNameFirstLetter {
        margin-top: -12px !important;
        font-size: 45px !important;
        margin-left: -85px !important;
    }
}


.EventManagement .btn-social-icon {
    padding-left: 33px !important;
    box-shadow: 0 3px 6px 0 var(--light-color), 0 6px 20px 0 rgba(0, 0, 0, 0.1);
}

    .EventManagement .btn-social-icon :first-child {
        line-height: 35px !important;
        height: 32px !important;
        width: 34px !important;
        font-size: 20px !important;
    }

.EventManagement .btn-bitbucket {
    border-radius: 5px !important;
    background: var(--primary-color);
    border: 0px !important;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease-in-out;
}

    .EventManagement .btn-bitbucket:hover {
        border-radius: 7px !important;
        background: var(--primary-color-hover);
    }


.EventManagement button, .EventManagement a, .EventManagement .btn {
    border-radius: 5px !important;
}


.EventManagement .btn {
    margin-right: 2px !important;
    border: 1px solid !important;
}

.EventManagement .btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    font-weight: 600;
    box-shadow: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease-in-out;
}

    .EventManagement .btn-primary:hover {
        color: white;
        background: var(--primary-color-hover);
        border-color: var(--primary-color-hover);
    }

.EventManagement .btn-outline-primary {
    background: white;
    color: var(--primary-color);
    font-weight: 600;
    border: 0.7px solid var(--primary-color);
    box-shadow: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease-in-out;
}

    .EventManagement .btn-outline-primary:hover {
        color: white;
        background: var(--primary-color);
        border-color: var(--primary-color);
    }

.EventManagement .btn-gradient-primary {
    background: var(--gradient-color);
    color: white;
    font-weight: 600;
    border: 0px !important;
    box-shadow: none;
    transition: color 0.15s ease-in-out, border-radius 0.15s ease-in-out;
}

    .EventManagement .btn-gradient-primary:hover {
        color: white;
        border-radius: 7px;
        background: var(--primary-color-hover);
        border: 0px !important;
        box-shadow: none;
    }

.EventManagement .input-group-addon {
    border-radius: 3.5px !important;
    background-color: #e9ecef !important;
    color: #585257 !important;
}

.EventManagement input[type=text], .EventManagement .textboxclass, .EventManagement .ui-autocomplete-input, .EventManagement textarea, .EventManagement select, .EventManagement .select2-selection--single, .EventManagement .select2-selection--multiple {
    border-radius: 3.5px !important;
    border: 1px solid #ced4da !important;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !important;
}

    .EventManagement input[type=text]:focus, .EventManagement .textboxclass:focus, .EventManagement .ui-autocomplete-input:focus, .EventManagement textarea:focus, .EventManagement select:focus, .EventManagement .select2-container--open, .EventManagement .select2-container--open .select2-selection--multiple {
        color: #495057 !important;
        background-color: #fff !important;
        border-color: #80bdff !important;
        outline: 0 !important;
        box-shadow: inset 0 0 0 transparent !important;
    }


.EventManagement .nav-tabs-custom {
    margin-bottom: 0px !important;
    background: #fff;
    border-radius: 5px !important;
    padding: 0px !important;
    box-shadow: 0 0 1px rgba(0, 0, 0, .125), 0 1px 3px rgba(0, 0, 0, .2);
}

.EventManagement .nav-tabs-custom-outline {
    border: 1px solid var(--primary-color) !important;
}

.EventManagement .nav-tabs-custom-top-outline {
    border-top: 2.5px solid var(--primary-color) !important;
}

.EventManagement .nav-tabs-custom > .nav-tabs {
    border-bottom: 1px solid var(--primary-color) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 8px !important;
    background: var(--light-color) !important;
}

.EventManagement .nav-tabs-custom > .tab-content {
    padding-left: 15px !important;
    padding-right: 15px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.EventManagement .nav-tabs-custom > .nav-tabs > li:not(:has(.Tab, .box-title)) {
    background-color: transparent !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: 2px !important;
    padding: 9px !important;
    font-size: 14px !important;
    margin: 3px !important;
    background-color: white !important;
    transition: background 0.15s ease-in-out, border-radius 0.15s ease-in-out,color 0.15s ease-in-out, border-left 0.15s ease-in-out;
}

.EventManagement .nav-tabs-custom > .nav-tabs > .Tab {
    border: 1px solid var(--primary-color) !important;
    border-radius: 2px !important;
    padding: 9px !important;
    font-size: 14px !important;
    margin: 3px !important;
    background-color: white !important;
    transition: background 0.15s ease-in-out, border-radius 0.15s ease-in-out,color 0.15s ease-in-out, border-left 0.15s ease-in-out;
}

.EventManagement .nav-tabs-custom > .nav-tabs > .active, .EventManagement .nav-tabs-custom > .nav-tabs > li.active {
    background: var(--dark-light-color) !important;
    color: black !important;
    font-weight: 600 !important;
    border-left: 5px solid var(--primary-color) !important;
    border-radius: 4px !important;
}



.EventManagement .nav-tabs-custom > .nav-tabs li > a {
    padding: 0px !important;
}

.EventManagement .nav-tabs-custom > .nav-tabs li.active > a {
    background: transparent !important;
    border: hidden !important;
    padding: 0px !important;
    border-radius: 4px !important;
}

.EventManagement .select2-selection__rendered .select2-selection__choice {
    background-color: var(--light-color) !important;
    color: var(--primary-color) !important;
    border-radius: 4px !important;
    font-weight: 500 !important;
}

    .EventManagement .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
        color: var(--primary-color) !important;
    }


.EventManagement .BackgroundColor {
    background-color: var(--primary-color) !important;
}

.EventManagement .jsUseFirstLink, .EventManagement .jsUsePreviousLink, .EventManagement .jsUseNextLink, .EventManagement .jsUseLastLink, .EventManagement .jsUsegridprintbtn, .EventManagement .jsUsegridexportbtn {
    color: var(--primary-color);
}

.EventManagement .gridActions > a {
    color: var(--primary-color);
}

.EventManagement .BackgroundColorWithColor {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
}

.EventManagement .textcolor {
    color: var(--primary-color);
}

.EventManagement .iconfill {
    fill: var(--primary-color) !important;
}

.EventManagement .User_Profile_Img {
    margin-top: 5mm !important;
    border: 3px solid var(--primary-color) !important;
    height: 175px !important;
    width: 180px !important;
    border-radius: 50% !important;
    margin: auto !important;
    box-shadow: 0px 1.5px 1.5px 1.5px var(--light-color) !important;
}

.EventManagement .profile-user-img {
    margin: 0 auto;
    width: 27mm;
    padding: 3px;
    border: 3px solid var(--primary-color);
}


.EventManagement .img-circle {
    border-radius: 50% !important;
}

.emng header {
    box-shadow: 3px 2px 8px 1px #efa12566, 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


aside, footer {
    box-shadow: 0 4px 8px 0 #efa12566, 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


.EventManagement .table .btn-social-icon {
    padding: 0px !important;
}


.EventManagement .mce-tinymce button {
    border-radius: 0px !important;
    box-shadow: none;
}

.EventManagement .add {
    border-radius: 50% !important;
}