/**
Copyright 2023

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/

.tab {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  border-bottom: 1px solid rgb(60, 74, 89);
  background-color: #5b6977;
}

.tab button {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  flex: 1; 
  padding: 5px; 
  margin: 0px; 
  transition: 0.3s;
  font-size: 17px;
  color: #EBEBEB;
  border-right: 1px solid rgba(60, 74, 89, 0.5);
}

.tab button:hover {
  background-color: #FFFFFF13;
}

.tab button.active {
  background-color: rgba(223, 105, 26, 0.8);
}

.tab button:disabled {
  cursor: default;
  background-color: rgba(60, 74, 89, 0.5);
  color : rgba(255, 255, 255, 0.3);
}

.tabcontent {
  display: none;
  padding: 0px;
  -webkit-animation: fadeEffect 1s;
  animation: fadeEffect 1s;
}


.loading-circle {
  width: 75px;
  height: 75px;
  border: 5px solid #EBEBEB;
  border-top: 5px solid #DF691A;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: none; 
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
  margin: 0px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #DF691A;
}

input:focus + .slider {
  box-shadow: 0 0 1px #DF691A;
}

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

/* Rounded sliders */
.slider.round {
  border-radius: 24px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Disabled state */
input:disabled + .slider {
  cursor: default;
  background-color: rgba(255, 255, 255, 0.2)
}

input:checked:disabled + .slider {
  background-color: rgba(223, 105, 26, 0.8);
}

tbody.permissions:hover td[rowspan],
tr:hover td {
  background: rgba(255, 255, 255, 0.2);
}

tbody.timestamps:hover td[rowspan],
tr:hover td {
  background: rgba(255, 255, 255, 0.2);
}

.badge {
  background-color: #DF691A;
  color: rgba(255,255,255,0.75);
  border-radius: 50%;
  padding: 2px 4px;
}

.pagination li {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px solid #EBEBEB;
  width: 22px;
  height: 22px;
  margin: 0px 1px;
  color: #EBEBEB;
  text-decoration: none;
  cursor: pointer;
  line-height: 22px; 
}

.pagination li.active {
  background-color: #DF691A;
  border: 1px solid #DF691A;
  color : white;
}

.pagination li.disabled {
  border: 1px solid #EBEBEB;
  cursor: default;
}

.pagination li.disabled:hover {
  background-color: transparent;
  border: 1px solid #EBEBEB;
  color: #EBEBEB;
}

.pagination li:hover {
  background-color: #DF691A;
  border: 1px solid #DF691A;
  color: white ;
}

.folderbtn {
  display: inline-block;
  padding: 2px 8px;
  background-color: #FFFFFF13;
  cursor: pointer;
  border-radius: 5px;
}

.folderbtn.selected {
  background-color: #DF691A;
}

.folderbtn.selected:hover {
  background-color: #DF691A;
}

.folderbtn:hover {
  background-color: rgba(223, 105, 26, 0.5);
}

.slash {
  margin: 0 4px;
  user-select: none;
}