#setting_branch {
  // * ----------------
  // มีบางส่วนใช้ร่วมกับ หน้า _setting.scss
  // ----------------
  .branch{
  	width: 100%;
  	max-width: 100%;
  	min-width: 100%;
  	margin: 0;
    border-collapse: collapse;

    td{
      border-bottom: 1px solid #ddd;
      padding: 15px 10px;
      &:first-child{
        text-align: center;
        width: 3%;
        cursor: move !important;
      }
      // a{
      //   color: #004f9c;
      //   &:hover{
      //     text-decoration: underline;
      //   }
      // }
    }
    tr{
      &:hover{
        cursor: pointer;
        background-color: #dfeaf3;
      }
    }
    thead{
      font-weight: 500;
      // background-color: #ebebeb;
      font-size: 15px;
      td{
        padding: 10px;
        font-size: 15px;
        &:first-child{
          cursor: unset;
        }
        &:focus{
          outline: unset;
        }
      }
    }
  }
  .dataTables_filter{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin: 15px 0;
    label{
      font-weight: 300;
      input{
        border: 1px solid #ddd;
        padding: 5px;
        border-radius: 5px;
      }
    }
  }
  .dataTables_wrapper{
  	.bottom{
      padding: 20px 0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
    }
    .dataTables_length{
      label{
        font-weight: 300;
      }
    }
    .paginate_button{
      text-decoration: underline !important;
      font-weight: 300;
      border: 0 !important;
      &.disabled{
        color: #bfbfbf !important;
      }
      &:hover{
        background: transparent;
        color: #000 !important;
      }
      &.disabled:hover{
        color: #bfbfbf !important;
      }
    }
    span .paginate_button{
      text-decoration: none !important;
      &.current{
        font-weight: 700;
        background: #d9d9d9;
        line-height: 1em;
        padding: 7px 12px;
      }
    }
  }

  .disabled {
    opacity: 0.5;
    background: #eee;
  }

  @media only screen and (max-width: 992px) {
  	.addBranch{
	    margin-bottom: 20px;
	    width: 100%;
	    padding: 10px;
  	}
  	.branch{
  		td{
  			font-size: 13px;
	      &:first-child{
	      	padding: 5px;
	      }
        &:nth-child(3){
          display: none;
        }
	    	&:last-child{
	    		div{flex-wrap: wrap;}
	    		.branch_btn{
	    			margin: 5px;
    				padding: 5px;
	    		}
	    	}
	    }
  	}
  	.dataTables_filter{

  	}
  }
}

#modal_branch{
  .modal-header{
    font-weight: 700;
    font-size: 22px;
  }
  .modal-body{
    padding: 15px 40px;
  }
  .modal-footer{
    text-align: left;
  }
  .branch{
    &__line{
      display: flex;
      align-items: center;
      margin-bottom: 15px;
      position: relative;
      width: fit-content;

      &--title{
        width: 120px;
        min-width: 80px;
        font-weight: 500;
        font-size: 16px;
      }
      input{
        border: 1px solid #ddd;
        padding: 10px 20px;
        border-radius: 3px;
        font-size: 16px;
      }
    }

    &__map{
      position: relative;
      width: 100%;
      height: 300px;
    }
  }
  .branch-delete{
    text-decoration: underline;
    font-size: 14px;
    color: red;
    cursor: pointer;
  }
  .branch-close{
    float: right;
    margin-right: 10px;
  }
  .branch-submit{
    background-color: #004f9c;
    color: #fff;
    float: right;
  }
  #map_editor{
    width: 100%;
    height: 100%;
  }
  #pac-input{
    display: block;
    border: 1px solid #ddd;
    padding: 5px 20px;
    border-radius: 3px;
    font-size: 16px;
    width: 100%;
    margin: 5px 0 10px 0;
  }
  .centerMarker {
    position: absolute;
    background: url(https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi2.png) no-repeat;
    top: 50%;
    left: 50%;
    z-index: 1;
    margin-left: -14px;
    margin-top: -23px;
    height: 43px;
    width: 27px;
    cursor: pointer;
  }
  @media only screen and (max-width: 992px) {
    .modal-body{
      padding: 15px;
    }
    .branch{
      &__line{
        flex-wrap: wrap;
        &--title{
          width: 100%;
          margin-bottom: 10px;
        }
        &--img{
          width: 200px;
          height: 200px;
        }
      }
    }
  }
}

.pac-container {
  z-index: 100000;
}