:root {
    --PalePrimaryBGColor:#fff1e7;/*#edf6ff*/
    --PalePrimaryBGColor2:#fae1e1;/*#e1e9fa;*/
    --PalePrimaryBGColor3:#ffcfb0;

    --PrimaryBGColor: #e75c00;/*#0081f1*/
    --PrimaryBGColorHover: #d35603;/*#006adc*/

    --DarkBGColor:#151515;
    --DarkBGColorHover:#000000;


    --PrimaryColorLightBG:#fff7ef/*#ffead4*/;

    --PrimaryColorLightBGHover:#f3e7dc;

    --PrimaryColorLightBG2:#f5f5f5;
    --PrimaryColorLightBG2Hover:#f0f0f0;

    --B1GreyBGColor:#f5f3f1/*#f1f3f5*/;
    --B2GreyBGColor: #e4ddcd;/*#e1e9fa*/



    --WhiteTxtColor:#ffffff;
    --WhiteTxtColorHover:#f1f1f1;



    --DarkTxtColor:#151a20;
    --DarkTxtColorHover:#151a20;



    --SuccessBGColor:#e9f9ee;
    --SuccessTxtColor:#299764;



    --FailedBGColor:#ffd5d9/*#ffe7e7*/;
    --FailedTxtColor:#dc3d43;



    --WarningBGColor:#fff5d7;
    --WarningTxtColor:#534007;


    --PrimaryAlertBGColor:#edf6ff;
    --PrimaryAlertTxtColor:#0081f1;




  
}



::-moz-selection {
  color: white;
  background: var(--DarkBGColor);
}

::selection {
  color: white;
  background: var(--DarkBGColor);
}



.Bold{
    font-weight:600;
}





*{
	outline: none !important;
    box-sizing: border-box;

    /*
    font-family: "Poppins", sans-serif;
    font-family: "Cairo", sans-serif;    
    */
    
    font-family: 'Poppins', 'Tajawal', sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    
}
*:not(input):not(textarea){
	-webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    
}


html,body {
    min-height: 100%;
    width: 100%;max-width: 100%;
    overflow: unset;
    margin: 0;
    padding: 0;
    
    background-color: #ffffff;/*#edf5fa/*#eef0f0*/;
    background-color:#f9f9f9/*#f5f5f5*/;
}
body{
    padding: 90px 0 50px;
}

body.NoTopNav{
    padding-top: 0;
}
/*
body.NoBottomNav{
    padding-bottom: 0;
}
*/
body.NoNav{
    padding-top: 0;
    padding-bottom: 0;
}


body[dir="rtl"] {
    direction: rtl;
    text-align: right;
}




h1,h2,p,ul{
    margin: 0;
    padding: 0;
}


a{
    color: #2b2b2b;
}

.hidden{
    display: none !important;
}

/* Text */

.H1{
    font-size: 32px;
    font-weight: 600;
}

.H2{
    font-size: 28px;
    font-weight: 600;
}
.H3{
    font-size: 24px;
    font-weight: 500;
}
.H4{
    font-size: 20px;
    font-weight: 500;
}

.PopUpIcon{
    width:220px;
    height:220px;
    object-fit: contain;
}

.PopUpIcon:not(.PopUpWidow .PopUpIcon){
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
    filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
}
.ResponseTitle{
    font-size:24px;
    font-weight: 700;
    color: var(--DarkBGColorHover);
}
.ResponseSubTitle{
    font-size:22px;
    font-weight: 600;
    color: var(--DarkTxtColor);
}
.ResponseText{
    font-size:16px;
    font-weight: 500;
    color: #7f7f7f;
}


.Separator{
    width: 100%;
    height: 2px;
    margin: 10px 0;
    background-color: #f7f7f7;
}

.FullWidth{
    width: 100%;
}

/* Deaf Acessbility */
.DeafHelper {
    /*position: absolute;
    right: 2px;
    top: 32px;*/
    cursor: pointer;
    background-color: #f5f5f5;
    background-color: var(--PrimaryColorLightBG2);
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    border-radius: 2px;
    flex-shrink: 0;





    right: 4px;
    top: 34px;
    width: 36px;
    height: 36px;
    padding: 7px;





    border-radius: 7px;
    right: 0px;
    top: 30px;
    width: 44px;
    height: 44px;
    padding: 12px;
}

.RegRadioCont .DeafHelper {
    background-color: #fff7ef;
    background-color: var(--PrimaryColorLightBG);
}
.RegRadioCont .DeafHelper:hover {
    background-color: #fff7ef;
    background-color: var(--PrimaryColorLightBGHover);
}


.DeafHelper:hover{
    background-color: #f0f0f0;
    background-color: var(--PrimaryColorLightBG2Hover);
}
.DeafHelper img,.DeafHelper svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-transition: transform 0.4s;
    -moz-transition: transform 0.4s;
    -ms-transition: transform 0.4s;
    -o-transition: transform 0.4s;
    transition: transform 0.4s;
    
    
    -webkit-transform: rotate(-35deg);
    -moz-transform: rotate(-35deg);
    -ms-transform: rotate(-35deg);
    -o-transform: rotate(-35deg);
    transform: rotate(-35deg);
}
.DeafHelper:hover img,.DeafHelper:hover svg{
    
    -webkit-transform: rotate(-8deg);
    -moz-transform: rotate(-8deg);
    -ms-transform: rotate(-8deg);
    -o-transform: rotate(-8deg);
    transform: rotate(-8deg);
}



/* Buttons */
a.BrandBtn{
    text-decoration: none;
    text-align: center;
    font-weight:500;
    font-size:14px
}
.BrandBtn {
    background-color: #0081f1;
    background-color: var(--PrimaryBGColor);
    color: #ffffff;
    color: var(--WhiteTxtColor);
    padding: 14px 52px;
    font-weight: 500;
    cursor: pointer;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    user-select: none;
    border:none;
    outline: none;
    /* width: 100%; */
}
.BrandBtn:hover{
    background-color:#006adc;
    background-color: var(--PrimaryBGColorHover);
}

.BrandBtn.Dark{
    background-color:#151a20;
    background-color: var(--DarkBGColor);
}
.BrandBtn.Dark:hover{
    color: #f1f1f1;
    color: var(--WhiteTxtColorHover);
    background-color:#000000;
    background-color: var(--DarkBGColorHover);
}

.BrandBtn.Bright{
    background-color: var(--PrimaryBGColor);
    border:2px solid var(--PrimaryBGColor);
    color:#000000;
}
.BrandBtn.Bright:hover{
    background-color: var(--B1GreyBGColor);
}

.BrandBtn.Rounded{
    border-radius: 200px;
}

.Disabled{
    background: #E5E7EB;
    color: #6b7280;
    pointer-events: none;
}   
.Disabled:hover{
    background: #E5E7EB;

}

.BrandBtn.Icon {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    border: none;
}

.BrandBtn.Icon img {
    width: 20px;
    height: 20px;
}


/* CheckBoxes */
.CheckBox {
    position: relative;

    padding-left: 35px;
}

.CheckBox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0 !important;
    width: 0 !important;
}

.CheckBox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: white;
    cursor: pointer;
    border-radius: 5px;
    /* padding-left: 42px; */
    border: 2px solid #4C6BB6;
}


.CheckBox input:checked ~ .checkmark {
    background: #4C6BB6;
}

.CheckBox input:checked ~ .checkmark:after {
    display: block;
  }
  
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.CheckBox .checkmark:after {
    left: 8px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}



.CheckBox.RectCheck input:checked ~ .checkmark {
    background: whitesmoke;
}


.CheckBox.RectCheck .checkmark:after {
    left: 5px;
    top: 5px;
    width: 5px;
    height: 10px;
    background-color: #4C6BB6;
    width: 12px;
    height: 12px;
    transform: none;
    border: none;
    border-radius: 2px;
}

.CheckBox.Error .checkmark{
    border: 2px solid red;
}





/* RadioButtons */
.RadioButton {
    display: block;
    position: relative;
    padding-left: 35px;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
  
/* Hide the browser's default radio button */
.RadioButton input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}

/* Create a custom radio button */
.RadioButton .checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 25px;
	width: 25px;
	background-color: #ffffff;
	border-radius: 50%;
	border: 2px solid #4C6BB6;
}


/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.RadioButton input:checked ~ .checkmark:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.RadioButton .checkmark:after {
    top: 5px;
    left: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    width: 12px;
    height: 12px;
    background: #4C6BB6;
}

.RadioButton.Bright input:checked ~ .checkmark {
	background-color: #4C6BB6;
}


.RadioButton.Bright .checkmark:after{
    background: white;

}



/* Pagination 
.Pagination {
    background: white;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #DFE4EA;
    display: flex;
    gap: 8px;
}

.Pagination a {
    color: black;
    color:var(--DarkTxtColor);
    float: left;
    padding: 10px 16px;
    text-decoration: none;
    transition: background-color 0.3s;
    border: 1px solid #DFE4EA;
    border-radius: 10px;
}

.Pagination a:hover{
    background: #3758F9;
    color: white;

}

.Pagination a.active {
	background: #3758F9;
	color: white;
	
}

.Pagination.Narrow {
    display: inline-block;
}


.Pagination.Narrow a {

    border-radius: 0;
}

.Pagination.Narrow a:hover{
    background: #F2F5FF;
     color: #3758F9;
    border: 1px solid #9CB3FF

}

.Pagination.Narrow a.active {
    background: #F2F5FF;
    border: 1px solid #9CB3FF;
    color: #3758F9;
	
}*/







/* Final Pagination*/
.pagination {
    list-style-type: none;
    padding: 0;
    display: flex;
    gap: 4px;
}
.pagination li {
    margin: 0px;
}
.pagination a {
    text-decoration: none;
    border: 1px solid #f6f6f6;
    color: #333;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;



    
    width: 38px;
    height: 38px;

    display: flex;
    justify-content: center;
    align-items: center;
}
.pagination a svg{
    width: 16px;
    height: 16px;
}
.pagination a svg path{
    fill: #333;
}
.pagination a.active,.pagination a:hover{
    background-color: #e75c00;
    border: 1px solid #e75c00;
    color: white;
}
.pagination a.active {
    pointer-events: none;
}

.pagination a:hover{
    background-color: #efefef;
    border: 1px solid #efefef;
    color: #333;
}


.pagination a.active svg path{
    fill: white;
}





.pagination a.disabled {
    /*color: #ccc;*/
    pointer-events: none;
    display: none;
}
.pagination .ellipsis {
    pointer-events: none;
    padding: 5px 10px;
    cursor: default;

}












/*Horizontal Scroll Drag*/
.HorizDragDropMainContainer {
    /*display: flex;
    justify-content: flex-start;
    align-items: center;*/
    width:100%;
    position: relative;
}
.HorizDragDropCont {
    display: flex;
    overflow-x: hidden;
    overflow-y: visible;
    width: 100%;
    /*padding: 10px 0;*/
    cursor: grab;
    user-select: none;
    gap:5px;
    z-index: 1;
    position: relative;
}

.HorizDragDropCont:active {
    cursor: grabbing !important;
}
.Grabbing{
    cursor:grabbing !important;
}
.Grab{
    cursor:grab !important;
}




.HorizDragDropCont .VirtualDropdown{
    position:static;
}
.HorizDragDropCont .DropDownCont{
    margin-bottom:0;
}
























/* BreadCrumb */
.Breadcrumb {
    padding: 0 20px;
    background-color: white;
    height: 60px;
    display: flex;
    width: 100%;
    max-width: 825px;
    flex-direction: row;
    align-items: center;
    border-radius: 5px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 20px;
    margin: 20px;
    box-shadow: 0px 15px 23px rgba(3, 7, 18, 0.02),
    0px 60px 91px rgba(3, 7, 18, 0.04);
}

.Breadcrumb ul {
    list-style: none;
}

.Breadcrumb li {
    display: inline-block;
}

.Breadcrumb a {
    color: black;
    color:var(--DarkTxtColor);
    text-decoration: none;
    padding: 30px 2px;
}
.Breadcrumb li:not(:last-child):after {
    content: "";
    margin: 0 10px;
    height: 5px;
    width: 5px;
    display: inline-flex;
    color: #374151;
    border-style: solid;
    border-width: 2px 2px 0 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.Breadcrumb .Active{
    color: #4C6BB6;
    font-weight: 600;
}

.TextCenter{
    text-align:center !important;
}

/* Toggles */

.ActiveStats{
    font-size:14px;
    display:block;
    text-align:center;
}

.ToggleBtn{
    position: relative;
    display: inline-block;
    width: 54px;
    height: 30px;
}

.ToggleBtn input{
    opacity: 0;
    width: 0;
    height: 0;
}

.ToggleBtn .slider {
    position: absolute;
    cursor: pointer;
    border-radius: 34px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}


.ToggleBtn .slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 2px;
    bottom: 2px;
    border-radius: 50%;

    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

.ToggleBtn input:checked + .slider {
    background: #4C6BB6;
    left: -2px;
}

.ToggleBtn input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}


.ToggleBtn.Dark .slider{
    background-color: #111928;
}

.ToggleBtn.Dark input:checked + .slider {
    background: #ffffff;
}

.ToggleBtn.Dark input:checked + .slider:before {
    background: #111928;
}

/* DropDown */
.DropDown {
    width: 100%;
    /* border: 1px solid; */
    background-color: white;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 2px solid #f0f0f0 /*#cdd4da*/;
    /*margin-bottom: 15px;
    max-width: 260px;*/
    position: relative;
    
    cursor: pointer;
}
.DropDown>input{
    border-radius: 5px;
    border:none !important;
    padding-right: 11px;

    font-size: 13px;
    font-weight: 500;

}
.DropDown>input{
    padding-left: 11px;
}
.DropDownCont {
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}
.DropDownCont>label{
    margin-bottom:8px;
}


.DropDown ul {
    /*width: 100%;
    height: 40px;
    padding: 10px;*/
    
    position: relative;



    padding: 10px 48px 10px 11px;
    -khtml-border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    resize: none;


    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[dir="rtl"] .DropDown ul{
    padding: 10px 11px 10px 48px;
}

html[dir="rtl"] .SeeAllArrow{
    transform: rotate(180deg);

}


/* .DropDown ul::before, .DropDown ul::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-color: #9e9e9e;
    right: 10px;
    top: 13px;
} */

.DropDown ul::before,.DropDown ul::after {
    content: '';
    right: 10px;
    top: 15px;
    position: absolute;
    transform: rotate(-45deg);
    right: 22px;
    width: 2px;
    height: 10px;
    background-color: #f0f0f0 /*#cdd4da*/;
    z-index: 10;
}
.DropDown ul::after {
    transform: rotate(45deg);
    right: 15px;
}

html[dir="rtl"] .DropDown ul::before,html[dir="rtl"] .DropDown ul::after {
    right: unset;
    left: 15px;
}
html[dir="rtl"] .DropDown ul::after {
    right: unset;
    left: 22px;
}

.VirtualDropdown {
    
    /*  
    border: 1px solid;*/
    position: absolute;
    background-color: white;
    width: 100%;
    margin-top: 2px;
    z-index: 10;
    z-index: 22;

    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;



    -moz-border-radius:5px;
	-khtml-border-radius:5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;  


    -webkit-box-shadow: 0px 0px 60px -15px rgb(0 0 0 / 23%);
    -moz-box-shadow: 0px 0px 60px -15px rgba(0, 0, 0, 0.23);
    box-shadow: 0px 0px 60px -15px rgb(0 0 0 / 23%);
}

.VirtualDropdown .SelectError {
    color: #b80c0c;
}

.VirtualDropdown .Message {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 14px 10px;
    color: #7a6a6a;
    background-color: #f1f1f1;
    font-size: 14px;
    cursor: auto;
    user-select: none;
}


.VirtualDropdown li {
    padding: 8px 14px;
    list-style: none;
    width: 100%;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
}

.VirtualDropdown li:hover {
    background: var(--PrimaryBGColor);

 color: white;
}
.VirtualDropdown .OptionText{
    width: 100%;
}
.VirtualDropdown img {
    width: 40px;
    height: 40px;
    
    
    background: white;
    border-radius: 6px;
    padding: 5px;
}

.SelectActiveBorder{
    border: 2px solid var(--PrimaryBGColor);

}



.DropDownSearch {
    position: absolute;
    z-index: 1;
    border: none;
    padding: 10px;
    width: 100%;
}






















.DeafDropDown .VirtualDropdown li:nth-child(n+1)+li{
    border-top: 1px solid #dfdfdf;
}
.VirtualDropdown .DeafHelper{
    width: 40px;
    height: 40px;;
position: unset;
} 
































#PageLoader {
    display: flex;
    justify-content: center;
    align-content: center;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
    height: 100%;
    width: 100%;
}

.SVGLogo{
    height: 180px;
    width: 180px;align-self: center;
}
body.loading {
	overflow: hidden;
	height: 100vh;
}
.SVGLogo path,.Animation { animation: 4s strokefill  alternate; animation-iteration-count:infinite;animation-fill-mode:both; }
@keyframes strokefill {
0%		{stroke: rgba(255, 255, 255,1); fill: rgba(0,0,0,0); stroke-dashoffset:  25%; stroke-dasharray: 00% 50%; stroke-width: 2; }
50%	{  fill: rgba(0,0,0,0);  stroke-dashoffset: -25%; stroke-dasharray: 50% 00%; stroke-width: 2; }
60%	{stroke: rgba(255, 255, 255,0.7);stroke-width: 0.2; }
100%	{stroke: rgba(255, 255, 255,0);opacity: 1; }
}

.AnimationFillFinal { animation: 4s Finalfill  alternate; animation-iteration-count:infinite;animation-fill-mode:both; }
@keyframes Finalfill {
0%		{stroke: rgba(255, 255, 255,0); fill: rgba(0,0,0,0); stroke-dashoffset:  25%; stroke-dasharray: 00% 50%; stroke-width: 2; }
50%	{  fill: rgba(0,0,0,0);  stroke-dashoffset: -25%; stroke-dasharray: 50% 00%; stroke-width: 2; }
60%	{stroke: rgba(255, 255, 255,0);stroke-width: 0.2; }
100%	{stroke: rgba(255, 255, 255,0);opacity: 1; }
}

.BlackSVG{animation: 4s strokefillBlackSVG  alternate; animation-iteration-count:1;animation-fill-mode:both; }
@keyframes strokefillBlackSVG {
0%		{stroke: rgba(255, 255, 255,1); fill: rgba(105, 105, 104,0); stroke-dashoffset:  25%; stroke-dasharray: 00% 50%; stroke-width: 2; }
50%	{  fill: rgba(105, 105, 104,0);  stroke-dashoffset: -25%; stroke-dasharray: 50% 00%; stroke-width: 2; }
60%	{stroke: rgba(255, 255, 255,0.7);stroke-width: 0.2; }
100%	{stroke: rgba(105, 105, 104,0);opacity: 1; }
}

.LoaderContainer{position: fixed;z-index:105;height: 100vh;
	height: calc(var(--vh, 1vh) * 100);
	width: 100%;background-color:#11232f/* #1a2e47*/;}
.Loader{
	position: fixed;top:50%;left:50%;transform: translate(-50%,-50%);height: 150px;width: 150px;
}






/* Layout */

.Flexbox{
    display: flex;
    gap:20px ;
}

.Flexbox.Column{
    flex-direction: column;
}

/* shorthand for centering everything */
.Flexbox.AllCentered{
    justify-content: center;
    align-items: center;
}

.Flexbox.AlignStart{
align-items: flex-start;
}
.Flexbox.AlignEnd{
align-items: flex-end;
}

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

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

.Flexbox.JustifyAround{
    justify-content: space-around;
}

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


.AlignSelfStart{
    align-self: flex-start;
}
.AlignSelfEnd{
    align-self: flex-end;
}

.AlignSelfCenter{
    align-self: center;
}

.Flexbox.Wrap{
    flex-wrap: wrap;
}

.Flexbox.G5{
    gap: 5px;
}

.Flexbox.G10{
    gap: 10px;
}

.Flexbox.G15{
    gap: 15px;
}

.Flexbox.G20{
    gap: 20px;
}

.Flexbox.G25{
    gap: 25px;
}


.Flexbox.G30{
    gap: 30px;
}


.Flexbox.G35{
    gap: 35px;
}


.Flexbox.G40{
    gap: 40px;
}


.Flexbox.G45{
    gap: 45px;
}


.Flexbox.G50{
    gap: 50px;
}

.Flexbox.G60{
    gap: 60px;
}


.W100{
    width: 100%;
}



























/* InputGroup */

.InputGroup {
    display: flex;
    flex-direction: column;
    gap: 7px;
    width: 100%;
    position: relative;
    margin-bottom: 14px;
}
.InputGroup p{
    font-size: 15px;
}


.ResendEmail{
    cursor: pointer;
    text-decoration: underline;
    padding:2px 0;
    display: block;
}
.ResendEmail.Disabled{
    color: #a8a8a8;
    background-color: unset;
}
.ResendEmailTimer{
    font-weight: 500;
}

.PasswordCont{
    position: relative;
    width: 100%;
}
.PasswordCont input{
    padding:10px 83px 10px 11px;
}


/*
.PasswordCont input +.Icon{
    right: 56px;
}

.PassEye svg path{
    fill: transparent;
    stroke:#151a20;
}*/
.PassEye{
    width: 40px;height: 40px;
    top: 1px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events:unset !important;
}
.Shown.PassEye svg:nth-child(1),.PassEye svg:nth-child(2){
    display: block;
}
.Shown.PassEye svg:nth-child(2),.PassEye svg:nth-child(1){
    display: none;
}


/*
.InputGroup label{
    font-weight: 600;

}*/
/*Hide Edge Show/Hide Btn */
input[type="password"]::-ms-reveal {
    display: none;
}

.InputGroup input,.InputGroup textarea,.TextArea textarea {
    padding: 10px 48px 10px 11px;
    border: 2px solid #DFE4EA;
    border-radius: 5px;

    font-size: 13px;
    font-weight: 500;

    width: 100%;


    resize: none;

    /*width: calc(100% - 52px);*/
}


html[dir="rtl"] .InputGroup input, html[dir="rtl"] .InputGroup textarea,html[dir="rtl"] .TextArea textarea{
    padding: 10px 11px 10px 48px;
}


.InputGroup input[type="number"]{
    padding: 10px 11px 10px 11px;
}




.InputGroup input.BrandBtn{
    border: none;
}


.InputGroup p{
    padding-left: 5px;
}
.InputGroup input::placeholder,textarea::placeholder{
    color: #c7c7c7;
    font-weight: 500;
}

.InputGroup.Error input,.TextArea.Error textarea{
    border: 2px solid #F23030;
}

.FieldError{
    font-size: 14px;
}
.FieldError>p {
    color: #F23030;

    margin: 8px 0 4px;

}

/* make field error positioned correctly in checkboxes*/
.CheckBox .FieldError {
    display: block;
    margin-top: 10px;
    color: red;
    font-size: 16px;
    max-width: 100%;
    word-wrap: break-word;
    white-space: normal;
    max-width: 332px;
}

.InputGroup.Correct input{
    border: 2px solid #22AD5C;
}

.InputGroup.Correct p{
    color: #22AD5C;
}







/* Icons Inside InputGroups */
.InputGroup .Icon {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 46px;
    top: calc( 50% + -9px );

    pointer-events: none;
}
html[dir="rtl"] .InputGroup .Icon {
    right: unset;
    left: 10px;
}
.InputGroup .Icon img,.InputGroup .Icon svg{
    width: 18px;
    height: 18px;
}









/*Navigation Bar*/
.NavBar {
    position: fixed;
    z-index: 999;
    top: 0;left: 0;
    width: 100%;
    height: 80px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;

    -webkit-box-shadow: 0px 0px 60px -15px rgb(0 0 0 / 23%);
    -moz-box-shadow: 0px 0px 60px -15px rgba(0, 0, 0, 0.23);
    box-shadow: 0px 0px 60px -15px rgb(0 0 0 / 23%);
}
.NavBar .Container{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.NavLogoCont{
    height: 80px;
    width: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.NavLogo{
    height: 65px;
    width: 65px;
}


.NavLinksCont{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    height: 100%;
}
.NavLinksCont .NavLink{
    justify-content: flex-end !important;
}
.NavLink{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-decoration: none;
    height: 100%;
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 500;
    border-top: 3px solid transparent;
    gap:5px;
}

.NavLink.Active,.NavLink:hover{
    border-top: 3px solid var(--PrimaryBGColor);
    color: var(--PrimaryBGColor);
}

.NavLink img,.NavLink svg{
    width: 24px;
    height: 24px;
    object-fit: contain;
}



































/* Modal */

.modal {
	display: flex;	
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.4);
	z-index: 1000;
}

.modal-content {
	padding: 55px 25px 20px 25px;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	color: black;
	/* box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; */
	background: white;
	width: 100%;
	max-width: 500px;
    position: relative;
    margin: auto;

    max-height: 90vh;
    overflow-y: auto;
}
.modal-content>h2{
    width:100%;
    padding: 10px 65px 10px 20px;
    
    padding: 10px 0 10px 0;
    
    font-weight: 700;
    font-size: 22px;
    text-align:left;
}

html[dir="rtl"] .modal-content>h2{
    padding: 10px 20px 10px 65px;
    padding: 10px 0 10px 0;
    text-align:right;

}

.modal-content>p{
    text-align:left;
    width:100%;
}
html[dir="rtl"] .modal-content>p{
    text-align:right;
}

.modal-content .BrandBtn{
    font-size:14px;
}

.modal>.modal-content> .BrandBtn{
    margin-top:30px;
}

.modal>.modal-content> form :not(.RegRadioCont ) label:not(.Upload){
    color: #000000;
    color: var(--DarkBGColor);
    font-size: 15px;
    font-weight: 500;
    padding: 10px 0 5px;
}



.ModalCancel {
    position: absolute;
    top: 13px;
    right: 17px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-color: #f2f2f2;
    /* border-radius: 20px; */
    border-radius: 6px;
}

html[dir="rtl"] .ModalCancel{
    right: unset;
    left: 17px;
}

.ModalCancel:hover {
    background: #efefef;
}



.ModalCancel:before,.ModalCancel:after {
	content: '';
	background-color: #a1a1a1;
	display: block;
	width: 3px;
	height: 16px;
	transform: rotate(-45deg);
	position: absolute;
	top: 12px;
	right: 19px;

    -moz-border-radius:10px;
	-khtml-border-radius:10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;    
}

.ModalCancel:after {
	transform: rotate(45deg);
	right: 19px;
}








.PopUpWidow{
	width: 100%;
	height: 100%;
	background-color: #000000ab;
	position: fixed;
	top:0;
	left:0;
	z-index: 1000;
	display: flex;
    -moz-backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.WhiteMenuCont{
	width: 90%;
	max-width: 450px;
	max-height:80%;
	overflow-y:auto;
	-moz-border-radius:15px;
	-khtml-border-radius:15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	background-color: white;

	padding: 30px;
	margin:auto;
	position: relative;
}
.DeafInfoHub .WhiteMenuCont{
    padding: 80px 20px 25px;
}
.CloseBGLayer,.PopUpOverlay{
	position: absolute;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	/*cursor:pointer;*/
}
.HideGrandParent,.HideParent{
    cursor: pointer;
}








/* Alerts */
.Alert{
    padding:10px 12px 10px 12px;
    border-radius: 5px;
    font-weight: 500;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.AlertPrimary{
    background-color: var(--PrimaryAlertBGColor);
    color: var(--DarkBGColorHover);
}
.AlertPrimary2{
    background-color: var(--PalePrimaryBGColor);
    color: var(--DarkBGColorHover);
}
.AlertSuccess{
    background-color: var(--SuccessBGColor);
    color: var(--DarkBGColorHover);
}
.AlertFailed{
    background-color: var(--FailedBGColor);
    color: var(--DarkBGColorHover);
}
.AlertWarning{
    background-color: var(--WarningBGColor);
    color: var(--DarkBGColorHover);
}


.FieldError .Alert{
    /*margin-top: 10px;*/
}


/* DeafInfoHub */
.DeafInfoHub .FlexBox{
    position: relative;
}

.DeafInfoHub .FlexBox .HideGrandParent{
    height: 40px;
    width: 40px;
    background-color: var(--PrimaryColorLightBG2);

    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 20px;
    top: 20px;
    border-radius: 10px;
}
.DeafInfoHub .FlexBox .HideGrandParent:hover{
    background-color: var(--PrimaryColorLightBG2Hover);
}
.DeafInfoHub .FlexBox .HideGrandParent svg, .DeafInfoHub .FlexBox .HideGrandParent img{
    width: 100%;
    height: 100%;
    padding: 10px;
}
#GIFHepler {
    /*width: 300px;
    height: 260px;

    width: 100%;
    height: unset !important;*/
    
    width: 360px;
    height: 400px;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    

    border-radius: 5px;
    margin: auto;
}






/* Layout
.Container{
    width:100%;
    margin-right:auto;
    margin-left:auto;
    padding-right:15px;
    padding-left:15px;
    max-width: 1600px;
} */



.Container{
    width:100%;
    margin-right:auto;margin-left:auto;
    padding-right:15px;padding-left:15px;
}
@media only screen and (max-width: 600px) {
    
}
@media only screen and (min-width: 600px) {
    .Container{
        max-width:560px;
    }
}
@media only screen and (min-width: 768px) {
    .Container{
        max-width:768px;
    }
}
@media only screen and (min-width: 992px) {
    .Container{
        max-width:960px;
    }
}
@media only screen and (min-width: 1200px) {
    .Container{
        max-width:1140px;
    }
}


.dBlock{
    display: block;
}
.FlexBox{
    display: flex;
}
.pRelative{
    position: relative;
}


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

.FlexEnd{
    justify-content: flex-end;
}
.FlexStart{
    justify-content: flex-start;
}
.FlexCenter{
    justify-content: center;
}
.FlexVCenter{
    align-items: center;
}
.FlexVStart{
    align-items: flex-start;
}
.FlexVEnd{
    align-items: flex-end;
}

.Gap0{
    gap: 0px !important;
}
.Gap5{
    gap: 5px;
}
.Gap10{
    gap: 10px;
}
.Gap15{
    gap: 15px;
}



/* Padding */
.PT0{
    padding-top: 0px !important;
}
.P15{
    padding: 15px;
}

.P30{
    padding: 30px;
}

.P60{
    padding: 60px;
}


.P100{
    padding: 100px;
}

/* Padding Top Button */
.PTB30{
    padding:30px 0px ;
}

.PTB60{
    padding:60px 0px ;
}

.PTB100{
    padding:100px 0px ;
}

/* Padding Right Left */

.PRL15{
    padding: 0px 15px ;
}

.PRL30{
    padding: 0px 30px;
}

.PRL60{
    padding: 0px 60px;

}

.PRL100{
    padding: 0px 100px;

}


/* Margin */

.M15{
    margin: 15px;
}

.M30{
    margin: 30px;
}

.M60{
    margin: 60px;
}


.M100{
    margin: 100px;
}

/* Margin Top */
.MT50{
    margin-top:50px;
}
.MT40{
    margin-top:40px;
}
.MT30{
    margin-top:30px;
}
.MT20{
    margin-top:20px;
}
.MT15{
    margin-top:15px;
}
.MT10{
    margin-top:10px;
}
.MT5{
    margin-top:5px;
}
.MT0{
    margin-top:0px !important;
}

.MB50{
    margin-bottom:50px;
}
.MB40{
    margin-bottom:40px;
}
.MB30{
    margin-bottom:30px;
}
.MB20{
    margin-bottom:20px;
}
.MB15{
    margin-bottom:15px;
}
.MB10{
    margin-bottom:10px;
}
.MB5{
    margin-bottom:5px;
}
.MB0{
    margin-bottom: 0;
}
/* Margin Top Button */
.MTB30{
    margin:30px 0px ;
}

.MTB60{
    margin:60px 0px ;
}

.MTB100{
    margin:100px 0px ;
}

/* Margib Righ Left */
.MRL15{
    margin: 0px 15px ;
}

.MRL30{
    margin: 0px 30px;
}

.MRL60{
    margin: 0px 60px;

}

.MRL100{
    margin: 0px 100px;

}






.PB50{
    padding-bottom:50px;
}
.PB40{
    padding-bottom:40px;
}
.PB30{
    padding-bottom:30px;
}
.PB20{
    padding-bottom:20px;
}
.PB15{
    padding-bottom:15px;
}
.PB10{
    padding-bottom:10px;
}
.PB5{
    padding-bottom:5px;
}
.PB0{
    padding-bottom: 0;
}










/* Registeration */
.LoginLanguageCont{
    background-color:#f5f5f5/*#f9f9f9*/;
    background-color:var(--PrimaryColorLightBG2);
    font-size:15px;
    font-weight:500;
    padding:10px 20px;
    display:flex;
    gap:10px;
    align-items:center;
    border-radius:4px;
    text-decoration: none;
}

.LoginLanguageCont:hover {
    background-color: #f0f0f0;
    background-color: var(--PrimaryColorLightBG2Hover);
}

.LoginLanguageCont img.LanguageIcon{
    width: 20px;
    height: 15px;
    border-radius: 2px;
    object-fit: cover;
}
            
            
            
            
.Registeration {
    /*justify-content: center;
    align-items: center;*/
    min-height: 100vh;
    width: 100%;
    display: flex;
    padding: 20px;
}
.Registeration>div{
    margin: auto;
}
.Registeration h1{
    padding-bottom: 20px;
    /*text-align: center;*/
    font-size: 25px;
}
.FieldsContainer {
    background-color: white;
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    padding: 53px;
    border-radius: 10px;
    /*gap: 30px;
     justify-content: center; */
    align-items: center;
    margin: auto;
}

.Registeration form {
    width: 100%;
    max-width: 650px;
    margin: auto;
}
.FieldsContainer label{
    color: #000000;
    color: var(--DarkBGColor);
    font-size: 15px;
    font-weight: 500;
}


.RadioContainer {
    display: flex;
    gap: 20px;
    align-items: center;
}



@media only screen and (max-width: 600px) {
    .RadioContainer {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;

        align-self: self-start;
    }
    .Registeration{
        padding: 0;
    }
    .Registeration form {
        width: 100%;
    }
    .Registeration .Container{
        padding: 0;
    }
    .Registeration .FieldsContainer{
        padding: 30px 25px;
    }

    .FieldsContainer{
        padding: 10px 7px;
    }
    /*
    .FieldsContainer label {
        font-size: 18px;
    }*/

    .modal-content{
        width: 96%;
        width: calc(100% - 36px);
        max-width: 400px;
    }
    .DeafInfoHub img {
        width: 215px;
        height: 200px;
    }
    .Registeration h1 {
        padding-bottom: 24px;
        text-align: center;
    }

    .Registeration.P30{
        padding: 12px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 768px){

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

}
@media only screen and (min-width: 992px) and (max-width: 1200px) {

}
@media only screen and (min-width: 1200px) {

}







.QuickActionBtnCont{
    width:100%;
    gap:10px;
    display:flex;
    justify-content:flex-start;
    align-items:flex-start;
}


.RegRadioCont {
    display: block;
    position: relative;
    display: flex;
    gap:15px;
    margin-top: 5px;;
}

.RegRadioCont label,.QuickActionBtn{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between/*center*/;
    align-items:center;
    /*gap:5px;*/
    padding: 14px 10px 12px;
    border: 3px solid #edf6ff;
    background-color: #edf6ff;
    border: 3px solid var(--PalePrimaryBGColor);
    background-color: var(--PalePrimaryBGColor);
    border-radius: 8px;
    cursor: pointer;
    
    text-decoration:none;

    opacity: 0.8;
    filter: saturate(.8);
}

.RegRadioCont label .DeafHelper,.QuickActionBtn .DeafHelper{
 width: 100%;
 height: 38px;
}
.RegRadioCont label .DeafHelper svg,.QuickActionBtn .DeafHelper svg{
    width: 22px;height: 22px;
}
.RegRadioCont input:checked + label,.QuickActionBtn:hover{
    /*color: white;
    background-color: #0081f1;*/
    border-color: #0081f1;
    border-color: var(--PrimaryBGColor);
    

    opacity: 1;
    filter: unset;
}
svg path.FillSignLang{
    fill: var(--PalePrimaryBGColor);
    stroke:unset !important;
}
/*
.RegRadioCont input:checked + label svg path{
    fill: transparent;
    stroke: white;
}
*/



.RegRadioCont label svg,.QuickActionBtn svg{
    width: 30px;
    height: 30px;
    object-fit: contain;
}
.RegRadioCont label span,.QuickActionBtn span{
    width: 100%;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
    margin:5px 0 7px;
    
}
.RegRadioCont label span{
    text-align: left;
}
html[dir="rtl"] .RegRadioCont label span{
    text-align: right;
}

html[dir="rtl"] .RegRadioCont label.Centered span,.RegRadioCont label.Centered span{
    text-align: center;
}

.RegRadioCont input{
    display: none;
}







svg g{
    stroke: #006adc;
    stroke: var(--PrimaryBGColor) !important;

}
svg path{
    stroke: #006adc;
    stroke: var(--PrimaryBGColor) !important;

}


svg path.Filled,svg g.Filled{
    fill:#e1e9fa;
    fill:var(--PalePrimaryBGColor) !important;
}

svg path.Filled2,svg g.Filled2{
    fill:#e1e9fa;
    fill:var(--PalePrimaryBGColor2) !important;
}


svg path.Filled3,svg g.Filled3{
    fill:#e1e9fa;
    fill:var(--PalePrimaryBGColor3) !important;
}





















































































 /* cover */
.CoverCont{
    position: relative;
    cursor: pointer;
    width: 100%;
}
.CoverCont img {
    -webkit-user-drag: none;
}
.CoverCont:hover{
    -webkit-filter: brightness(90%);
    filter: brightness(90%);
}
.ProfileCoverEditBtn {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 40px;
    width: 40px;
    background-color: white;
    z-index: 1;
    -khtml-border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: 9px;
}

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

















/* Profile */
.Profile.FlexBox{
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    padding: 0;
}








.ProfileSectionCont {
    /* padding: 40px; */
    display: flex;
    flex-direction: column;
    background-color: white;
    width: 100%;
    max-width: 1280px;
    -khtml-border-radius: 16px;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    border-radius: 16px;
    overflow: hidden;
}



.ProfileCover{
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center center;
    -o-object-position: center center;
}

.ProfileInfoCont {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 0 30px 24px;
    position: relative;
    margin-top:-99px;
}
.ProfilePicture {
    position: relative;
    width: 146px;
    height: 146px;
    -khtml-border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: #e5e5e5;
    border: 4px solid white;
    cursor: pointer;
}
.ProfilePicture::before{
    content:"";
    position: absolute;
    top:0;
    left:0;
    height: 100%;
    width: 100%;
    display: block;
    background-color: #00000000;
    z-index: 1;
    -khtml-border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
.ProfilePicture:hover::before{
    background-color: #0000001f;
}
.ProfilePicture>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    object-position: center;
    -o-object-position: center;
    -khtml-border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
.ProfilePicture:hover .ProfilePicEditBtn{
    background-color: #f3f3f3;
}
.ProfilePicEditBtn{
    position: absolute;
    bottom: -10px;
    right: 10px;
    height: 40px;
    width: 40px;
    background-color: white;
    z-index: 1;
    -khtml-border-radius: 6px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    padding: 9px;
}
.ProfilePicEditBtn img{
    width: 100%;
    height: 100%;
}


/*
.ProfileInfoCont:hover img{
    filter: brightness(75%);
}*/

.ProfileInfo {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 0 0;
}


.ProfileInfo #UserLocation {
    color: #6b6969;
    font-weight: 500;
    font-size: 14px;
}




.ProfileExprienceCont{
    position: relative;
    padding: 30px;
}

.ProfileExprienceCont h2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;   
    font-size: 20px;
    width: 100%;;
}





.ProfileSecTitle{
    font-weight:600;
    font-size:16px;
    color:#202020;
}
.ProfileSecText{
    font-weight: 400;
    font-size: 15px;
    color: #6b6969;
    margin-top: 5px;
}




.Actions .SectionAction{
    opacity: 0.8;
}
.Actions .SectionAction:hover{
    opacity: 0.9;
}



.SectionAction{
    height: 46px;
    width: 46px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    cursor: pointer;
    background: #f5f5f5;
    background-color: var(--PrimaryColorLightBG2);
}

.SectionAction:hover{
    background-color: #f0f0f0;
    background-color: var(--PrimaryColorLightBG2Hover);

}

.SectionAction img{
    width: 20px;
    height: 20px;
    object-fit: contain;
}



.ProfileExprienceCont .Heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}


.ProfileExpriences {
    display: flex;
    flex-direction: column;
}
.ProfileExpriences>div:first-child,.ProfileExpriences>p:first-child{
    margin-top: 35px;
}
.BioText{
    color:#818181;
}
.Exprience{
    display: flex;
    align-items: center;
    gap: 15px;
    
    padding: 15px 0;
    border-bottom: 2px solid #f4f4f4;
}
.Exprience:last-child{
    border-bottom: 2px solid transparent;
}

.ExperienceImgCont {
    width: 50px;height: 50px;
    background-color: #ffeded;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;


    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.Exprience .ExperienceImgCont> img{
    width: 100%;
    height: 100%;
    padding: 13px;
    flex-shrink: 0;
}
.ExprienceDetails{
    width: 100%;
}
.ExprienceJobTitle,.EduSectionInstitute,.SchoolName{
    font-weight: 600;
}

.Exprience .Actions{
    display: flex;
    flex-shrink: 0;
    gap:10px;
}
.ExprienceCompanyName,.EduSectionDegree{
    color: #505050;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
}
/*
.Exprience img{
    width: 40px;
    height: 40px;
}*/

.ProfileSkills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
/*
.ProfileSkills .Skill {
    padding: 10px 30px;
    border-radius: 5px;
    user-select: none;
    background-color: #d9f5fd;
}*/

.AddExprience .modal-content,.AddEducation .modal-content,.AddSkill .modal-content,.AddCert .modal-content{
    /* align-items: start;    */
    gap: 20px;
    max-height: 86vh;
}

.ChangeProfileImg .modal-content{
    gap: 40px;
}


.AddExprience .ModalCancel,.AddEducation .ModalCancel{
    top: 30px;
}

.modal form,.PPForm{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
    overflow-y: auto;
    padding: 0 20px;
}
.AddExprience .DropDown,.AddEducation .DropDown,.AddSkill  .DropDown,.AddCert .DropDown{

    max-width: 100%;
}


.AddExprience input[type="date"] ,.AddEducation input[type="date"]{
    padding: 10px;
    border: 2px solid #f0f0f0 /*#cdd4da*/;
    border-radius: 5px;
    cursor: pointer;
}


.DateDropDown {
    display: flex;
    /* justify-content: space-between; */
    /* max-width: 302px; */
    gap: 26px;
}
.DateDropDown .DropDown {
     /*max-width: 140px; */
     width: 100%;
}



.ModalFormMessage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.ModalFormMessage img {
    width: 160px;
    height: 160px;
}
.ModalFormMessage h2 {
    font-weight: 500;
    font-size: 21px;
}

.Modal form .RegRadioCont{
    margin-bottom: 13px;
}


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

    .ProfileInfoCont{
        align-items: flex-start;
    }
    
    .ProfileCover{
        height: 150px;
    }

}
@media only screen and (min-width: 600px) and (max-width: 768px){
    .ProfileCover{
        height: 160px;
    }

}
@media only screen and (min-width: 768px) and (max-width: 992px) {
    .ProfileCover{
        height: 180px;
    }

}
@media only screen and (min-width: 992px) and (max-width: 1200px) {

}
@media only screen and (min-width: 1200px) {

}






/* COMPANY */
form.EditDescForm {
    display: flex;
    flex-direction: column;
}


.ActionGroup {
    display: flex;
    justify-content: center;
    gap: 40px;
}





@media only screen and (max-width: 600px) {
    .EditDescForm .BrandBtn{
        padding: 8px 30px;

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

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

}
@media only screen and (min-width: 992px) and (max-width: 1200px) {

}
@media only screen and (min-width: 1200px) {

}














/************************** CUSTOM PP Start ****************************/

.ProfilePicWrapper {
    position: relative;
    width: 200px;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
}

.ProfilePicLabel {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    cursor: pointer;
    padding:0 !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.ProfilePicPreview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ProfilePicInput {
    display: none !important;
}
.OverlayLabel {
    position: absolute;
    z-index: 2;
    bottom: 0;
    top:0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #00000057;
    color: white;
    text-align: center;
    padding: 5px 0;
    font-size: 14px;
    opacity: 1;
    transition: background 0.3s ease;
}

.ProfilePicLabel:hover .OverlayLabel {
    background: rgba(0, 0, 0, 0.6);
}

/**************************** CUSTOM PP End ****************************/





/*  */
.ProfileHeadingCont{
    padding: 10px
}


.PhoneCont {
    display: flex;
    align-items: flex-start;
}
.PhoneCont .DropDownCont {
    gap: 7px;
    max-width: 188px;
}
.PhoneCont label{
padding: 0px;
}

h2#UserName {
    display: flex;
    gap: 8px;
}





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

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

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

}
@media only screen and (min-width: 992px) and (max-width: 1200px) {

}
@media only screen and (min-width: 1200px) {

}


















































.DropDown ul{
    min-height: 40px;
}





.modal>.modal-content> form :not(.RegRadioCont )  label:not(.Upload){
    padding: 0 0 5px;
}


.PhoneCont{
    flex-direction: column;
}
.PhoneCont .DropDownCont {
    gap: 0;
    max-width: unset;
    margin-bottom: 14px;
}



/*#UserLocation span:nth-child(2)::before*/
#UserLocation span:nth-child(1):not(:empty) + span:nth-child(2)::before{
    content: ", ";
    display: inline-block;
    padding: 0 4px 0 1px;
}





#LoadingMenu{
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1000;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color:#00000030;
}
#LoadingMenu .WhiteMenuCont{
    width:unset;
    z-index: 102;
    padding: 10px;
    background-color: white;
    border-radius: 20px;
    -webkit-box-shadow: 0px 0px 55px -7px rgb(0 0 0 / 33%);
    -moz-box-shadow: 0px 0px 55px -7px rgba(0, 0, 0, 0.33);
    box-shadow: 0 0px 55px -7px rgb(0 0 0 / 33%);
}
#LoadingMenu svg{
    width: 100px;
    height: 100px;
}



.ProfileInfoCont {
    padding: 0 20px 24px;
    padding: 0 0 6px 15px;
}

.RegRadioCont.Column{
    flex-direction: column;
}




/* InputGroups With Uploads */
.InputGroup .Upload input {
    display: none;
}
.InputGroup .Upload .Icon{
    pointer-events: none;
    opacity:0.2;
}
.Upload {
    padding: 10px 40px 10px 11px;
    border: 1px solid #DFE4EA;
    border-radius: 5px;
    width: 100%;
    /*max-width: calc(100% - 54px);*/
    max-width:100%;
    cursor: pointer;
    flex-direction: row;
    font-size: 13px !important;
    align-items: center;
    /* font-weight: 300; */
    color: gray;
    display: inline-flex;
    position: relative;
}

html[dir="rtl"] .Upload {
    padding: 10px 11px 10px 40px;
}

.Upload .FileNames{
    width: 100%;
    height: 100%;
    color: #c7c7c7;
    font-weight: 500;
    font-size:13px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.Upload .FileNames p{
    padding: 0;
    max-width: 100%;
    font-size: inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.Upload.Error{
    border: 2px solid red;

}




.RegRadioCont.WithHorizonalText .DeafHelper {
    background-color: #f0f0f0;
    background-color: var(--PrimaryColorLightBG2);
    height: unset;
}
.RegRadioCont.WithHorizonalText .DeafHelper:hover {
    background-color: #fff7ef;
    background-color: var(--PrimaryColorLightBG2Hover);
}



.RegRadioCont label img{
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.RegRadioCont.WithHorizonalText label{
    flex-direction: row;
    padding: 14px 14px 14px;
    gap:5px;
}




















.ModalLabelFlex{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /*margin-top: 15px;*/
    position: relative;
}
.ModalLabelFlex::before{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    background-color: #f5f5f5;

}
.ModalLabelFlex label,.ModalLabelFlex p{
    position: relative;
    z-index: 2;
    background-color: white;
    padding: 0 10px 0 0 !important;
    display: inline-block;
}
html[dir="rtl"] .ModalLabelFlex label,html[dir="rtl"] .ModalLabelFlex p{
    padding: 0 0 0 10px !important;
}
.ModalLabelFlex .DeafHelper{
    position: relative;
    z-index: 2;
    top: 0;
    left: 0;
}





.Flags+.DropDownCont .VirtualDropdown img{
    width: 33px;
    height: 24px;
    -khtml-border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    
    background-color:unset !important;
    padding: unset !important;

    box-shadow: rgba(149, 157, 165, 0.32) 0px 0px 10px;
}




.ConfirmBox{
    display: flex;
    gap: 10px;
}

.Invisible{
    visibility: hidden;
}







.HideDeafHelper .DeafHelper{
    display:none !important;
}








































































/* JOBS PAGE */
.PageTitle{
    font-size:26px;
}
.JobsHeading {
    color: #6a6a6a;
    font-size:15px;
    margin-bottom:5px;
    /*margin-bottom:15px;*/
}
.JobVaccancies {
    background-color: white;
    border-radius: 8px;
    display:flex;
    flex-direction: column;
    padding: 10px 30px 10px;
}
.Jobs {
    max-width: 600px;
}

.JobVaccancy:not(:last-child) {
    /*padding-bottom: 20px;*/
    border-bottom: 1px solid #f1f1f1;
}
.JobVaccancy{
    padding:14px 0;
    text-decoration: none;
    color: #000000;
    
    display:flex;
    gap:16px;
    justify-content:flex-start;
    align-items:center;
}
.JobVaccancy img {
    width: 70px;
    height: 70px;
    background-color:white;
    border-radius: 10px;
    border: 2px solid #f5f5f5;
    object-fit:cover;
    object-position:center center;
}


.JobVaccancies .JobVaccancy .VaccancyHeadings.Flexbox{
    gap: 0px;
}
.VaccancyHeadings h3 {
    font-size: 16px;
    font-weight: 600;
    padding:0;
    margin:0;
}


.JobVaccancy .VaccancyHeadings {
    width: 100%;
    /* max-width: 100px; */
    overflow: hidden;
}

.VaccancyHeadings h3 ,.VaccancyHeadings p {
    font-size:15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.JobVaccancy .DeafHelper{
    padding: 15px;
}
.JobVaccancy .DeafHelper img {
    width: 30px !important;
    height: 30px !important;
}
.VaccancyHeadings .Location, .VaccancyHeadings .Date {
    /* color: gray; */
    color: #818181;
    font-size: 15px;
}

.VaccancyHeadings  p:nth-of-type(2) ,.VaccancyHeadings p:nth-of-type(3){
    color: #818181;
    font-size: 14px;
} 



.VaccancyHeadings p:nth-of-type(3),.VaccancyHeadings .Date{
    margin-top:3px;
    font-weight: 400;
    font-size: 12px;
}



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

    .Jobs{
        padding-left: 5px;
        padding-right: 5px;
    }

    .JobVaccancies {
        padding: 20px 15px;
    }
    .VaccancyHeadings h3 {
        font-size: 16px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 768px){

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

}
@media only screen and (min-width: 992px) and (max-width: 1200px) {

}
@media only screen and (min-width: 1200px) {

}



/* Job Vaccancy PAGE */

.VaccancyCont{
    max-width: 550px;
}


.VaccancyHeading .Company img {
    width: 25px;
    height: 25px;
    border-radius: 5px;
}


.ApplyCont {
    background: white;
    padding: 30px;
    width: 100%;
    border-radius: 10px;
}

.ApplyCont .VaccancyHeading {
    padding-bottom: 20px;
    /*border-bottom: 2px solid #e5e5e5;*/
}

.ApplyCont .VaccancyHeading .Company {
    padding-bottom: 2px;
}
.ApplyCont .VaccancyHeading .Company p {
    font-size: 14px;
}

.ApplyCont .VaccancyHeading h3{
    font-size: 17px;
    margin:0;
}

.ApplyCont .VaccancyHeading .Details {
    font-size: 13px;
    color: #818181;
}
.ApplyCont .DeafHelper {
    padding: 12px 15px;
}

.ApplyCont .DeafHelper img{
    width: 20px !important;
    height: 20px  !important;
}


.ApplyBox .BrandBtn{
    width: 100%;
    
}




/* Confirm Modal */
.modal .ConfirmBox {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 450px;
    padding-top: 15px;
}
.modal .ConfirmBox .BrandBtn{
    width:100%;text-align:center;
}

.modal.Confirm form {
    /* all: unset; */
    /* width: 100%; */
    /* align-self: center; */
    /* display: block; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.BrandBtn.DeleteBtn{
    background-color: rgb(234, 8, 8);
}


.Bold{
    font-weight: 600;
}

.Heading h2{
    display: flex;
    align-items: center;
    gap: 10px;

}

/* @NEW */
/*Job Req  */
.VaccancySection {
    background: white;
    padding: 30px;
    border-radius: 10px;
}
.VaccancySection iframe {
    width: 100%;
    height: 300px;
    border-radius: 15px;
}

.VaccancySection .SectionText p {
    color: #797979;
}


.VaccancySection .SectionText h2{
    font-size: 23px;
}
/* @END */


@media only screen and (max-width: 600px) {
    .JobVaccancyDetails{
        padding-left: 5px;
        padding-right: 5px;
    }

    .ApplyCont{
        padding: 25px 15px;
    }

    /* @NEW */
    .VaccancySection{
        padding: 25px 15px;
    }
    .VaccancySection iframe {
        height: 250px;
        max-width: 485px;
    }
    
    /* @END */


}



/* NOTIFICATION */

.Notifications{
    gap: 7px;
    background-color: white;
    border-radius: 10px;
}

.Notification {
    text-decoration: none;
    background-color: white;
    padding: 20px;

}
.Notifications .Notification:not(:last-child) {
    border-bottom: 2px solid #e1dada;
}

.Notification img {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    
}

.Notification.New{
    background: #cc8f6421;
}

.Notifications .Notification:first-child{
    border-radius: 10px 10px 0 0; /* Adjust the radius as needed */
}

.Notifications .Notification:last-child {
    border-radius: 0px 0px 10px 10px;
}


.Notification .NotiDot {
    width: 13px;
    height: 13px;
}
.NotiHeadings{
    max-width: 340px;
}
.NotiHeadings .Date {
    /* color: #adadad; */
    color: #818181;
    font-weight: 600;
    font-size: 14px;
}


/* -------------------------------------------------------------------------- */
/*                                 Table                                      */
/* -------------------------------------------------------------------------- */
table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    max-width: 800px;
}

th {
    background-color: var(--PrimaryBGColor);
    color: white;
    font-weight: 500;
    padding: 16px;
    text-align: left;
}

td {
    padding: 14px 16px;
    cursor: pointer;
}

tr{
    user-select: none;
}
tr:nth-child(even) {
    background-color: #ececec;
}

tr:nth-child(odd) {
    background-color: white;
}

tr:hover {
    background-color: #dbedff;
}

/* Round the first and last header cells */
th:first-child {
    border-top-left-radius: 8px;
}

th:last-child {
    border-top-right-radius: 8px;
}

/* Round the first and last cells of the last row */
tr:last-child td:first-child {
    border-bottom-left-radius: 8px;
}

tr:last-child td:last-child {
    border-bottom-right-radius: 8px;
}


/* -------------------------------------------------------------------------- */
/*                            Job Applications                                */
/* -------------------------------------------------------------------------- */
/*
.VaccancyHeadings p:nth-of-type(3){
    font-weight: 600;
    font-size: 14px;
}

.VaccancyHeadings  p:nth-of-type(2) ,.VaccancyHeadings  p:nth-of-type(3){
    color: #818181;
    font-size: 15px;
} */

.JPSectionCont{
    width:100%;
    max-width: 700px;
}

.JPSection{
    background-color: white;
    border-radius: 8px;
    padding:30px;
}

/*  */
.Record:not(:first-child){   
    padding-top: 20px;
    border-top: 2px solid #e4e4e4;
    border-top: 2px solid #f4f4f4;
}

.Record{
    text-decoration: none;
    color: #000000;
    display: flex;
    justify-content:flex-start;
    align-items:center;
    gap: 16px;
    padding:14px 0;
    
}

.Record .ImgCont{
    
}
.Record:not(.Icon) .ImgCont img{
    width: 70px;
    height: 70px;
    background-color: white;
    border-radius: 10px;
    border: 2px solid #f5f5f5;
    object-fit: cover;
    object-position: center center;
}



.Record img {
    width: 80px;
    height: 80px;
    border-radius: 10px;
    object-fit:cover;
    flex-shrink:0;
}

.Record h3 {
    font-size: 18px;
}

.RecordHeadings p:nth-of-type(2), .RecordHeadings p:nth-of-type(3) {
    color: #818181;
    font-size: 14px;
}
.RecordHeadings p:nth-of-type(3) {
    margin-top: 3px;
    font-weight: 400;
    font-size: 12px;
}
.Record .RecordHeadings {
    width: 100%;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    flex-direction:column;
    /* max-width: 100px; */
    overflow: hidden;
    gap:0;
}
.Record .SectionAction {
    width: 40px;
    height: 40px;
}

.Record .SectionAction img {
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.Record .ToggleBtn{
    margin-bottom: 5px;
}

.RecordHeadings h3,.RecordHeadings p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin:0;
    padding:0;
    width:100%;
    font-size:15px;
}




/*  */



.ImgCont{
    width: 60px;
    height: 60px;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-shrink:0;
    background: #F5F5F5;
    border-radius: 15px;
    object-fit: contain;
}

 .ImgCont img {
    width: 30px;
    height: 30px;
}

.ViewMore {
    color: #828282;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    cursor: pointer;
    text-decoration: none;
    width: 100%;
    padding: 15px;
    border-radius: 0 0 8px 8px;
    border-top: 2px solid #f4f4f4;
}

.ViewMore img{
    width: 30px;
    height: 30px;
}

.ViewMore:hover {
    background: #f7f7f7;
}

.ActiveCont{
    text-wrap: nowrap;
}
.ToggleBtn.Active .slider {
    position: absolute;
    cursor: pointer;
    border-radius: 34px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color:#e02828;
    -webkit-transition: .4s;
    transition: .4s;
}
.ToggleBtn.Active input:checked + .slider {
    background: #01a907;
}


.ViewOnlyPP{
    position: relative;
    width: 146px;
    height: 146px;
    -khtml-border-radius: 12px;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    background: #e5e5e5;
    border: 4px solid white;
}



.ViewOnlyPP>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
    object-position: center;
    -o-object-position: center;
    -khtml-border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}



.NotFound {
    color: #898989;
}








@media only screen and (max-width: 600px) {
    .JPSection{
        padding:20px;
    }
}
@media only screen and (min-width: 600px) and (max-width: 768px){
    .JPSection{
        padding:20px;
    }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
    .JPSection{
        padding:25px;
    }
}
@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .JPSection{
        padding:30px;
    }
}
@media only screen and (min-width: 1200px) {
    .JPSection{
        padding:30px;
    }
}





























































/************************************ Navigation Bar Start *******************************************************/



    header{
        position:fixed;
        top:0;left:0;
        height: 76px;width: 100%;
        display: flex;
        background-color: #f7f7f7;
        
        
        
        
        
        
        
        
        
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        background-color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-box-shadow: 0px 0px 60px -15px rgb(0 0 0 / 23%);
        -moz-box-shadow: 0px 0px 60px -15px rgba(0, 0, 0, 0.23);
        box-shadow: 0px 0px 60px -15px rgb(0 0 0 / 23%);
    }
    .NavLogo{
        width: 76px;height: 76px;padding: 8px;
    }
    .NavLogo img{
        width: 100%;height: 100%;;
    }



    
    
    
    
    
    .Navbar .Container{
        padding: 0 20px;
        width: 100%; 
        display: flex;
        justify-content: space-between;
    }


    .OtherNavBarElems{
        display: flex;
        align-items: center;
    }
    
    
    .LanguageSelectorCont{
        height:100%;
        font-size: 13px;
        font-weight:500;
        width: unset;
        padding: 10px 15px;
        
    }
    .LanguageSelectorCont a{
        height:100%;
        
        text-decoration:none;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:5px;
        
        
    }
    .LanguageSelectorCont img{
        margin-top:6px;
        height:20px;
        width:27px;
        border-radius:3px;
        
    }



    .ProfiePicMenuCont{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        
        margin-left:20px;margin-right:0px;

        width: 76px;
        height: 76px;
        flex-shrink: 0;;
    }
    html[dir="rtl"] .ProfiePicMenuCont{
        margin-right:20px;margin-left:0px;
        
    }


    .ProfiePicMenuCont .ProfilePicMenu,.ProfiePicMenuCont .CloseProfileMenu{
        display: none;
    }
    .ProfiePicMenuCont.OpenedMenu .ProfilePicMenu,.ProfiePicMenuCont.OpenedMenu .CloseProfileMenu{
        display: flex;
    }

    


    .ProfilePicMenu{
        display: flex;
        flex-direction: column;
    }


    
    .ProfilePicCont{
        position: relative;
        top:0;left:0;
        width: 76px;
        height: 76px;
    }
    




    .ProfilePic{
        width: 76px;
        height: 76px;
        padding: 18px;
        cursor: pointer;
        position: relative;
    }



    







    .ProfilePic>img{
        width: 100%;
        height: 100%;
        border-radius: 6px;
        object-fit: cover;
        object-position: center center;
        -o-object-fit: cover;
        -o-object-position: center center;
    }

    .ProfilePic>div{
        position: absolute;
        bottom: 9px;
        right: 9px;
        width: 24px;
        height: 24px;
        border: 3px solid #ffffff;
        background-color: #ebebeb;
        border-radius: 8px;
        z-index: 1000;
    }

    .ProfilePic>div::before,.ProfilePic>div::after {
        content: '';
        position: absolute;
        width: 2px;
        height: 6px;
        background-color: #e75c00;
        border-radius: 10px; 
        transform: rotate(45deg);
        bottom: 8px;
        right: 9.5px;
        transform-origin: bottom;
    }

    .ProfilePic>div::after {
        transform: rotate(-45deg);
        right: 8.5px;
    }


    .CloseProfileMenu{
        position: fixed;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        top:0;
        left:0;
        height: 100%;
        width: 100%;
        background-color: #00000010;
        z-index: 1002;
        cursor: pointer;
    }
    
    


    .ProfilePicMenu{
        
        background-color: white;
        position: absolute;
        right: 0;top: 86px;

        width: 270px;
        padding: 18px 18px 13px;
        border-radius: 10px;

        z-index: 1002;


        -webkit-box-shadow: 0px 3px 26px -10px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0px 3px 26px -10px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 3px 26px -10px rgba(0, 0, 0, 0.2);

    }
    
    
    html[dir="rtl"] .ProfilePicMenu{
        right: unset;
        left:0;
    }
    
    
    
    
    
    
    .ProfilePicMenu a{
        font-size: 13px;
        font-weight: 500;        
        padding: 12px;
        border-radius: 9px;
        color: #232323;
        text-decoration:none;
        
        display:flex;
        justify-content:flex-start;
        align-items:center;
        gap: 8px;
    }
    .ProfilePicMenu a:not(a:last-child){
        border-bottom: 1px solid #f6f6f6;
    }
    .ProfilePicMenu a:hover{
        background-color: #f8f8f8;
        
    }
    
    
    .ProfilePicMenu a>img{
        height:20px;
        width:20px;
        object-fit: contain;
        -o-object-fit: contain;
        object-position: center center;
        -o-object-position: center center;
    }
    
    
    
    
    

    .ProfileNavCard{
        display: flex;
        gap: 10px;
        /*border-bottom: 2px solid #f6f6f6;margin-bottom: 10px;*/
        padding: 0 5px 14px;
        
    }
    
    .ProfilePicMenu a>img.LanguageIcon{
        width:20px;
        height:15px;
        border-radius:2px;
        object-fit:cover;
    }
    
    .ProfileNavCard>img{
        width: 54px;
        height: 54px;
        border-radius: 50%;
        object-fit: cover;
        object-position: center center;
        -o-object-fit: cover;
        -o-object-position: center center;
    }
    .NameJobTitleCont{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        
    }

    .NameJobTitleCont>p{
        font-weight: 600;
        font-size: 15px;
        padding: 0;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .NameJobTitleCont>span{
        font-weight: 500;
        font-size: 13px;
        padding: 0;
        margin: 0;
        color: #6e6e6e;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

















    .MainLinks{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 76px;


        position: fixed;
        bottom: -1px;
        left: 0;
        width: 100%;
        background-color: #ffffff;
    }

    .NavLink{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-decoration: none;
        height: 100%;
        padding: 10px 15px;
        font-size: 13px;
        font-weight: 500;
        border-top: 3px solid transparent;
        gap:5px;
    }

    .NavLink.Active,.NavLink:hover{
        border-top: 3px solid var(--PrimaryBGColor);
        color: var(--PrimaryBGColor);
    }

    .NavLink img,.NavLink svg{
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

















    .BurgerBtn {
        width: 60px;
        height: 76px;
        padding: 27px 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        align-items: center;

        display: none;
        padding: 22px 0;
        width: 40px;
    }
    /*
    .Line {
        width: 24px;
        height: 4px;
        background-color: #e75c00;
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .BurgerBtn.Open .Line:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .BurgerBtn.Open .Line:nth-child(2) {
        opacity: 0;
    }

    .BurgerBtn.Open .Line:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
    */

    .BurgerBtn svg{
        height: 100%;
        width: 100%;
    }
    .BurgerBtn .line {
        fill: none;
        stroke: #e75c00;
        stroke-width: 8;
        transition: stroke-dasharray 400ms cubic-bezier(0.4, 0, 0.2, 1),
        stroke-dashoffset 400ms cubic-bezier(0.4, 0, 0.2, 1);

        stroke-linejoin: round;
        stroke-linecap: round;
    }
    .BurgerBtn .line1 {
        stroke-dasharray: 60 207;  
    }
    .BurgerBtn .line2 {
        stroke-dasharray: 60 60;
    }
    .BurgerBtn .line3 {
        stroke-dasharray: 60 207;
    }
    
    
    
    .OpenedNav .BurgerBtn .line1 {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
    }
    .OpenedNav .BurgerBtn .line2 {
        stroke-dasharray: 1 60;
        stroke-dashoffset: -30;
    }
    .OpenedNav .BurgerBtn .line3 {
        stroke-dasharray: 90 207;
        stroke-dashoffset: -134;
    }










    /* styles for small devices /////////////////////////////////////////////////////////////////////////// Make it to Side Bar */
    @media (max-width: 360px) {
        .BurgerBtn{
            display: flex;
        }

        .ProfilePicMenu{
            position:fixed;
            top: 90px;
            width: 96%;
            right: 2%;
        }


        .MainLinks{
            display: none;
            
            z-index: 1002;


            -webkit-box-shadow: 0px 3px 26px -10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0px 3px 26px -10px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 3px 26px -10px rgba(0, 0, 0, 0.2);
        }

        .OpenedNav .MainLinks{
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            flex-direction:column;
            
            width: 100%;
            height: 100%;height: calc(100% - 76px);
            position: fixed;
            
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #ffffff;
        }
        .NavLink{
            width: 100%;
            height:unset;
            padding: 15px;
            font-size: 12px;
            
            flex-direction: row;
            
            justify-content:flex-start;
            align-items:center;
            gap:8px;
        }
        .NavLink.Active,.NavLink:hover{
            border-top: 3px solid #f5f5f5;
            background-color:#fbfbfb;
            
            
        }
        
        
        .NavLink img, .NavLink svg {
            width: 22px;
            height: 22px;
            object-fit: contain;
        }      
        
        
        .MainLinks{
            padding: 0 0;
        }
        .NavLink {
            width:100%;
        }




        
    }

    /* styles for medium devices */
    @media (min-width: 360px) {
        
        .NavLinksCont .NavLink {
            justify-content: center !important;
        }

        .NavLink{
            width: 20%;
            padding: 0;
            font-size: 12px;
        }
        .NavLink img, .NavLink svg {
            width: 22px;
            height: 22px;
            object-fit: contain;
        }
        
        .ProfilePicMenu{
            position:fixed;
            top: 90px;
            width: 92%;
            right: 4%;
        }
        
        html[dir="rtl"] .ProfilePicMenu{
            right: 4%;
        }
        
        
        
        
        
        .MainLinks{
            z-index: 1000;


            -webkit-box-shadow: 0px 3px 26px -10px rgba(0, 0, 0, 0.2);
            -moz-box-shadow: 0px 3px 26px -10px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 3px 26px -10px rgba(0, 0, 0, 0.2);
        }
        
        
        .MainLinks{
            padding: 0 5px;
        }
        .NavLink {
            width:100%;
        }
        
    }



    @media (min-width: 400px) {
        /*
        .NavLink{
            width: 20%;
            padding: 0;
            font-size: 12px;
        }
        .NavLink img, .NavLink svg {
            width: 22px;
            height: 22px;
            object-fit: contain;
        }
        */
        .ProfilePicMenu{
            
            position: absolute;
            right: 0;top: 86px;
            width: 260px;
        }
        html[dir="rtl"] .ProfilePicMenu{
            right: unset;
            left:0;
        }
        
        
        .MainLinks{
            padding: 0 10px;
        }
        .NavLink {
            width:100%;
        }

    }

    /* styles for tablets */
    @media (min-width: 480px) {
        .MainLinks{
            position: fixed;
        }

        .NavLink {
            width: 98px;
            padding: 0;
            font-size: 13px;

            width: unset;
            padding: 10px 15px;
        }
        
        
        
        
        
        body{
            padding: 90px 0 90px;
        }
        
        .MainLinks{
            padding: 0 15px;
        }
        .NavLink {
            width:100%;
        }
        
        
    }

    /* styles for small desktops */
    @media (min-width: 768px ) {

        .MainLinks{
            position: static;
            -webkit-box-shadow: unset;
            -moz-box-shadow: unset;
            box-shadow: unset;
        }
        
    }

    /* styles for large desktops */
    @media (min-width: 1024px ) {
        
    }

    /* styles for very large screens */
    @media (min-width: 1280px) {
        
    }
    @media (min-width: 1400px) {
        
    }
    
    
    
/************************************ Navigation Bar End *******************************************************/















































/******************************* Jobs Search *************************************/



.Flexbox.MainSearch {
    background: white;
    width: 100%;
    padding: 0px 0px;
    border-radius: 4px;
    border: 2px solid #f0f0f0 /*#cdd4da*/;
    gap:10px;
}

.MainSearch input {
    border: none;
    width: 100%;
    padding: 10px;
    border-radius: 4px;
}
.MainSearch img{
    width: 20px;
    height: 20px;
}

.MainSearch .SectionAction{
    border-radius: 2px;
    background-color: var(--PrimaryBGColor);
    height: 40px;
    width: 40px;
    padding:4px 4px;
}

.MainSearch .SectionAction:hover{
    background-color: var(--PrimaryBGColorHover);
}



.SearchCont .SearchFilters  .BrandBtn.Bright {
    background-color: #ffffff;
    padding: 10px 30px;
    margin-bottom: 10px;

}


.SearchCont .SearchFilters .BrandBtn.Bright:hover {
    background-color: var(--B1GreyBGColor);
}

.SearchCont .SearchFilters  .BrandBtn {
    padding: 12px 30px;
    margin-bottom: 10px;
}

    
    















/********************** Freelancing ***************************/



.ServiceCont {
    max-width: 550px;
}


.ServiceHeadings h2 {
    font-size: 20px;
}

/* .ServiceHeadings p {
    color: #8b8b8b;
    font-size: 20px;
    font-weight: 500;
}
 */

 .ApplyCont .ServiceProvider {
    gap: 5px;
    padding-top: 5px;
    border-top: 1px solid #ebebeb;
}
/* .ApplyCont .ServiceHeadingsCont {
    padding-bottom: 20px;
    border-bottom: 2px solid #ababab;
} */


.FreelancerCont {
    /* border: 2px solid #e5e5e5; */
    padding: 10px;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
}
.FreelancerCont:hover {
    background-color: #f8f8f8;
    
}
.FreelancerCont img {
    width: 34px;
    height: 34px;
    border-radius: 6px;
    object-fit: cover;
}

.ApplyCont .FreelancerHead h3 {
    font-size: 14px;
    font-weight: 400;
    margin:0;
}

.FreelancerHead p:nth-child(2) {
    font-size: 12px;
    color: #8d8d8d;
}


.Flexbox.Column.FreelancerHead {
    gap: 0px;
}


.ServicePrice {
    border: 2px solid #ddf8dd;
    color: #055405;
    border-radius: 5px;
    padding: 2px 20px;
    display: inline-flex;
    /* justify-content: center; */
    font-size: 18px;
    font-weight:600;
    
    margin-top:10px;
    
    background: #edfff4;
    /* max-width: 100px; */
    /* margin: auto; */
    padding: auto;
    max-width: auto;
    width: auto;
    align-self: self-start;
}

.ModalFocuesTxt{
    color:var(--PrimaryBGColor);
}

.ServiceDashboardCard {
    border: 2px solid #bce1bc;
    color: #055405;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* justify-content: center; */
    font-size: 16px;
    background: #edfff4;
    width: 100%;
    max-width: 266px;
}

.ServiceHeadings .Location {
    color: #7c7c7c;
    font-size:14px;
}
.modal-content>h3 {
    width: 100%;
    padding: 10px 65px 10px 20px;
    font-weight: 600;
    font-size: 22px;
}