/* General */
button { cursor:pointer; }
.searchableHidden { display: none; }
.flex-break { flex-basis: 100%; height: 0; }
.searchContainer .searchInput { font-size: 16px; }

/* Menu items */
.menuItem { position:absolute; height:100%; width:100%; display:flex; align-items:center;  }
.menuItemLeft { left:0; text-align: left; justify-content: left; }
.menuItemMiddle { left:0; text-align: center; justify-content: center; }
.menuItemRight { right:0; text-align:right; justify-content: right; }

/* Message section */
#messageSection { opacity:0; }
#messageSection.active { transition:opacity ease 1s; opacity:100; }
.saveInfo { color: white!important; }
.saveError { background-color: red !important; color:white !important; }
.saveSuccess { background-color: limegreen !important; color:black !important; }

/* Manage tabs */
#manageTabs { display:flex; flex-wrap: wrap; flex-direction: row; justify-content: left; gap:10px; align-items:center; align-content:center;  }
.cfmTab { border:1px solid white; padding:0.5%; margin-right:0.5%; border-radius:20px;}
.cfmTab:hover { background-color: white; color:black; }
.cfmTab.active { background-color: white; color:black; }
.cfmTab.selected { background-color: white; color:black; }

/* Entity List Section */
.searchBarSection { background-color: white; border-radius: 22px;}
.searchBarInput:focus { border: none; outline:none; }

/* Entity Cards */
.entityCard { border: 1px solid white; padding: 1rem; box-shadow: #D4D1CD; transition: all ease 0.3s; }
.entityCard:hover{ transform: scale(1.05); }
.entityItem.selected { background-color:blue !important; color:white !important; padding:1%;}

.deleteContentButton { margin-top:5%; }

/* Summary button */
#eventSummaryButton { background-color:#448ef6; color:white; border:none; }

/* Tables & Forms */
.cfmTable { width:100%; table-layout: auto; border-spacing: 0px; }
.cfmTable tbody tr,td { border-bottom: 1px solid white; border-top: 1px solid white; padding-top:0.5%; padding-bottom:1%; }
.cfmTable tbody tr { transition: all ease 0.3s; }
.cfmTable tbody tr:hover { transform: scale(1.01); }
.cfmTable td,th { vertical-align: top; }
.formSubsection { margin-bottom: 2%; }

/* Event Page */
#toggleConsoleLog { position:absolute; bottom:0; right:1px; }
#consoleBox { position:fixed; bottom:0; left:0; width:100%; height:300px; border:1px solid white; background-color: black; opacity:100; }
#consoleBoxLog { height:inherit; overflow-y:scroll; overflow-wrap: break-word; }

/* Response tabs */
#eventSummaryLabels { display:flex; flex-wrap: wrap; flex-direction: row; justify-content: left; gap:10px; align-items:center; align-content:center;  }
.event-response-tab { border:1px solid white; padding:0.5%; margin-right:0.5%; border-radius:20px;}
.event-response-tab:hover { background-color: white; color:black; }
.event-response-tab.active { background-color: white; color:black; }

/* List of options to pick from */
.entityOption.selected { background-color:blue !important; color:white !important; padding:2%; }

.objectSyncMessage { min-width: 90%; }

/* The Tab Sections */
.tab-section-subsections { display:flex; flex-wrap:wrap; flex-direction:row; justify-content: left; gap:10px; }
.listofContentSection { min-width:100%;  margin-left:0.5%; }
/* .listOfContent { max-height: 500px; border-top: 2px dotted white; border-bottom:2px dotted white; overflow:scroll; margin-top:1%; display:none; } */
.listofContentSection .searchContainer { display:none; background-color: white; border-radius: 50px; }
.listofContentSection .searchContainer input:focus { outline:none; box-shadow: none; }
.listofContentSection .searchContainer .searchClearIcon { color:red;}
.searchContainer .searchBarSection { padding: 2%; }

.contentDetailsSection { min-width:100%; }
.contentDetailsSection a:link{ color: #448ef6; }
.contentDetailsSection a:visited{ color: #448ef6; }

/* Forms */
.form-section { display:flex; flex-wrap:wrap; flex-direction:row; justify-content: left; gap:10px; }
.form-section .form-field-section-small { min-width:30%; max-width:40%; }
.form-section .form-field-section-medium { min-width:45%; max-width:60%; }
.form-section .form-field-section-large { min-width:100%; }
.form-section .form-field { width:90%; }

/* Modals  */
.modalContainer { position:fixed; top:0; right:0; bottom:0; left:0; z-index: 999; opacity:50; visibility: hidden; transition: all 0.3s; background-color: rgba(211, 211, 211, 0.5); }
.modalContainer.open { opacity:100; visibility: visible;}
.modalContent { width: 75%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2em; background-color: black; }
.modalCloser { text-align:left; }

/* File Edit */
.fileEditButtons { position: relative; }
.fileNavButton { position:relative; }
.fileNavButton .fixedRight { position:fixed; right:15px; }

/* File Rows in the table */
.fileFormRow { border-bottom:1px solid white; padding-bottom:1%; }
.fileFormColumn { display:inline-block; margin-right:1%; }
.fileFormColumn input,select { width: 90%; }
.fileFormColumn.full { width:95%; }
.fileFormColumn.half { width:45%; }
.fileFormColumn.third { width: 32%; }
.fileFormColumn.quarter { width: 25%; }

.tableCellOnMobile {  display:none; width:0; height:0; opacity:0; visibility: collapse; }

/* Event responses */
#responseDetailsModal .responseLabel { font-weight: bolder; }
#responseDetailsModal .responseText { padding-left:5%; }
#eventResponsesSection .searchBarSection { background-color: white; border-radius: 77px; width: 25%; padding: 0.5; padding: 0.5%; margin-bottom: 1%; }
#eventResponsesSection input:focus { outline: none; box-shadow:none; }
#eventResponsesSection .searchClearIcon { color: red; }

/* Table Header */
tr.showBottomBorder td,th { border-bottom: 2px solid white; }
#bulkRow td { padding:0.5% 0%; }
#numberOfFiles { color:orange; cursor:pointer; }
#adventureFilterIcon.filtered { color:blue !important; }
#adventureFilterIcon.active { color:orange !important; }
#clearFilterIcon { color:red; font-size:70%; margin-left:2%; }
#adventureFilterDropdown { overflow-y:hidden; width: 90%; margin: auto; position: absolute; height:0px; overflow-y:hidden; }
#adventureFilterDropdown.active { background-color: white; height:200px; overflow-y:scroll; transition: height ease 0.5s; }
#adventureFilterDropdown .adventureFilter { opacity: 0; cursor:pointer; color:black; margin:0; padding:3%;  }
#adventureFilterDropdown .adventureFilter.selected { background-color:orange; color:black; }
#adventureFilterDropdown.active .adventureFilter { opacity:100; transition: opacity ease 0.3s; }

/* Table rows */
.openLinkIcon { margin-left: 2%; cursor:pointer; }
.openLinkIcon.true { color:blue; }
.openLinkIcon.false { color:gray; }
/* The save icons */
tr.fileRow .saveIcon { color:green; }
tr.fileRow .successIcon { color:green; }
tr.fileRow .failIcon { color:red; }
tr.fileRow .savingIcon { color:green; }
tr.fileRow.selected { background-color:#D4D1CD !important; color:#0f0f0f !important; }
tr.fileRow:hover td { border-top:2px dashed #D4D1CD !important; border-bottom:2px dashed #D4D1CD !important; cursor:pointer;  }
/* Icons on the save row */
.fieldIcon { margin-left:2%; cursor:pointer; }
.fieldIcon.cancelIcon { color: red !important; }
.fieldToSave2.large { width:60% !important; }
.fieldToSave2.medium { width:50% !important; }
.fieldToSave2.small { width:40% !important; }
.fieldToSave2.xsmall { width:30% !important; }
.fieldToSave2.tiny { width:20% !important; }
.fieldToSave2.view { border:none; background-color:transparent; color:white !important;  }
tr.fileRow.selected .fieldToSave2.view { background-color:#D4D1CD !important; color:#0f0f0f !important; }

#userDetailsForm input { background-color: gray; color:white; }
    
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .entityCard { padding: 1rem; }
    .formSubsection { margin-bottom: 0.5%; }

    .listToggler { display:none; }
    .listofContentSection { min-width:15%; }
    .listOfContent { display:block; }
    .listofContentSection  .searchContainer { display: block; width:50%; margin-bottom:2%; }
    .contentDetailsSection { min-width:40%; max-width:45%; }
    .listToggleIcon { display:none !important; }

    /* Form fields */    
    .form-section .form-field-section-small { min-width:10%; max-width:40%; }
    .form-section .form-field-section-medium { min-width:30%; max-width:50%; }
    .form-section .form-field-section-large { min-width:80%; }

    /* Modals */
    .modalContent { width: 25%; } 

}