body{
    background-color: #dddddd !important;
    font-family: museo-sans-rounded, sans-serif !important;
}

.text-right{
    text-align: right !important;
}

.main_container{
    max-width: 1410px !important;
    width: 100%;
    margin-top: 30px;
}

.main_card_header{
    background: #FAFAFA;
    border: 1px solid #F4F4F4;
    padding-top: 15px !important;
}

.main_card_header h4{
    font-weight: 600;
    font-size: 25px;
    color: #000000;
}

.bg-white-custom{
    background-color: #fafafa !important;
}
.navbar {
    position: sticky !important;
    top:0 !important;
    z-index: 1 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.navbar > .container,
.navbar > .container-fluid,
.navbar > .container-sm,
.navbar > .container-md,
.navbar > .container-lg,
.navbar > .container-xl,
.navbar > .container-xxl {
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}
.navbar-brand {
    padding-top: 0.32rem;
    padding-bottom: 0.32rem;
    margin-right: 1rem;
    font-size: 1.125rem;
    text-decoration: none;
    white-space: nowrap;
}
.navbar-nav {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
.navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 0;
}
.navbar-nav .dropdown-menu {
    position: static;
}

.navbar-text {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.125rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    transition: box-shadow 0.15s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
    .navbar-toggler {
        transition: none;
    }
}
.navbar-toggler:hover {
    text-decoration: none;
}
.navbar-toggler:focus {
    text-decoration: none;
    outline: 0;
    box-shadow: 0 0 0 0.25rem;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: middle;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.navbar-nav-scroll {
    max-height: var(--bs-scroll-height, 75vh);
    overflow-y: auto;
}

footer{
    position: relative !important;
    width: 100%;
    max-width: 1410px;
    bottom:0;
    padding-top: 50px;
    padding-bottom: 50px;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
    color: #222222;
}

@media (min-width: 576px) {
    .navbar-expand-sm {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-sm .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-sm .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-sm .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-sm .navbar-nav-scroll {
        overflow: visible;
    }
    .navbar-expand-sm .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .navbar-expand-sm .navbar-toggler {
        display: none;
    }
    .navbar-expand-sm .offcanvas-header {
        display: none;
    }
    .navbar-expand-sm .offcanvas {
        position: inherit;
        bottom: 0;
        z-index: 1000;
        flex-grow: 1;
        visibility: visible !important;
        background-color: transparent;
        border-right: 0;
        border-left: 0;
        transition: none;
        transform: none;
    }
    .navbar-expand-sm .offcanvas-top,
    .navbar-expand-sm .offcanvas-bottom {
        height: auto;
        border-top: 0;
        border-bottom: 0;
    }
    .navbar-expand-sm .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
    }
}
@media (min-width: 768px) {
    .navbar-expand-md {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-md .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-md .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-md .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-md .navbar-nav-scroll {
        overflow: visible;
    }
    .navbar-expand-md .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .navbar-expand-md .navbar-toggler {
        display: none;
    }
    .navbar-expand-md .offcanvas-header {
        display: none;
    }
    .navbar-expand-md .offcanvas {
        position: inherit;
        bottom: 0;
        z-index: 1000;
        flex-grow: 1;
        visibility: visible !important;
        background-color: transparent;
        border-right: 0;
        border-left: 0;
        transition: none;
        transform: none;
    }
    .navbar-expand-md .offcanvas-top,
    .navbar-expand-md .offcanvas-bottom {
        height: auto;
        border-top: 0;
        border-bottom: 0;
    }
    .navbar-expand-md .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
    }
}
@media (min-width: 992px) {
    .navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg .navbar-nav-scroll {
        overflow: visible;
    }
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .offcanvas-header {
        display: none;
    }
    .navbar-expand-lg .offcanvas {
        position: inherit;
        bottom: 0;
        z-index: 1000;
        flex-grow: 1;
        visibility: visible !important;
        background-color: transparent;
        border-right: 0;
        border-left: 0;
        transition: none;
        transform: none;
    }
    .navbar-expand-lg .offcanvas-top,
    .navbar-expand-lg .offcanvas-bottom {
        height: auto;
        border-top: 0;
        border-bottom: 0;
    }
    .navbar-expand-lg .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
    }
}
@media (min-width: 1200px) {
    .navbar-expand-xl {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-xl .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-xl .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-xl .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-xl .navbar-nav-scroll {
        overflow: visible;
    }
    .navbar-expand-xl .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .navbar-expand-xl .navbar-toggler {
        display: none;
    }
    .navbar-expand-xl .offcanvas-header {
        display: none;
    }
    .navbar-expand-xl .offcanvas {
        position: inherit;
        bottom: 0;
        z-index: 1000;
        flex-grow: 1;
        visibility: visible !important;
        background-color: transparent;
        border-right: 0;
        border-left: 0;
        transition: none;
        transform: none;
    }
    .navbar-expand-xl .offcanvas-top,
    .navbar-expand-xl .offcanvas-bottom {
        height: auto;
        border-top: 0;
        border-bottom: 0;
    }
    .navbar-expand-xl .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
    }
}
@media (min-width: 1400px) {
    .navbar-expand-xxl {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-xxl .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-xxl .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-xxl .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-xxl .navbar-nav-scroll {
        overflow: visible;
    }
    .navbar-expand-xxl .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }
    .navbar-expand-xxl .navbar-toggler {
        display: none;
    }
    .navbar-expand-xxl .offcanvas-header {
        display: none;
    }
    .navbar-expand-xxl .offcanvas {
        position: inherit;
        bottom: 0;
        z-index: 1000;
        flex-grow: 1;
        visibility: visible !important;
        background-color: transparent;
        border-right: 0;
        border-left: 0;
        transition: none;
        transform: none;
    }
    .navbar-expand-xxl .offcanvas-top,
    .navbar-expand-xxl .offcanvas-bottom {
        height: auto;
        border-top: 0;
        border-bottom: 0;
    }
    .navbar-expand-xxl .offcanvas-body {
        display: flex;
        flex-grow: 0;
        padding: 0;
        overflow-y: visible;
    }
}
.navbar-expand {
    flex-wrap: nowrap;
    justify-content: flex-start;
}
.navbar-expand .navbar-nav {
    flex-direction: row;
}
.navbar-expand .navbar-nav .dropdown-menu {
    position: absolute;
}
.navbar-expand .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}
.navbar-expand .navbar-nav-scroll {
    overflow: visible;
}
.navbar-expand .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
}
.navbar-expand .navbar-toggler {
    display: none;
}
.navbar-expand .offcanvas-header {
    display: none;
}
.navbar-expand .offcanvas {
    position: inherit;
    bottom: 0;
    z-index: 1000;
    flex-grow: 1;
    visibility: visible !important;
    background-color: transparent;
    border-right: 0;
    border-left: 0;
    transition: none;
    transform: none;
}
.navbar-expand .offcanvas-top,
.navbar-expand .offcanvas-bottom {
    height: auto;
    border-top: 0;
    border-bottom: 0;
}
.navbar-expand .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
}

.navbar-light .navbar-brand {
    color: rgba(0, 0, 0, 0.9);
}
.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
    color: rgba(0, 0, 0, 0.9);
}
.navbar-light .navbar-nav .nav-link {
    color: rgba(0, 0, 0, 0.55);
}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    color: rgba(0, 0, 0, 0.7);
}
.navbar-light .navbar-nav .nav-link.disabled {
    color: rgba(0, 0, 0, 0.3);
}
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .nav-link.active {
    color: rgba(0, 0, 0, 0.9);
}
.navbar-light .navbar-toggler {
    color: rgba(0, 0, 0, 0.55);
    border-color: rgba(0, 0, 0, 0.1);
}
.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-light .navbar-text {
    color: rgba(0, 0, 0, 0.55);
}
.navbar-light .navbar-text a,
.navbar-light .navbar-text a:hover,
.navbar-light .navbar-text a:focus {
    color: rgba(0, 0, 0, 0.9);
}

.navbar-dark .navbar-brand {
    color: #fff;
}
.navbar-dark .navbar-brand:hover, .navbar-dark .navbar-brand:focus {
    color: #fff;
}
.navbar-dark .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.55);
}
.navbar-dark .navbar-nav .nav-link:hover, .navbar-dark .navbar-nav .nav-link:focus {
    color: rgba(255, 255, 255, 0.75);
}
.navbar-dark .navbar-nav .nav-link.disabled {
    color: rgba(255, 255, 255, 0.25);
}
.navbar-dark .navbar-nav .show > .nav-link,
.navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
}
.navbar-dark .navbar-toggler {
    color: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.1);
}
.navbar-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-dark .navbar-text {
    color: rgba(255, 255, 255, 0.55);
}
.navbar-dark .navbar-text a,
.navbar-dark .navbar-text a:hover,
.navbar-dark .navbar-text a:focus {
    color: #fff;
}

/*Custom codes*/
.nav-container{
    width:100%;
    max-width: 1920px;
}


.navbar-brand img{
    width: 100%;
    max-width: 125px;
}

#navbarDropdown{
    display: inline-block;
    white-space: nowrap;
}

.settings_icon_and_name:hover .settings_icon img{
    transition: 1s ease;
    transform: rotate(90deg);
}

.settings_icon img{
    width: 100%;
    max-width: 50px;
    transition: 1s ease;
}



.settings_icon,.logout_btn{
    padding:0 !important;
}

.logout_btn img{
    width: 100%;
    max-width: 25px;
}

.user_name_and_icon{
    align-items:center;
}

.nav-right-part{
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    /*flex-wrap: nowrap !important;*/
    margin-right: 20px !important;
}

.nav-right-part .container{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.nav-right-part .container .row{
    margin-right:20px;
}

.nav-right-part .container a{
    color: #222222;
    text-decoration: none !important;
}

.nav-right-part .container .setting_text{
    margin-top: 4px;
}


.d-none{
    display: none !important;
}

.resize-none{
    resize: none !important;
}


@media all and (max-width: 767px) {
    .nav-container{
        flex-direction: row !important;
        flex-wrap: nowrap !important;
    }
}

/*Dashboard Style*/
.banner-container{
    height: 212px;
}
.welcome_text, .menu_buttons{
    padding-top:80px;
}
.welcome_text p{
    font-style: normal;
    font-weight: 300;
    font-size: 16px;
    line-height: 19px;

    color: #FFFFFF;
}
.welcome_text h4{
    color: #ffffff;
    font-weight: 400;
    font-size: 30px;
    line-height: 36px;
    margin:0;
}

.menu_buttons{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.menu_buttons .el_button_group:first-child{
    margin-right:20px;
}
.menu_buttons .el_button_group{
    min-height: 42px;
    align-items: center;
}

.menu_buttons .el_button_group a{
    font-weight: 600;
    font-size: 16px;
    /*line-height: 140%;*/
    /*min-height:42px;*/
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    color: #222222;
    border: none;
}

.menu_buttons .el_button_group a.active{
    background-color: #DB943D;
    color: #FFFFFF;
    z-index: 0;
}

.menu_buttons .el_button_group a.btn_left{
    border-right:1px solid #ccc;
}

.menu_buttons .el_button_group a.btn_right{
    border-left:1px solid #ccc;
}

.menu_buttons .el_button_group a.btn_middle{
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;
}

.card-container{
    padding-top: 30px;
}

.card-container .card-body{
    min-height: 650px;
}

.action_btn{
    width:100% ;
    max-width: 195px;
    background: #F4F4F4 !important;
    border: 1px solid #C0CCDA !important;
    border-radius: 4px;

    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 22px;
    color: #222222 !important;
}

.action_btn_container{
    display:flex;
    justify-content:space-between;
    flex-direction:row;
}

.overview_row{
    padding-top:70px;
    padding-bottom:20px;
}

.last_days_dropdown select{
    border: 1px solid #DDDDDD;
    color: #DDDDDD;
    border-radius: 4px;
}

/*.last_days_dropdown:after {*/

/*}*/

.overview_text h4{
    font-weight: 600;
    font-size: 25px;
    line-height: 30px;
    color: #222222;
}
.dashboard_info{
    padding: 10px 10px 10px 30px;

    max-height: 140px;
    background: #DB943D;
    border: 1px solid #C0CCDA;
    border-radius: 4px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.dashboard_info_number_and_type{
    display: flex;
    flex-direction: column;

}

.dashboard_info .dashboard_info_number_and_type .number_div .number{
    font-weight: 600;
    font-size: 64px;
    line-height: 1;
    color: #FAFAFA;
}

.dashboard_info .dashboard_info_number_and_type .type_div .type{
    font-weight: 600;
    font-size: 25px;
    line-height: 1;
    text-align: right;
    color: #FAFAFA;
}
.dashboard_info .dashboard_info_icon{
    display: flex;
    align-items: flex-end;
    padding-bottom: 10px;
}

.dashboard_info .dashboard_info_icon .icon img{
    max-width: 50px;
}


.rail-select {
    position: relative;
    width: 100%;
}

.rail-select select {
    border: solid 1px #DDDDDD;
    border-radius: 3px;
    font-size: 16px;
    /*color: #DDDDDD;*/
    height: 42px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}
.rail-select select:focus {
     outline: none;
     box-shadow: none;
     border: solid 1px #DDDDDD;
}

.select-side::before {
     border-left: solid 1px lightgrey;
     content : "";
     position: absolute;
     left    : 0;
     right  : 0;
     height  : 100%;
     width   : 1px;  /* or 100px */
 }

.select-side {

    width: 40px;
    position: absolute;
    top: 0px;
    background-color: #FFFFFF;
    height: 100%;
    right: 0px;
    border-radius: 0px 3px 3px 0px;
    border-right: solid 1px #DDDDDD;
    border-top: solid 1px #DDDDDD;
    border-bottom: solid 1px #DDDDDD;
    pointer-events: none;
}

.select-side img{
    position: relative;
    text-align: center;
    max-width: 12px;

    display: flex;
    flex-direction: row;
    top: 40%;
    left: 30%;
}


.settings_header{
    padding-top: 25px;
    padding-bottom: 25px;
}

.settings_header h4{
    font-weight: 600;
    font-size: 25px;
    line-height: 30px;
    color: #222222;
}


.role_name_div{
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    padding:10px;
    display: flex;
    flex-direction: row;
    justify-content:space-between;
}

.role_name{
    font-weight: 300;
    font-size: 16px;
    line-height: 19px;

    color: #222222;

    width: auto;
    position: relative;
    left: 25px;
    top: 3px;
}

.edit_icon{
    margin-right: 5px;
}
.edit_icon img{

    max-width: 20px;
    max-height: 16px;
    position: relative;
    top: -3px;
}

.el_edit_icon, .el_delete_icon {
    width: auto !important;
}
.el_edit_icon img{
    max-width: 20px;
    width: auto;
}

.el_delete_icon img{
    max-width: 20px;
    width: auto;
}

.el_btn{
    background: #F4F4F4 !important;
    border: 1px solid #C0CCDA !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 22px !important;
    color: #222222 !important;
    height: 50px !important;
}

.add_role_btn{
    /*background: #F4F4F4 !important;*/
    /*border: 1px solid #C0CCDA !important;*/
    /*border-radius: 4px !important;*/
    /*font-weight: 600 !important;*/
    /*font-size: 18px !important;*/
    /*line-height: 22px !important;*/
    /*color: #222222 !important;*/
    /*height: 50px !important;*/
}

.role_setting_div{
    align-items: center !important;
}

.role_setting_div .edit_icon{
    cursor: pointer;
}
.action_button{
    display: flex;
    flex-direction:row-reverse;
}

.action_button button{
    min-width: 160px !important;
    padding: 12px !important;;
    font-weight: 600 !important;;
    font-size: 16px;
    line-height: 140%;
    text-align: center;
    color: #FFFFFF !important;
    border-radius: 2px;
}

.btn-warning{
    background-color: #D29244 !important;
}

.btn-warning:hover{
    color: #FFFFFF !important;
}

.action_btn_div{
    padding-top:50px;
}
.save_btn{
    margin-right: 10px;
}
.area_list_container{
    padding: 0 !important;
    margin: 0 !important;
}

.area_table_container, .disability_table_container{
    padding-top:35px;
}

.area_row, .disability_row{
    align-items: center;
}

.area_header, .disability_header{
    font-weight: 600;
    font-size: 16px;
    line-height: 26px;
    color: #000000;
}

.area_button_div, .disability_button_div{
    display: flex;
    justify-content: flex-end;
}

.area_list_container, .disability_list_container{
    /*padding-top: 30px;*/
    padding: 0 !important;
    margin: 0 !important;
}

table.area_table thead, table.disability_table thead{
    border: 1px solid #C0CCDA !important;
    text-align: center;
}

table.area_table tr,  table.disability_table tr{
    border-bottom: 1px solid #C0CCDA !important;
    border-right: 1px solid #C0CCDA !important;
    border-left: 1px solid #C0CCDA !important;

    text-align: center;
}


table.area_table td , table.disability_table td {
    padding-top:30px;
    padding-bottom:30px;
}

.area_action_button_div, .disability_action_button_div{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.add_new_area_header, .add_new_disability_header{
    padding: 20px 0px 10px 0px !important;
}

.area_form_container, .disability_form_container{
    padding:0 !important;
}

.area_form_row{
    padding-top:20px !important;
}

.el_text_input{
    height: 42px;
}

.el_save_btn{
    margin-right: 10px;
}

.area_modal_header, .disability_modal_header{
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    font-weight: 700;
    font-size: 20px;
    line-height: 140%;
    color: #000000;
}

.el_modal_width{
    max-width: 400px !important;
}

.el_yes_btn{
    width: 100%;
    max-width: 160px;
    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    text-align: center;
    color: #FFFFFF;
    border-radius: 2px;
    padding: 16px;
    background: #D29244;
    border:none;
}

.el_no_btn{
    width: 100%;
    max-width: 160px;
    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    text-align: center;
    color: #FFFFFF;
    border-radius: 2px;
    padding: 16px;
    background: #000000;
    border:none;
}

.area_edit_btn, .area_delete_btn, .disability_edit_btn, .disability_delete_btn{
    cursor: pointer;
}

.user_row{
    padding-top:30px !important;
}

.user_add_button{
    width:100% !important;
    height: 54px;
    font-weight: 600 !important;
    font-size: 16px !important;
    line-height: 22px !important;
    text-align: center !important;
    color: #FFFFFF !important;
}

.user_main_row{
    padding-bottom:20px;
}

.user_first_row{
    padding-top: 5px;
}

.image_input{
    margin-top:10px;
    background-color: #FAFAFA;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 255px;
    line-height: 1;
    background-position:  0 0, 0 0, 100% 0, 0 100%;
    background-size: 1.5px 100%, 100% 1.5px, 1.5px 100% , 100% 2px;
    background-repeat: no-repeat;
    background-image:
            repeating-linear-gradient(0deg, #dddddd, #dddddd 10px, transparent 10px, transparent 20px),
            repeating-linear-gradient(90deg, #dddddd, #dddddd 10px, transparent 10px, transparent 20px),
            repeating-linear-gradient(180deg, #dddddd, #dddddd 10px, transparent 10px, transparent 20px),
            repeating-linear-gradient(270deg, #dddddd, #dddddd 10px, transparent 10px, transparent 20px);
    border-image: repeating-linear-gradient(0deg, #dddddd, #dddddd 10px, transparent 10px, transparent 20px);
    cursor: pointer;
}

.image_input_content{
    width: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 25px;
}

.image_input_icon img{
    max-width: 27px;
    max-height: 27px;
}

.image_input_text p{
    padding-top:10px;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: center;
    color: #8E8E8E;
}

.image_upload_progress_div{
    padding-top:20px;
}

.progress{
    height: 2px !important;
}

.progress-bar{
    background: #DB943D !important;
}

.image_upload_progress{
    height:2px;
    background: #DDDDDD;
}

.image_upload_status{
    width: 100%;
    display: flex;
    flex-direction:row;
    justify-content: space-between;
    align-items: center;
    padding-top: 3px;
}

.image_upload_status p{
    padding: 0;
    margin: 0;
}

.image_icon_and_file_name{
    display: flex;
    flex-direction:row;
    justify-content:space-between;
    align-items: center;
    padding-right: 20px;
}

.image_icon img{
    max-width: 20px;
}


.image_icon_and_file_name .file_name{
    padding-left:5px;
}

.image_icon_and_file_name .file_name p{
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    color: #8E8E8E;
    overflow-wrap: anywhere;
}

.image_upload_status .upload_percentage, .upload_percentage{
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    text-align: right;
    color: #8E8E8E;
}

#user_image{
    height: 100%;
    width: auto;
    max-width: 100%;
    padding:5px;
    filter: blur(10px);
    /*-webkit-filter: blur(8px);*/
}

.image_input .remove_div{
    width: 100%;
}
.remove_div .remove{
    display: flex !important;
    justify-content: right !important;
}

.remove_div .remove img{
    width: 10px !important;
}

/*User student dsc list style*/

.list_container{
    max-width: 1410px !important;
    width: 100% !important;
}

.header_row{
    padding-top:32px;
    justify-content: space-between;
    align-items: center;
}


.list_header{
    font-weight: 600;
    font-size: 25px;
    line-height: 30px;
    color: #222222;
    margin: 0;
}


.search_row{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: nowrap !important;
}

.list_menu_buttons .search_label{
    max-width: 170px !important;
    padding-right: 15px;
}

.search_input_div{
    max-width: 310px !important;
}


.search_input{
    min-width: 300px !important;
    height: 44px;
    padding-right: 40px !important;
    background: url('../icons/search.png') no-repeat right 10px center;
    background-size: 20px;
}


.list_menu_buttons{
    padding-top: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.list_menu_buttons .el_button_group:first-child{
    margin-right:20px;
}
.list_menu_buttons .el_button_group{
    min-height: 42px;
    align-items: center;
}

.list_menu_buttons .el_button_group a{
    font-weight: 600;
    font-size: 16px;
    /*line-height: 140%;*/
    /*min-height:42px;*/
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    color: #222222;
    border: none;
}

.list_menu_buttons .el_button_group a.active{
    background-color: #DB943D;
    color: #FFFFFF;
    z-index: 0;
}

.list_menu_buttons .el_button_group a.btn_left{
    border-right:1px solid #ccc;
}

.list_menu_buttons .el_button_group a.btn_right{
    border-left:1px solid #ccc;
}

.list_menu_buttons .el_button_group a.btn_middle{
    border-right:1px solid #ccc;
    border-left:1px solid #ccc;
}


.list_menu_buttons .el_button_group_add{
    margin-right: 20px;
}

.list_row{
    padding-top: 36px;
}

.footer_container{
    width:100%;
    max-width: 1410px;
}

table.list_table{
    background: #FFFFFF;
    border: 1px solid #F4F4F4;
}

table.list_table thead, table.list_table tbody{
    background: #ffffff;
}

table.list_table thead{
    border: 1px solid #C0CCDA !important;
    text-align: center;
}

table.list_table thead th:last-child, table.list_table thead th:first-child{
    text-align: center;
}

table.list_table thead tr, table.list_table tbody tr{
    text-align: left;
    height: 70px;
    vertical-align: middle;
}

table.list_table tr{
    border-bottom: 1px solid #C0CCDA !important;
    border-right: 1px solid #C0CCDA !important;
    border-left: 1px solid #C0CCDA !important;

    text-align: center;
}


table.list_table td {
    padding-top:20px;
    padding-bottom:20px;
}

table.list_table td:nth-child(1) {
    padding-left:30px;
}

table.list_table td:nth-child(1) .image_row{
    align-items: center;
}

table.list_table td .image_div{
    border-radius: 50%;
    background: none;
    width: 100%;
    max-width: 56px;
    height: 56px;
}

table.list_table td .image_div img{
    width: 100%;
    border-radius: 50%;
    border:1px solid #F4F4F4;
    max-width: 56px;
    height: 56px;
    object-fit: cover;
}

table.list_table td .name{
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: #222222;
}

table.list_table td .name a{
    text-decoration: none;
    color: #222222;
}


table.list_table td .user_unique_id{
    font-weight: 300;
    font-size: 16px;
    line-height: 19px;
    color: #222222;

}

.page-link{
    color: #000000 !important;
}

.page-item.active .page-link{
    color: #fff !important;
    background-color: #222222 !important;
    border-color: #F4F4F4 !important;
}

.pagination_div{
    display: flex;
    justify-content:center;
}

/*User Edit checkbox*/

.check_div{
    height: 18px;
    width: 18px;
    border:1px solid #000000;
    cursor: pointer;
}

.check_div .inner_check_div{
    background: #000000;
    width: 12px;
    height: 12px;
    position: relative;
    left:2px;
    top:2px;

}

.user_delete_btn{
    cursor: pointer;
}
#deleteConfirm .delete_modal_header,
#sponsorDeleteConfirm .delete_modal_header{
    font-weight: 700;
    font-size: 20px;
    line-height: 140%;
    color: #000000;
    padding-bottom: 24px;
    margin: 0;
    text-align: center;
}

#deleteConfirm .confirm_modal_image_div,
#sponsorDeleteConfirm .confirm_modal_image_div{
    display: flex;
    justify-content: center;
}

#sponsorDeleteConfirm  .confirm_modal_image,
#deleteConfirm  .confirm_modal_image{
    width: 64px;
    height: 64px;
    border-radius: 50%;
}

#sponsorDeleteConfirm  .confirm_modal_image img,
#deleteConfirm  .confirm_modal_image img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    justify-content: center;
}

#sponsorDeleteConfirm  .username_and_id_div,
#deleteConfirm  .username_and_id_div{
    display: flex;
    flex-direction: column;
    text-align: center;
    padding-top:18px;
    padding-bottom:48px;
}

#sponsorDeleteConfirm  .username_and_id_div .username h4,
#deleteConfirm  .username_and_id_div .username h4{
    margin: 0;
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: #222222;
    padding-bottom: 3px;
}

#sponsorDeleteConfirm  .username_and_id_div .user_unique_id p,
#deleteConfirm  .username_and_id_div .user_unique_id p{
    margin: 0;
    font-weight: 300;
    font-size: 16px;
    line-height: 19px;
    color: #222222;
}

/*User Profile Cad design*/
.user_profile_card .photo{
    max-width: 264px;
    max-height: 264px;
    width: 100%;
    height: 100%;
    border-radius:50%;
}

.user_profile_card .user_name{
    font-weight: 600;
    font-size: 25px;
    line-height: 30px;
    color: #000000;
    padding-bottom: 24px;
    margin: 0;
}
.user_profile_card .photo img{
    width: 100%;
    height: 100%;
    border-radius:50%;

}

.user_profile_card .details_row span{
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
}

.user_profile_card .details_row .details_row_single{
    padding-bottom:12px;
}

.user_profile_card .details_row .details_row_single.student_details_row_single{
    padding-bottom: 8px;
}

.user_profile_card .last_working_day_btn{
    width: 100%;
    background: #D29244;
    border-radius: 2px;
    margin-top:24px;
    font-weight: 600;
    font-size: 16px;
    line-height: 22px;
    text-align: center;
    color: #FFFFFF;
    min-height: 44px;
}

.user_profile_card .edit_div a{
    text-decoration: none;
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    text-align: right;
    color: #222222;

    display: flex;
    justify-content: flex-end;
    align-items: center;

    margin-right:24px;
}
.user_profile_card .student_edit_row{
    display: flex;
    flex-direction: row-reverse;
}
.user_profile_card .edit_div.student_edit_div{
    width: auto;
}
.user_profile_card .edit_div img{
    max-width: 14px;
    margin-right:5px;
}
.user_profile_card .user_profile_card_row{
    min-height: 320px;
    padding-top:24px;
    padding-bottom:15px;
}

#lastWorkingDay .close{
    border: none;
    background: none;
    font-size: 26px;
    font-weight: 600;
}

#lastWorkingDay .modal-title{
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #000000;
}

#lastWorkingDay .save_btn{
    max-width: 100%;
    height: 54px;
}

#lastWorkingDay .last_working_day_input{
    margin-top:5px;
    margin-bottom:32px;
    height:44px;
}

#lastWorkingDay .el_modal_width{
    max-width: 327px !important;
}

/*Student profile styles*/


.info_row .main_container{
    padding-bottom: 20px;
}

.info_row{
    margin-top:4px !important;
}


.info_row .info_bar{
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #C0CCDA;
    padding: 12px 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 2px;
}

.info_row .info_bar .info_label h4{
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #222222;
}

.info_row .info_bar .add_info_btn{
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    text-align: right;
    color: #222222;
    cursor: pointer;
}

.modal_image_input{
    max-width: 198px !important;
    max-height: 189px !important;
    cursor: pointer;
}

.modal_input{
    padding-top:20px;
}

.modal_textarea_input{
    padding-top:5px;
}

.modal_action_btn{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 32px;
}

.modal_action_btn button{
    width: 100%;
    max-width: 160px;
    height:54px;
    border-radius:0;

    font-weight: 600;
    font-size: 16px;
    line-height: 140%;
    text-align: center;
    color: #FFFFFF;
}


.modal_action_btn button.modal_save_btn{
    margin-right:24px;
}

#health_nutrition_modal h4, #education_modal h4.section_title{
    font-weight: 700;
    font-size: 18px;
    line-height: 140%;
    color: #000000;
}


#health_nutrition .modal_title{
    margin-left:10px;
}

#home_visit_modal .issue_div, #home_visit_edit_modal .issue_div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#home_visit_modal .issue_div .issue, #home_visit_edit_modal .issue_div .issue{
    width: 100%;
    max-width: 830px;
;
}

#home_visit_modal .issue_div .issue_add_btn, #home_visit_edit_modal .issue_div .issue_add_btn{
    padding: 0 16px;
    cursor: pointer;
}

#home_visit_modal .issue_div .issue_remove_btn, #home_visit_edit_modal .issue_div .issue_remove_btn{
    padding: 0 16px;
    cursor: pointer;
}

#home_visit_modal .issue_div .issue_remove_btn img, #home_visit_edit_modal .issue_div .issue_remove_btn img{
    max-width: 18px;
    width: 100%;
}

#home_visit_modal .extra_issue_div, #home_visit_edit_modal .extra_issue_div{
    width: 100%;
    /*max-width: 830px;*/
}

#home_visit_modal .extra_issue_div input, #home_visit_edit_modal .extra_issue_div input{
    padding: .375rem .75rem;
}

#home_visit_modal .extra_issue_div .extra_issue_input, #home_visit_edit_modal .extra_issue_div .extra_issue_input{
    margin-top:4px;
    padding: 6px 12px;
}


/*Info card*/

.info_card_header{
    background: #F5F6FB;
}

.info_card_header_row{
    display: flex;
    flex-direction:row;
    align-items: center;
    padding: 5px;
}

.tick_and_title_row{
    display: flex;
    align-items: flex-start;
}

.data_row{
    padding-top: 5px;
}

.info_card_header_row h4{
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #000000;
    margin: 0;
    padding-left:10px;
}

.tick_icon img{
    width:100%;
    max-width: 20px;
    height:auto ;
}

.edit_icon_and_text{
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
}

.edit_icon_and_text_on_details{
    width:auto !important;
}

.edit_text h4{
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #222222;
    margin: 0;
    padding-left:5px;
}

.card_body_info_header h4{
    font-weight: 700 !important;
    font-size: 16px;
    line-height: 180%;
    color: #000000;
}

.photo_before_ch{
    max-height:156px;
    max-width:156px;
}

.photo_before_ch img{
    width:100%;
    height:100%;
}

.basic_info_card{
    margin-top: 0px !important;
}
.info_card{
    margin-top:20px;
    margin-bottom:20px;
}

.info_sub_header{
    font-weight: 600;
    font-size: 15.89px;
    line-height: 140%;
    color: #000000;
}

.info_sub_header_large{
    font-weight: 700;
    font-size: 18px;
    line-height: 140%;
    color: #000000;
    margin-top:10px;
}

.achievement_div{
    padding-left:20px !important;

}

.achievement_div h4{
    font-weight: 600;
    font-size: 15.89px;
    line-height: 140%;
    color: #000000;
}

.achievement_div p{
    font-weight: 300;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
    padding-left:16px;
}

.achievement_card_body{
    padding: 0 !important;
}

.achievement_row {
    align-items:center;
    padding: 30px;
    border-bottom: 1px solid #ccc;
    width: 100%;
    margin:0 !important;
}

.achievement_row:last-child{
    border-bottom: none;
}

.achievement_div .edit_icon_and_text{
    padding-right:20px;
}

.education_payment_details {
    padding: 0 !important;
}
.education_payment_details .table{
    margin:0;
}

.education_payment_details .table tr{
    border-bottom:1px solid #C0CCDA;

}

.education_payment_details .table tr td, .education_payment_details .table tr th{
    padding:20px !important;
}

.table tr th{
    word-wrap: normal;
}

.table tr td{
    word-wrap: break-word;
}

.add_info_btn{
    cursor: pointer;
}

.image_view{
    width: 100%;
    height: 255px;
}

.sub_label{
    font-weight: normal;
}

.attachment_name, 
.attachment_error, 
.care_attachment_name, 
.result_attachment_name, 
.sustainable_issue_attachment_name, 
.sponsor_payment_attachment_name,
.disability_support_attachment_name,
.home_advice_attachment_name{
    padding-top:10px;
}
.attachment_name p,
.care_attachment_name p,
.result_attachment_name p,
.sustainable_issue_attachment_name p,
.home_visit_attachment_name p,
.attachment_error p,
.home_visit_attachment_error p,
.sustainable_issue_attachment_error p,
.related_file_name p,
.related_file_error p,
.health_attachment_name p,
.health_attachment_error p,
.gallery_image_name p,
.gallery_image_error p,
.nutrition_status_name p,
.disability_support_attachment_name p,
.home_advice_attachment_name p{
    color: #ccc;
    font-size: 14px;
    margin:0;
    padding:0;
}

.attachment_error p, .user_image_error p{
    color: #D63535 !important;
}

.nid_error, .earners_no_error, .siblings_error{
    font-size: 11px;
    padding: 0;
    margin: 0;
    color: #D63535;
}

.add_problem_row{
    justify-content: right;
    margin-right: 0 !important;
}

.add_problem_btn{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    width: 100% !important;
    max-width: 220px !important;
    height: 42px;
    border: 1px solid #DDDDDD;
    border-radius: 4px;
    padding: 10px;
    margin-top: 20px !important;

}

.add_problem_text{
    font-weight: 600;
    font-size: 16px;
    line-height: 19px;
    color: #000000;
    cursor: pointer;
}

.treatment_plan_and_remove_btn{
    display: flex;
    flex-direction:row;

}

.treatment_plan{
    max-width: 90%;
}

.remove_problem_div{
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.remove_problem_div img{
    width:100%;
    max-width: 18px;
}

.remove_problem_parent_div{
    display: flex;
    padding: 0 !important;
    margin: 0 !important;
    justify-content: center;
}

.treatment_plan_input{
    margin-right: 0 !important;
    padding-right: 0 !important;
}

.image_extra_view{
    /*margin-top:10px;*/
    background-color: #FAFAFA;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 255px;
    line-height: 1;
    background-position:  0 0, 0 0, 100% 0, 0 100%;
    background-size: 1.5px 100%, 100% 1.5px, 1.5px 100% , 100% 2px;
    background-repeat: no-repeat;
    background-image:
            repeating-linear-gradient(0deg, #dddddd, #dddddd 10px, transparent 10px, transparent 20px),
            repeating-linear-gradient(90deg, #dddddd, #dddddd 10px, transparent 10px, transparent 20px),
            repeating-linear-gradient(180deg, #dddddd, #dddddd 10px, transparent 10px, transparent 20px),
            repeating-linear-gradient(270deg, #dddddd, #dddddd 10px, transparent 10px, transparent 20px);
    border-image: repeating-linear-gradient(0deg, #dddddd, #dddddd 10px, transparent 10px, transparent 20px);
    cursor: pointer;
    max-height: 156px;
    max-width: 150px;
    margin-top: 0px;
}

.overlay {
    height: 100%;
    position: relative;
    top: -100%;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
    color: #f1f1f1;
    width: 100%;
    transition: .5s ease;
    opacity: 1;
    /* color: white; */
    font-size: 20px;
    padding: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* When you mouse over the container, fade in the overlay title */
.container:hover .overlay {
    background: rgba(0, 0, 0, 0.8);
}

.health_care_subheader{
    font-weight: 600;
    font-size: 16px;
    line-height: 180%;
    color: #222222;
}

.evaluation_image{
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 10px;
    width: 100%;
}
.evaluation_document_view{
    cursor: pointer;
}

.attachment_list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.attachment_list .attachment_div{
    width: 265px;
    margin: 10px;
    border: 1px solid #ccc;
    padding: 5px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.attachment_list .attachment_div img{
    width: auto;
    height: 100%;
    max-height: 300px;
}

.attachment_list .attachment_div .remove_div{
    width: auto;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}


.attachment_list .attachment_div .remove_div .btn{
    width: 100%;
}

.delete_icon{
    margin-left: 10px;
}
.delete_icon img{
    max-width: 20px;
    max-height: 16px;
    position: relative;
    top: -3px;
}

#app > nav{
    z-index: 2 !important;
}

.breadcrumb_container{
    max-width:1410px !important;
}

.modal-body .container{
    max-width:1320px !important;
    padding-right:0 !important;
    padding-left:0 !important;
}

.modal-body{
    padding: 2rem !important;
}

.modal-title{
    padding-left:1rem !important;
}


/*Bug fixing*/
table td, table th{
    color: #000000 !important;
}

.btn-dark{
    color:#FFFFFF;
    background-color: #000000 !important;
    border-color: #000000 !important;
}

.user_profile_card_row{
    color: #000000 !important;
}

.thin_text{
    font-weight: 300 !important;
}

.modal_title{
    line-height: 28px !important;
    color: #000000 !important;
}

.service_text{
    font-weight: 300 !important;
    font-size: 16px !important;
    line-height: 19px !important;
    color: #000000 !important;
}

#health_care_disability_support_modal .label{
    color: #222222 !important;
}

label.required::after{
    content: "*";
    padding-left: 3px;
    color: red;
}

.standard_text{
    font-weight:300 !important;
    color: #000000 !important;
}

.table{
    table-layout: fixed !important;
    width:100% !important;
}

.table th, .table td {
    word-wrap: break-word;
}

.grey_text{
    color:  #8E8E8E !important;
}

.word_break{
    word-break: break-all !important;
}

.intention_gap{
    padding-top:20px;
}

.forget_password{
    font-weight: 400 !important;
}

.padding-top-3{
    padding-top:3px !important;
}

/*User update styles*/

#passwordModal .close{
    border: none;
    background: none;
    font-size: 26px;
    font-weight: 600;
}

#passwordModal .modal-title{
    font-weight: 700;
    font-size: 20px;
    line-height: 28px;
    color: #000000;
}

#passwordModal .save_btn{
    max-width: 100%;
    height: 54px;
}

#passwordModal .user_profile_password_input{
    margin-top:5px;
    margin-bottom:32px;
    height:44px;
}

#passwordModal .el_modal_width{
    max-width: 327px !important;
}

.data_view{
    display: flex;
}

.w-100{
    width:100%;
    margin-left: 4px;
}

.result_file_view, .result_file_view img,
.education_payment_attachment_view_image
{
    width: 100%;
}


.flex{
    display: flex;
}

.flex-row{
    flex-direction: row;
}

.flex-col{
    flex-direction: column;
}

.align-center{
    align-items: center;
}

.justify-center{
    justify-content: center;
}

.justify-between{
    justify-content: space-between;
}

.color-tiger-eye{
    color: #DE9535;
}

.bg-tiger-eye-light{
    background-color: #faeede;
}

.color-tiger-eye-light{
    background-color: #faeede;
}

.font-w-700{
    font-weight: 700;;
}

.font-24{
    font-size: 24px;
}

.font-50{
    font-size: 50px;
}

.p-4{
    padding: 24px;
}
.pt-4{
    padding-top: 24px;
}

.pb-4{
    padding-bottom: 24px;
}

.pl-4{
    padding-left: 24px;
}

.pr-4{
    padding-right: 24px;
}

.gap-1{
    gap: 4px;
}

.gap-2{
    gap: 8px;
}

.m-15{
    margin: 15px;
}

.no-border{
    border: none !important;
}

.border-gray{
    border: 1px solid rgba(0,0,0,.125);
}


.swiper {
    width: 100%;
    height: 100%;
}

.swiper-wrapper{
    align-items: flex-end;
}

.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 10px solid #de9a3c;
    border-radius: 5px;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: 330px;
    max-width: 410px;
    border-radius: 5px 5px 0 0;
    aspect-ratio: 4 / 3;
}

.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 12px !important;
    border: 2px solid #C0CCDA;
    padding: 12px 14px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: auto;
    font-weight: 900;
    color: #de9a3c;
    background-color: #F5F6FB;
}

.gallary_actions{
    position: absolute;
    right: 16px;
    top: 16px;
    display: flex;
    gap: 6px;
}

.gallery_image_delete_btn, .gallery_image_view_btn{
    background-color: white;
    padding: 5px;
    height: 26px;
    width: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.gallery_image_delete_btn img,
.gallery_image_view_btn img{
    height: 18px;
    width: 15px;

}

#galleryImageViewModal .modal-dialog{
    max-width: 90%;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

#galleryImageViewModal .modal-dialog .modal-content{
    width: auto;
}

#galleryImageViewModal .modal-dialog .modal-body{
    padding: 0 !important;
}
#galleryImageViewModal .modal-dialog .modal-content .container{
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
}

.search_part{
    display: flex;
    align-items: center;
    gap: 12px;
}

.sponsor_select_div{
    display: flex !important;
    justify-content: end;
}

.sponsor_select{
    min-width: 250px;
}

p.health_issue_text{
    cursor: pointer;
}
  
.collapsed {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#gallery_image_view_area{
    width: 100%;
    max-height: 750px;
}

.user_secret_password{
    padding-left: 4px;
}

.dropdown-toggle::after{
    content: unset !important;
}

.add_company_btn{
    font-weight: 600;
    font-size: 20px;
    line-height: 24px;
    color: #222222;
    margin: 0;
    padding-top: 10px;
    cursor: pointer;
}

.company_edit_btn, .company_delete_btn{
    cursor: pointer;
}

.list_table.company_table .image_div{
    border-radius:unset;
    max-width: 80px;
    height: 80px;
}

.list_table.company_table .image_div img{
    border-radius:unset;
    max-width: 80px;
    height: 80px;
}

.mobile_report_edit_btn{
    display: none;
}

.mobile_pagination_div{
    display: none;
}

.text_align_left{
    text-align: left !important;
}

.edit_row_mobile{
    display: none !important;
}

@media only screen and (max-width: 768px) {

    /* Settings page */
    
    .settings_header{
        padding-top: 16px;
        padding-bottom: 16px;
    }
    .settings_header h4{
        font-size: 20px;
    }

    .role_show_container{
        padding: 0 !important;
    }

    .el_setting_card .el_card_header .header p,
    .el_setting_card .el_card_header .add_company_btn p
    {
        font-size: 16px;
    }

    .company_setting_div{
        width: 100%;
        overflow-x: scroll;
        padding: 0;
        margin: 0 !important;
    }

    .company_setting_div table{
        width: max-content !important;
    }

    .list_table.company_table .image_div{
        min-width: 80px;
    }

    /* Navbar responsive style */
    .navbar .nav-container{
        gap: 24px !important;
    }
    .navbar .nav-container .row{
        width: 100%;
    }
    .navbar .nav-container .nav-right-part .row.user_name_and_icon.settings_icon_and_name, .navbar .nav-container .nav-right-part .row.user_name_and_icon{
        margin: 0;
        max-width: 24px;
    }

    .navbar .nav-container .nav-right-part .row.user_name_and_icon.settings_icon_and_name .setting_text, .user_name_under_user_icon{
        display: none;
    }

    .navbar .nav-container .nav-right-part{
        margin: 0 !important;
        display: flex !important;
        justify-content: center;
        align-items: center !important;
    }
    .navbar .nav-container .nav-right-part .container{
        margin: 0 !important;
        padding: 0 !important;
        gap: 16px;
        justify-content: flex-end;
    }

    .navbar .nav-container .nav-right-part .container a,
    .navbar .nav-container .nav-right-part .container .row{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 24px;
        margin: 0;
        padding: 0;
    }

    /* Dashboard styles */

    .action_btn_container_row{
        gap: 8px;
    }

    .overview_text h4{
        font-size: 18px;
    }


    .action_btn_container_row .action_btn_container{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 16px;
    }

    .action_btn_container_row .action_btn_container.pt-2{
        padding-top: 0 !important;
    }

    .action_btn_container_row .action_btn_container a{
        font-size: 14px !important;
    }

    .row.overview_row{
        padding-top: 20px;
    }

    /* Breadcrumbs with button design */
    .forms-container{
        min-height: 270px;
    }

    .forms-container .menu_buttons{
        flex-direction: column;
        gap: 8px;
        padding-top: 0;
    }

    .menu_buttons .el_button_group:first-child{
        margin:0;
    }

    .menu_buttons .el_button_group a{
        font-size: 14px;
        line-height: 18px;
        margin: 0;
        padding: 8px 0;
    }

    .menu_buttons_cols{
        padding: 0 !important;
    }

    .list_menu_buttons_div{
        margin: 0 !important;
        padding: 16px 0;
    }
    .list_menu_buttons_div .list_menu_buttons{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .list_menu_buttons .el_button_group:first-child{
        margin-right: 0 !important;
    }

    .list_menu_buttons .el_button_group{
        width: 100%;
    }
    .list_menu_buttons .el_button_group a{
        font-size: 13px;
        line-height: 16px;
        margin: 0;
        padding: 8px;
    }

    /* Add and edit profile forms */

    .image_input{
        height: 100px;
        margin-bottom: 24px;
    }

    .user_first_row, .user_row{
        gap: 24px;
        padding-top: 0 !important;
    }

    .user_form{
        gap: 24px;
        display: flex;
        flex-direction: column;
    }

    .btn-group.el_button_group.search_part{
        flex-direction: column;
        width: 100%;
    }

    .btn-group.el_button_group.search_part .search_label{
        display: flex;
        width: 100%;
    }

    .btn-group.el_button_group.search_part .search_input_div{
        max-width: 100% !important;
        width: 100%;
    }

    .main_card_header h4{
        font-size: 18px;
    }

    .search_part_div.search_part_div{
        padding-top: 16px !important;
        gap:16px;
    }

    .sponsor_select{
        width: 100%;
    }

    /* List table */

    .list_container{
        padding: 0 !important;
    }

    .list_container .info_row{
        width: 100%;
        margin: 0 auto;
    }

    .list_row{
        width: 100%;
        margin: 0 !important;
        padding-top: 16px;
    }

    .list_container .list_div{
        width: 100%;
        overflow-x: scroll;
        padding: 0;
    }

    .list_container .list_table, .company_setting_div table, .education_payment_details table{
        display: inline-block;
        width: max-content !important;
    }


    .list_table th, .list_table td {
        font-size: 14px;
        padding: 8px;
    }

    table.list_table td:nth-child(1) .image_row {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }

    table.list_table td:nth-child(1) .image_row .col-md-3{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 30%;
        padding: 0;
        margin: 0;
    }

    table.list_table td:nth-child(1) .image_row .col-md-9{
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        width: 70%;
    }

    table.list_table td .name, table.list_table td .user_unique_id{
        font-size: 14px;
        line-height: 18px;
    }

    table.list_table thead th:last-child{
        width: fit-content;
    }

    .list_table th{
        width: unset;
    }

    .list_table th:last-child, .list_table td:last-child{
        padding-right: 24px;
    }

    .area_action_button_div, .disability_action_button_div{
        gap: 3px;
    }

    .el_edit_icon, .el_delete_icon{
        padding: 0 3px !important;
    }

    .header_row{
        flex-direction: column-reverse;
        padding-top: 16px;
    }

    /* User Delete modal style*/

    #deleteConfirm.show{
        width: 100%;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #deleteConfirm.show .el_modal_width{
        width: calc(100% - 1rem);
    }

    .el_yes_no_btn_row{
        gap: 4px;
        justify-content: center;
        align-items: center;
        flex-direction: row;
    }

    .el_yes_no_btn_row .col-md-6{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 45%;
        padding: 0;
        margin: 0;
    }

    .user_profile_card .user_profile_card_row{ 
        padding: 0 !important;
        flex-direction: column;
    }

    .user_profile_card .user_profile_card_row .user_profile_image{
        padding: 12px 0 24px 0 !important;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
        gap: 40px;
        max-width: 100%;
        width: 100%;
        flex-shrink: 0;
    }

    .mobile_report_edit_btn{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
    }
    .user_profile_card .user_profile_card_row .user_profile_image .photo{
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: unset;
        margin-bottom: 24px;
    }

    .user_profile_card .user_profile_card_row .user_profile_image .photo img{
        border-radius: 12px;
        border: 1px solid #CCC;
    }

    .user_profile_card .mobile_report_edit_btn .edit_div.student_edit_div,
    .user_profile_card .mobile_report_edit_btn .edit_div.student_edit_div a{
        padding: 0;
        margin: 0;
    }
    .user_profile_card .details_row .details_row_single.student_details_row_single [class*='col-md'],
    .user_profile_card .details_row .details_row_single [class*='col-md'],
    .info_card_header_row [class*='col-md']
    {
        width: 50%;
        align-items: center;
    }

    .last_working_day_btn_div{
        width: 100% !important;
    }

    .edit_row.edit_row_mobile a{
        font-size: 16px;
    }
    .edit_row.edit_row_mobile{
        justify-content: end;
        width: 100%;
        display: flex !important;
    }

    .tick_and_title_row{
        width: 70% !important;
    }

    .edit_icon_and_text{
        width: 30% !important;
        justify-content: flex-end;
        display: flex;
        padding: 0 10px 0 0 !important;
    }

    td .edit_icon_and_text{
        width: 100% !important;
        display: flex;
        justify-content: center;
    }

    td .edit_icon_and_text h4{
        font-size: 14px !important;
    }

    .table.table-borderless th,
    .table.table-borderless td, .service_text{
        font-size: 14px !important;
    }

    .info_card_header_row [class*='col-md'] h4{
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        line-clamp: 1;
        -webkit-box-orient: vertical;
    }


    .user_profile_card .details_row, .user_profile_card .details_row span{
        font-size: 14px;
    }

    .list_header{
        font-size: 20px;
    }

    .user_profile_card .user_name{
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /* Student and DSC detailed page */

    .info_row .main_container{
        padding: 1rem;
        margin-top: 0;
    }

    .data_row .col-md-6, .data_row .col-md-7,  .data_row .col-md-5{
        width: 50%;
    }

    .data_row .card_body_info_header h4, .data_row .data_view{
        font-size: 14px;
    }

    .info_card_header_row [class*='col-md'] h4{
        font-size: 14px;
    }

    .info_card_header{
        padding: 0.5rem !important;
    }

    .education_payment_details{
        overflow: auto;
    }


    .education_payment_details table{
        width: max-content !important;
    }
    .education_payment_details th{
        width: unset !important;
    }
    
    .info_row .info_bar{
        padding: 0.5rem;
    }
    .info_row .info_bar .info_label h4{
        font-size: 14px;
    }
    
    .info_row .info_bar .add_info_btn{
        font-size: 14px;
    }

    .info_card_header_row{
        padding: 0;
    }

    .info_sub_header_large{
        font-size: 15px;
    }

    .result_file_view, .result_file_view img, .education_payment_attachment_view_image{
        max-width: 200px;
    }

    .desktop_edit_row{
        display: none !important;
    }

    .col-md-9.user_profile_information{
        width: 100%;
    }

    .col-md-9.user_profile_information>.row{
        justify-content: center;
    }

    .user_profile_card .student_edit_row{
        margin-right: 12px;
        gap: 12px;
        align-items: center;
    }

    .data_view_colon{
        display: none;
    }

    #galleryImageViewModal .modal-dialog{
        margin: 0 auto;
    }

    .education_data_row .data_view{
        width: 100%;
    }

    #new_user_div{
        gap: 16px;
    }


    /* User profile styles */

    #lastWorkingDay .el_modal_width{
        max-width: 100% !important;
    }

    .user_profile_card #new_user_div h1{
        font-size: 36px !important;
    }
    .user_profile_card #new_user_div .card_heading h2{
        font-size: 18px;
    }

    .pagination_div{
        display:  none;
    }

    .mobile_pagination_div{
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 12px;
    }
    
    .mobile_pagination_div .page-link{
        padding: 6px ;
    }

    .el_btn{
        font-size: 14px !important;
    }

    .expand_collapse p{
        font-size: 16px !important;
    }
    
    .company_setting_div table{
        padding: 0;
    }

    .user_stat_card .row{
        gap: 16px;
    }

    .m-font-18{
        font-size: 18px !important;
    }

    .m-font-40{
        font-size: 40px !important;
    }









}