/* Roadmap section styles */

/* Home */
.roadmap-home{
  margin: auto;
  width: 80%;
  padding: 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px ;
}
.roadmap-table{
  margin: 20px 0px;
  min-width: 745px;
  max-width: 1518px;
}
.roadmap-table thead tr th{
  text-align: left;
  font-size: 16px;
  padding: 10px 0px;
}
.roadmap-table thead tr th:first-child{
  text-align: left;
}
.roadmap-table thead tr th:last-child{
  text-align: right;
}
.roadmap-table tbody tr td{
  font-size: 16px;
  border-top: 1px solid #cccccc;
  padding: 10px 0px 10px 0px;
  text-align: left;
}

.roadmap-table tbody tr td:nth-child(3), .roadmap-table tbody tr td:nth-child(4){
  width: 67px;
}

.roadmap-table tbody tr td:first-child{
  text-align: left;
}
.roadmap-table tbody tr td:last-child{
  text-align: right;
}
.roadmap-table tbody tr td p{
  width: 250px;
  height: auto;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.roadmap-table tbody tr{
  text-transform: capitalize;
}
/* Create / edit */

#c-create-roadmap, #c-edit-roadmap{
  margin: auto;
  width: 100%;
  padding: 10px;
  text-align: center;
  height: calc(100vh - 70px);
  overflow: hidden;
}

#c-create-roadmap .c-roadmap-actions{
  display: flex;
  width: 600px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: auto;
}

#c-create-roadmap .c-roadmap-actions input{
  cursor: pointer;
  border: 1px solid #cccccc;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  width: 200px;
}

#c-edit-roadmap h4{
  margin-top: 16px;
} 

#c-edit-roadmap .roadmpa-data{
  display: flex;
  justify-content: flex-start;
  margin: 0px 7%;
  align-items: flex-start;
}

.roadmpa-data #breadcrumb-roadmaps, .roadmpa-data .c-roadmap-actions{
  width: 50%;
}

#c-edit-roadmap .c-roadmap-actions{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 20px 0px;
}

#c-edit-roadmap .c-roadmap-actions input{
  cursor: pointer;
  height: 40px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  width: 200px;
}

#c-edit-roadmap .btn-roadmap{
  font-size: 18px;
  letter-spacing: 2px;
}

#c-edit-roadmap-actions {
  display: flex;
  margin-top: 40px;
  padding-bottom: 10px;
  overflow: hidden;
  flex-wrap: wrap;
}

#c-edit-roadmap-actions .save-options{
  flex-basis: 100%;
  display: flex;
  justify-content: right;
  margin-top: 10px;
  margin: 0px 5%;
  width: 50%;
  align-items: center;
}

#c-edit-roadmap-actions .save-options button:first-child{
  margin-right: 15%;
}

#c-edit-roadmap-actions .save-options .delete-roadmap{
  position: absolute;
  right: 30px;
  margin: 5px;
}

#c-edit-roadmap-actions .save-options .delete-roadmap i{
  color: red;
  font-size: 20px;
}

#c-edit-roadmap-actions .save-options .delete-roadmap i:hover{
  cursor: pointer;
}

#c-edit-roadmap-actions .sortable-roadmap {
  flex: 1;
}

#c-edit-roadmap-actions .content-search {
  display: flex;
  flex-direction: column;
  flex: 1;
  border-right: 1px solid #d9d9d9;
  margin-right: 15px;
  overflow-y: auto;
  height: calc(100vh - 260px);
}

#c-edit-roadmap-actions .content-search .content-search-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#c-edit-roadmap-actions .content-search .content-search-header li{
  font-size: 18px;
  color: black;
  padding-bottom: 10px;
  width: 200px;
}

#c-edit-roadmap-actions .content-search .content-search-header li:hover{
  cursor: pointer;
}

#c-edit-roadmap-actions .content-search .content-search-header .nav-item.active{
  border-bottom: 2px solid #6279f8;
}

#c-edit-roadmap-actions .search-elements #exercises {
  flex: 1;
}

#c-edit-roadmap-actions .search-elements #books {
  flex: 1;
}

#c-edit-roadmap-actions .search-elements {
  padding: 0px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overscroll-behavior: none;
}

#c-edit-roadmap-actions .search-elements input{
  width: 200px;
}

#c-edit-roadmap-actions  input, #c-edit-roadmap-actions select{
  height: 40px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  width: 195px;
}

#c-edit-roadmap-actions input{
  padding-right: 25px;
}

#c-edit-roadmap-actions select{
  width: 123px;
}

#c-edit-roadmap-actions .search-bar button{
  font-size: 18px;
}

#c-edit-roadmap-actions .book-search .filter{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

#c-edit-roadmap-actions .exercise-search, #c-edit-roadmap-actions .book-search {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
  flex-direction: row;
  position: sticky;
  padding: 20px;
  background-color: #e7ecef;
  z-index: 2;
}

#c-edit-roadmap-actions .exercise-search .filter{
  display: flex;
}

#c-edit-roadmap-actions .exercise-search .filter .exam-filter, #c-edit-roadmap-actions .exercise-search .filter .exam-filter{
  display: flex;
  width: 250px;
  flex-direction: column;
}

#c-edit-roadmap-actions .exam-filter, #c-edit-roadmap-actions .section-filter{
  text-align: left;
  display: flex;
  flex-direction: column;
}

#c-edit-roadmap-actions .search-exercise, #c-edit-roadmap-actions .search-books{
  display: flex;
}

#c-edit-roadmap-actions .search-exercise span.clear, #c-edit-roadmap-actions .search-books span.clear{
  position: relative;
  right: 31px;
  top: 3px;
  z-index: 9;
  cursor: pointer;
  pointer-events: auto;
}

#c-edit-roadmap-actions .search-exercise span.clear:hover, #c-edit-roadmap-actions .search-books span.clear:hover{
  cursor: pointer;
}

#c-edit-roadmap-actions .exercise-table, .book-table{
  margin: 10px 40px 30px 40px;
}

/* #c-edit-roadmap-actions .exercise-table td:first-child, #c-edit-roadmap-actions .exercise-table td:nth-child(3){
  width: 20%;
}

#c-edit-roadmap-actions .exercise-table td:nth-child(2){
  width: 30%;
} */

#c-edit-roadmap-actions .exercise-table td:nth-child(4), #c-edit-roadmap-actions .exercise-table td:nth-child(5){
  width: 10%;
}

#c-edit-roadmap-actions .exercise-table td.identification p{
  margin-right: 10px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 150px;
}

#c-edit-roadmap-actions .exercise-table, #c-edit-roadmap-actions .book-table, #c-edit-roadmap-actions .roadmap-elements-table {
  min-width: 500px;
  max-width: 800px;
}

#c-edit-roadmap-actions .exercise-table thead th:nth-child(2), #c-edit-roadmap-actions .book-table thead th:nth-child(2){
  padding-left: 10px;
}

#c-edit-roadmap-actions .exercise-table thead th, #c-edit-roadmap-actions .book-table thead th{
  padding-bottom: 10px;
  color: #202020b3;
}

#c-edit-roadmap-actions .exercise-table thead th:first-child, #c-edit-roadmap-actions .book-table thead th:first-child{
  padding-left: 10px;
}

#c-edit-roadmap-actions .exercise-table .exercise.added, #c-edit-roadmap-actions .book-table .book.added{
  background-color: #5cb85c42;
}

#c-edit-roadmap-actions .exercise-table .exercise p, #c-edit-roadmap-actions .book-table .book p{
  margin-left: 10px;
  margin-right: 10px;
}

#c-edit-roadmap-actions .roadmap-elements-table {
  margin-top: 20px;
}

#c-edit-roadmap-actions .sortable-roadmap{
  padding: 0px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;
  padding: 0px 20px;
  overflow-y: auto;
  overscroll-behavior: none;
}

#c-edit-roadmap-actions .sortable-roadmap .roadmap-element .day-limit span.day-tag{
  background-color: #ffc107;
  color: white;
  padding: 3px 8px;
  border-radius: 10%;
  font-weight: 900;
  white-space: nowrap;
}

#c-edit-roadmap-actions .sortable-roadmap .roadmap-element .exercise-icon i{
  font-size: 30px;
  color: red;
}

#c-edit-roadmap-actions .sortable-roadmap .roadmap-element.last{
  border-bottom: 2px solid #ffc107;
}

#c-edit-roadmap-actions .sortable-roadmap h3{
  margin-top: 15px;
}

#c-edit-roadmap-actions .sortable-roadmap button#save-roadmap-order, #c-edit-roadmap-actions .content-search button#load-more{
  margin-top: auto;
}

.roadmap-elements-table{
  min-width: 500px;
  max-width: 630px;
}

.roadmap-elements-table tr td{
  line-height: 40px !important;
}

.roadmap-elements-table tr:hover{
  cursor: pointer;
}

.roadmap-elements-table th{
  color: #202020b3;
}

.roadmap-elements-table th:first-child i{
  margin-left: -4px;
}

.roadmap-elements-table th:nth-child(2){

}

.roadmap-elements-table th:nth-child(3){
  text-align: center;
}

.roadmap-elements-table th:last-child{
  text-align: center;
}

.roadmap-elements-table th:last-child i{
  margin-left: -15px;
}

.roadmap-elements-table td:last-child button{
  padding: 6px 8px !important;
}

.roadmap-elements-table td:nth-child(1){
  text-align: left;
  width: 70px;
}

.roadmap-elements-table td.exercise-thumbnail > img{
  width: 70px;
}

.roadmap-elements-table td:last-child{
  text-align: center;
}

.roadmap-elements-table td:last-child i{
  color: red;
  padding-right: 16px
}

.roadmap-elements-table td:nth-child(4){
  text-align: left;
}

.roadmap-elements-table tr.moved {
  background-color: #ffeb3b8c;
}

.roadmap-elements-table tr.new {
  background-color: #5cb85c42;
}

#c-edit-roadmap-actions .exercise-table thead tr, .book-table thead tr, #c-edit-roadmap-actions .roadmap-elements-table thead tr{
  text-align: left;
  font-size: 16px;
  padding: 10px 0px;
  border-bottom: 1px solid #cccccc;
}

#c-edit-roadmap-actions .exercise-table td, #c-edit-roadmap-actions .book-table td, #c-edit-roadmap-actions .roadmap-elements-table thead tr{
  text-align: left;
  border-bottom: 1px solid #cccccc;
  padding-top: 10px;
}


#c-edit-roadmap-actions .exercise-table th:last-child, #c-edit-roadmap-actions .book-table th:last-child{
  text-align: center;
}

#c-edit-roadmap-actions .exercise-table td:last-child, #c-edit-roadmap-actions .book-table td:last-child{
  text-align: center;
  width: 75px;
}

#c-edit-roadmap-actions .book-table th:nth-child(3), #c-edit-roadmap-actions .book-table td:nth-child(3), #c-edit-roadmap-actions .exercise-table th:nth-child(4), #c-edit-roadmap-actions .exercise-table td:nth-child(4){
  text-align: center;
  width: 62px;
}

#c-edit-roadmap-actions .exercise-table td a, #c-edit-roadmap-actions .book-table td a{
  margin-bottom: 10px;
}

/* Breadcrumb */

#breadcrumb-roadmaps ul{
  padding: 10px 20px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 10px;
}

#breadcrumb-roadmaps ul li{
  display: inline-block;
  font-size: 18px;
}

#breadcrumb-roadmaps ul li::after{
  content: ' > ';
}

#breadcrumb-roadmaps ul li:last-child::after{
  content: '';
}

#breadcrumb-roadmaps ul li:last-child{
  font-weight: 500;
}

/* Tag elements */

.sortable-roadmap .tag {
  display: inline;
  padding: .2em .6em .3em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 1.25em;
  text-transform: capitalize;
  font-weight: 400;
}
.sortable-roadmap .tag-success{
  background-color: #5cb85c;
}
.sortable-roadmap .tag-info{
  background-color: #5bc0de;
}

#c-edit-roadmap-actions .content-search, #c-edit-roadmap-actions .sortable-roadmap{
  height: calc(100vh - 260px);
}

/* Delete Swal */

[data-custom-class="delete-roadmap-swal"] .sa-input-error{
  top: 23px;
  right: 12px;
}

/* Responsive */

@media screen and (max-width: 1024px) {
  #c-edit-roadmap {
    height: 100%;
  }
  #c-edit-roadmap-actions{
    flex-direction: column;
  }
  #c-edit-roadmap-actions .search-elements{
    height: 300px;
  }
}