@import url('/Theme/homepage/assets/bootstrap/css/bootstrap.min.css');
body {
    font-family: 'Montserrat', sans-serif; font-size:0.9rem;
}
body.ms-backgroundImage {
	background:url(../images/Inner_bg.svg) no-repeat;background-size:100%
}

/* begin::Override sharepoint styles */
#suiteBarLeft .ms-core-brandingText {
	display:none !important
}
#suiteBarLeft {
	background-color: #766e64;
}
#suiteBarRight {
    background-color: rgb(118 110 100 / 40%);
}
#s4-workspace {
    padding-top: 90px; background:transparent
}
#s4-bodyContainer {
    padding-bottom: 50px !important;
}
#DeltaPlaceHolderMain {
	padding:2%;overflow-x: auto;
}
/* end::Override sharepoint styles */
.layout {
    position: relative;
    width: auto;
    margin: 0 auto;
    max-width: 1300px;
    display: block;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}
.flex {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-direction: row;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}
.flex .flex-2 {
    width: 50%;
    flex-basis: 50%;
    max-width: 50%;
    margin: 0 0 0 0;
}
.flex .flex-3 {
    width: calc(33.3% - 60px);
    flex-basis: calc(33.3% - 60px);
    max-width: calc(33.3% - 60px);
    margin: 0 30px 50px 30px;
}
.flex .flex-4 {
    width: calc(25% - 30px);
    flex-basis: calc(25% - 30px);
    max-width: calc(25% - 30px);
    margin: 0 15px 30px 15px;
}
.flex .flex-5 {
    width: calc(20% - 20px);
    flex-basis: calc(20% - 20px);
    max-width: calc(20% - 20px);
    margin: 0 10px 20px 10px;
}
.flex .flex-item {
    position: relative;
}

/* people groups page */
.with-sidenav {
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}
.with-sidenav #sideNavBox {
	display:block !important;
	margin-left: 0;
    margin-right: 0;
    background: #f6f6f6;
}
.with-sidenav .ms-core-sideNavBox-removeLeftMargin {
    margin-left: 0;
}
.with-sidenav .content-area {
	width:calc(100% - 180px)
}
/* end::people groups page */

#navigation {
    position: absolute;
    width: auto;
    color: #000;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    z-index: 10;
}
#branding {
    position: absolute;
    height: 70px;
    display: block;
    top: -5px;
    left: 0;
}
#branding img {
    height: inherit;
}

.navigation--container {
    position: relative;
    width: auto;
    height: 60px;
    margin: 30px 60px 0 60px;
}
.navigation--menu {
    display: block;
    position: absolute;
    right: 150px;
    top: 0px;
    font-size: 0;
}
.navigation--menu > div {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 0 0 30px;
    padding: 0 0 0 0;
}
.navigation--menu .dropdown {
    padding: 0 20px 0 0;
}
.navigation--menu .dropdown:after {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    top: 27px;
    right: 0;
    border-style: solid;
    border-width: 8px 5px 0 5px;
    border-color: #000000 transparent transparent transparent;
}
.navigation--menu > div > a {
    font-size: 17px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    padding: 0;
    line-height: 40px;
    padding: 10px 0;
    display: block;
}
.navigation--menu .drawer {
    position: absolute;
    display: none;
    background: #fff;
    right: 0;
    box-shadow: 0 2px 20px 6px rgba(158,158,158,.13);
    top: 60px;
}
.navigation--menu > div:after {
    content: "";
    width: 130px;
    height: 50px;
    display: block;
    position: absolute;
    top: 40px;
    right: 0;
}
.navigation--menu .font-size-control > a {
    display: inline-block;
    cursor: default;
}
.navigation--menu .controls {
    display: inline-block;
}
.navigation--menu .controls .control {
    display: inline-block;
    padding: 0 4px 0 4px;
    margin: 0 0px 0 8px;
    cursor: pointer;
}
.navigation--menu .controls .control > div {
    display: inline-block;
    width: 10px;
    height: auto;
    margin: 0 3px 0 0;
}
.navigation--menu .controls .control > p {
    font-size: 17px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    padding: 0;
    line-height: 40px;
    padding: 10px 0;
    display: inline-block;
}

.navigation--menu div:hover .drawer {
    display: block;
}
.navigation--menu div:nth-child(2) .drawer {
    width: 100px;
}
.navigation--menu div:last-of-type .drawer {
    width: 130px;
}
.navigation--menu .drawer li {
    margin: 15px 0;
}
.navigation--menu .drawer a {
    font-size: 15px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    padding: 4px 20px;
    line-height: 30px;
    display: block;
    text-align: right;
}
.navigation--icons {
    position: absolute;
    height: 30px;
    width: 30px;
    top: 15px;
    right: 0;
    cursor: pointer;
}
#menu {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    top:0
}
#menu .overlay {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0 0 0 / 0.5);
    display: block;
    position: fixed;
}
#menu .menu--container {
    position: absolute;
    width: 400px;
    height: 100%;
    background: #fff;
    top: 0;
    right: 0;
}
#menu .menu--container > nav {
    padding: 100px 60px 100px 0;
    text-align: right;
}
#menu .menu--container > nav > a{
    font-size: 18px;
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    padding: 0;
    line-height: 20px;
    margin: 34px 0;
    display: block;
    text-transform: capitalize;
}
#menu-close {
    position: absolute;
    top: 46px;
    right: 60px;
    height: 26px;
    width: 26px;
    cursor: pointer;
}
#menu-close > svg {
    height: inherit;
    width: inherit;
}
#navigation.sticky {
    position: fixed;
    background: #fbf5d8;
}
#navigation.sticky #branding {
    height: 60px;
    top: 0px;
}
#navigation.sticky .navigation--container {
    margin: 20px 60px 20px 60px;
}
#navigation.sticky .navigation--menu {
    display: none;
}
#navigation.sticky .navigation--icons {
    height: 26px;
    width: 26px;
    top: 17px;
}





section {
    margin: 0 auto;
    padding: 30px 0;
}
#in-focus {
	padding: 30px 0 30px;
}
section .layout > h2 {
    position: relative;
    text-transform: capitalize;
    font-size: 26px;
    font-weight: 800;
    display: inline-block;
    text-align: right;
}
section .layout > h2:after {
    content: '';
    position: absolute;
    width: 40px;
    height: 3px;
    background-color: #E0905F;
    bottom: -16px;
    left: 0;
}

/* ========== list views ============ */
#onetIDListForm, #onetIDListForm div[id*="WebPartWPQ"]>table, #onetIDListForm .ms-formtable { table-layout:fixed}
.ms-formtable #SPFieldImage .ms-rtestate-field img { width:100%}

h3.ms-newdoc-callout-text {font-size:16px}    
/* Control Div */

.ms-csrlistview-controldiv {
    padding-top: 8px;
    padding-bottom: 0px;
    padding-right: 8px;
    color: #fff;
    background: rgba(239, 239, 239, 0.5);
    padding-left: 10px;
    border: 1px solid #a7c8eb; 
    margin-bottom: 15px;
    min-height: 36px;
    height:auto;
    background: #fff;
    border-bottom: 3px solid #a7c8eb;
    box-shadow: 0 3px 5px #d4d4d4; 
} 
.ms-pivotControl-container, .ms-pivotControl-container a { color:#4c4c4c}
.ms-pivotControl-container .ms-pivotControl-surfacedOpt-selected {padding: 5px 10px;background: rgba(122, 241, 217, 0.85);border-radius: 2px;color: #fff;}
.exporttoexcel_btn a { color:#fff}

/* inline search */
.ms-InlineSearch-Outline-Empty {border-color: #cacaca;}
.ms-InlineSearch-Outline-Baseline {width: 280px;}
.ms-InlineSearch-SearchBox-EmptyUnfocused.ms-InlineSearch-SearchBox-EmptyUnfocused {color:#ED6D10;}
.ms-InlineSearch-SearchBox-Filled.ms-InlineSearch-SearchBox-Filled {color: #4a4a4a;}

input.ms-InlineSearch-SearchBox-Baseline.ms-InlineSearch-SearchBox-Baseline {width: 250px;}
.ms-InlineSearch-SearchProgress {position: absolute;left: 50%;top:50%}
.ms-InlineSearch-DivBaseline { float:right;position: relative; top:6px}

/* Table */
.ms-listviewtable .ms-alternating  { background:#f7f7f7}
.ms-viewheadertr {background: #a7c8eb;}
.ms-viewheadertr th { font-weight:normal;padding: 5px 14px;color:#343434;font-size: 0.9em;}
	.ms-viewheadertr th a { font-weight:600;padding: 5px 14px;color:#343434;font-size: 0.9em;}

.ms-listviewtable tbody tr td { padding:5px; vertical-align:middle;-webkit-transition: all 0.15s ease;transition: all 0.15s ease;}
.ms-listviewtable tbody tr td.ms-vb-icon { text-align:center}
.ms-listviewtable tr td.ms-cellstyle {padding: 5px 15px;}
.ms-listviewtable tr td.ms-cellstyle:nth-child(2n+1) {border-right: 1px #D2D2D2 dashed;border-left: 1px #D2D2D2 dashed;}
table.ms-listviewtable { width:100%;border:1px solid #bdc9d3;background: #ffffff;box-shadow: 0 0 10px #dbdbdb;}
table.ms-listviewtable > tbody > tr:nth-child(even) { background:#f3f3f3}
table.ms-listviewtable tr.ms-itmhover:hover input.s4-itm-cbx, tr.s4-itm-selected input.s4-itm-cbx { left:33%}

/* Preview pane */
.ms-listviewtable tbody .ms-ppleft tr td:hover {background:#e9e9e9}
.preview-panel-left { padding:0 !important;vertical-align:top !important}
.preview-panel-left .ms-ppleft {padding-right:0 !important;    margin: 0 !important;}
.preview-panel-right {background: #e9e9e9;/*color: #c0c0c0;*/}
.preview-panel-left .ms-vb-title .s4-ctx-show {background: #e9e9e9}
.preview-panel-left .ms-listviewtable .ms-alternating {background: #eef3f3;}

.preview-panel-right .ms-ppright .ms-formtable tr {display:flex;-webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;}
.preview-panel-right .ms-ppright .ms-formtable tr td { width:100%}
.preview-panel-right .ms-ppright .ms-formtable tr td.ms-formlabel {border-bottom: 1px dashed #c0c0c0;
    padding: 5px 0;
    color: #767676;}
.preview-panel-right .ms-ppright .ms-formtable tr td.ms-formbody {padding: 5px 0; font-weight:600;color:#007580 !important}
.preview-panel-right .ms-ppright .ms-formtable tr td.ms-formbody a {color:#007580 !important}

/* site settings */
.ms-siteSettings-root a:link, .ms-siteSettings-root a:visited {-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.ms-siteSettings-root a:hover { text-decoration:none;color:#FF3300}
.ms-linksection-listRoot .ms-linksection-listItem { padding:2% 0}
.ms-linksection-listRoot .ms-linksection-listItem a { color:#333}
.ms-linksection-listRoot .ms-linksection-listItem a:hover { color:#e58838}
.ms-linksection-column tbody .ms-linksection-level1 .ms-linksection-textCell { padding-left:1rem}
.ms-linksection-column tbody .ms-linksection-level1 .ms-linksection-textCell .ms-linksection-title { font-size:1rem;font-weight:600;color: #e64646;    padding: 10% 0 7%;}
.ms-linksection-column tbody .ms-linksection-level1:nth-child(odd) .ms-linksection-textCell {background: rgb(204 117 28 / 4%);border-left: 3px solid rgb(157 116 73 / 20%);}
.propertysheet .ms-authoringcontrols.ms-inputformcontrols {background: -moz-linear-gradient(left,  rgba(30,87,153,0) 0%, rgba(234,237,241,1) 100%);
background: -webkit-linear-gradient(left,  rgba(30,87,153,0) 0%,rgba(234,237,241,1) 100%);
background: linear-gradient(to right,  rgba(30,87,153,0) 0%,rgba(234,237,241,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#eaedf1',GradientType=1 );
}
.ms-formdescriptioncolumn-wide .ms-descriptiontext.ms-inputformdescription + TD { display:none}

/* List Settings */
.ms-standardheader {font-size: 1em;font-weight: 600;margin: 10px 0px;}
.ms-pageinformation {margin-bottom: 20px;}
.ms-listeditheader {background: #f1dfd5;padding: 10px;border: 1px solid #e4d1c6;}
.ms-listeditheader tr th {padding: 5px 0;}
.ms-listeditheader .ms-standardheader {margin: 0 0 5px}


/* Table with filter */
.with-Filter .ms-viewheadertr th { padding: 8px 14px;}
.with-Filter .ms-listviewtable tbody td { font-size:0.9em;    padding: 10px;}
.ms-viewheadertr th .ms-headerSortTitleLink { font-weight:600} 
.with-Filter {
    padding: 10px;
    margin: 0 0 20px 0;
    background: #fafafa;
    border: 1px solid #ebebeb;
    overflow:hidden;overflow-x:auto
}
.with-Filter .ms-listviewtable tbody tr:first-child td { padding-top:20px}
.with-Filter .ms-viewheadertr th tbody tr:first-child td { padding-top:10px}
.with-Filter .ms-listviewtable .ms-alternating { background:#ededed}

  /* Display view */	
  .ms-core-tableNoSpace { width:100%}	
  .display-item__header{ width:100%;height:300px;background:#fff}
  .display-item__header_logo { width:350px;height:170px;background:url(../images/Announcement_Header_logo.png) no-repeat;background-size:contain}
  .display-item__header_logo_bar_1 { width:68%;height:40px;background:#45a685}
  .display-item__header_logo_bar_2 {width:58%;height:35px;background:url(../images/Announcement_Header_bar_pattern.png) repeat-x;} 
  
  .display-item__title { padding:10px 0px;color:#f05526;font-size:1.3rem}	
  .display-item__title_created {color:#969696;font-size:1rem;display: block;padding: 8px 0 5px;}
	  .display-item__title_created .label-cap img { margin-right:5px;position:relative;top:-2px}
	  .display-item__title_created .label-cap { margin-right:8px;font-weight: 600;}
	  .display-item__title_created .label-cap_value { margin-right:20px}
  
  .display-item__contents {padding:15px;background:#fcfcfc;border: 1px solid #e7e7e7;}
  .display-item__image img {width: auto;height: auto;max-width: 100%;display: block;margin: 0 auto 20px;}
  .display-item__desc {font-size:1rem;line-height: 1.8rem;}
  .display-item__desc div,.display-item__desc span,.display-item__desc p,.display-item__desc * {}
  .display-item__ctrl {font-size:1rem;padding:15px 0} 
	  .display-item__ctrl input {    padding: 2px 10px;background: #26d07c;font-size: 1rem;color: #fff;    border: 0; outline:none;-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;border-radius: 4px;float: left;margin: 0 10px 0 0;}
	  .display-item__ctrl input:hover {background: #3de190;cursor:pointer}
	  .display-item__ctrl input:focus {outline:none}
   /* inputs */
   input[type=button], input[type=reset], input[type=submit], button {} 
   	  .ms-toolbar input[type="button"], .ms-toolbar button {    padding: 10px;background: #26d07c;font-size: 1rem;color: #fff;    border: 0; outline:none;-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;border-radius: 4px;float: left;margin: 0 10px 0 0;}
	  .ms-toolbar input[type="button"]:hover, .ms-toolbar button:hover {background: #3de190;cursor:pointer}
	  .ms-toolbar input[type="button"]:focus, .ms-toolbar button:focus {outline:none}
	
	
   td.ms-formbody div[class*="ExternalClass"] p,
   td.ms-formbody div[class*="ExternalClass"] span,
   td.ms-formbody div[class*="ExternalClass"] div {line-height:22px}
   td.ms-formbody h2 {font-size: 1.46em;}
	
	/* Announcement */
	.ann-wrapper {max-width: 1200px;
    margin: 0 auto;
    border: 1px solid #9d9d9d;
    border-radius: 5px;
    box-shadow: 0 0 10px #d9d9d9;}
    .ann-wrapper .display-item__header { border-radius:5px 5px 0 0;padding-top:10px;width:100%;height:300px;background:#fff}	  	  
  .display-item__header_logo { width:400px;height:190px;background:url(../images/Announcement_Header_logo.png) no-repeat;background-size:contain;margin-bottom:10px}
  .display-item__header_logo_bar_1 { width:80%;height:50px;background:#45a685;border-radius: 5px 0 0 5px;}
  .display-item__header_logo_bar_2 {width:60%;height:40px;background:url(../images/Announcement_Header_bar_pattern.png) repeat-x;    border-radius: 3px 0 0 3px;} 
  
  .ann_date .label-cap_value {color: #515151;font-weight: bold;}
  .ann-wrapper .display-item__title {padding:15px}
  .ann_title .display-item__title_txt { text-align:center;color:#333;font-weight:bold;font-size:1.8rem}
  .display-item__title_txt.arabic { font-size:1.2rem;margin-bottom:5px}
  .desc-seperator:before {content:"";position:absolute;left:50%;top:0;width:2px;height:100%;background:#333}
  .ann.display-item__contents {padding: 30px 20px 30px;background: #fcfcfc;border: 0px solid #e7e7e7;}
  .ann .display-item__desc { width:100%}
  .display-item__footer {}
  .display-item__footer_logo_wrap { height:110px;}
  .display-item__footer_logo { position:absolute;width:103px;height:99px;background:url(../images/Announcement_Footer_logo.png) no-repeat;background-size:contain}
  .display-item__footer_logo_bar_1 {width: 100%;height: 18px;background: #327b82;}
  .display-item__footer_logo_bar_2_wrap { background:#357c82}
  .display-item__footer_logo_bar_2_left {width:250px;height:30px;background:url(../images/Announcement_Footer_left_text.png) no-repeat;display:block;float:left;margin: 0 0 5px 10px;}
  .display-item__footer_logo_bar_2_right {width:210px;height:25px;background:url(../images/Announcement_Footer_right_text.png) no-repeat;display:block;float:right;margin: 3px 10px 5px 0px}

  .ann.display-item__ctrl input {
    float: none;
    margin: 20px auto 0;
    display: block;
}

/* Inner Pages */
.mbr-cards-row > .mbr-cards-col {margin-top: 5px;}

/* Artical pages */
#layoutsTable .ms-rte-layoutszone-inner h2 strong {
	font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}
.ms-rtestate-field p, p.ms-rteElement-P, .ms-rtestate-field div[aria-label="Rich text editor"] {
    margin: 0px 0px 10px 0px;
    line-height: 1.6;
}
.ms-rtestate-field div[aria-label="Rich text editor"] ol, .ms-rtestate-field div[aria-label="Rich text editor"] ul {
 list-style:inherit	
}
.ms-rtestate-field div[aria-label="Rich text editor"] li {
	padding:5px 0
}

/* Search result page */
#DeltaPlaceHolderMain .ms-srch-siteSearchResults {
	float:none
}

/* =========================== Admin Portal ===================== */
  .content-wrap.admin_portal {padding: 60px 20px 0;}
  span.list-title { font-size:1.3rem;color:#007580}
  .item-hide { display:none}
		  .all-view-item__wrap { padding:12px 0;position: relative; margin:15px 0;border-bottom:1px solid #e5e5e5}
		  .all-view-item__wrap:nth-child(even) { background: transparent}
  
		  .all-view-item__wrap::after { content:'';position:absolute;width:100%;height:0;left:0;bottom:0px;opacity:0;-webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out;
		  background: rgba(247,133,52,0);
		  background: -moz-linear-gradient(top, rgba(247,133,52,0) 0%, rgba(243,128,53,0) 20%, rgba(214,95,57,0.15) 94%, rgba(212,93,57,0.4) 100%);
		  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(247,133,52,0)), color-stop(20%, rgba(243,128,53,0)), color-stop(94%, rgba(214,95,57,0.15)), color-stop(100%, rgba(212,93,57,0.4)));
		  background: -webkit-linear-gradient(top, rgba(247,133,52,0) 0%, rgba(243,128,53,0) 20%, rgba(214,95,57,0.15) 94%, rgba(212,93,57,0.4) 100%);
		  background: -o-linear-gradient(top, rgba(247,133,52,0) 0%, rgba(243,128,53,0) 20%, rgba(214,95,57,0.15) 94%, rgba(212,93,57,0.4) 100%);
		  background: -ms-linear-gradient(top, rgba(247,133,52,0) 0%, rgba(243,128,53,0) 20%, rgba(214,95,57,0.15) 94%, rgba(212,93,57,0.4) 100%);
		  background: linear-gradient(to bottom, rgba(247,133,52,0) 0%, rgba(243,128,53,0) 20%, rgba(214,95,57,0.15) 94%, rgba(212,93,57,0.4) 100%);
		  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f78534', endColorstr='#d45d39', GradientType=0 );}
				  .all-view-item__wrap:hover:after { height:43px;opacity:1}
		  .all-view-item__title a { padding:0;font-size:1rem; color:#676767;font-weight: 600;-webkit-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out}
			  .all-view-item__wrap:hover .all-view-item__title a { color:#f87d22}
		  .all-view-item__created {padding:5px 0;font-size: 0.85rem;color:#57b3d8;}
			  .label-cap { margin:0 10px 0 20px;font-weight:600}
			  .all-view-item__created .label-cap:first-child, .display-item__title .label-cap:first-child { margin-left:0}
			  .label-cap_value {font-weight:500;color:#57b3d8}
			  .display-item__title_created .label-cap_value {color:#969696;display:inline-block}
			  .label-cap_value .ms-comm-ratingSeparator {margin-left: 5px;margin-right: 5px;border-left: 2px solid #a7a7a7;}
			  .label-cap_value .ms-comm-ratingCountContainer {color: #5388c7;font-weight: bold;line-height: 22px;}
				  /* New item */
				  .view_all_new { width:80px; overflow:hidden}
					  .view_all_new img { margin:0 auto;display:block; position: relative;opacity: 1; top:40px;animation-name: newitemani ;animation-duration: 1s;animation-delay: 1s;animation-fill-mode: forwards;-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
					  @keyframes newitemani {
						0%   {opacity: 0; top:40px}
						100% {opacity: 1; top:0}
					  }
  /* item icon */
  .item-icon { width:65px;padding: 5px 18px 5px 5px;}
  .item-icon span { display: block;width:30px;height:30px;position:relative;background:url(../images/Document.svg) no-repeat;background-size:cover}	
  .item-icon img{ width:40px;height:auto}
  
  /* Control buttons */
  .btn-wrap { float:right;width:auto}
  .all-view-item__wrap.ctrlbtns { background:transparent;padding:0 0 5px;margin: 0; border-bottom:0px solid #c2a7db;position: absolute;width:100%;top: 30px;left:40px}
  .all-view-item__wrap.ctrlbtns::after { display:none}
  .ctrl-btn { width:auto;display:inline-block;margin:0 5px}
  .ctrlbtns   { padding:0 15px;color:#ff4e00}
  .ctrl-btn i { color:#ff4e00;font-size:1.1rem}
  
  /* Admin portal */
  .all-view-item__wrap.admin:hover:after {height: 17px;opacity: 0.8;}
  .admin .item-title { width:calc(100% - 265px)}
  .settings-item { width:200px}
  .settings-content { width:200px}
  .settings-item a {display: inline-block;width: 20px;height: 20px;margin: 0 5px;position: relative; text-align:center}
  .settings-content a {display: inline-block;width: 20px;height: 20px;margin: 0 10px;position: relative; text-align:center}
  .settings-item a::before, .settings-content a::before { content:""; width:8px;height:8px;background:#a1a1a1;border-radius:3px;position:absolute;left:5px;top:5px;-ms-transform: scale(1, 1);-webkit-transform: scale(1, 1);transform: scale(1, 1);-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
  .settings-item a i{width:20px;height:20px;font-size:18px !important;color:#a1a1a1;position:absolute;left:0;top:0;color:#fafafa;-ms-transform: scale(0, 0);-webkit-transform: scale(0, 0);transform: scale(0, 0);-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
  .settings-content .setting-icon-bg{width:20px;height:20px;font-size:14px;color:#a1a1a1;position:absolute;left:0;top:-1px;color:#fafafa;-ms-transform: scale(0, 0);-webkit-transform: scale(0, 0);transform: scale(0, 0);-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
  
  .setting-icon-bg {width: 15px;height: 15px; background: url(../Images/Admin_New.svg) no-repeat;background-size: cover;display: block;}
  .setting-icon-bg.admin {background: url(../Images/Admin_Adminview.svg) no-repeat;background-size:cover}
  .setting-icon-bg.allitems {background: url(../Images/Admin_Allitems.svg) no-repeat;background-size:cover}
  .setting-icon-bg.listsettings {background: url(../Images/Admin_Listsettings.svg) no-repeat;background-size:cover}
  
  .all-view-item__title { font-size:0.95rem;text-align:left}
  
  .all-view-item__wrap.admin:hover .settings-item a::before,  .all-view-item__wrap.admin:hover .settings-content a::before {-ms-transform: scale(0, 0);-webkit-transform: scale(0, 0);transform: scale(0, 0);}
  .all-view-item__wrap.admin:hover .settings-item a i,   .all-view-item__wrap.admin:hover .settings-content a .setting-icon-bg {-ms-transform: scale(1.5,1.5);-webkit-transform: scale(1.5,1.5);transform: scale(1.5,1.5); color:#2dbbff}
  
  
  /* Edit icon */
   .edit-item { overflow:hidden;width: 30px;}
   .edit-item .edit-item-span { display:inline-block;position:relative;margin: 0 5px; bottom:-35px;-webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
   .edit-item i { font-size:17px;color:#7b9aa1}
   .edit-item i:hover { cursor:pointer}
  .all-view-item__wrap:hover .edit-item .edit-item-span{bottom:0px;z-index: 100;}

/* ######## end:Content area ################ */