@import url('https://fonts.googleapis.com/css2?family=Noto+Kufi+Arabic:wght@100;300;400;500;700;900&family=Open+Sans:wght@400;700&display=swap');


.entitylist table {
    width: 360;
    height: 336;
    top: 342px;
    left: 156px;
    border-radius: 16px;
    opacity: 1;

}

.entitylist table tr {
    padding: 8px;
}


.grid-actions {
    border: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    position: relative;
    z-index: 0;
}
/* #EntityFormPanel {
    padding: 17px;
} */
html[dir=ltr] #EntityFormPanel .actions{
    padding-left: 26px;
}

html[dir=rtl] #EntityFormPanel .actions{
    padding-right: 26px;
}
@media (max-width: 720px) {
    html[dir=ltr] #EntityFormPanel .actions{
        padding-left: 0;
    }
    html[dir="rtl"] #EntityFormPanel .actions{
        padding-right: 0;
    }
}
html[dir=ltr] .crmEntityFormView .actions .btn:first-child{
margin-left: 0;
}

html[dir=rtl] .crmEntityFormView .actions .btn:first-child{
margin-right: 0;
}
.crmEntityFormView,
.entitylist,
.modal-content,
.popover-content {
    border-radius: 10px;
}

:root{
    --back-btn-border-color: #DFE4EA;
    /* --inputs-border-color: #949494; */
    /* --inputs-border-color: #DFE4EA; */
    --inputs-border-color: #111928;
    --section-border-color: #DFE4EA;
    --primary-font-family:  'Noto Kufi Arabic', sans-serif;
    --bs-body-font-family: var(--primary-font-family);
    --primary-color: #006e66;
    --primary-text-color: #111928;
    --secondary-color: #637381;
}
.card{
    --bs-card-border-color:#DFE4EA!important;
}
h1, .h1, .section-landing-heading, .section-landing .row > div .section-landing-heading, .section-inline-search .row > div h1, .section-landing h1, .section-search .header-search h1, .page_section h1, .color-inverse h1, h1 p,.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6{
  font-family: var(--primary-font-family)!important;  
}
html {
    font-size: 15px;
    font-family: var(--primary-font-family);
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}
body{
    font-family: var(--primary-font-family);
    position: relative;
    display: flex;
    flex-direction: column;
    color: var(--primary-text-color);
}
html, body{
    overflow-x: hidden;
}
.footer {
    margin-top: auto !important;
}
.wrapper-body{
    min-height: unset!important;
    height: fit-content!important;
}
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6,p, .p, .page_section p, .section-diagonal-left p, .section-diagonal-right p, p.form-text span{
    font-family: var(--primary-font-family);
}
/* Main Elements Style Start */
:focus-visible
 {
    outline: none;
}
.row.sectionBlockLayout{
    margin: 0!important;
}
.btn, .button2, .btn-secondary, .btn-default{
    border-radius: 4px!important;
    font-weight: 400!important;
    font-family: var(--primary-font-family);
}
button,a{
    outline: none;
}
a ,.btn-primary{
    font-family: var(--primary-font-family)!important;
}
.datetimepicker input,time{
    font-family: "Open Sans",sans-serif!important;
}
.cancel.btn-default,.remove-value{
    color: var(--primary-color)!important;
    border-color: var(--primary-color)!important;
}

.cancel.btn-default:hover,.remove-value:hover,.cancel.btn-default:focus,.remove-value:focus{
    color: white!important;
    border-color: var(--primary-color)!important;
    background-color: var(--primary-color)!important;
}
.btn-primary{
    font-family: var(--bs-body-font-family);
    font-weight: 400!important;
    border-radius: 4px;
}
.submit-btn{
    border-radius: 4px;
}
.btn:disabled{
    background-color: #006e678b!important;
    border-color: #006e678b!important;
}
.button2:active, .button2.active, .btn-default:active, .btn-default.active,.btn-info,.btn-info:active,.btn-info:focus,.btn-info:hover {
    color: #FFFFFF !important;
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    border-radius: 4px;
}

.btn-secondary, .btn-secondary:active, .btn-secondary:hover, .btn-secondary:focus{
    background: none!important;
    border: 1px solid var(--primary-color)!important;
    color: var(--primary-color)!important;
}

.button1{
    font-weight: 400!important;
}
p, .p, .page_section p, .section-diagonal-left p, .section-diagonal-right p, p.form-text span{
    font-size: 1rem!important;
}
.dropdown-menu{
    /* transition: transform 0.3s ease; */
    padding: 0;
}
.dropdown-menu > li > a{
    padding: 10px 15px !important;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus{
    text-decoration: none!important;
}
a:not(.btn):hover {
    text-decoration: none!important;
}
.section-border{
    border: 1px solid var(--section-border-color) !important;
    border-radius: 8px!important;
}
@media (max-width: 768px) {
    .py-sm-0{
        padding-left: 0!important;
        padding-right: 0!important;
    }
    [dir="ltr"] .ps-sm-0{
        padding-left: 0!important;
    }
    
    [dir="rtl"] .ps-sm-0{
        padding-right: 0!important;
    }
    
    [dir="ltr"] .pe-sm-0{
        padding-right: 0!important;
    }
    
    [dir="rtl"] .pe-sm-0{
        padding-left: 0!important;
    }
}
/* Main Elements Style End */.columnBlockLayout

/* Nav Style Start */
/* [dir="rtl"] #navbar{} */
.navbar {
    background-color: var(--primary-color)!important;
    color: white;
    text-decoration: none;
    font-size: 1rem;
}
.static-top.navbar .menu-bar > .navbar-nav > li > a{
   color: white!important; 
   text-decoration: none;
   font-size: 1rem!important;
   font-weight: 400 !important;
}
.navbar .navbar-brand img, .navbar-brand img, .navbar-header img{
    filter: brightness(0) invert(1);
}
.static-top.navbar-dark,.static-top.navbar-dark > .container.custom-container{
    background-color: var(--primary-color)!important;
    z-index: 2;
}
.navbar-dark .navbar-nav > li > a:focus{
    border: none!important;
    outline: none!important;
}
[dir="rtl"] button.navbar-toggler{
    margin-left: 8px !important;
    margin-right: auto !important;
}
.dropdown-search .input-group button{
    margin: 0;
    background: none;
    color: var(--primary-color);
}
/* Nav Style End */

/* Froms Style Start */
.form-control{
    line-height: 1.785rem !important;
    color: var(--primary-text-color);
}
.page-title{
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
[dir="ltr"] .page-title{
    margin-left: 33px!important;
}

[dir="rtl"] .page-title{
    margin-right: 33px!important;
}
@media (max-width: 768px) {
    [dir="ltr"] .page-title{
        margin-left: 0px!important;
    }
    [dir="rtl"] .page-title{
        margin-right: 0px!important;
    }
}
.columnBlockLayout .tab-title, .columnBlockLayout .actions,.columnBlockLayout .page-title,.columnBlockLayout .page-title + .page-subtitle{
    /* padding-left: 28px; */
}
.msos-viewmode-container {
    padding: .375rem .75rem;
    border-color: 1px solid var(--inputs-border-color) !important;
    border-radius: 4px !important;
    background-color: #F3F4F6 !important;
}
.msos-input-container,.msos-selecteditems-container{
    padding: .375rem .75rem!important;
}
.msos-selection-container{
    border: 1px solid var(--inputs-border-color)!important;
    padding: .375rem .75rem!important;
    padding-inline-start: 0.75rem;
}
.columnBlockLayout .page-title + .page-subtitle{
    color: var(--secondary-color);
}
[dir="ltr"] .columnBlockLayout .page-title + .page-subtitle{
    margin-left: 72px!important;
}
[dir="rtl"] .columnBlockLayout .page-title + .page-subtitle{
    margin-right: 72px!important;
}
@media (max-width: 768px) {
    [dir="ltr"] .columnBlockLayout .page-title + .page-subtitle{
        margin-left: 36px!important;
    }
    [dir="rtl"] .columnBlockLayout .page-title + .page-subtitle{
        margin-right: 36px!important;
    }
}

.tab-title .BackBtn,.page-title .BackBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--back-btn-border-color);
    margin-top: 0!important;
    width: 28px;
    height: 28px;
    background-color: white;
    border-radius: 8px;
    border-width: 1px;
    margin-top: 0px;
    margin-right: 0px;
    font-size: 20px;
}

.tab-title .BackBtn .fa-chevron-left,.page-title .BackBtn .fa-chevron-left{
    font-size: 11px;
}
[dir="rtl"] .BackBtn .fa-chevron-left{
    transform: scaleX(-1);
}
[data-name="SUMMARY_TAB"] .crmEntityFormView td.cell{
    padding-left: 0;
    padding-right: 0;
}
.crmEntityFormView .cell .field-label{
    padding-bottom: 8px;
}
a.active.nav-link[role="tab"]:hover{
    text-decoration: none!important;
}
input::placeholder,
textarea::placeholder {
    color: var(--secondary-color)!important;
}

.form-control{
    border-color: var(--inputs-border-color)!important;
    border-radius: 4px!important;
    background-color: #ffffff !important;
}
.crmEntityFormView .input-group .form-control{
    z-index: 1;
}
.crmEntityFormView .form-control.readonly, .crmEntityFormView .form-control[readonly][disabled], .form-readonly .form-control{
    border: 1px solid var(--inputs-border-color) !important;
    border-radius: 4px!important;
    background-color: #F3F4F6 !important;
    padding: .375rem .75rem!important;
}
.crmEntityFormView .form-control.readonly:focus, .crmEntityFormView .form-control[readonly][disabled]:focus, .form-readonly .form-control:focus{
    outline: none!important;
}
.input-group .btn-default{
    color: var(--primary-color)!important;
    border-color: var(--primary-color)!important;
}
.input-group .btn-default:hover,.input-group .btn-default:focus{
    background: none!important;
}
[dir="ltr"] .input-group > button,[dir="ltr"] .input-group-btn > button{
    border: none !important;
    position: absolute !important;
    right: 0;
    top: 6%;
}
[dir="rtl"] .input-group > button,[dir="rtl"] .input-group-btn > button{
    border: none !important;
    position: absolute !important;
    left: 0;
    top: 6%;
    z-index: 10;
}
.datepicker-days button,[dir="rtl"] .datepicker-days button{
    position: relative !important;
}
[dir="ltr"] .input-group button.clearlookupfield{
    right: 46px;
}
[dir="rtl"] .input-group button.clearlookupfield{
    left: 46px;
}
.datetimepicker .input-group-addon{
    background: none;
    border: none;
    align-self: center;
}
[dir="ltr"] .datetimepicker .input-group-addon{
    margin-left: -47px!important;
}
[dir="rtl"] .datetimepicker .input-group-addon{
    margin-right: -47px!important;
}
.datetimepicker .input-group-addon .icon-calendar{
    color: var(--primary-color)!important;
    outline: none;
}
.btn-primary,.entitylist-download{
    height: 35px!important;
    padding: 6px 20px;
}
.btn:focus, .btn:focus-visible{
    outline: none;
}
.entitylist-search{
    margin-top: 2px;
}
.toolbar-actions .view-search input,
.entitylist-search input{
    background: #F3F4F6 !important;
    height: 32px;
    line-height: 12px !important;
    font-size: 12px !important;
    border: none !important;
}
.toolbar-actions .view-search .btn,.entitylist-search .input-group-btn .btn{
    padding: 3px 16px!important;
}
.btn-default.clearlookupfield:focus, .btn-default.clearlookupfield:focus-visible, .btn-default.launchentitylookup:focus, .btn-default.launchentitylookup:focus-visible{
    outline: none !important;
}
[dir="ltr"] .entitylist-filter-option .input-group-text{
    background: none !important;
    border: none !important;
    margin-right: -38px;
    z-index: 1;
    color: var(--primary-color);
    padding: 0.65rem .75rem;
    z-index: 50;
}
[dir="ltr"] .entitylist-filter-option .form-control{
    padding: .375rem .75rem;
    padding-left: 40px;
}
[dir="rtl"] .entitylist-filter-option .input-group-text{
    background: none !important;
    border: none !important;
    margin-left: -38px;
    z-index: 1;
    color: var(--primary-color);
    padding: 0.65rem .75rem;
    z-index: 50;
}
[dir="rtl"] .entitylist-filter-option .form-control{
    padding: .375rem .75rem;
    padding-right: 40px;
}

label {
    font-weight: 500!important;
}
.crmEntityFormView{
    padding-top: 15px;
}
@media (max-width: 768px) {
    .crmEntityFormView{
        padding: 18px;
    }
}
.crmEntityFormView label{
    color: var(--primary-text-color)!important;
    background: none!important;
}
.columnBlockLayout{
    margin-top: 0!important;
    margin-bottom: 0!important;
}
.columnBlockLayout .tab-title,.columnBlockLayout .page-title{
    font-weight: 600!important;
    font-size: 32px;
    display: flex;
    gap: 10px;
    margin-top: 21px !important;
}
.crmEntityFormView .tab-title{
    border-bottom: none;
}
.columnBlockLayout .tab-title + .page-subtitle{
    margin-left: 65px!important;
    margin-top: -44px!important;
    margin-bottom: 40px!important;
}
@media (max-width: 768px) {
    .tab-title{
        margin-left: 0!important;
        margin-right: 0!important;
    }
}
.input-group-btn .btn{
    line-height: 1.6;  
}
.validation-summary{
    margin-left: 28px;
    margin-right: 28px;
}
[dir="ltr"] input[type=checkbox]{
    margin-right: 8px!important;
}

[dir="rtl"] input[type=checkbox]{
    margin-left: 8px!important;
}
.image-inline img{
    object-fit: contain;
}
.msos-container{
    border: 1px solid var(--inputs-border-color) !important;
    border-radius: 4px;
}
.msos-container .msos-caret-button{
    padding-left: 10px !important;
    padding-right: 10px !important;
}
.crmEntityFormView .validation-summary h2{
    font-weight: 400;
}
/* Froms Style End */

/* Modals Styles Start */
.modal-title{
    margin-top: 0!important;   
}
.modal-header h1{
    font-size: 18px;
}
.modal-header .form-close{
    font-size: 25px;
    font-weight: 400;
    top: 2%!important;
}
html[dir=ltr] .form-loading{
    left: 48%;
}
html[dir=rtl] .form-loading{
    right: 48%;
}
/* Modals Styles End */

/* Tables Styles Start */
.selected-records > .btn{
    gap: 8px;
}
.nlsearchcontainer [role="list"]{
    display: flex;
}
[dir="rtl"] .nlsearchcontainer{
    direction: rtl;
}
td,th{
    vertical-align: middle;
}
td{
    font-size: 14px;
}
thead tr th, thead tr th a {
    color: var(--primary-color)!important;
}
.view-pagination .pagination{
    padding: 0;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover{
    background-color: var(--primary-color)!important;
}
.pagination .page-link{
    border-radius: 4px!important;
    width: 30px!important;
    height: 30px!important;
    font-size: 12px!important;
    color: var(--primary-color);
}
.pagination .active a {
    color: white!important;
}
.entity-grid.subgrid{
    position: relative;
}
.sharepoint-grid{
    position: relative;
}
.sharepoint-documents{
    padding-top: 30px!important;
}
[dir="ltr"] .entity-grid.subgrid .view-toolbar.grid-actions,
[dir="ltr"] .sharepoint-documents .view-toolbar.grid-actions{
    position: absolute;
    right: -15px;
    top: -62px;
}

[dir="rtl"] .entity-grid.subgrid .view-toolbar.grid-actions,
[dir="rtl"] .sharepoint-documents .view-toolbar.grid-actions{
    position: absolute;
    left: -15px;
    top: -62px;
}
@media (max-width: 768px) {
    .entity-grid.subgrid .view-toolbar.grid-actions,
    .sharepoint-documents .view-toolbar.grid-actions{
        position: relative !important;
        place-self: end;
        left: unset !important;
        top: unset !important;
        right: unset !important;
        place-self: end;
    }

    .entity-grid.subgrid .view-toolbar.grid-actions .input-group:first-child .btn,
    .sharepoint-documents .view-toolbar.grid-actions .input-group:first-child .btn{
        margin: 0!important;
    }
}
.modal-body .view-toolbar.grid-actions{
    position: relative!important;
    right: 0 !important;
    top: 0 !important;
}
.modal-body > .entity-grid{
    border: 1px solid var(--section-border-color);
    border-radius: 8px;
    padding: 20px; 
}
.subgrid-cell > .control,.sharepoint-documents > .control{
    border: 1px solid #DFE4EA;
    border-radius:4px ;
    padding: 15px;
}
.subgrid-cell h3.form-subgrid-heading label{
    float: none!important;
}

.table>:not(caption)>*>* {
    box-shadow: none;
}

td[aria-label="action menu"] .dropdown-menu,td[aria-label="قائمة الإجراء"] .dropdown-menu {
    border: none;
    box-shadow: 0 0 4px 1px #0000001a;
}
td[aria-label="action menu"] .btn,td[aria-label="قائمة الإجراء"] .btn,td.action.menu .btn:active,td.action.menu .btn:hover,td.action.menu .btn:active,td.action.menu .btn:focus{
    background: none !important;
    border: none !important;
    color: var(--primary-color)!important;
}
.checkbox-cell .table-info{
    padding: 0!important;
}
.table-striped, .table-info, .table-striped > tbody > tr:nth-of-type(odd) > *, .form-control:focus, .dropdown-menu, .datepicker button {
    color: var(--primary-text-color)!important;
}
.form-control:focus{
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%), 0 0 8px rgb(0 110 102 / 20%);
}

@media (max-width: 768px) {
    .grid-actions{
        justify-self: start;
    }
}
.table-striped>tbody>tr:nth-of-type(odd){
    background-color: #f5f5f5;
}
[data-attribute="ctc_clublogo"] img{
    width: 60px;
}
/* Tables Styles End */
/* Calendar Styles Start */
.entitylist{
    border: 0px!important;
}
.events-list > a{
    background-color: var(--primary-color);
}
.event-info:hover, .event-info:focus{
    background-color: #fff;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    text-decoration: none !important;
}
/* Calendar Styles End */

/* Tabs Styles Start */
.nav-tabs { 
    max-width: 1293px;
    background: #F3F4F6;
    margin: auto;
    justify-content: start !important;
    padding: 10px;
    border-bottom: 0;
    border-radius: 4px;

}
.nav-link{
    color: var(--primary-text-color)!important;
    border: none !important;
}
.nav-tabs .nav-item{
    margin: 0!important;
    color: var(--primary-text-color);
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active,a.nav-link[role="tab"]:hover{
    background: var(--primary-color);
    color: white!important;;
    border: none!important;
    border-radius: 4px;
}
/* Tabs Styles End */

/* Custom Forms Start */
.crmEntityFormView[data-form-name="Create New Club"],.crmEntityFormView[data-form-name="Create Club From Federation"]{
    padding-top: 15px;
}

.crmEntityFormView[data-form-name="Edit User Form"],.crmEntityFormView[data-form-name="Contact"]{
    padding: 10px 20px;
}
.crmEntityFormView .tab-column {
    max-width: 1265px;
}
#tab-Federation .columnBlockLayout,#tab-Activity  .columnBlockLayout{
    border: 1px solid var(--section-border-color);
    border-radius: 8px;
    padding: 25px 20px;
}
#tab-Meeting .entity-grid.entitylist,#tab-ActivityMeeting .entity-grid.entitylist{
    border: 1px solid var(--section-border-color) !important;
    border-radius: 8px;
    padding: 25px 20px;
}
@media (max-width: 768px) {
    .tab-content{
        padding: 0;
    }
}
.entitylist-filter{
    border: 1px solid var(--section-border-color);
    border-radius: 8px;
    box-shadow: none !important;
    align-items: start;
    overflow: hidden;
    padding: 0;
    text-align: start;
}
.entitylist-filter .card-body{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
}
[dir="ltr"] .entitylist-filter-option-group{
    margin-left: 2px !important;
}
[dir="rtl"] .entitylist-filter-option-group{
    margin-right: 2px !important;
}
#entitylist-filters{
    margin-bottom: 0;
}
.entitylist-filter-option-group .h4 {
    margin-top: 0;
}
[dir="rtl"] #entitylist-filters{
    padding: 0;
}
[dir="rtl"] #entitylist-filters .list-unstyled{
    padding-left: 40px;
    padding-right: 0px;
}
/* Custom Forms End */