/*--------------------------------Basic HTML Items-----------------------------*/
html {
  height: 100%;
}
body {
 margin: 0 auto;
 padding:0; 
 overflow-x:hidden;
 overflow-y:hidden;	
 height: 100%;
 }
.flobg {
	background-image: url(https://bptd.com/uluwatu/images/background.jpg);
 	background-repeat:repeat-x;
 	background-position:50% 10%;
}
.offcanvas {
	min-height: 100%;
	top: 0px;
	background-color:#0D0D0D !important;
	color: #fff !important;
} 
.tanbg {
	background: #F7F7F7;
}
ul {
	list-style: none;
}
.vertical-fill{
	height: 100%; 
} 
.uwatu {
	overflow-y: scroll !important;
}
.cke_dialog{
	top:0 !important;
}
.statusBar{
	padding: 0.3rem;
}
p {
	font-weight: normal;
 	font-family: Verdana, Arial, Helvetica, sans-serif;
	/*font-size: 11px;*/
	text-decoration:none;    
} 
a {
 	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #000080;
	text-decoration:none !important;
}
.nav-link{
	/*color: white !important;*/
}
.offcanvas-body ul .nav-item a{
	color: #fff !important;
    font-weight: 500;
} 
/*
.offcanvas-body .show > li > a > span, .offcanvas-body .show > li > a {
	color: #999 !important; 
    font-weight: 400;  
} 
.offcanvas-body .show :hover {
	color: #fff !important; 
	font-weight: 500;
} 
.offcanvas-body .show :active {
	color: #fff !important;  
	font-weight: 500;
} 
.offcanvas-body .show :visited {
	color: #fff !important; 
	font-weight: 500;
}  
.offcanvas-body .show > li > a > i, .offcanvas-body .show > li > a{
	color: #999 !important; 
} 
*/
a:hover {
	text-decoration:none; 
 }
 .intLinks {
	color:#337ab7;
	font-size:14px !important;
}
.intLinks:hover {
	color:#337ab7;
	font-size:14px;
	text-decoration:underline;
}
.dropdown-menu{
	margin-left: -100px !important;  
}
.navbar{
	padding-top: .1rem !important; 
    padding-bottom: .1rem !important;
}
.dropdown-item { 
	font-size: 1rem;
}
/*--------------------------------Preloader------------------------------------*/
.preloader {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0.7;
  background-color: #fff;
  z-index: 10;
  text-align: center;
}
.preloader .spinner-border {
	position: absolute !important;
	top: 25%
}
/*--------------------------------General Notifications and Messages-----------*/

.chosenElementsList {
	display: inline-flex;
}
.chosenElementsList li {
	margin-left: 15px;
	
}
/*--------------------------------Navigation Bar-------------------------------*/

#navbarCollapse { 
	max-width:70%;
	float:left;
}
.navbar-element {
	max-width:30%;
	float:left;
}
.rightBar{
	/*position: sticky;
    display: block !important;
    height: calc(100vh - 7rem);
    padding-left: .25rem;
    margin-left: -.25rem;
    overflow-y: auto;
	min-width:70px;*/
}
/*--------------------------------Home-----------------------------------------*/
.dasboard-cards .card { 
      overflow: hidden;
    }
    
.dasboard-cards .rotate {
      z-index: 8;
      float: right; 
      height: 100%; 
	  margin-top: auto;
      margin-bottom: auto; 
    }
    
.dasboard-cards .card-block .rotate i {
      color: rgba(20, 20, 20, 0.15);
      left: 0;
      left: auto;
      bottom: 0;
	top: 0; 
      display: block;
    } 
/*--------------------------------User Interaction DIV-------------------------*/
#userInteraction {
	
}
#userInteraction > table {
	margin:7px;
}
/*--------------------------------CSS Menu Class-------------------------------*/
#menucontainer {
	position: relative;
}
#tabNavcontainer {
	text-align:center;
}
#tabNavcontainer > ul > li > a {
	background-color:transparent;
	font-weight:bold;
	border-style:outset !important;
	border-width:1px 1px 1px 2px !important;
	border-color:#FFFDFD !important;
	border-radius:4px !important;
}
#tabNavcontainer > ul > li > a:hover {
	background-color:#999; 
	color:#fff !important;
	font-weight:bold;
	border-style:inset !important;
}
#tabNavcontainer > ul > li.active > a {	
	background-color:tranparent !important;
	font-weight:bold;
	color:#333 !important;
	border-style:inset !important; 
}
/*--------------------------------Top Bar at Tabbed Record Edit----------------*/
.editRecTop body {
	background-color: none !important;
}
.editRecTop {
	overflow-x: auto;
}
.tabRecTopBar {
	position: relative;
	/*display: inline-block;*/
	overflow-x:auto;
	overflow-y:hidden;
	border-style:solid; 
	border:none; 
	margin-top: 7px;
	width: 100%;
} 
.tabRecTopBar > ul {
	margin: 0;
	padding: 0px 7px 2px 0px;
	list-style-type: none;
}
.tabRecTopBar > ul >li {
	display:inline;
	margin-left:5px;
}
/*--------------------------------Tab Navigation-------------------------------*/
.tabMenuContainer {
	height: 45px;
    width: 100%;
    white-space: nowrap; 
    overflow: scroll; 
	overflow: -moz-scrollbars-none;
	-ms-overflow-style: none;
}
.tabMenuContainer::-webkit-scrollbar { 
	width: 0 !important;
	display: none;
}
.tabMenuContainer > ul {
	width: max-content;
}
.tabMenuContainer > ul > li > a {
	padding: .3rem .5rem;
	background-color: #337ab7;
	border-right: 1px solid #FFFFFF !important;
	color: #212121;
}
.tabMenuContainer > ul > li > a:hover {
	padding-bottom: .5rem;
}

.tabbedEditMenuTab a {
	color: black !important;
}

.tabbedEditMenuTab a.active {
	color: black !important;
	background-color: white !important; 
}

/*--------------------------------General List-Edit Work Area DIV--------------*/
.list-editWA li {
	list-style: none;
	
}
.list-results{
	overflow-y: auto;
	
}

.recaction-WA {
	position: relative;
}
.toolset-WA {
	
}
/*--------------------------------Recactions DIV, Toolset Classes--------------*/
.recactions {
	text-align: right;
    padding-bottom: 1px;
    padding-top: 1px;
    margin-bottom: 5px;
    position: absolute;
    top: 15px;
    right: 100px; 
    margin-right: 30px;
}
.uwatu .toolset {
	text-align: right; 
    position: absolute;
}
.toolset > a {
	font-size:1.5em;
	color:#5A738E;
	text-decoration:none;
	margin-right:5px;
	border-style:outset;
	border-width:1px 1px 1px 1px;
	border-color:#FFFDFD;
	padding:6px 4px 4px 4px;
	border-radius: 2px;
}
.toolset > a:hover {
	font-size:1.5em;
	text-decoration:none;
	margin-right:5px;
	border-style: inset !important;
	border-width:1px 1px 1px 1px;
	border-color:#FFFDFD;
	padding:6px 4px 4px 4px;
}
.toolset > button {
	font-size:1.8em;
	text-decoration:none;
	color: #333;
	margin-right:5px;
	border-style:outset;
	border-width:1px 1px 1px 1px;
	border-color:#FFFDFD;
	padding:4px 4px 0px 4px;
	background-color:inherit;
	border-radius: 2px;
}
.toolset > button:hover {
	font-size:1.8em;
	text-decoration:none;
	color: #999;
	margin-right:5px;
	border-style:outset;
	border-width:1px 1px 1px 1px;
	border-color:#FFFDFD;
	padding:4px 4px 0px 4px;
	background-color:#666;
}
.activeBtn {
	color: #333 !important;
	border-style: inset !important;
	border-width:1px 1px 1px 1px;
	border-color:#FFFDFD;
	padding:6px 4px 4px 4px;
}
.btn1 {
	background-color: #1ABB9C;
	color: #fff;
}
.btn-save{
	width: 100%;
	border-radius: 0px !important;
}
/*--------------------------------Filter DIV-----------------------------------*/
.filterForm {
	width:100%;
	margin-bottom:10px;
}
.filterForm > span {
	font-size:1.5em !important;
}
.filterForm .btn {
	font-size: 1.6em !important;
	line-height: 0 !important; 
	padding: 0px 1px 0px 1px !important;
	margin: 0px 1px 0px 1px !important;
	vertical-align: middle;  
}
.filterForm .btn:hover {
	font-size:1.6em !important;
	color: #999 !important;
	margin: 0px 1px 0px 2px !important;
	background-color:#666 !important;
}
.filterList {
	display: inline-flex;
    grid-template-columns: 10% 10%;
    padding: 0;
    vertical-align: middle;
	list-style-type: none;
}
.filterComponents {
	display: inline-flex;
    padding: 0;
    vertical-align: middle;
}
.filterList li {
	
}
.filterTools {
	margin-left: 4px;
}
.filterInactive {
	display: none;
}
.filterLabel {
	padding-left: 2px;
}
/*--------------------------------List Results Navigation DIV, Controller Btns-*/
.resultsNav {
	height:20px;
	width: auto;
	margin: auto;
}
.resultNavList {
	list-style: none;
	display: inline-flex; 
    padding-left: 0px;
    margin-right: 10px;
	align-items: center;
}
.resultsNavControler {
	background: transparent;
    color: #414141;
	padding: 0.3rem; 
    text-align: center; 
    vertical-align: middle;
	font-size: 0.9rem;
    line-height: 100%;
    margin: .15625rem 0;
}
.recNavCtrlr > input {
	text-decoration: none;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #E0E0E0;
    padding: 3px 2px 2px 2px;
    border-radius: 2px;
	height:28px;
	width:30px;
	vertical-align: bottom; 
}
.recNavCtrlr > label {
	text-decoration: none;
    margin-right: 5px;
    border-style: outset;
    border-width: 1px 1px 1px 1px;
    border-color: #FFFDFD;
	padding: 3px 4px 3px 4px;
    border-radius: 2px;
}
.recNavCtrlr > label:hover {
	text-decoration: none;
    margin-right: 5px;
    border-style: inset;
    border-width: 1px 1px 1px 1px;
    border-color: #FFFDFD;
	padding: 3px 4px 3px 4px;
    border-radius: 2px;
}
.recNavCtrlr .btn {
	padding: .1rem .35rem !important;
	font-size: 12px;
}
/*--------------------------------Navigation Buttons for Selected Recs---------*/
.selectedNav {
	max-height:70px; 
	margin: 1px;
}
.selectedNavList {
	list-style: none;
	display:flex; 
    padding-left: 0px;
    margin-right: 10px;
	align-items: center;
	background: white;
	margin-block-end: 0em; 
}
.selectedNavController {
	background: transparent;
    color: #414141;
    border-color: #2086bf;
	margin-right:2px;
    text-align: center;
    vertical-align: middle;
}
.selectedNavController a{
	background: #2121!important; 
    padding: 0.2rem 0.2rem; 
}
.sctdNavCtrlr > label {
	font-size:1em;
	text-decoration:none;
	color: #333;
	margin-right:5px;
	border-style:outset;
	border-width:1px 1px 1px 1px;
	border-color:#FFFDFD;
	padding:4px 4px 1px 4px;
	background-color:inherit;
	border-radius: 2px;
}
.sctdNavCtrlr > label:hover {
	font-size:1em;
	text-decoration:none;
	color: #333;
	margin-right:5px;
	border-style:inset;
	border-width:1px 1px 1px 1px;
	border-color:#FFFDFD;
	padding:4px 4px 1px 4px;
	background-color:inherit;
	border-radius: 2px;
}
/*--------------------------------List Results Actions DIV---------------------*/
.toolsetContainer {
    display: -webkit-inline-box;
    grid-template-columns: 10% 10%;
	padding: 0;
	vertical-align: middle; 
	margin-bottom: 5px;
	list-style: none;
	margin-block-end: 0em;
	width: 90%;
}
.toolsetContainer a {
	vertical-align: -webkit-baseline-middle;
	padding: .3rem; 
	/*color:#F20544;*/ 
}
.toolsetContainer a i{
	font-size: 14px !important;  
}
.toolsetContainer button {
	vertical-align: -webkit-baseline-middle;
	padding: .3rem; 
	color:#0d6efd !important;
}
.btmToolsetContainer {
    display: inline-flex;
    grid-template-columns: 10% 10%;
	margin-top: 10px; 
	margin-left: 10px;
	padding: 0;
	color: #F20544;
}
.brdCTitle {
	font-family: inherit;
    font-weight: 500;
	margin-top: 0px;
    margin-bottom: 0px; 
	color: black; 
	vertical-align: sub;
	text-decoration-line: underline;
    margin-right: 6px; 
}
#brdCrmbPullDwn {
	font-size: 16px;
	cursor: pointer;
}
.resultsActionsPullDwn {
	z-index: 100;
	position: fixed;
	background: #FFFFFF;
	padding: 5px 10px 5px 1px;
	border: solid 1px #ddd;
    -webkit-box-shadow: 3px 4px 5px 0px rgba(148,146,148,1);
    -moz-box-shadow: 3px 4px 5px 0px rgba(148,146,148,1);
    box-shadow: 3px 4px 5px 0px rgba(148,146,148,1);
}
.resultsActionsPullDwn_separator {
	margin: 1px !important;
}
.recactn-Btn {
	
}
.recactn-activeBtn {
	padding: 3px; 
	font-size: medium;
}
.resultsCntrlButton {
	background: #2086bf;
    color: #ffffff;
    border-color: #2086bf;
	margin-right:2px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
	padding: 1 2rem;
    height: 3.125rem;
    text-align: center;
    vertical-align: middle;
	font-size: 1.5rem;
    line-height: 100%;
    margin: .15625rem 0;
}
.resultsCntrlButton:hover {
	background-color:#4484CE;
}
.resultsButtons {
	list-style: none;
    display: inline-flex; 
    padding-left: 0px;
	border: 1px solid #ccc;
	padding: 3px;

}
.resultsButtons li {
	margin-right: 10px;
}
.filter-Btn{ 
    
}
.filter-Btn.active{
	color: white !important;
	background-color:#AC5E5F !important;
}

/*==============================================================================/
/*--------------------------------Multiple Records Interaction-----------------*/
/*==============================================================================/
/*--------------------------------Results DIV Headers,Rows and Cells-----------*/
.resultsHeaderList {
	list-style: none;
	display: flex; 
    padding-left: 0px;  
	margin-bottom: 0px;
	overflow: hidden;
}
.resultsheader {
	padding: 2px 0px; 
	border-bottom: 1px solid #4e75ad;
	border-bottom-width: 1px;
    font-size: .675rem;
    font-weight: 500;
    letter-spacing: .025em;
    padding-bottom: 1rem;
    padding-top: 1rem;
    text-transform: uppercase;
    vertical-align: middle;
    white-space: nowrap;
	background-color: #f5f9fc;
    color: #525f7f; 
}
.chkbxToggler{
	margin: 0px 10px;
}
.resultsheader a {
	font-family:Verdana;
	color: #525f7f;  
} 
.resultsCells {
	list-style: none;
	display: flex; 
    padding-left: 0px;
	max-height: 70px; 
    overflow: hidden; 
	margin-bottom: 0px;
	/*max-width: -webkit-fill-available;*/
	width: max-content; 
}
.resultsCells li {
	padding: 10px 2px; 
    overflow: hidden; 
	font-size: .8125rem; 
	display: inline-flex;
	margin-top: auto;
    margin-bottom: auto; 
}  
.resultsCells:hover { 
	background-color:#337ab7 !important; 
	color:#fff !important;
}
.multSlctdRecaction {
	font-weight:normal !important;
	font-size: 1rem;
}
.multSlctdRecactionBtn {
	font-weight:normal !important;
	color: black !important;
	font-size: 0.9rem; 
}
.multSlctdRecactionBtn:hover {
	background-color:#4484CE;
	color: white !important;
}
.infoCell {
	/*overflow-x: hidden;*/
}
/*--------------------------------Buttons to select single record--------------*/
.singleSlctBtn {	
	cursor:pointer !important;
	font-size: 1rem;
	
}
.singleSlctBtn i:hover { 
	color: white; 
}
/*--------------------------------Tools to toggle sub-rows --------------------*/
.sub-row-toggle {
	font-size: large !important;
}
/*--------------------------------level 2 iframe-------------------------------*/
.iFrameContainer {
	position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.iFrameContainer iframe {
	position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
.iframeWA {
	border: 0;
    top:0;
    left: 0;
    width: 100%;
    height: 800px;
}
/*==============================================================================/
/*--------------------------------Single record interaction--------------------*/
/*==============================================================================/
/*--------------------------------Container for Record Controls and Forms DIV--*/
.editRecArea {
	margin-top:1px;
}
.editRecWA {
	position: relative;
	overflow-y: auto;
	overflow-x: hidden;
}
.editRecArea .asstv-edi:hover {
	background-color:#f8f9fa!important; 
}
/*--------------------------------Top bar and Tab menu controls----------------*/
.editRecTop {
	
}
.editRecTop > table {
	width:100%;
	margin:0px;
	overflow-x:scroll;
}
.notification {
	position: absolute !important;
	width: 50% !important;
	right:20px;
	z-index: 10;
}
/*--------------------------------Record linkage area--------------------------*/
.recLinkage {
	
}
/*--------------------------------Actual form for insert/search/edit-----------*/

.lblSbmtFoo {	
}
.lblSbmtFoo:hover {
	border-color:#fff;
	background-color:rgb(42, 63, 84);
}
.editForm_top_notificiation{
	color: white;
	background-color: #372582
}
/*--------------------------------Buttons that Interact with Record Area-------*/
.recFormBtns {
    margin-bottom: 12px;
    float: left;
}
/*--------------------------------Status Bar Class-----------------------------*/
.statusBar {
font-size:12px;
color:#494747;
font-weight:bold;
}
/*--------------------------------Subtitle in Form Class-----------------------*/
.formSubTitler {
	font-size:16px;
	color:#ffffff;
	font-weight:bold;
	background-color:#999999;
	padding:6px;
}
/*--------------------------------Results list inside Form Class---------------*/
.inFormList {
font-size:16px;
background-color:#E7C1AB;
padding:6px;
}
/*--------------------------------CRUD Buttons---------------------------------*/
.crud_buttons {
	list-style-type: none;
	margin: 0;
  	padding: 0;
  	overflow: hidden;
}
/*--------------------------------Associated CRUD Buttons----------------------*/
.assoc_crud_buttons {
	list-style-type: none;
	margin: 0;
  	padding: 0;
  	overflow: hidden;
}
/*--------------------------------Edit Form DIVS-------------------------------*/
#recFormFields {
	width:100%;
	overflow-y: auto;
	overflow-x: hidden;
}
#tabbedRecFormFields {
	width:100%;
	overflow-y: auto;
	overflow-x:hidden;
}
#tabbedRecFormFields > div > table{
	overflow-x: auto;
}
#fname {
	padding-left: 10px !important;
} 
#level2editForm {
	width:100%;
	overflow-y: scroll;
	overflow-x: hidden;
}
.recTabTitles {
	color:#333;
	font-size:15px;
}
.recTabValues {
	color:#337ab7;
	font-size:15px;
}
/*--------------------------------formFields DIVS------------------------------*/
#formFields-insert {
	width:100%;
	height:580px;
	overflow-y: scroll;
	overflow-x: hidden;
}                                      
#formFields-edit {
	width:100%;
	height:520px;
	overflow-y: scroll;
	overflow-x: hidden;
}
/*.formFields-floater{
	position: absolute;
	top: 10px;
	right: 20%;
	z-index: 10;
}*/
/*--------------------------------ajax edit DIV-------------------------------*/
#ajaxEdit {
	margin-top: 10px;
}
.ajaxTitler {
	width:140px;
	font-weight: 800;
}
.ajax-inactive {
	/*display: none !important*/;
}
.ajax-resultsRows:hover .cellTitle:hover { 
	color: #fff !important;
}
.ajax-resultsRows {
	list-style: none;
    display:flex;
    padding-left: 0px; 
    /* max-height: 70px; */
    overflow: inherit;
    /* margin-bottom: 0px; */
    max-width: -webkit-fill-available;
    /* border-bottom: 2px solid #fff; */
    /* color: #000; */
    line-height: 1.8; 
    font-size: 14px;
}
.ajax-resultsRows li{
	color:#000;
}
.ajax-resultsRows:hover { 
	/*background-color:#337ab7 !important; */
	color:#fff !important;
}
.ajax-fieldsHolder:hover .cellTitle:hover { 
	color: #fff !important;
}
.ajax-fieldsHolder {
	list-style: none;
	display: flex; 
    padding-left: 0px;
	max-height: 70px; 
    overflow: inherit; 
	margin-bottom: 0px;
	max-width: -webkit-fill-available;
	color: #777;
}
.ajax-fieldsHolder li {
	padding: 0px 5px;
}

.ajax-fieldsHolder:hover { 
	/*background-color:#337ab7 !important; 
	color:#fff !important;*/
}
.ajax-btnControls {
	padding: 0px;
}
.ajax-btnControls .fa {
	color: #000;
    background: white;
    /*padding: 5px;*/
    border-radius: 10px;
	font-size: 20px;
}
.ajax-inputCell {
	padding: 0px !important;
	display: block;
}
.ajax-inputCell > input[type=text] { 
	color:#ccc;
	display: block;
    width: 100%;
    padding: .375rem .75rem;
    /*font-size: 1rem;*/
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
	margin-top: 5px;
}
.ajax-editCell {
	padding: 0px !important;
}
.ajax-editCell > input[type=text] { 
	color:#ccc;
	display: block;
    width: 100%;
    padding: .375rem .75rem;
    /*font-size: 1rem;*/
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}
.ajax-displayCell p {
	font-size: 15px;
}
.ajax-content {
	overflow-y: hidden;
}
.ajax-content p {
	font-size: 13px;
	line-height: 1.5; 
}
.ajax-content:hover {  
	color:#fff !important;
}
.ajax-content p:hover {  
	color:#fff !important;
}
.ajax-textHolder {
	width: 700px;
	height: 400px;
	overflow-y: auto;
}
.ajax-inputItem button {
	margin-bottom: 0px !important;
	margin-top: 0px !important; 
}
.ajax-adder {
	background: white;
	height: 32px; 
	cursor: pointer;
	border-radius: 15px;
	margin-top: 0px; 
	line-height: 2.2;
    padding: 0px 10px 0px 3px !important;
	background: #ddd; 
	width: max-content;
    
} 
.ajax-adder span {
	margin-right: 5px; 
	background: white;
	border-radius: 15px;
	padding: 7px; 
}
/*--------------------------------Modals---------------------------------------*/
.previewModal {
	
	
}
/*--------------------------------Dashboard------------------------------------*/
.dashboard-jsonList-holder {
	height: 500px; 
	overflow-y: auto
}

.dashboard-crud-modal .modal-dialog {
	max-width: 70%;
}
/*=========================-------Media Queries---------------=================*/
@media screen and (max-height: 1080px) {
    .list-editWA {
		/*height:95%;*/
	}
	#recFormFields, #tabbedRecFormFields{
		height:100%;
	}
	#tabbedRecFormFields #id{
		padding-left: 5px!important;
		
	}
	
}
	@media screen and (min-width: 1200px){
    .qr {
    /*margin-left: 20px;*/
	}
} 

@media screen and (max-height: 900px) {
    .list-editWA{
		/*height:95%;*/
	}
	#recFormFields, #tabbedRecFormFields{
		/*height:95%;*/
	}
}

@media screen and (max-height: 768px) {
    .list-editWA {
		/*height:95%;*/
	}
	#recFormFields, #tabbedRecFormFields{
		height:max-content; 
	}
}

@media screen and (max-height: 640px) {
    .list-editWA{
    	/*overflow-y: scroll; 
		height:max-content;  
		height: -webkit-fill-available;*/
	}
	#recFormFields, #tabbedRecFormFields{
		height:max-content;
	}
	.recactions{ 
		top: 15px !important; 
	}

}
/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	.recactions{
		margin-top: 15px !important; 
	}
	.rightBar span{
		display: none;
	}
	.scroll-xs{
		overflow: scroll;
	}
	.navbar-nav{
		flex-direction: unset !important;
	}
	.logo-card-player{
	width: 550px;
	height: auto !important;
}
	
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {

}  
/*----------------------carnet---------*/
.qr{
	/*width: 70px;
	border: 5px solid #fff;
    margin-top: -10px;*/
} 
 

.carnet{
	    /* margin-top: 15px; */
    /* max-width: 500px; 
    border: 5px solid #000;
    background: #fff;  
    /* color: #000; */ 
    /* position: absolute; */
    /* top: 15%; */
    /* -webkit-box-shadow: 0px 0px 8px 0px rgb(50 50 50 / 54%); */
    -moz-box-shadow: 0px 0px 8px 0px rgba(50, 50, 50, 0.54);
    /* box-shadow: 0px 0px 8px 0px rgb(50 50 50 / 54%); */
    overflow: hidden;
    /* max-height: 400px; 
	width: 500px;*/
	border-radius: 10px;
	max-width: 500px;  


}
.carnet h4{
	font-weight: bold !important;
	font-size: 20px !important;
    margin-top: 0 !important;
}


@media (max-width: 767px) {
    .carnet{
		/*width: 320px;*/
	 	 height: 450px;
    	max-height: 500px;
    }
	.outter {
    margin-top: 0px !important;
	}
	.outter .image-circle {

}
	.filterList {
    display: unset !important;
}
.carnet h5{
	font-weight: 600;
	margin-bottom: 0px; 
	margin-top: 5px;
	font-size: 1rem;
} 
.carnet .follow h6{  
	font-weight: 100;
	margin-bottom: 5px;
	margin-top: 3px; 
} 
.carnet .card-player{


} 
.modal-body .carnet .card-player{
    /*top: 10%; */

}
.logo-card-player{
	opacity: 0.3;
    margin-left: 5%;
    height: 400px;  
    margin-top: -10%;
} 

.outter .image-circle{
    border-radius: 50%;
    width: 150px;
    height: 150px;  
    border: 4px solid #FFF;
    margin-bottom: 5px; 
}

.follow{ 
    cursor:pointer; 
}

.follow:hover {
    cursor:pointer;
}

.login_control{
    background-color:#FFF;
    padding:10px;
    
}

/*.control {
    color:#000;
    margin:10px;
}

.label {
    color: #EB4F26;
    font-size: 18px;
    font-weight: 500;
}

.form-control{
    color: #000000 !important;
    font-size: 25px;
    border: none;
    padding: 25px;
    padding-left: 10px;
    border-bottom: 1px solid #CCC;
    margin-bottom: 5px;
    outline: none;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}

.form-control:focus{
    border-radius: 0px;
    border-bottom: 1px solid #FC563B;
    margin-bottom: 10px;
    outline: none;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
}*/
.btn-orange{
    background-color: #FC563B;
    border-radius: 0px;
    margin: 5px;
    padding: 5px;
    width: 150px;
    font-size: 20px;
    font-weight: inherit;
}

.btn-orange:hover {
    background-color: #F22F26;
    border-radius: 0px;
    margin: 5px;
    padding: 5px;
    width: 150px;
    font-size: 20px;
    font-weight: inherit;
    color:#FFF !important;
}

.line{
   /*border-bottom : 1px solid #dadada; */
}
 

.outter{
    /*padding: 0px;
    border: 1px solid rgba(255, 255, 255, 0.29);
    border-radius: 50%;
    width: 150px;
    height: 150px; */
}


/********************* tabla de posiciones**********************/
 
div.ranking-table-full {
  border: 1px solid #EEEEEE;
  background-color: #FFFFFF;
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
.ranking-table-full img {
    width: 40px;
    border: solid 2px #bba06b;
    border-radius: 50%;
    margin: 0 20px 0 20px;
  float: left;
}
.ranking-table-full p {
  font-size: 15px;
  font-weight:500;
    margin: 5px;
  text-align: left;
}

.divTable.ranking-table-full .divTableCell, .divTable.ranking-table-full .divTableHead {
  border: 0px solid #000000;
  padding: 25px 7px;
}
.divTable.ranking-table-full .divTableBody .divTableCell {
  font-size: 13px;
}
.divTable.ranking-table-full .divTableRow:nth-child(even) {
  background: #FBFBFB;
}
.divTable.ranking-table-full .divTableHeading {
  background: #FFFFFF;
  background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 66%, #FFFFFF 100%);
  background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 66%, #FFFFFF 100%);
  background: linear-gradient(to bottom, #ffffff 0%, #ffffff 66%, #FFFFFF 100%);
border-bottom: 3px solid #081E39;
}
.divTable.ranking-table-full .divTableHeading .divTableHead {
  font-size: 19px;
  font-weight: bold;
  color: #000000;
  text-align: center;
}
.ranking-table-full .tableFootStyle {
  font-size: 14px;
  font-weight: bold;
  color: #000000;
  border-top: 0px solid #000000;
}
.ranking-table-full .tableFootStyle {
  font-size: 14px;
}
/* DivTable.com */
.divTable{ display: table; }
.divTableRow { display: table-row; }
.divTableHeading { display: table-header-group;}
.divTableCell, .divTableHead { display: table-cell;}
.divTableHeading { display: table-header-group;}
.divTableFoot { display: table-footer-group;}
.divTableBody { display: table-row-group;}